/* ─── ENTRY ─────────────────────────────────────────── */
.entry {
  position: fixed; inset: 0; z-index: 200; background: var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .55s var(--ease-in-expo), visibility .55s ease;
}
.entry.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.entry.is-skip { display: none; }
.entry__light {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 50% 56%, rgba(255,255,255,.025) 0%, transparent 65%),
    radial-gradient(ellipse 65% 72% at 50% 54%, rgba(255,109,41,.07) 0%, transparent 70%);
}
.entry__grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-size: 320px;
}
.entry__body { position: relative; z-index: 1; text-align: center; padding: 0 var(--g); max-width: 1040px; }
.entry__eye {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 38px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);
}
.entry__eye::before { content: ''; display: block; width: 26px; height: .5px; background: var(--accent); }
.entry__eye.s { opacity: 1; transform: none; }
.entry__stmt {
  font-size: clamp(2.4rem, 5.6vw, 5.8rem);
  font-weight: var(--display-weight);
  line-height: 1.07; letter-spacing: -.028em;
  color: var(--white);
  margin-bottom: 52px;
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
  text-wrap: balance;
}
.entry__stmt.s { opacity: 1; transform: none; }
.entry__stmt em { color: var(--accent); font-style: normal; }
.entry__nudge {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(186,186,186,.45);
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease, color var(--dur-fast) ease;
  background: none; border: none; padding: 14px 22px;
}
.entry__nudge.s { opacity: 1; }
.entry__nudge:hover { color: var(--accent); }
.nudge-bar { width: 18px; height: .5px; background: currentColor; }
.nudge-arr { display: inline-block; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* prevent scroll while entry visible */
body.no-scroll { overflow: hidden; height: 100vh; }

/* ─── DRUM SECTION ──────────────────────────────────── */
/* Section height = (N × per-face stretch) + sticky runway.
   Tighter than the spec's 500vh so face-to-face transitions feel like a
   wheel, not a slog. 80vh per face × 5 + 60vh runway = 460vh. */
.drum-section { height: var(--drum-desktop-height, 460vh); position: relative; }
.drum-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.drum-section { --face-stretch: 0.8; }  /* 0.8 vh of scroll per 1 face transition */
.scene { position: absolute; inset: 0; perspective-origin: 50% 50%; }
.drum { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: center center; will-change: transform; }
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  transform-style: flat;
  transition: opacity .3s linear;
}
.face.is-hidden { opacity: 0; }

/* hidden by default — only striped variant surfaces the label */
.face-label { display: none; }

/* face background — gradient placeholder (default).
   Brightened from spec so the drum reads visually with no imagery; real
   covers (dropped via image-slot) will replace this. */
