/* ═══════════════════════════════════════════════════════════════════════
   HERO — "Il Passaggio"

   A small framed window of the room opens into a full-bleed photograph as
   you scroll, while the wordmark splits apart around it. Mechanic borrowed
   from the Scroll Media Expansion pattern on 21st.dev, rebuilt in vanilla.

   The window is NOT resized — the image is full-bleed the whole time and a
   clip-path inset() opens outward over it. That keeps the whole thing on
   the compositor: no width/height animation, no layout, no reflow, and the
   photograph never distorts or re-crops as it grows.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── preloader ──────────────────────────────────────────────────────────
   Auto-dismisses on a pure CSS timer so a JS error can never leave a
   visitor staring at a covered page. JS only ever makes it leave sooner. */
.pre{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:var(--char); color:var(--semola);
  animation:preOut .9s var(--ease) 1.15s forwards;
}
.pre__mark{
  font-family:var(--f-display); font-size:clamp(1.4rem,4vw,2.4rem);
  letter-spacing:.06em; opacity:0; animation:preIn .7s var(--ease) .1s forwards
}
.pre__mark span{color:var(--ember-lit)}
.pre__bar{
  position:absolute; bottom:0; inset-inline:0; height:2px; background:var(--ember);
  transform-origin:left; transform:scaleX(0); animation:preBar 1.15s var(--ease) forwards
}
[dir="rtl"] .pre__bar{transform-origin:right}
.pre.gone{display:none}
@keyframes preIn{to{opacity:1}}
@keyframes preBar{to{transform:scaleX(1)}}
@keyframes preOut{to{opacity:0; visibility:hidden; transform:translateY(-100%)}}

/* ── the runway ─────────────────────────────────────────────────────── */
.hero{position:relative; background:var(--char); --p:0}
.hero__runway{position:relative; height:300vh}
.hero__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:var(--char); isolation:isolate;
}

/* blurred backdrop, sits behind the window */
.hero__bg{position:absolute; inset:-5%; z-index:0}
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:blur(22px) saturate(.72) brightness(.38);
  transform:scale(1.06);
}

/* the photograph — full-bleed, revealed by clip-path */
.hero__frame{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  clip-path:inset(34% 38% 34% 38% round 4px);
  will-change:clip-path;
}
.hero__frame img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.18); will-change:transform;
}
/* vignette so the type always has something to sit on */
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,12,8,.62) 0%, transparent 26%, transparent 52%, rgba(20,12,8,.86) 100%),
    radial-gradient(120% 78% at 50% 46%, transparent 38%, rgba(20,12,8,.6) 100%);
  opacity:calc(.35 + var(--p) * .65);
}

/* ── the wordmark, splitting around the window ──────────────────────── */
.hero__title{
  position:absolute; inset:0; z-index:4; margin:0;
  display:grid; place-items:center; pointer-events:none;
  mix-blend-mode:difference;              /* inverts over the photo — the expensive-looking part */
  opacity:var(--to,1);
}
.ht{
  position:absolute; white-space:nowrap; color:#F7F1E6;
  font-family:var(--f-display); font-weight:400; line-height:.92;
  font-size:clamp(2.1rem, 7.4vw, 6.6rem); letter-spacing:.012em;
  will-change:transform;
}
.ht--l{transform:translateX(calc(-26vw - var(--p) * 30vw))}
.ht--r{transform:translateX(calc( 26vw + var(--p) * 30vw))}

/* on a narrow screen there is no room either side — split vertically */
@media(max-width:820px){
  .ht{font-size:clamp(2rem, 11vw, 3.6rem)}
  .ht--l{transform:translateY(calc(-27vh - var(--p) * 16vh))}
  .ht--r{transform:translateY(calc( 27vh + var(--p) * 16vh))}
}

/* ── overlays: kicker, scroll cue, and the panel that lands last ────── */
.hero__meta{
  position:absolute; z-index:5; inset-inline:0; top:calc(5.8rem + env(safe-area-inset-top));
  display:flex; justify-content:center; align-items:center; gap:.85rem;
  opacity:calc(1 - var(--p) * 2.6); pointer-events:none;
}
.hero__meta span{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(246,239,226,.82); font-weight:600
}

.hero__cue{
  position:absolute; z-index:5; bottom:1.6rem; inset-inline-start:50%;
  transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:.5rem; opacity:calc(1 - var(--p) * 3);
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(246,239,226,.6); pointer-events:none
}
[dir="rtl"] .hero__cue{transform:translateX(50%)}
.hero__cue i{
  width:1px; height:36px; background:linear-gradient(rgba(246,239,226,.7),transparent);
  animation:cueDrop 2.4s var(--ease) infinite
}
@keyframes cueDrop{
  0%{transform:scaleY(.15); transform-origin:top}
  45%{transform:scaleY(1); transform-origin:top}
  46%{transform-origin:bottom}
  100%{transform:scaleY(0); transform-origin:bottom}
}

.hero__panel{
  position:absolute; z-index:5; inset-inline:0; bottom:0;
  padding:5.5rem max(4vw,1.1rem) calc(2.6rem + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  text-align:center; color:var(--semola);
  opacity:var(--panel,0); transform:translateY(calc((1 - var(--panel,0)) * 26px));
  pointer-events:none;
  /* the copy lands on top of a photograph — it needs its own floor to sit on,
     the section vignette alone leaves the lede at about 2:1 against the crust */
  background:linear-gradient(180deg, transparent 0%, rgba(16,10,6,.55) 34%, rgba(16,10,6,.9) 72%);
}
.hero__panel.live{pointer-events:auto}
.hero__lede{
  font-size:clamp(1rem,1.5vw,1.14rem); color:rgba(246,239,226,.9);
  max-width:46ch; margin:0; text-wrap:balance
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center}
.hero__proof{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:center;
  font-size:.84rem; color:rgba(246,239,226,.7)
}
.hero__proof strong{color:var(--semola); font-weight:600}
.stars{display:inline-flex; gap:2px}
.stars svg{width:14px; height:14px; fill:var(--gold)}

.hero__grain{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  opacity:.42; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── no motion: skip the whole runway, show the finished frame ──────── */
@media (prefers-reduced-motion:reduce){
  .pre{display:none}
  .hero__runway{height:100svh}
  .hero__pin{position:relative}
  .hero__frame{clip-path:none}
  .hero__frame img{transform:none}
  .hero__bg{display:none}
  .hero__title{position:static; display:flex; flex-direction:column; align-items:center;
               justify-content:center; height:100%; gap:.1em; mix-blend-mode:normal}
  .ht{position:static; transform:none}
  .hero__cue i{animation:none}
  .hero__panel{opacity:1; transform:none; pointer-events:auto}
  .hero__meta{opacity:1}
}