/* ─── Reel — cinematic image reel ────────────────────────── */

#reel {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: #111;
}

/* ── Scene base ──────────────────────────────────────────── */
.reel-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.reel-scene.is-active {
  opacity: 1;
}

/* ── Photo ───────────────────────────────────────────────── */
.scene-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform-origin: center center;
}

.reel-scene.is-active .scene-photo {
  animation: ken-burns 7s ease-out forwards;
}

@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* POW scene: close-up portrait, default positioning works */

/* ── Dark overlay ────────────────────────────────────────── */
.scene-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
}

/* ── Centered content ────────────────────────────────────── */
.scene-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}

/* ── Scene 1 — Title ─────────────────────────────────────── */
#scene-1 {
  background: var(--bg);
}

.s1-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 6.5rem);
  color: var(--text);
  line-height: 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease 0.35s, transform 0.9s ease 0.35s;
}

.s1-role {
  font-family: var(--sans);
  font-size: clamp(0.6rem, 1.1vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary);
  opacity: 0;
  transition: opacity 0.9s ease 0.85s;
}

#scene-1.is-active .s1-name {
  opacity: 1;
  transform: translateY(0);
}

#scene-1.is-active .s1-role {
  opacity: 1;
}

/* ── Brand container — always visible; children animate ─── */
.scene-brand {
  opacity: 1;
}

/* ── Scene label — fades in after brand animation ───────── */
.scene-label {
  font-family: var(--sans);
  font-size: clamp(0.55rem, 0.9vw, 0.68rem);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  opacity: 0;
}

/* Per-scene label delays (after brand animation completes) */
#scene-2.is-active .scene-label { animation: label-in 0.8s ease 2.0s both; }
#scene-3.is-active .scene-label { animation: label-in 0.6s ease 1.45s both; }
#scene-4.is-active .scene-label { animation: label-in 0.8s ease 1.8s both; }
#scene-5.is-active .scene-label { animation: label-in 0.8s ease 1.2s both; }

@keyframes label-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   SCENE 2 — CASA BIANCA  stroke draw-on
   ═══════════════════════════════════════════════════════════ */

/* Casa house SVG: all elements rendered as strokes */
#cb-house-svg path,
#cb-house-svg polygon,
#cb-house-svg rect {
  fill: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 1.1;
  /* stroke-dasharray and stroke-dashoffset set by JS */
}

/* Casa logo wordmark */
.cb-icon     { display: block; height: 94px; width: auto; }
.cb-wordmark { display: block; height: 36px; width: auto; }



/* Logo centered in right gray space, vertically centered */
#scene-3 .scene-content {
  align-items: center;
  justify-content: center;
  padding: 2rem 3% 2rem 60%;
}

/* ═══════════════════════════════════════════════════════════
   SCENE 3 — FUELING BRAINS  hand-picked segment reveal
   Each of the 12 paths pops in individually, jumping around
   the brain shape like someone coloring piece by piece (~4s)
   ═══════════════════════════════════════════════════════════ */

/* All 12 paths start invisible */
#fb-brain-svg path { opacity: 0; }

@keyframes fb-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reveal order — jumps spatially: left body → top → lower-R →
   upper-R → right-mid → lower-L → far upper-R → lower-mid →
   upper-mid-R → mid accent → tiny accents                    */
#scene-3.is-active #fb-p8  { animation: fb-appear 140ms ease-out    0ms both; } /* large left body      */
#scene-3.is-active #fb-p12 { animation: fb-appear 120ms ease-out  245ms both; } /* top                  */
#scene-3.is-active #fb-p10 { animation: fb-appear 125ms ease-out  475ms both; } /* lower-right          */
#scene-3.is-active #fb-p11 { animation: fb-appear 110ms ease-out  735ms both; } /* upper-right          */
#scene-3.is-active #fb-p1  { animation: fb-appear 130ms ease-out  960ms both; } /* right-middle         */
#scene-3.is-active #fb-p9  { animation: fb-appear 120ms ease-out 1200ms both; } /* lower-left           */
#scene-3.is-active #fb-p4  { animation: fb-appear 125ms ease-out 1440ms both; } /* far upper-right      */
#scene-3.is-active #fb-p7  { animation: fb-appear 110ms ease-out 1710ms both; } /* lower-middle         */
#scene-3.is-active #fb-p5  { animation: fb-appear 125ms ease-out 1925ms both; } /* upper-mid-right      */
#scene-3.is-active #fb-p2  { animation: fb-appear 110ms ease-out 2155ms both; } /* mid accent           */
#scene-3.is-active #fb-p3  { animation: fb-appear 110ms ease-out 2365ms both; } /* tiny stroke accent   */
#scene-3.is-active #fb-p6  { animation: fb-appear 110ms ease-out 2590ms both; } /* tiny stroke accent   */

.fb-icon { display: block; height: 161px; width: auto; }
.fb-wordmark { height: 38px; width: auto; }

/* FBTEST.svg — centered, crops evenly on all sides */
#scene-3 .scene-photo {
  object-fit: cover;
  object-position: center center;
}

/* ═══════════════════════════════════════════════════════════
   SCENE 4 — NEUROKIDS  left-to-right clip-path wipe
   ═══════════════════════════════════════════════════════════ */

.nk-logo {
  height: 26px;
  width: auto;
  clip-path: inset(0 100% 0 0);
}

#scene-4.is-active .nk-logo {
  animation: nk-wipe 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

@keyframes nk-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}

/* ═══════════════════════════════════════════════════════════
   SCENE 5 — POW  logo fade-in
   ═══════════════════════════════════════════════════════════ */

.pow-logo {
  width: clamp(9rem, 20vw, 18rem);
  height: auto;
  opacity: 0;
  /* SVG has ~15.8% dead space baked into bottom of viewBox — cancel it out */
  margin-bottom: calc(clamp(9rem, 20vw, 18rem) * -0.158);
}

#scene-5.is-active .pow-logo {
  animation: pow-punch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes pow-punch {
  from { opacity: 0; transform: scale(1.1); }
  to   { opacity: 1; transform: scale(1);   }
}

#scene-5 .scene-content {
  gap: 0.5rem;
}

.pow-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(9rem, 20vw, 18rem);
  font-size: clamp(0.68rem, 1.52vw, 1.08rem);
  line-height: 1.5;
  color: #d1cdc9;
}

/* Cancel container-level label-in; spans animate individually */
#scene-5.is-active .pow-label {
  animation: none;
  opacity: 1;
}

.pow-label span {
  opacity: 0;
}

#scene-5.is-active .pow-label span:nth-child(1) {
  animation: pow-line-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s both;
}

#scene-5.is-active .pow-label span:nth-child(2) {
  animation: pow-line-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) 2.0s both;
}

@keyframes pow-line-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Scroll cue ──────────────────────────────────────────── */
.reel-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 22px;
  color: rgba(255, 255, 255, 0.55);
  animation: cue-pulse 2.2s ease-in-out infinite;
  transition: opacity 0.5s ease, color 0.8s ease;
}

.reel-cue svg { display: block; width: 100%; }

.reel-cue.hidden { opacity: 0; pointer-events: none; }

#reel[data-scene="0"] .reel-cue {
  color: rgba(0, 0, 0, 0.30);
}

@keyframes cue-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cb-icon { height: 52px; }
  .fb-icon { height: 124px; }
  .nk-logo { height: 20px; }
  .cb-wordmark { height: 13px; }
  .fb-wordmark { height: 30px; }
}