/* ═══════════════════════════════════════════════════════════════
   Mockup B — Integrated (canvas full-viewport background)
   Stadium fixed atrás, scenes alternam side-aligned por cima
   ═══════════════════════════════════════════════════════════════ */

/* Canvas full-viewport */
.canvas-wrap{
  position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--bg);
}
.arena-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}

/* Subtle bottom-only paper tint — keeps scene transitions soft without
   masking the stadium */
#dark-overlay{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,248,248,0) 0%,rgba(250,248,248,0) 60%,rgba(250,248,248,0.18) 100%);
  opacity:0;transition:opacity 0.45s var(--ease);
}

/* Scroll container — purely structural, no scroll height needed
   (paginated mode: scenes are position:fixed and toggled via JS) */
#scroll-container{
  position:relative;z-index:2;
  height:100vh;
  background:transparent;
}

/* Marquee mono ribbon */
.marquee-wrap{
  position:fixed;left:0;right:0;top:62px;z-index:85;
  pointer-events:none;border-bottom:1px solid var(--rule-2);
  background:var(--bg);overflow:hidden;height:38px;
  opacity:0;transition:opacity 0.6s var(--ease) 0.2s;
}
.marquee-wrap.ready{opacity:1;}
.marquee-text{
  display:flex;align-items:center;height:100%;
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-3);
  white-space:nowrap;will-change:transform;
}
.marquee-text span{display:inline-block;padding-right:4vw;}
@media (max-width:768px){.marquee-wrap{top:54px;height:30px;}.marquee-text{font-size:10px;}}

/* SCENES — fixed full-viewport, JS toggles is-active */
.scene{
  position:fixed;inset:0;
  display:flex;align-items:center;
  padding:140px 5vw 80px;
  pointer-events:none;opacity:0;z-index:10;
  transition:opacity 0.55s var(--ease);
  will-change:opacity,transform;
}
.scene.is-active{pointer-events:auto;opacity:1;}

.scene-inner{width:100%;max-width:1640px;margin:0 auto;}
.align-left .scene-inner{padding-right:55vw;padding-left:0;max-width:none;}
.align-right .scene-inner{padding-left:55vw;padding-right:0;max-width:none;}

/* Scene 03 (dark mega) and 04 (spec) center on the right OR full-center */
.scene-mega .scene-inner{padding-left:55vw;padding-right:0;max-width:none;}
.scene-spec .scene-inner{padding-left:55vw;padding-right:0;max-width:none;}

/* Scene CTA — minimal back-to-top floating bottom-right */
.scene-cta{padding:0;}
.cta-back-to-top{
  position:absolute;bottom:32px;right:32px;
  font-family:var(--f-mono);font-weight:700;font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text);text-decoration:none;
  padding:14px 22px;
  background:rgba(250,248,248,0.85);backdrop-filter:blur(8px);
  border:1px solid var(--rule-2);border-radius:2px;
  transition:border-color 0.25s var(--ease),color 0.25s var(--ease),transform 0.25s var(--ease);
}
.cta-back-to-top:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);}

@media (max-width:900px){
  .align-left .scene-inner,
  .align-right .scene-inner,
  .scene-mega .scene-inner,
  .scene-spec .scene-inner{
    padding-left:0;padding-right:0;
    background:rgba(250,248,248,0.92);backdrop-filter:blur(8px);
    border:1px solid var(--rule-2);
    padding:20px 22px;border-radius:var(--r-1);
  }
}

/* Scene 01 — Baseline */
.scene-baseline-block{display:flex;flex-direction:column;gap:18px;}

/* Scene 01 — Top/bottom split layout
   Pushes label+heading to top of viewport, body+stats to bottom,
   leaving the center band for the stadium image. */
.scene-baseline-split{
  align-items:stretch;
  padding:110px 5vw 60px;
}
.scene-baseline-split .scene-inner{
  width:100%;max-width:1640px;margin:0 auto;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:0;
}
.baseline-top{max-width:720px;display:flex;flex-direction:column;gap:18px;}
.baseline-bottom{max-width:720px;display:flex;flex-direction:column;gap:18px;}
/* Slightly tighter heading scale to keep clearance over the closed-dome frame */
.scene-baseline-split .scene-heading{font-size:clamp(34px,4.6vw,72px);}
.scene-label{
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);
  display:flex;align-items:center;gap:10px;
}
.scene-label::before{content:'';width:7px;height:7px;background:var(--red);}
.scene-label em{color:var(--red);font-style:normal;font-weight:700;}
.scene-heading{
  font-family:var(--f-sans);font-weight:500;font-size:clamp(38px,5.4vw,84px);line-height:1.02;letter-spacing:-0.025em;color:var(--text);
  max-width:18ch;
}
.scene-heading em{font-style:normal;color:var(--red);font-weight:500;}
.scene-body{font-size:17px;line-height:1.6;color:var(--text-2);max-width:50ch;}
.scene-body strong{color:var(--text);font-weight:600;}
.scene-body em{color:var(--red);font-style:normal;font-weight:500;}