.face-bg { position: absolute; inset: 0; z-index: 0; }
.face[data-hue="warm"]   .face-bg { background: radial-gradient(ellipse 130% 100% at 60% 30%, #5a3414 0%, #2e1c0a 45%, #0a0805 90%); }
.face[data-hue="cool"]   .face-bg { background: radial-gradient(ellipse 130% 100% at 60% 30%, #1d3f6e 0%, #0c1d36 45%, #060810 90%); }
.face[data-hue="green"]  .face-bg { background: radial-gradient(ellipse 130% 100% at 60% 30%, #2d5418 0%, #142a08 45%, #060906 90%); }
.face[data-hue="red"]    .face-bg { background: radial-gradient(ellipse 130% 100% at 60% 30%, #6a1f1f 0%, #2d0d0d 45%, #0a0606 90%); }
.face[data-hue="violet"] .face-bg { background: radial-gradient(ellipse 130% 100% at 60% 30%, #3a1a6a 0%, #19092d 45%, #0a0610 90%); }

/* striped placeholder variant (tweak: face=striped) */
.face[data-treat="striped"] .face-bg {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px),
    linear-gradient(158deg, rgba(255,109,41,.06), transparent 60%),
    #0a0a0a;
}
.face[data-treat="striped"] .face-label {
  display: block;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 3;
  font-family: ui-monospace, 'JetBrains Mono', SF Mono, Consolas, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(186,186,186,.5); padding: 14px 22px;
  border: .5px solid rgba(186,186,186,.18);
}

/* image-slot variant (locked default — face=image) */
.face-slot { display: none; }
.face[data-treat="image"] .face-slot {
  display: block;
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  --slot-bg: transparent;
}
.face[data-treat="image"] .face-bg { opacity: .55; }

/* Big translucent project number baked into each face. Makes drum rotation
   visible — rolls with the face. Positioned center-right of the face so it
   never travels into the nav bar zone during any rotation angle. */
.face-bignum {
  position: absolute;
  top: 50%;
  right: 6vw;
  transform: translateY(-50%);
  font-family: 'Neue Montreal', 'PP Neue Montreal', 'Helvetica Neue', sans-serif;
  font-size: clamp(9rem, 18vw, 18rem);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -.07em;
  color: rgba(255,255,255,.05);
  z-index: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.face[data-treat="image"] .face-bignum { opacity: .045; }

/* grain + vignette + glow overlay (always on) */
.face::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.048'/%3E%3C/svg%3E");
  background-size: 320px;
}
.face::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,8,8,.88) 0%, rgba(8,8,8,.35) 32%, rgba(8,8,8,.05) 58%, transparent 78%),
    linear-gradient(to bottom, rgba(8,8,8,.3) 0%, transparent 22%);
}
.face-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 20% 76%, rgba(255,109,41,.085), transparent 65%);
  transition: transform .6s var(--ease-out-expo);
}

/* ── INFO OVERLAY ─────────────────────────────────── */
.wi {
  position: absolute;
  left: var(--g);
  z-index: 20;
  max-width: min(620px, 60vw);
  pointer-events: none;
}
.wi > * { pointer-events: all; }

/* Overlay position — locked to center-left. */
.wi {
  top: 50%;
  transform: translateY(-50%);
}

.wi-eye {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.wi-eye.v { opacity: 1; transform: none; }
.wi-eye-line { flex-shrink: 0; width: 26px; height: .5px; background: var(--accent); }
.wi-title {
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: var(--display-weight);
  line-height: .98; letter-spacing: -.032em;
  color: var(--white);
  margin-bottom: 24px;
  max-width: 100%;
  opacity: 0; transform: translateY(18px);
  transition: opacity .65s var(--ease-out-expo) .07s, transform .65s var(--ease-out-expo) .07s;
}
.wi-title.v { opacity: 1; transform: none; }
.wi-title.v.is-swap {
  opacity: 0;
  transition: opacity .14s ease;
}
.wi-exc {
  font-size: clamp(.875rem, 1.1vw, .95rem);
  color: rgba(186,186,186,.62);
  line-height: 1.66; max-width: 38ch; margin-bottom: 28px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-out-expo) .14s, transform .5s var(--ease-out-expo) .14s;
}
.wi-exc.v { opacity: 1; transform: none; }
.wi-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white);
  border-bottom: .5px solid rgba(255,255,255,.25);
  padding-bottom: 5px;
  opacity: 0;
  transition: opacity .5s ease .2s, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.wi-cta.v { opacity: 1; }
.wi-cta:hover { color: var(--accent); border-color: var(--accent); }
.wi-cta-arrow { display: inline-block; transition: transform .3s var(--ease-out-expo); }
.wi-cta:hover .wi-cta-arrow { transform: translateX(4px); }

/* ── ROLLING STATE: hide everything except title ──── */
/* When the drum is mid-rotation, fade out the secondary content so only
   the title (and the rolling drum behind it) carries the moment. */
.drum-sticky.is-rolling .wi-eye.v,
.drum-sticky.is-rolling .wi-exc.v,
.drum-sticky.is-rolling .wi-cta.v,
.drum-sticky.is-rolling .wi-counter.v,
.drum-sticky.is-rolling .wi-dots.v {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* COUNTER */
.wi-counter {
  position: absolute; right: var(--g); bottom: 10vh; z-index: 20;
  text-align: right; pointer-events: none;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease-out-expo) .15s, transform .55s var(--ease-out-expo) .15s;
}
.wi-counter.v { opacity: 1; transform: none; }
.wi-num {
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 200;
  color: rgba(255,255,255,.88);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  transition: opacity .4s var(--ease-out-expo);
}
.wi-sep { width: 18px; height: .5px; background: rgba(186,186,186,.22); margin: 8px 0 8px auto; }
.wi-tot { font-size: 10px; color: rgba(186,186,186,.3); letter-spacing: .04em; }

/* Counter — GHOST style (tweak) */
.drum-sticky[data-counter="ghost"] .wi-counter {
  right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  bottom: auto;
  z-index: 4; /* behind info overlay */
  text-align: center;
}
.drum-sticky[data-counter="ghost"] .wi-num {
  font-size: clamp(14rem, 38vw, 42rem);
  font-weight: 100;
  color: rgba(255,255,255,.05);
  letter-spacing: -.06em;
}
.drum-sticky[data-counter="ghost"] .wi-sep,
.drum-sticky[data-counter="ghost"] .wi-tot { display: none; }

/* PROGRESS DOTS */
.wi-dots {
  position: absolute; right: calc(var(--g) + 2px); top: 50%; transform: translateY(-50%);
  z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0;
  transition: opacity .6s var(--ease-out-expo) .3s;
}
.wi-dots.v { opacity: 1; }
.wi-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: background .3s ease, transform .3s ease;
}
.wi-dot.a { background: var(--accent); transform: scale(1.7); }

/* SCROLL HINT — bottom centre, small, fades out on first scroll. */
.scroll-hint {
  position: absolute; left: 50%; bottom: 3.4vh; transform: translateX(-50%);
  z-index: 20;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(186,186,186,.32);
  pointer-events: none;
  opacity: 0;
  animation: hint-in .6s var(--ease-out-expo) 2.4s forwards;
}
.scroll-hint::before {
  content: ''; display: block; width: 22px; height: .5px; background: currentColor; opacity: .6;
}
.scroll-hint__arrow { display: inline-block; animation: hint-bob 2.4s ease-in-out infinite; }
.scroll-hint.is-hidden { opacity: 0 !important; transition: opacity .35s ease; animation: none; }
@keyframes hint-in  { to { opacity: 1; } }
@keyframes hint-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ─── CLOSING ───────────────────────────────────────── */
.closing {
  margin-top: -10vh;
  padding: 24vh var(--g) 15vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.closing::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -18vh;
  height: 30vh;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(13,13,13,0), var(--black) 74%);
  z-index: 0;
}
/* Defensive: ensure hidden closing variants never flash before JS runs. */
.closing[hidden] { display: none !important; }
.closing__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 48%, rgba(255,109,41,.07), transparent 65%),
    radial-gradient(ellipse 90% 100% at 50% 100%, rgba(255,255,255,.012), transparent 70%);
  z-index: 0;
}
.closing__grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-size: 320px;
  z-index: 0;
}
.closing__inner {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}
.closing__eye {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6vh;
}
.closing__eye-line { width: 26px; height: .5px; background: var(--accent); display: inline-block; }
.closing__stmt {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: var(--display-weight);
  line-height: 1.36;
  letter-spacing: -.012em;
  color: rgba(255,255,255,.94);
  max-width: 42ch;
  margin: 0 auto 7vh;
  text-wrap: balance;
}
.closing__ctas {
  display: inline-flex; gap: 56px;
  align-items: center;
}
.closing__cta {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--white);
  border-bottom: .5px solid rgba(255,255,255,.18);
  padding-bottom: 6px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.closing__cta:hover { color: var(--accent); border-color: var(--accent); }
