/* Photographic campaign layer: a restrained moving backdrop behind the real hero UI. */
.cinematic-hero--campaign {background:#13090f;color:#fff;--campaign-pan-x:0px;--campaign-pan-y:0px}
.hero-campaign {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:#13090f}
.hero-campaign__frame {position:absolute;inset:0;opacity:0;transition:opacity 1600ms ease;will-change:opacity}
.hero-campaign__frame.is-current {opacity:1}
.hero-campaign__image {width:100%;height:100%;object-fit:cover;object-position:75% 54%;transform:scale(1);transform-origin:top center;filter:saturate(.88);display:block}
.hero-campaign__frame--2 .hero-campaign__image {object-position:70% 44%}
.hero-campaign__frame--3 .hero-campaign__image {object-position:72% 35%}
.hero-campaign[data-campaign-animated] .hero-campaign__image {animation:campaign-breathe 16s linear alternate infinite}
.hero-campaign__shade {position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,3,8,.90) 0%,rgba(10,3,8,.78) 31%,rgba(10,3,8,.22) 65%,rgba(10,3,8,.12) 100%),linear-gradient(0deg,rgba(10,3,8,.65),transparent 45%)}
.hero-campaign__signature {position:absolute;right:2.5rem;top:1.6rem;color:#fff;font-size:.7rem;letter-spacing:.08em;display:flex;gap:1.5rem;opacity:.9}
.hero-campaign__progress {position:absolute;left:2.5rem;bottom:1.8rem;display:flex;gap:8px}
.hero-campaign__progress i {height:3px;width:34px;background:#ffffff50;transition:background .4s}
.hero-campaign__progress i.is-current {background:#ff2793}
.cinematic-hero--campaign .cinematic-hero__heading {color:#fff;text-shadow:4px 5px 0 #000;position:relative}
.cinematic-hero--campaign .cinematic-hero__supporting {color:#fff;max-inline-size:23rem;text-shadow:0 2px 6px #000}
.cinematic-hero--campaign .cinematic-hero__cta {--button-bg:var(--color-hot-pink);background:var(--color-hot-pink);color:#000;box-shadow:6px 6px 0 #fff}
.cinematic-hero--campaign .cinematic-hero__cta:hover {background:#fff;color:#000}
.cinematic-hero--campaign .cinematic-hero__eyebrow,.cinematic-hero--campaign .cinematic-hero__sticker {color:#000}
.cinematic-hero--campaign .cinematic-hero__disc {background:transparent!important;border-color:#ffffff70;box-shadow:none;opacity:.6}
@keyframes campaign-breathe {
 from {transform:translate(var(--campaign-pan-x),var(--campaign-pan-y)) scale(1)}
 to {transform:translate(var(--campaign-pan-x),var(--campaign-pan-y)) scale(1.025)}
}
.hero-campaign[data-campaign-animated="false"] .hero-campaign__image,
[data-motion-paused="true"] .hero-campaign__image {animation-play-state:paused!important}
@media(min-width:750px){.cinematic-hero--campaign{--disc:min(34vw,54svh,31rem);--disc-x:calc(100% - var(--hero-gutter) - var(--disc) * .62);--disc-y:53%}.cinematic-hero--campaign .cinematic-hero__heading{font-size:min(14vw,25svh,14rem)}}
@media(max-width:749px){
 .hero-campaign__image{object-position:63% 25%}
 .hero-campaign__frame--2 .hero-campaign__image{object-position:58% 30%}
 .hero-campaign__frame--3 .hero-campaign__image{object-position:64% 22%}
 .hero-campaign__shade{background:linear-gradient(180deg,rgba(10,3,8,.78) 0%,rgba(10,3,8,.6) 40%,rgba(10,3,8,.23) 70%,rgba(10,3,8,.50)),linear-gradient(90deg,rgba(10,3,8,.35),transparent)}
 .hero-campaign__signature{top:auto;right:1rem;bottom:1.25rem;font-size:.6rem;letter-spacing:0;gap:.5rem}
 .hero-campaign__signature span:first-child{display:none}
 .hero-campaign__progress{left:1rem;bottom:1.45rem}
 .cinematic-hero--campaign .cinematic-hero__heading{text-shadow:3px 3px 0 #000}
 .cinematic-hero--campaign .cinematic-hero__supporting{font-size:1rem}
 .hero-campaign__frame{transition-duration:1100ms}
}
@media(prefers-reduced-motion:reduce){.hero-campaign__image{animation:none!important;transform:none!important}.hero-campaign__frame{transition:none}.hero-campaign__progress i{transition:none}}
[data-reduced-motion="true"] .hero-campaign__image {animation:none!important;transform:none!important}
[data-reduced-motion="true"] .hero-campaign__frame {transition:none}

/* The model campaign owns the opening; interaction lives in the closing scene. */
.gloss-stage--finale .gloss-stage__controls {inset-inline-start:50%}
@media(max-width:749px){
 .gloss-finale{padding-block-end:calc(var(--disc) + 7rem)}
 .gloss-finale::before{inset-block-end:5rem}
 .gloss-stage--finale{inset-block-end:calc(5rem - var(--disc) * .45)}
 .gloss-finale__sticker{inset-block-end:calc(5rem + var(--disc) * .72)}
 .cinematic-hero--campaign{min-block-size:calc(100svh - 8rem);display:grid}
 .cinematic-hero--campaign .cinematic-hero__inner{align-content:end;display:grid;padding:15rem 1rem 4rem;width:100%}
 .cinematic-hero--campaign .cinematic-hero__heading{font-size:clamp(4.25rem,21vw,6rem)}
 .cinematic-hero--campaign .hero-campaign__shade{background:linear-gradient(180deg,rgba(10,3,8,.12),rgba(10,3,8,.2) 25%,rgba(10,3,8,.75) 58%,rgba(10,3,8,.9))}
}

/* Square and portrait sources must not be stretched across a wide monitor. */
@media(min-width:1200px){
 .hero-campaign__frame{max-inline-size:84rem;margin-inline:auto}
 .hero-campaign__image{
  width:auto;max-width:62%;margin-inline-start:auto;object-fit:contain;object-position:right top;
  transform-origin:top right;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 92%,transparent);
 }
 .hero-campaign__frame--2 .hero-campaign__image,
 .hero-campaign__frame--3 .hero-campaign__image{object-position:right top}
 .hero-campaign__shade{background:linear-gradient(90deg,rgba(10,3,8,.8),rgba(10,3,8,.5) 40%,rgba(10,3,8,.06) 65%),linear-gradient(0deg,rgba(10,3,8,.28),transparent 35%)}
}