/* Entrance animations per data-animation */
.scene[data-animation="fade-up"] .scene-inner > *,
.scene[data-animation="fade-up"] .scene-inner .scene-baseline-block > *{
  opacity:0;transform:translateY(28px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);
}
.scene[data-animation="fade-up"].is-active .scene-inner > *,
.scene[data-animation="fade-up"].is-active .scene-inner .scene-baseline-block > *{opacity:1;transform:translateY(0);}
.scene[data-animation="fade-up"].is-active .scene-inner .scene-baseline-block > *:nth-child(1){transition-delay:0.05s;}
.scene[data-animation="fade-up"].is-active .scene-inner .scene-baseline-block > *:nth-child(2){transition-delay:0.18s;}
.scene[data-animation="fade-up"].is-active .scene-inner .scene-baseline-block > *:nth-child(3){transition-delay:0.30s;}
.scene[data-animation="fade-up"].is-active .scene-inner .scene-baseline-block > *:nth-child(4){transition-delay:0.42s;}

/* Stagger for split layout: top first, bottom slightly delayed */
.scene-baseline-split[data-animation="fade-up"].is-active .scene-inner > *:nth-child(1){transition-delay:0.05s;}
.scene-baseline-split[data-animation="fade-up"].is-active .scene-inner > *:nth-child(2){transition-delay:0.22s;}

/* Scene 02 Power — compact card pushed right, popping over the stadium edge */
.scene-power-shift .scene-inner{
  padding-left:65vw;
  padding-right:2vw;
}
.scene-power-shift .ceiling-card{
  max-width:380px;
  padding:28px 32px;
}
.scene-power-shift .ceiling-card .ceiling-v{
  font-size:clamp(42px,5.6vw,72px);
}

/* Glassmorphism — applied to both Power (Card 02) and Uplink (Card 03)
   ceiling cards. Stadium reads softly through the blurred backdrop. */
.scene .ceiling-card{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.65);
  border-top:4px solid var(--danger);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 10px 36px rgba(17,9,10,0.10);
}
.scene .ceiling-card .ceiling-sub{color:var(--text);}
.scene .ceiling-card .ceiling-id{border-top-color:rgba(17,9,10,0.12);}

/* Scene 04 Zones — wider card so the 5-segment bar fits, dark glass */
.scene-mega .scene-inner{
  padding-left:30vw;
  padding-right:4vw;
}
.scene-mega .dark-mega-card{
  max-width:740px;
  padding:30px 36px;
}
/* Rebalance head: title gets more room, 223 a bit smaller */
.scene-mega .dark-mega-head{gap:24px;margin-bottom:26px;}
.scene-mega .dark-mega-title{font-size:clamp(22px,2.8vw,34px);max-width:none;}
.scene-mega .dark-mega-num{font-size:clamp(64px,7vw,104px);}
.scene-mega .dark-mega-bar{height:88px;}
/* Force min-width on the smallest segments so the AP numbers stay readable */
.scene-mega .dark-mega-seg.s-press,
.scene-mega .dark-mega-seg.s-tm{
  min-width:32px;flex-shrink:0;
}
.scene-mega .dark-mega-seg.s-press .lbl,
.scene-mega .dark-mega-seg.s-tm .lbl{display:none;}
.scene-mega .dark-mega-seg.s-press .sub,
.scene-mega .dark-mega-seg.s-tm .sub{display:none;}
.scene .dark-mega-card{
  background:linear-gradient(180deg,rgba(17,9,10,0.62) 0%,rgba(42,20,22,0.55) 55%,rgba(90,50,53,0.50) 100%);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 48px rgba(17,9,10,0.28);
}

/* Scene 05 Spec — light glassmorphism + fix invisible grid cells.
   Original .spec-card.is-active never matched in Mockup B (JS toggles
   .is-active on .scene, not .spec-card), so cells stayed at opacity 0
   and the lower half of the card read as empty white space. */
