/* 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:#070D1F 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,.52) 12%,rgba(10,10,10,.34) 55%,rgba(10,10,10,.14) 100%)}
.hs-shade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,rgba(10,10,10,.4))}
.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:#EFEAE0;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:#FF8A45;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}}

[data-scene] h1,[data-scenes] h1,[data-scene] .deck,[data-scenes] .deck,[data-scene] .kicker,[data-scenes] .kicker,[data-scene] .hero-price,[data-scenes] .hero-price{text-shadow:0 2px 14px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.6)}
[data-scene] h1,[data-scenes] h1{text-wrap:balance}
@media(max-width:820px){.hs-shade{background:linear-gradient(180deg,rgba(10,10,10,.18) 0%,rgba(10,10,10,.30) 45%,rgba(10,10,10,.68) 100%)}}
[data-scene] .eyebrow-row .kicker,[data-scenes] .eyebrow-row .kicker{display:inline-block;background:rgba(10,10,10,.66);padding:7px 11px;border-radius:6px;text-shadow:none;color:#FF8A45}