/* ============================================================
   IMERSÃO — abertura cinematográfica controlada pelo scroll
   (substitui o hero na variante /imersiva; carrega DEPOIS do style.css)
   ============================================================ */
:root { --im-gold:#E8CD9A; }

.imersao { height:320vh; position:relative; background:#000; }
.palco { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#000; isolation:isolate; z-index:1; }
/* modal aberto: some tudo que flutua sobre a cena (z-index do modal = 1000, mas mix-blend/sticky no mobile vazavam) */
.imersao.im-pausa .palco > *:not(.cena) { visibility:hidden; }
.cena { position:absolute; inset:-6%; width:112%; max-width:none; height:112%; object-fit:cover; object-position:center; will-change:transform,opacity,filter; }
#cena2,#cena3 { opacity:0; }

.palco .hero__nav { z-index:12; }

/* CENA 4 — o artista no palco (foto real de show): a câmera chega ao palco */
#cena4 { opacity:0; object-position:42% 38%; z-index:2; }
.im-credito { position:absolute; left:14px; bottom:10px; font-size:9px; letter-spacing:1px; color:rgba(255,255,255,.55); z-index:9; opacity:0; will-change:opacity; pointer-events:none; }
/* (seletor com .palco de propósito: esta regra vem ANTES de .beat no arquivo e precisa vencer a cascata) */
/* .beat.escuro{background:none} vem depois e empata em força — por isso .beat.beat--artista (3 classes) */
.palco .beat.beat--artista { justify-content:flex-end; padding-bottom:7vh; background:linear-gradient(0deg, rgba(3,4,16,.98) 0%, rgba(3,4,16,.9) 28%, rgba(3,4,16,.55) 46%, rgba(3,4,16,.15) 60%, transparent 72%); }
.palco .beat--artista .nome { font-size:clamp(40px,9vw,96px); }
@media (max-width:767px) { #cena4 { top:-10%; height:130%; object-position:44% 28%; } } /* amplia: cabeça no alto, texto sobre a parte escura */
/* desktop: retrato ocupa a metade direita; nome + botão na metade esquerda, nunca sobre o rosto */
@media (min-width:768px) {
  #cena4 { object-position:35% 40%; }
  /* desktop: o artista fica no centro-esquerda da foto → texto à direita */
  .palco .beat.beat--artista { align-items:flex-end; justify-content:center; text-align:right; padding-right:8vw; padding-bottom:0;
    background:linear-gradient(270deg, rgba(3,4,16,.88) 0%, rgba(3,4,16,.5) 38%, transparent 58%); }
  .palco .beat--artista h2 { max-width:44vw; }
}

.im-veu { position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(2,3,12,.1) 0%, rgba(2,3,12,.9) 100%); opacity:0; will-change:opacity; pointer-events:none; }
.im-vinheta { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 48%, rgba(3,4,16,.6) 100%); pointer-events:none; }

/* portas */
.porta { position:absolute; top:0; bottom:0; width:50.5%; background:linear-gradient(90deg,#05071a,#0a0e2e 60%,#0d1240); will-change:transform; z-index:5; box-shadow:0 0 60px rgba(0,0,0,.8); }
.porta.esq { left:0; transform:translateX(-102%); border-right:1px solid rgba(201,169,110,.35); }
.porta.dir { right:0; transform:translateX(102%); border-left:1px solid rgba(201,169,110,.35); }
.porta::after { content:"✦"; position:absolute; top:50%; font-size:14px; color:rgba(201,169,110,.55); transform:translateY(-50%); }
.porta.esq::after { right:18px; } .porta.dir::after { left:18px; }
.fresta { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:var(--im-gold); box-shadow:0 0 30px 8px rgba(232,205,154,.9), 0 0 120px 30px rgba(232,205,154,.45); opacity:0; will-change:opacity,transform; z-index:6; pointer-events:none; }
.flash { position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(255,240,210,.95), rgba(232,205,154,.5) 40%, transparent 70%); opacity:0; will-change:opacity; z-index:7; pointer-events:none; mix-blend-mode:screen; }

/* luz de palco */
.feixes { position:absolute; inset:0; opacity:0; will-change:opacity; pointer-events:none; mix-blend-mode:screen; z-index:3; }
.feixe { position:absolute; top:-12%; left:50%; width:22vw; max-width:160px; height:130%; margin-left:-11vw; transform-origin:50% 0; background:linear-gradient(180deg, rgba(232,205,154,.75), rgba(232,205,154,.18) 45%, transparent 85%); filter:blur(6px); will-change:transform; }
.feixe.b { background:linear-gradient(180deg, rgba(120,150,255,.55), rgba(120,150,255,.12) 45%, transparent 85%); }
.feixe.c { background:linear-gradient(180deg, rgba(255,120,120,.45), rgba(255,120,120,.1) 45%, transparent 85%); }

/* partículas */
.particulas { position:absolute; inset:0; opacity:0; will-change:opacity; pointer-events:none; z-index:3; overflow:hidden; }
.particulas i { position:absolute; bottom:-4%; width:5px; height:5px; border-radius:50%; background:var(--im-gold); box-shadow:0 0 8px 2px rgba(232,205,154,.7); opacity:0; animation:im-sobe linear infinite; }
@keyframes im-sobe { 0%{transform:translate(0,0) scale(.6); opacity:0} 12%{opacity:.9} 85%{opacity:.5} 100%{transform:translate(var(--dx),-110vh) scale(1.1); opacity:0} }

/* grão */
.grao { position:absolute; inset:-50%; width:200%; height:200%; opacity:.07; pointer-events:none; z-index:8; mix-blend-mode:overlay; animation:im-grao 1.2s steps(6) infinite; }
@keyframes im-grao { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(4%,4%)} 100%{transform:translate(0,0)} }

/* batidas de texto */
.beat { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; opacity:0; pointer-events:none; z-index:9;
  background:radial-gradient(ellipse 72% 40% at center, rgba(4,6,20,.58) 0%, rgba(4,6,20,.24) 52%, transparent 70%); will-change:opacity; }
.beat.escuro { background:none; }
.beat .im-eyebrow { font-size:12px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:var(--im-gold); text-shadow:0 2px 14px rgba(0,0,0,.9); margin-bottom:14px; }
.beat h2 { font-family:var(--ff-display); font-weight:600; font-size:clamp(36px,7.4vw,76px); line-height:1.06; letter-spacing:-.02em; color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.85); max-width:14ch; }
.beat h2 .l { display:block; will-change:transform,opacity; }
.beat h2 em { font-style:italic; color:var(--im-gold); }
.beat p { margin-top:14px; font-size:clamp(14px,2.4vw,18px); color:rgba(255,255,255,.88); text-shadow:0 2px 12px rgba(0,0,0,.9); }
.beat .nome { font-size:clamp(44px,10vw,110px); letter-spacing:-.01em; text-shadow:0 0 40px rgba(232,205,154,.55), 0 4px 30px rgba(0,0,0,.9); }
.beat .btn { margin-top:26px; pointer-events:auto; box-shadow:0 8px 40px rgba(201,169,110,.45); }

.im-dica { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); padding:10px 18px; border-radius:999px; background:rgba(5,7,26,.72); border:1px solid rgba(232,205,154,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); white-space:nowrap; font-size:11px; font-weight:700; letter-spacing:3px; color:var(--im-gold); animation:im-pulsa 2s ease-in-out infinite; z-index:9; }
@keyframes im-pulsa { 0%,100%{opacity:.55;transform:translateY(0)} 50%{opacity:1;transform:translateY(6px)} }

.caps { position:absolute; right:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:9; }
.caps i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35); transition:transform .3s, background .3s; }
.caps i.on { background:var(--im-gold); transform:scale(1.6); box-shadow:0 0 10px rgba(232,205,154,.8); }
@media (max-width:767px) { .caps { display:none; } } /* Rafa: no celular as bolinhas atrapalham */

@media (prefers-reduced-motion:reduce) {
  .imersao { height:auto; } .palco { position:relative; height:auto; }
  .beat { position:relative; opacity:1 !important; padding:48px 24px; }
  .cena,.im-veu,.im-dica,.porta,.fresta,.flash,.feixes,.particulas,.grao,.caps { display:none; }
}