.scene .spec-card{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.65);
  border-top:4px solid var(--red);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 10px 36px rgba(17,9,10,0.10);
}
/* Fix opacity bug + preserve staggered reveal */
.scene.is-active .spec-card .spec-cell{
  opacity:1;transform:translateY(0);
}
.scene.is-active .spec-card .spec-cell:nth-child(1){transition-delay:0.20s;}
.scene.is-active .spec-card .spec-cell:nth-child(2){transition-delay:0.28s;}
.scene.is-active .spec-card .spec-cell:nth-child(3){transition-delay:0.36s;}
.scene.is-active .spec-card .spec-cell:nth-child(4){transition-delay:0.44s;}
/* The .spec-driver block uses a tan paper background — soften it on glass */
.scene .spec-card .spec-driver{background:rgba(245,232,224,0.55);}
.scene .spec-card .spec-cell .v code{background:rgba(17,9,10,0.06);}

.scene[data-animation="slide-from-right"] .scene-inner > *{
  opacity:0;transform:translateX(48px);transition:opacity 0.7s var(--ease),transform 0.8s var(--ease);
}
.scene[data-animation="slide-from-right"].is-active .scene-inner > *{opacity:1;transform:translateX(0);}

.scene[data-animation="slide-from-left"] .scene-inner > *{
  opacity:0;transform:translateX(-48px);transition:opacity 0.7s var(--ease),transform 0.8s var(--ease);
}
.scene[data-animation="slide-from-left"].is-active .scene-inner > *{opacity:1;transform:translateX(0);}

.scene[data-animation="fall-rise"] .scene-inner > *{
  opacity:0;transform:translateY(80px) scale(0.98);transition:opacity 0.55s var(--ease),transform 0.6s var(--ease);
}
.scene[data-animation="fall-rise"].is-active .scene-inner > *{opacity:1;transform:translateY(0) scale(1);}
.scene[data-animation="fall-rise"].is-leaving .scene-inner > *{opacity:0;transform:translateY(80px) scale(0.98);}

.scene[data-animation="scale-in"] .scene-inner > *{
  opacity:0;transform:scale(0.96) translateY(20px);transition:opacity 0.7s var(--ease),transform 0.8s var(--ease-2);
}
.scene[data-animation="scale-in"].is-active .scene-inner > *{opacity:1;transform:scale(1) translateY(0);}

.scene[data-animation="line-reveal"] .scene-inner > *{
  opacity:0;clip-path:inset(0 100% 0 0);transition:opacity 0.6s var(--ease),clip-path 0.95s var(--ease-2);
}
.scene[data-animation="line-reveal"].is-active .scene-inner > *{opacity:1;clip-path:inset(0 0 0 0);}
.scene[data-animation="line-reveal"].is-active .scene-inner > *:nth-child(1){transition-delay:0.05s;}
.scene[data-animation="line-reveal"].is-active .scene-inner > *:nth-child(2){transition-delay:0.22s;}
.scene[data-animation="line-reveal"].is-active .scene-inner > *:nth-child(3){transition-delay:0.42s;}

/* Stats baseline row inside scene */
.scene .baseline-stat-row{margin-top:28px;}

/* Cards inside scenes get a paper-tinted backdrop to legible
   (dark-mega-card excluded — its width is controlled in the Scene 04 block) */
.scene .ceiling-card,
.scene .spec-card{
  max-width:560px;
}

/* RESPONSIVE */
@media (max-width:768px){
  #scroll-container{height:650vh;}
  .scene{padding:90px 5vw 60px;}
}

@media (prefers-reduced-motion:reduce){
  .hero-standalone{clip-path:none !important;}
  .hero-word{opacity:1;transform:none;animation:none;}
  .marquee-text{animation:none !important;transform:none !important;}
  #scroll-container{height:auto;}
  .scene{position:relative;top:auto;opacity:1;min-height:auto;padding:60px 5vw;}
  .scene .scene-inner > *{opacity:1 !important;transform:none !important;clip-path:none !important;}
  #dark-overlay{display:none;}
}

/* ─── V2 only ──────────────────────────────────────────────────
   Card 05 Spec — contrast bumps for legibility on the glass card.
   Original spec-card uses var(--text-3) #626a73 (light gray-blue)
   which washes out against the translucent backdrop. */
.scene .spec-card .spec-eyebrow{color:var(--text);font-weight:800;}
.scene .spec-card .spec-sub{color:var(--text-2);}
.scene .spec-card .spec-sub em{color:var(--text);font-weight:600;}
.scene .spec-card .spec-mega-unit{color:var(--text);font-weight:700;}
.scene .spec-card .spec-cell .k{color:var(--text);font-weight:800;}