/* ═══════════════════════════════════════════════════════════════════════
   hero-25.css · Jubileum climax-sectie (ná Over ons)
   Pinned runway van 280vh. Twee overgangen:
     1) Curtain-split entry (0 → .45): twee blauwdruk-panelen schuiven
        uiteen en onthullen de grote '25' met tijdlijn-film.
     2) Zoom-in finish (0.62 → 0.92): camera zoomt subtiel in; meta
        labels fade in; exit richting tijdlijn.
   Aangedreven door CSS-variabelen die hero-25.js instelt:
     --curtain-t, --zoom-scale, --zoom-opacity, --meta-opacity, --evo-opacity
   ═══════════════════════════════════════════════════════════════════════ */

.hero-25{
  position:relative;
  width:100%;
  height:280vh;          /* scroll-runway */
  background:#0a0908;
  color:var(--cream, #f5ece1);
  isolation:isolate;
  /* Voorkomt dat inhoud overflow ziet tijdens de curtain-exit */
  overflow:clip;
}

.hero-25-sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:#0a0908;
}

/* ─── Video backdrop ───────────────────────────────────────────────── */
.hero-25-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  /* Fadet in mee met de curtain (onzichtbaar achter de gordijnen,
     geleidelijk zichtbaar zodra ze uiteen schuiven). */
  opacity:calc(.35 + var(--curtain-t, 0) * .35);
  transform:scale(var(--zoom-scale, 1));
  transform-origin:center 54%;
  transition:opacity .35s ease-out;
  will-change:transform;
}

/* Ambient evolutie-laag (internet-mijlpalen) — erfde structuur van oude hero */
.hero-25 .ace-evo{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:var(--evo-opacity, 0);
  transition:opacity .4s ease-out;
}

/* Blauwdruk-grid overlay (over de video) */
.hero-25-grid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  opacity:calc(.4 + var(--curtain-t, 0) * .3);
  pointer-events:none;
  transition:opacity .3s ease;
}

/* ─── Stage met grote 25 + meta ────────────────────────────────────── */
.hero-25-stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:3;
  pointer-events:none;
}

.hero-25-big{
  position:relative;
  font-family:var(--serif, 'Fraunces', 'Playfair Display', 'Cormorant Garamond', serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(18rem, 52vw, 48rem);
  line-height:.84;
  letter-spacing:-.04em;
  color:var(--cream, #f5ece1);
  /* Tijdens gordijn-dicht: 0 opacity. Na split: snel naar 1.
     Extra multiplier met --zoom-opacity voor de exit. */
  opacity:calc(var(--zoom-opacity, 1) * min(1, var(--curtain-t, 0) * 1.8));
  transform:scale(calc(.92 + var(--curtain-t, 0) * .08)) scale(var(--zoom-scale, 1));
  transform-origin:center 56%;
  text-shadow:
    0 2px 40px rgba(0,0,0,.45),
    0 0 120px rgba(212,169,78,.15);
  will-change:transform, opacity;
  user-select:none;
}

.hero-25-digits{ display:inline-block; }

/* Meta bovenin (progress labels) */
.hero-25-meta{
  position:absolute;
  top:clamp(28px, 7vh, 72px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.75em;
  align-items:center;
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(245,236,225,.75);
  opacity:var(--meta-opacity, 0);
  transition:opacity .3s ease;
  white-space:nowrap;
}
.hero-25-meta .dot{ color:var(--accent, #d4a94e); }
.hero-25-meta .dash{ color:rgba(245,236,225,.35); letter-spacing:0; }

/* Tag onderin */
.hero-25-tag{
  position:absolute;
  bottom:clamp(28px, 8vh, 88px);
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  max-width:min(620px, 80vw);
  opacity:var(--meta-opacity, 0);
  transition:opacity .3s ease;
}
.hero-25-tag .eyebrow{
  display:block;
  margin-bottom:.85em;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:.7rem;
  color:var(--accent, #d4a94e);
}
.hero-25-subtitle{
  margin:0;
  font-family:var(--serif, 'Fraunces', 'Cormorant Garamond', serif);
  font-size:clamp(1.2rem, 2.2vw, 1.85rem);
  font-weight:400;
  line-height:1.15;
  color:var(--cream, #f5ece1);
}
.hero-25-subtitle em{
  font-style:italic;
  color:var(--accent, #d4a94e);
  font-weight:500;
}

/* ─── Gordijn-panelen ──────────────────────────────────────────────── */
.hero-25-curtain{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  z-index:4;
  overflow:hidden;
  background:
    /* subtle blueprint lines op donker papier */
    linear-gradient(0deg,  rgba(245,236,225,.025) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(245,236,225,.025) 1px, transparent 1px) 0 0 / 40px 100%,
    linear-gradient(135deg, #1c1610 0%, #0c0a07 52%, #0d0b08 100%);
  box-shadow:0 0 60px rgba(0,0,0,.65);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero-25-curtain-left{
  left:0;
  transform:translate3d(calc(var(--curtain-t, 0) * -100%), 0, 0);
  border-right:1px solid rgba(245,236,225,.08);
}
.hero-25-curtain-right{
  right:0;
  transform:translate3d(calc(var(--curtain-t, 0) * 100%), 0, 0);
  border-left:1px solid rgba(245,236,225,.08);
}

/* Vignette op gordijn-panelen */
.hero-25-curtain::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

/* Labels op gordijn */
.hero-25-curtain-inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.6em;
  color:rgba(245,236,225,.5);
  /* Fadet uit zodra de gordijn-split begint — labels zijn een teaser op
     de dichte gordijnen, niet tijdens de reveal. */
  opacity:calc(1 - var(--curtain-t, 0) * 2.2);
  transition:opacity .2s ease;
  padding:clamp(20px, 4vw, 40px);
}
.hero-25-curtain-kicker{
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:.66rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(212,169,78,.72);
}
.hero-25-curtain-label{
  font-family:var(--serif, 'Fraunces', 'Cormorant Garamond', serif);
  font-size:clamp(1.4rem, 2.6vw, 2.3rem);
  font-weight:400;
  color:rgba(245,236,225,.82);
  text-align:center;
  line-height:1.15;
  letter-spacing:-.005em;
}
.hero-25-curtain-label em{
  font-style:italic;
  color:var(--accent, #d4a94e);
}
.hero-25-curtain-rule{
  width:92px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,236,225,.4), transparent);
  margin:.4em 0;
}
.hero-25-curtain-meta{
  font-family:var(--mono, 'JetBrains Mono', monospace);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(245,236,225,.35);
}

/* ─── Kleine schermen ──────────────────────────────────────────────── */
@media (max-width: 720px){
  .hero-25{ height:240vh; }
  .hero-25-big{ font-size:clamp(14rem, 64vw, 28rem); }
  .hero-25-curtain-label{ font-size:clamp(1.1rem, 4vw, 1.6rem); }
}

/* ─── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .hero-25{ height:130vh; }
  .hero-25-curtain-left,
  .hero-25-curtain-right{
    transform:translate3d(-100%, 0, 0);
    opacity:0;
  }
  .hero-25-curtain-right{ transform:translate3d(100%, 0, 0); }
  .hero-25-big{ opacity:1; transform:none; }
  .hero-25-meta,
  .hero-25-tag{ opacity:1; }
}