.closing__cta-arr {
  display: inline-block;
  transition: transform .3s var(--ease-out-expo);
}
.closing__cta:hover .closing__cta-arr {
  transform: translate(3px, -3px);
}

/* ─── Closing variant: CTA (default, minimal) ─── */
.closing__inner--cta {
  text-align: center;
  display: grid;
  grid-template-columns: minmax(0, 680px);
  align-items: center;
  place-items: center;
  justify-content: center;
  gap: clamp(32px, 4vw, 48px);
  max-width: 760px;
}
.closing__photo {
  width: clamp(150px, 13vw, 190px);
  justify-self: center;
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative; isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,109,41,.2), rgba(255,109,41,0) 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 16px),
    #131313;
  border: .5px solid rgba(186,186,186,.16);
  flex-shrink: 0;
}
.closing__photo-slot {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  --slot-bg: transparent;
  z-index: 1;
}
.closing__cta-text {
  min-width: 0;
  width: 100%;
}
.closing__line {
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: var(--display-weight);
  line-height: 1.05; letter-spacing: -.028em;
  color: var(--white);
  margin-bottom: 4vh;
  text-wrap: balance;
}
.closing__big-cta {
  display: inline-flex; align-items: baseline; gap: 14px;
  font-size: clamp(.8rem, 1.1vw, 1rem);
  font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--white);
  border-bottom: .5px solid rgba(255,255,255,.32);
  padding-bottom: 8px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.closing__big-cta:hover { color: var(--accent); border-color: var(--accent); }
