/* Cinematic scene backgrounds for hero sections. Markup: <section class="cover" data-scene="crawlspace"> or data-scenes="a,b,c" (reel). */
[data-scene],[data-scenes]{position:relative;overflow:hidden;isolation:isolate}
[data-scene]>.wrap,[data-scenes]>.wrap{position:relative;z-index:3}
.hs-layer{position:absolute;inset:0;z-index:0;background:#0a0a0a center/cover no-repeat}
.hs-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hs-layer video.on{opacity:1}
.hs-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(10,10,10,.78) 12%,rgba(10,10,10,.58) 55%,rgba(10,10,10,.42) 100%)}
.hs-shade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,rgba(10,10,10,.55))}
.hs-hud{position:absolute;z-index:4;left:0;right:0;bottom:12px;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}
.hs-chip{font:600 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f1e7d0;background:rgba(10,10,10,.55);border:1px solid rgba(241,231,208,.25);padding:7px 11px;border-radius:99px;backdrop-filter:blur(4px);transition:opacity .4s}
.hs-dots{display:flex;gap:7px;pointer-events:auto}
.hs-dots button{width:22px;height:4px;border:0;padding:0;border-radius:3px;background:rgba(255,255,255,.3);cursor:pointer;position:relative;overflow:hidden}
.hs-dots button.on{background:rgba(255,255,255,.35)}
.hs-dots button.on::after{content:"";position:absolute;inset:0;background:#e8c46a;transform-origin:left;animation:hsfill var(--hs-dur,7s) linear forwards}
@keyframes hsfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:600px){.hs-chip{display:none}.hs-dots button{width:16px}}
@media(prefers-reduced-motion:reduce){.hs-layer video{display:none}.hs-dots button.on::after{animation:none;transform:none}}