/* ============================================================
   THE ARC — scroll-scrubbed frame sequence
   A canvas draws one frame of the graded day-to-night clip per scroll
   position, eased so it reads as continuous motion rather than steps.
   ============================================================ */

.arc-hero{position:relative;height:520vh;min-height:520vh;display:block;padding:0;overflow:visible}
.arc-hero .ah-sticky{position:sticky;top:0;height:100vh;height:100dvh;width:100%;overflow:hidden}
.arc-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#070707}

.arc-hero .ah-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,7,.58) 0%,rgba(7,7,7,.16) 24%,
             rgba(7,7,7,.06) 48%,rgba(7,7,7,.55) 100%)}

.arc-hero .hero-inner{position:absolute;inset:0;max-width:none;margin:0;
  padding:calc(var(--head-h) + 20px) var(--gutter) 0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;z-index:2;will-change:opacity,transform}

/* the closing card — arrives once the evening has landed */
.arc-hero .ah-end{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;text-align:center;
  padding:0 var(--gutter) 13vh;opacity:0;pointer-events:none;
  will-change:opacity,transform}
/* This line lands over the lit skyline, which is the brightest part of the
   whole sequence. It needs three things, not one: full-strength text colour,
   a TIGHT shadow for edge definition (a wide blur alone just fogs), and a
   scrim of its own below — see .ah-end::before. */
.arc-hero .ah-line{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--text);max-width:32ch;
  margin-bottom:30px;position:relative;z-index:1;
  text-shadow:0 1px 2px rgba(7,7,7,.95),0 2px 10px rgba(7,7,7,.9),0 4px 30px rgba(7,7,7,.75)}
.arc-hero .ah-line b{color:var(--text);font-weight:600;font-style:normal}
.arc-hero .ah-end .hero-ctas{justify-content:center;margin:0;position:relative;z-index:1}
/* Local scrim under the closing card only, so the rest of the night frame
   keeps its contrast. Fades in with the card, since it is a child of it. */
.arc-hero .ah-end::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 30%,rgba(7,7,7,.42) 62%,rgba(7,7,7,.80) 100%)}

.arc-hero .ah-rail{position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(58px,8vh,92px);z-index:3;width:min(200px,40vw);height:1px;
  background:rgba(234,227,211,.16)}
.arc-hero .ah-rail span{display:block;height:100%;width:0;background:var(--gold)}

/* Centred with auto margins, NOT translateX: the base stylesheet puts a
   `rise` animation with fill-mode `both` on .hero-scroll, and an animation's
   transform permanently outranks a normal declaration — so a translateX(-50%)
   here is silently dropped and the element sits half its width off centre. */
.arc-hero .hero-scroll{position:absolute;bottom:clamp(18px,3vh,30px);
  left:0;right:0;margin-inline:auto;width:-moz-fit-content;width:fit-content;
  z-index:3;margin-top:0}

/* ---- no JS / reduced motion: the opening frame as an ordinary hero ---- */
html:not(.js) .arc-hero{height:100vh;min-height:100vh}
html:not(.js) .arc-hero canvas{display:none}
html:not(.js) .arc-hero .ah-sticky{position:relative;
  background:url('../assets/arc-frames-2560/f_001.webp') center/cover}
html:not(.js) .arc-hero .ah-end,
html:not(.js) .arc-hero .ah-rail,
html:not(.js) .arc-hero .hero-scroll{display:none}

/* Reduced motion: no scrub, no pinning — one still frame and the whole hero
   laid out statically. The closing card carries the only CTAs in this hero,
   so it MUST be visible here; it is opacity:0 by default and the script that
   would raise it never runs. */
@media (prefers-reduced-motion:reduce){
  .arc-hero{height:auto;min-height:100vh}
  .arc-hero canvas{display:none}
  .arc-hero .ah-sticky{position:relative;min-height:100vh;overflow:visible;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:calc(var(--head-h) + 40px) var(--gutter) clamp(48px,9vh,90px);
    background:url('../assets/arc-frames-2560/f_001.webp') center 62%/cover}
  .arc-hero .hero-inner{position:static;inset:auto;padding:0;
    display:block;opacity:1;transform:none}
  .arc-hero .ah-end{position:static;inset:auto;opacity:1;transform:none;
    pointer-events:auto;display:block;padding:0;margin-top:clamp(28px,4vh,44px)}
  .arc-hero .ah-line{margin:0 auto clamp(24px,3vh,32px)}
  .arc-hero .ah-end::before{display:none}
  .arc-hero .ah-rail,.arc-hero .hero-scroll{display:none}
}

@media (max-width:767px){
  .arc-hero{height:380vh;min-height:380vh}
  .arc-hero .ah-end{padding-bottom:16vh}
  .arc-hero .ah-rail{bottom:70px}
}