.closing__big-cta .closing__cta-arr { transition: transform .3s var(--ease-out-expo); }
.closing__big-cta:hover .closing__cta-arr { transform: translate(4px, -4px); }

/* ─── Closing variant: now (status grid) ─── */
.closing__inner--now { text-align: left; max-width: 1000px; }
.closing__eye--left { margin-bottom: 5vh; }
.closing__now-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  border-top: .5px solid rgba(186,186,186,.12);
  border-bottom: .5px solid rgba(186,186,186,.12);
  padding: 4vh 0;
  margin-bottom: 5vh;
}
.closing__now-cell { display: flex; flex-direction: column; gap: 10px; }
.closing__now-lbl {
  font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(186,186,186,.38);
}
.closing__now-val {
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: var(--display-weight);
  color: var(--white);
  letter-spacing: -.012em; line-height: 1.3;
}
.closing__cta--big {
  font-size: 11px; padding-bottom: 7px;
}

@media (max-width: 720px) {
  .closing { padding: 12vh var(--g) 10vh; }
  .closing__stmt { font-size: clamp(1.25rem, 5.8vw, 1.8rem); }
  .closing__ctas { flex-direction: column; gap: 22px; align-items: flex-start; }
  .closing__line { font-size: clamp(2rem, 9vw, 3rem); }
  .closing__now-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ─── MOBILE DRUM FALLBACK ──────────────────────────── */
@media (max-width: 720px) {
  .drum-section { height: var(--drum-compact-height, 420vh); }
  .drum-sticky { height: 100vh; touch-action: pan-y; }
  /* hide the 3D drum; show stacked faces with crossfade */
  .scene { transform: none !important; }
  .drum { transform: none !important; }
  .face {
    inset: 0; opacity: 0; transition: opacity .55s var(--ease-out-expo);
    transform: none !important;
  }
  .face.is-active { opacity: 1; }
  .wi {
    top: auto;
    bottom: 14vh;
    left: var(--g);
    right: var(--g);
    transform: none;
    max-width: none;
  }
  .wi-title { font-size: clamp(2.4rem, 12vw, 4.4rem); }
  .wi-counter { bottom: 14vh; }
  .scroll-hint { display: none; }
  .wi-dots {
    right: 50%; transform: translateX(50%); top: auto; bottom: 4vh;
    flex-direction: row;
  }
  .drum-sticky[data-counter="ghost"] .wi-num { font-size: clamp(9rem, 50vw, 16rem); }
}