/* Video background remains inside the existing full-width BillPy scene. */
.hero-video-media{position:absolute;inset:0;overflow:hidden;background:#071115}
.hero-video-media>img,.hero-video-media>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:63% center}
.hero-video-media>video{opacity:0;transition:opacity .6s ease}
.hero-video-media.video-ready>video{opacity:1}
.scene-selector button[aria-pressed=true]:after{animation-duration:var(--scene-duration,6s)}
@media(max-width:680px){
 .hero-video-media>img,.hero-video-media>video{inset:76px auto auto -23%;width:146%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center}
}
@media(prefers-reduced-motion:reduce){.hero-video-media>video{transition:none}}

/* BillPy: leave the film visible; protect copy with a directional scrim. */
.hero-fullbleed .showcase-deck:after{transition:opacity 1.2s ease}
.hero-fullbleed .showcase-deck:has(#escena-billpy.is-active):after{opacity:0}
.hero-video-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#071115b3 0%,#07111580 33%,#07111526 57%,transparent 74%),linear-gradient(180deg,#07111540,transparent 22%),linear-gradient(0deg,#07111566,transparent 25%)}
.hero-fullbleed .hero h1{text-shadow:0 2px 5px #0009,0 8px 30px #0005}
.hero-fullbleed .hero .lead,.hero-fullbleed .hero .eyebrow,.hero-fullbleed .hero .text-link{text-shadow:0 1px 3px #000c,0 3px 12px #0008}
@media(max-width:680px){
 .hero-video-media>img,.hero-video-media>video{mask-image:linear-gradient(180deg,#000 0%,#000 77%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 77%,transparent 100%)}
 .hero-video-media:after{background:linear-gradient(0deg,#071115 0%,#071115 44%,#071115b8 50%,transparent 68%,transparent 91%,#07111526 100%)}
}
@media(prefers-reduced-motion:reduce){.hero-fullbleed .showcase-deck:after{transition:none}}

/* Less magnification, same lighting gradients and reading protection. */
@media(min-width:1001px){
 .hero-fullbleed{min-height:700px;height:92svh;max-height:900px;max-width:1920px;margin-inline:auto}
 .hero-fullbleed .hero{padding-block:110px 120px}
 .hero-fullbleed .hero-copy{margin-top:20px}
}
@media(max-width:680px){
 .hero-video-media>img,.hero-video-media>video{left:-16%;width:132%}
}

/* Desktop/tablet: 25% smaller film, anchored right; preserve full hero and lighting. */
@media(min-width:681px){
 .hero-video-media>img,.hero-video-media>video{
  transform:scale(.75);transform-origin:right center;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000),linear-gradient(180deg,transparent,#000 9%,#000 90%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000),linear-gradient(180deg,transparent,#000 9%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
 }
}

/* Compact desktop composition: keep the product rail within ordinary first screens. */
@media(min-width:1001px){
 .hero-fullbleed{height:calc(100svh - 120px);min-height:560px;max-height:840px}
 .hero-fullbleed .hero{padding-block:105px 100px}
 .hero-fullbleed .hero-copy{margin-top:0}
 .hero-video-media>img,.hero-video-media>video{transform:scale(.70)}
 .hero-fullbleed .showcase-controls{bottom:20px}
 .hero-fullbleed .showcase-caption{bottom:78px}
}
@media(min-width:1001px) and (max-height:760px){
 .hero-fullbleed .hero h1{font-size:clamp(56px,6vw,90px)}
 .hero-fullbleed .hero .lead{font-size:16px;line-height:1.55;margin-top:22px}
 .hero-fullbleed .hero .actions{margin-top:24px}
}

/* The masked movie revealed the still image underneath: use a single image source once playing. */
.hero-video-media.video-ready>.hero-video-poster{visibility:hidden}
/* Reserve the rail while preventing a sliver of the next light section on desktop. */
@media(min-width:1001px){
 .hero-fullbleed{height:calc(100svh - 100px);max-height:none}
}

/* Web film: same contrast treatment, independent framing for the two devices. */
.hero-fullbleed .showcase-deck:has(#escena-web.is-active):after{opacity:0}
.hero-web-media{background:#071514}
@media(min-width:681px){
 .hero-web-media>img,.hero-web-media>video{object-fit:contain;object-position:right center;transform:scale(.82);transform-origin:right center}
}
@media(max-width:680px){
 .hero-web-media>img,.hero-web-media>video{left:-40%;width:140%;top:80px;object-fit:contain;transform:none}
}

/* Shared gentle crossfade; retain the completed BillPy frame while LPChat enters. */
.hero-fullbleed .showcase-slide{transition:opacity 1.4s cubic-bezier(.4,0,.2,1),visibility 0s linear 1.4s}
.hero-fullbleed .showcase-slide.is-active{transition-delay:0s}
@media(prefers-reduced-motion:reduce){.hero-fullbleed .showcase-slide{transition:none}}