/* =====================================================================
   HUNGRIA — SITE OFICIAL
   Sistema visual: cinematográfico, palco/rua/Brasília. Preto, branco e
   cinza como base; vermelho como LUZ/assinatura (pontual). Sem dourado.
   Profundidade por fotografia, composição, tipografia e movimento.
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   TIPOGRAFIA — sistema do somacorps.com: Montserrat como família única
   (800 nos títulos, tracking negativo ~-0.03em, line-height 0.9) e
   Space Mono só nas etiquetas técnicas pequenas (caixa-alta, tracking +).
   Uma família só = harmonia; o contraste vem do PESO e do TAMANHO.
   ───────────────────────────────────────────────────────────────────── */

:root{
  /* ---- paleta ---- */
  --black:    #050505;
  --black-2:  #0D0D0D;
  --panel:    #111111;
  --white:    #F2F0EC;
  --gray:     #8A8985;
  --gray-line:#242424;              /* divisórias finas escuras */
  --red-deep: #7A1017;              /* vermelho escuro */
  --red:      #B51620;              /* vermelho de destaque */
  --white-70: rgba(242,240,236,.70);
  --white-45: rgba(242,240,236,.45);
  --white-14: rgba(242,240,236,.14);
  --white-08: rgba(242,240,236,.08);

  /* ---- tipografia ---- */
  --font-display: "Archivo Black", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1240px;
  --pad: clamp(22px, 4vw, 64px);

  /* curvas com peso — desaceleração buttery (expo-out), entrada/saída
     simétrica e micro-mola para lifts/hover (sem exagero de bounce) */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-io:    cubic-bezier(.85,0,.15,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--font-body); font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.lock{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--red); color:var(--white); }

.wrap{ width:min(100% - var(--pad)*2, var(--wrap)); margin-inline:auto; }
.center{ text-align:center; margin-top:clamp(40px,5vw,64px); }

.skip{ position:fixed; top:-60px; left:16px; z-index:300; background:var(--red); color:#fff;
  padding:10px 16px; border-radius:4px; transition:top .3s var(--e-out); }
.skip:focus{ top:14px; }

/* ---- display: Montserrat 800, caixa-alta, tracking negativo (padrão SOMA) ---- */
.h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.033em; line-height:.9; font-size:clamp(38px,6.2vw,92px); }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:2px; }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--red-deep); }

/* grão fotográfico + vinheta (texturas discretas, sem overlay pesado) */
.grain{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette{ position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, transparent 60%, rgba(0,0,0,.5) 100%); }

/* =====================================================================
   ATMOSFERA 3D — camada fixa e profunda atrás de tudo. Névoa cinematográfica
   MUITO sutil (nada de fumaça branca de "gaming"): tons quentes/frios bem
   escuros que deslizam devagar. Fica atrás do conteúdo (z-index 0) e as
   seções transparentes deixam ela "respirar". Nunca compete com o conteúdo.
   ===================================================================== */
.silkbg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:.6; }
.atmos{ display:none; }   /* substituído pelo Silk Background (WebGL) */

/* ===== GALERIA em grid P&B (aba de fotos) ===== */
.galgrid{ position:relative; z-index:10; display:flex; flex-wrap:nowrap; gap:2px;
  overflow-x:hidden; overflow-y:hidden; scrollbar-width:none; }
.galgrid::-webkit-scrollbar{ height:0; width:0; }
.galgrid__item{ margin:0; overflow:hidden; aspect-ratio:4/5; background:var(--black);
  flex:0 0 clamp(160px,16vw,290px); }
.galgrid__item img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.05) contrast(1.03); transition:filter .5s var(--e-out), transform .6s var(--e-out); }
.galgrid__item:hover img{ filter:saturate(1.12) contrast(1.06) brightness(1.06); transform:scale(1.04); }
.atmos__fog{ position:absolute; border-radius:50%; filter:blur(90px); mix-blend-mode:screen; will-change:transform; }
.atmos__fog--1{ width:72vw; height:72vw; left:-16vw; top:-12vh; opacity:.55;
  background:radial-gradient(circle, rgba(150,26,34,.95), transparent 70%); animation:fog1 46s ease-in-out infinite; }
.atmos__fog--2{ width:60vw; height:60vw; right:-12vw; top:34vh; opacity:.48;
  background:radial-gradient(circle, rgba(28,92,74,.9), transparent 70%); animation:fog2 58s ease-in-out infinite; }
.atmos__fog--3{ width:56vw; height:56vw; left:22vw; bottom:-22vh; opacity:.46;
  background:radial-gradient(circle, rgba(172,112,42,.85), transparent 72%); animation:fog3 52s ease-in-out infinite; }
@keyframes fog1{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(6vw,4vh,0) scale(1.12) } }
@keyframes fog2{ 0%,100%{ transform:translate3d(0,0,0) scale(1.05) } 50%{ transform:translate3d(-5vw,-3vh,0) scale(1) } }
@keyframes fog3{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(3vw,-5vh,0) scale(1.1) } }

/* ── OUÇA AGORA: player nativo do Spotify + CTAs (Spotify · YouTube) ── */
.oa__player{ margin-top:clamp(40px,5vw,72px); position:relative; border:1px solid var(--gray-line); border-radius:14px;
  background:linear-gradient(180deg,#0f0f0f,#080808); padding:clamp(12px,1.6vw,20px); box-shadow:0 40px 90px -50px rgba(0,0,0,.95); }
.oa__frame{ width:100%; border:0; border-radius:12px; display:block; }
.oa__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.5vw,44px); }
.mbtn{ display:inline-flex; align-items:center; gap:12px; padding:14px 26px; border-radius:100px; color:#fff;
  border:1px solid var(--white-14); background:rgba(255,255,255,.02);
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:14px;
  transition:border-color .4s var(--e-out), background-color .4s var(--e-out), transform .4s var(--e-out); }
.mbtn__ico{ display:inline-flex; width:20px; height:20px; }
.mbtn__ico svg{ width:100%; height:100%; fill:currentColor; }
.mbtn__arrow{ font-family:var(--font-body); font-weight:400; opacity:.55; transition:transform .4s var(--e-out), opacity .3s; }
.mbtn:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.05); transform:translateY(-2px); }
.mbtn:hover .mbtn__arrow{ transform:translateX(6px); opacity:1; }

/* ===== LANÇAMENTO EM DESTAQUE (clipe no topo) ===== */
.sec.drop{ padding-bottom:0; }
.drop + .sec{ padding-top:clamp(40px,5vw,64px); }   /* lançamento "puxa" a Música pra perto */
.drop__wrap{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,4vw,60px); align-items:center; }
.drop__media{ position:relative; }
.drop__play{ display:block; position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; padding:0; cursor:pointer;
  border:1px solid var(--white-14); border-radius:16px; background:#000; box-shadow:0 44px 100px -55px rgba(0,0,0,.95); }
.drop__play img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e-out), filter .5s var(--e-out); }
.drop__play::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(5,5,5,.35)); pointer-events:none; }
.drop__play:hover img{ transform:scale(1.05); filter:brightness(1.06); }
.drop__playico{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.drop__playico svg{ width:72px; height:72px; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); transition:transform .4s var(--e-out); }
.drop__playico circle{ fill:var(--red); }
.drop__play:hover .drop__playico svg{ transform:scale(1.12); }
.drop__frame{ width:100%; aspect-ratio:16/9; border:0; border-radius:16px; display:block; box-shadow:0 44px 100px -55px rgba(0,0,0,.95); }
.drop__selo{ color:var(--red); }
.drop__title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(44px,6.2vw,80px); line-height:.92; margin:14px 0 6px; }
.drop__credit{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(15px,1.7vw,20px); }
.drop__credit span{ color:var(--gray); font-weight:500; }
.drop__desc{ color:var(--gray); font-size:clamp(14px,1.1vw,16px); line-height:1.7; max-width:42ch; margin:16px 0 26px; }
@media (max-width:820px){
  .drop__wrap{ grid-template-columns:1fr; gap:22px; }
  .drop__media{ order:1; } .drop__info{ order:2; }
  .drop__playico svg{ width:60px; height:60px; }
}

/* =====================================================================
   INTRO
   ===================================================================== */
/* Preloader: cortina em tela cheia que sobe e revela o site (só o logo) */
.intro{ position:fixed; inset:0; z-index:200; background:var(--black);
  display:grid; place-content:center; justify-items:center;
  transition:opacity .7s ease; will-change:opacity; }
.intro.off{ opacity:0; pointer-events:none; }               /* cortina some por trás */
html:not(.js) .intro{ display:none; }
.intro__logo{ opacity:0; transform:translateY(24px); filter:blur(10px); will-change:transform; }
.intro.reveal-logo .intro__logo{ opacity:1; transform:none; filter:blur(0);
  transition:opacity .7s cubic-bezier(.44,0,.56,1) .25s, transform .7s cubic-bezier(.44,0,.56,1) .25s, filter .7s cubic-bezier(.44,0,.56,1) .25s; }
.intro__logo img{ height:clamp(40px,6vw,76px); width:auto; filter:brightness(0) invert(1); opacity:.96; }

/* HERO PRELOADER: quadro cicla imagens (wipe) e expande até virar o hero */
.hpre{ position:fixed; inset:0; z-index:150; background:var(--black); display:grid; place-items:center;
  opacity:0; visibility:hidden; }
.hpre.on{ opacity:1; visibility:visible; }
.hpre.done{ opacity:0; visibility:hidden; transition:opacity .5s ease; }
.hpre__frame{ position:relative; width:min(42vw,440px); height:min(52vh,540px); border-radius:16px;
  overflow:hidden; box-shadow:0 50px 120px -40px #000; will-change:width,height; }
.hpre__frame.expand{ width:100vw; height:100vh; border-radius:0;
  transition:width .8s cubic-bezier(.7,0,.2,1), height .8s cubic-bezier(.7,0,.2,1), border-radius .8s; }
.hpre__img{ position:absolute; inset:0; background-size:cover; background-position:center; clip-path:inset(0 100% 0 0); }
.hpre__img.show{ clip-path:inset(0 0 0 0); transition:clip-path .5s cubic-bezier(.7,0,.2,1); }
@media (prefers-reduced-motion:reduce){    /* o dono quer ver a abertura */
  .hpre__img.show{ transition-duration:.5s !important; }
  .hpre__frame.expand{ transition-duration:.8s !important; }
  .hpre.done{ transition-duration:.5s !important; }
}

/* =====================================================================
   CURSOR (desativado em toque / low-power)
   ===================================================================== */
.cur{ display:none !important; position:fixed; top:0; left:0; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  border:1px solid var(--white-45); pointer-events:none; z-index:190; opacity:0;
  transition:width .3s var(--e-out), height .3s var(--e-out), background-color .3s, border-color .3s, opacity .3s; }
.cur.on{ opacity:1; }
.cur.hov{ width:54px; height:54px; margin:-27px 0 0 -27px; background:rgba(181,22,32,.14); border-color:var(--red); }
html.no-cursor .cur{ display:none; }
@media (hover:none){ .cur{ display:none; } }

/* =====================================================================
   BOTÕES — principal vermelho profundo, secundário outline (cantos discretos)
   ===================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:4px; border:1px solid var(--red); background:var(--red); color:#fff;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:16px;
  cursor:pointer; transition:background-color .45s var(--e-out), transform .45s var(--e-out), box-shadow .45s var(--e-out); }
.btn:hover{ background:#c81a25; transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(181,22,32,.7); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--ghost{ background:transparent; color:var(--white); border-color:var(--white-45); box-shadow:none; }
.btn--ghost:hover{ background:rgba(242,240,236,.06); border-color:var(--white); transform:translateY(-2px); box-shadow:none; }

/* =====================================================================
   HEADER — minimalista, sem glass pesado
   ===================================================================== */
.hd{ position:fixed; top:0; left:0; right:0; z-index:120; display:flex; align-items:center; gap:26px;
  padding:22px var(--pad); transition:background-color .4s var(--e-out), padding .4s var(--e-out), border-color .4s; border-bottom:1px solid transparent; }
.hd.stuck{ background:rgba(5,5,5,.78); backdrop-filter:blur(8px); border-bottom-color:var(--white-08); padding-top:14px; padding-bottom:14px; }
.hd__logo{ display:inline-flex; }
.hd__logo img{ height:20px; width:auto; filter:brightness(0) invert(1); opacity:.92; transition:opacity .35s var(--e-out); }
.hd__logo:hover img{ opacity:1; }
.hd__nav{ display:flex; gap:28px; margin-left:auto; }
.hd__nav a{ font-size:13px; letter-spacing:.02em; color:var(--white-70); position:relative; padding:4px 0; transition:color .3s; }
.hd__nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--red); transition:width .35s var(--e-out); }
.hd__nav a:hover{ color:var(--white); } .hd__nav a:hover::after, .hd__nav a.on::after{ width:100%; }
.hd__cta{ flex:none; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:15px;
  padding:9px 20px; border:1px solid var(--white-45); border-radius:4px; transition:border-color .3s, background-color .3s, color .3s; }
.hd__cta:hover{ border-color:var(--red); background:var(--red); color:#fff; }
.hd__burger{ display:none; width:40px; height:40px; background:none; border:0; cursor:pointer; padding:0; margin-left:auto; }
.hd__burger span{ display:block; width:24px; height:1.5px; background:var(--white); margin:5px auto; transition:transform .4s var(--e-io); }
.hd__burger.open span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.hd__burger.open span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

.mnav{ position:fixed; inset:0; z-index:110; background:var(--black-2);
  display:flex; flex-direction:column; justify-content:center; gap:34px; padding:96px var(--pad) 40px;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--e-io); }
.mnav.open{ clip-path:inset(0 0 0 0); }
.mnav__close{ position:absolute; top:24px; right:var(--pad); background:none; border:0; cursor:pointer; font-size:13px; color:var(--white-70); }
.mnav nav{ display:flex; flex-direction:column; gap:6px; }
.mnav nav a{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(34px,9vw,72px); line-height:1.06; display:flex; align-items:baseline; gap:16px; color:var(--white);
  opacity:0; transform:translateY(24px); }
.mnav nav a i{ font-family:var(--font-body); font-size:12px; font-style:normal; color:var(--red); font-weight:600; }
.mnav.open nav a{ animation:mup .7s var(--e-out) forwards; }
.mnav.open nav a:nth-child(1){animation-delay:.14s}.mnav.open nav a:nth-child(2){animation-delay:.2s}
.mnav.open nav a:nth-child(3){animation-delay:.26s}.mnav.open nav a:nth-child(4){animation-delay:.32s}
.mnav.open nav a:nth-child(5){animation-delay:.38s}
@keyframes mup{ to{ opacity:1; transform:none } }
.mnav nav a:hover{ color:var(--red); }
.mnav__social{ display:flex; flex-wrap:wrap; gap:16px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); }
.mnav__social a:hover{ color:var(--white); }

/* =====================================================================
   MORPHED MENU — pílula (canto direito) que faz MORPH num painel com os
   links. Substitui a nav antiga (que fica oculta no DOM pro main.js rodar).
   ===================================================================== */
.hd__nav, .hd__cta, .hd__burger{ display:none !important; }
/* MorphedMenu — uma única "surface" preta que faz morph (pílula -> cartão) */
.mmenu{ position:relative; margin-left:auto; z-index:6; width:118px; height:44px; }
.mmenu__surface{ position:absolute; top:0; right:0; width:118px; overflow:hidden;
  background:rgba(16,16,18,.72); -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid var(--white-14); border-radius:100px; box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
  transition:width .5s var(--e-morph, cubic-bezier(.22,1,.36,1)), border-radius .5s var(--e-morph, cubic-bezier(.22,1,.36,1)),
    background-color .4s var(--e-out), box-shadow .5s var(--e-out); }
.mmenu.open .mmenu__surface{ width:min(288px,84vw); border-radius:22px; background:rgba(14,14,16,.94);
  box-shadow:0 44px 90px -42px rgba(0,0,0,.95); }
.mmenu__btn{ display:flex; align-items:center; justify-content:space-between; gap:11px; width:100%; height:44px; padding:0 20px;
  cursor:pointer; background:none; border:0; color:#fff;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:13px; }
.mmenu__ico{ position:relative; width:16px; height:12px; flex:none; }
.mmenu__ico::before, .mmenu__ico::after{ content:""; position:absolute; left:0; right:0; height:1.6px; background:#fff; border-radius:2px;
  transition:transform .4s var(--e-out), top .4s var(--e-out); }
.mmenu__ico::before{ top:2px; } .mmenu__ico::after{ top:8px; }
.mmenu.open .mmenu__ico::before{ top:5px; transform:rotate(45deg); }
.mmenu.open .mmenu__ico::after{ top:5px; transform:rotate(-45deg); }
.mmenu__panel{ overflow:hidden; max-height:0; opacity:0; pointer-events:none;
  transition:max-height .5s var(--e-morph, cubic-bezier(.22,1,.36,1)), opacity .3s var(--e-out); }
.mmenu.open .mmenu__panel{ max-height:min(70vh,540px); opacity:1; pointer-events:auto; }
.mmenu__panel nav{ display:flex; flex-direction:column; padding:6px 0 8px; border-top:1px solid rgba(255,255,255,.07); }
.mmenu__panel nav a{ display:flex; align-items:baseline; gap:12px; padding:12px 22px; color:var(--white-70);
  font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:16px;
  transition:color .3s, background-color .3s, padding-left .3s; }
.mmenu__panel nav a small{ font-family:var(--font-mono); font-size:10px; color:var(--red); font-weight:400; letter-spacing:.1em; }
.mmenu__panel nav a:hover{ color:#fff; background:rgba(255,255,255,.04); padding-left:26px; }
.mmenu__cta{ display:block; margin:6px 16px 16px; text-align:center; padding:13px; border-radius:100px;
  background:var(--red-deep); color:#fff; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:12px; transition:background-color .3s var(--e-out); }
.mmenu__cta:hover{ background:var(--red); }
@media (prefers-reduced-motion: reduce){ .mmenu__surface, .mmenu__panel, .mmenu__ico::before, .mmenu__ico::after{ transition:none; } }

/* BLUR REVEAL (estilo ScrollText): os cabeçalhos de seção entram DESFOCADOS e
   ficam nítidos ao aparecer no scroll. Reaproveita o .reveal existente. */
.head.reveal{ filter:blur(12px);
  transition:filter .9s var(--e-out), opacity .8s var(--e-out), transform .8s var(--e-out); }
.head.reveal.on{ filter:blur(0); }
@media (prefers-reduced-motion: reduce){ .head.reveal{ filter:none !important; } }

/* =====================================================================
   HERO — cena em camadas
   ===================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden;
  padding:130px var(--pad) clamp(56px,8vh,110px); }
.hero__stage{ position:absolute; inset:0; z-index:0; }
.hero__layer{ position:absolute; inset:-6%; will-change:transform; }
.hero__photo img, .hero__photo video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 34%; transition:opacity .9s var(--e-out); }
.hero__photo video{ opacity:0; } /* foto aparece enquanto o vídeo não toca */
/* quando o vídeo REALMENTE começa a tocar, o JS marca .show-video aqui:
   a regra abaixo é mais específica que a de cima, então vence sem brigar. */
.hero__photo.show-video video{ opacity:1; }
.hero__photo.show-video img{ opacity:0; }
/* cor/zoom SÓ na foto: aplicar filter/transform no <video> pode travar o
   frame (tela preta) em certas GPUs/navegadores */
.hero__photo img{ filter:contrast(1.05) saturate(1.02); }
.js .hero__photo img{ transform:scale(1.08); }
.go .hero__photo img{ animation:heroZoom 12s var(--e-out) forwards; } /* aproximação MUITO lenta */
@keyframes heroZoom{ to{ transform:scale(1.14) } }
/* Hero Video Reveal: o palco (vídeo + tratamento) abre de um retângulo
   central e expande até preencher — no estilo do componente do Framer.
   Começa logo depois que a cortina do preloader sobe. */
.js .hero__stage{ clip-path:inset(24% 30% round 22px); opacity:0; }
.go .hero__stage{ animation:heroReveal 1.5s cubic-bezier(.7,0,.2,1) .35s forwards; }
@keyframes heroReveal{
  0%{ clip-path:inset(24% 30% round 22px); opacity:0; }
  28%{ opacity:1; }
  100%{ clip-path:inset(0% 0% round 0px); opacity:1; } }
.hero__fog{ background:
  radial-gradient(60% 40% at 30% 80%, rgba(0,0,0,.55), transparent 70%),
  radial-gradient(50% 40% at 80% 60%, rgba(0,0,0,.4), transparent 70%); opacity:.7; }
/* luz de refletor fora da tela (reage ao movimento via JS) */
.hero__light{ background:
  radial-gradient(45% 55% at var(--lx,32%) var(--ly,26%), rgba(181,22,32,.28), transparent 60%),
  radial-gradient(40% 50% at 78% 18%, rgba(242,240,236,.14), transparent 62%);
  mix-blend-mode:screen; opacity:.9; }
.hero__dust{ position:absolute; inset:0; width:100%; height:100%; }
.hero__grad{ position:absolute; inset:0;
  background:linear-gradient(to top, var(--black) 3%, rgba(5,5,5,.55) 34%, transparent 62%),
             linear-gradient(105deg, rgba(5,5,5,.55), transparent 45%); }
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto; }
/* botão de play só aparece se o navegador bloquear o autoplay — um toque
   (gesto do usuário) sempre libera o vídeo; some quando ele tocar */
.hero__play{ position:absolute; right:var(--pad); bottom:24px; z-index:3; width:58px; height:58px; border-radius:50%;
  border:1px solid var(--white-45); background:rgba(5,5,5,.38); backdrop-filter:blur(6px); color:var(--white);
  display:grid; place-content:center; cursor:pointer; padding:0;
  opacity:0; pointer-events:none; transform:scale(.9);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), border-color .3s, background-color .3s; }
.hero__play.show{ opacity:1; pointer-events:auto; transform:none; }
.hero__play:hover{ border-color:var(--red); background:var(--red); }
.hero__play__ico{ width:0; height:0; border-left:17px solid currentColor; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:4px; }
.hero__kicker{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--white-70); margin-bottom:18px; }
.hero__title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.045em;
  line-height:.86; font-size:clamp(64px,15vw,240px); }
.hero__title span{ display:inline-block; }
.hero__sub{ max-width:42ch; color:var(--white-70); font-size:clamp(15px,1.5vw,19px); font-weight:400; margin:20px 0 0; }
.hero__chip{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; padding:9px 16px 9px 12px;
  border:1px solid var(--white-14); border-radius:4px; background:rgba(5,5,5,.4); backdrop-filter:blur(4px);
  font-size:12px; letter-spacing:.02em; color:var(--white); transition:border-color .3s; }
.hero__chip:hover{ border-color:var(--red); }
.hero__chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(181,22,32,.6); animation:pulse 2.6s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(181,22,32,0) } 100%{ box-shadow:0 0 0 0 rgba(181,22,32,0) } }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
/* entrada em profundidade — stagger discreto (JS adiciona .go no body) */
.js .hero__inner > *{ opacity:0; transform:translateY(26px); }
.go .hero__kicker{ animation:hIn .9s var(--e-out) .35s forwards; }
.go .hero__title{ animation:hIn 1.1s var(--e-out) .48s forwards; }
.go .hero__sub{ animation:hIn 1s var(--e-out) .64s forwards; }
.go .hero__chip{ animation:hIn 1s var(--e-out) .76s forwards; }
.go .hero__cta{ animation:hIn 1s var(--e-out) .88s forwards; }
@keyframes hIn{ to{ opacity:1; transform:none } }
.hero__scroll{ position:absolute; left:50%; bottom:22px; translate:-50% 0; width:1px; height:50px; background:var(--white-14); overflow:hidden; z-index:2; }
.hero__scroll span{ position:absolute; inset:0; background:var(--red); animation:scrollcue 1.9s var(--e-io) infinite; }
@keyframes scrollcue{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(120%) } }

/* --- Capa centralizada (só título + botão, estilo pôster) --------------- */
.hero--center{ align-items:center; text-align:center; padding-block:clamp(120px,18vh,180px); }
.hero__inner--center{ display:flex; flex-direction:column; align-items:center; transform:translateY(16vh); }
.hero--center .hero__title{ font-size:clamp(56px,13vw,190px); }
/* botão VER AGENDA em pílula com contorno (estilo "O Embaixador" / Gustavo Lima) */
.hero__agenda{ display:inline-flex; align-items:center; justify-content:center; margin-top:0;
  padding:17px 46px; border-radius:999px; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; font-size:14px; color:#fff;
  background:rgba(12,12,14,.3); border:1px solid var(--white-45); backdrop-filter:blur(5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16); cursor:pointer;
  transition:background-color .35s var(--e-out), border-color .35s var(--e-out), transform .35s var(--e-out); }
.hero__agenda:hover{ background:rgba(255,255,255,.13); border-color:#fff; transform:translateY(-2px); }
.go .hero__agenda{ animation:hIn 1s var(--e-out) .72s forwards; }
/* legenda do "grande hit": ©ano · mini-vídeo em pílula · rótulo */
.hero__reel{ position:absolute; left:50%; bottom:clamp(22px,4vh,46px); translate:-50% 0; z-index:3;
  display:inline-flex; align-items:center; gap:12px; color:#fff;
  font-family:"Inter",var(--font-body); font-weight:600; font-size:14px; }
.hero__reel__yr{ opacity:.9; }
.hero__reel__pill{ display:inline-block; width:88px; height:30px; border-radius:16px; overflow:hidden;
  border:1px solid var(--white-45); box-shadow:0 8px 20px -10px rgba(0,0,0,.8); }
.hero__reel__pill video{ width:100%; height:100%; object-fit:cover; display:block; }
.js .hero__reel{ opacity:0; }
.go .hero__reel{ animation:hIn 1s var(--e-out) 1s forwards; }

/* =====================================================================
   TICKER
   ===================================================================== */
.tk{ border-block:1px solid var(--gray-line); overflow:hidden; padding:15px 0; background:var(--black-2); position:relative; z-index:10; }
.tk__row{ display:flex; width:max-content; animation:marq 48s linear infinite; }
.tk:hover .tk__row{ animation-play-state:paused; }
.tk__row span{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0;
  font-size:clamp(18px,2.4vw,30px); padding:0 24px; display:flex; align-items:center; gap:24px; color:var(--gray); }
.tk__row span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--red-deep); }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* =====================================================================
   SEÇÕES
   ===================================================================== */
.sec{ position:relative; z-index:10; padding:clamp(76px,9vw,150px) 0; }
.head{ max-width:760px; margin-bottom:clamp(40px,5vw,66px); }
/* etiquetas técnicas em Space Mono (mesmo papel que no SOMA) */
.tag{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-bottom:18px; }
.head__d{ color:var(--white-70); margin-top:16px; max-width:52ch; }
.sub{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0;
  font-size:clamp(22px,2.6vw,34px); margin:clamp(52px,6vw,84px) 0 26px; padding-bottom:14px; border-bottom:1px solid var(--gray-line); }

/* =====================================================================
   OUÇA AGORA — player em ambiente escuro (equipamento numa sala)
   ===================================================================== */
.stagebox{ position:relative; padding:clamp(20px,3vw,44px); border-radius:6px;
  background:linear-gradient(180deg, #0f0f0f, #070707); border:1px solid var(--gray-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 40px 90px -50px rgba(0,0,0,.95); }
.stagebox__glow{ position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 120%, rgba(122,16,23,.35), transparent 70%); }
.stagebox__player{ position:relative; z-index:1; }
.stagebox__player iframe{ width:100%; border:0; border-radius:8px; display:block; }
.stagebox__list{ display:grid; gap:12px; }
.stagebox__shadow{ position:absolute; left:8%; right:8%; bottom:-18px; height:40px; z-index:0;
  background:radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.7), transparent 75%); filter:blur(6px); }

.plats{ display:flex; flex-wrap:wrap; gap:0 clamp(16px,2vw,30px); margin-top:26px; padding-top:20px; border-top:1px solid var(--gray-line); }
.plats a{ font-size:13px; letter-spacing:.04em; color:var(--gray); padding:6px 0; transition:color .3s; }
.plats a:hover{ color:var(--white); }

/* =====================================================================
   DISCOGRAFIA — CardDeck (leque de capas que se abre em arco)
   Layout do leque é calculado no JS (offset/rotação/escala por card);
   o hover levanta a capa e afasta as vizinhas.
   ===================================================================== */
.fandeck{ position:relative; height:clamp(400px,48vw,600px); display:flex; align-items:center; justify-content:center; }
/* só `transform` na transição — animar box-shadow força repaint e era a
   causa principal do travamento no leque */
.fancard{ position:absolute; width:clamp(150px,17vw,224px); aspect-ratio:1; border-radius:4px; cursor:pointer;
  transform-origin:bottom center; transition:transform .42s var(--e-out); will-change:transform; backface-visibility:hidden;
  background:var(--panel); box-shadow:0 30px 60px -30px rgba(0,0,0,.95); }
/* vinil escondido atrás da capa; no hover desliza pra fora à direita girando
   (mola suave — curva --e-spring dá vida ao deslize, sem bounce exagerado) */
.fancard__disc{ position:absolute; inset:0; z-index:1; border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.09), transparent 55%),
    repeating-radial-gradient(circle, #0d0d11 0 1.4px, #1a1a22 1.4px 2.8px, #0d0d11 2.8px 4.2px);
  box-shadow:0 20px 38px -16px rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,255,255,.05), inset 0 0 34px rgba(0,0,0,.9);
  transform:rotate(-40deg); transition:transform .6s var(--e-spring); will-change:transform; }
.fancard__label{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:32%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.14); box-shadow:0 0 0 4px #0d0d11, 0 5px 12px rgba(0,0,0,.55); }
.fancard__label img{ width:100%; height:100%; object-fit:cover; display:block; }
.fancard__cover{ position:absolute; inset:0; z-index:2; overflow:hidden; border-radius:4px;
  transform-origin:center; transition:transform .44s var(--e-out); will-change:transform; }
.fancard__cover img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.12) contrast(1.03); pointer-events:none; }
/* reflexo sutil (branco com toque de vermelho) que segue o cursor */
.fancard__sheen{ position:absolute; inset:0; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(242,240,236,.3), rgba(181,22,32,.12) 26%, transparent 54%);
  transition:opacity .4s var(--e-out); }
.fancard.is-hover .fancard__sheen{ opacity:1; }
.fancard.is-hover .fancard__cover{ transform:rotate(-3deg) scale(1.03); }
.fancard.is-hover .fancard__disc{ transform:translateX(94%) translateY(-5%) rotate(14deg); transition:transform .72s var(--e-spring); }
/* entrada em cascata: a posição/rotação vem do JS (layoutFan), aqui só o
   fade — animar transform colidiria com o transform inline do leque */
.js .fancard{ opacity:0; }
.js .fandeck.on .fancard{ animation:cardIn .9s var(--e-out) both; animation-delay:calc(var(--i,0)*80ms + 140ms); }
@keyframes cardIn{ from{ opacity:0 } to{ opacity:1 } }
.fancard__cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px;
  background:linear-gradient(transparent, rgba(0,0,0,.9)); opacity:0; transform:translateY(6px); transition:opacity .4s var(--e-out), transform .4s var(--e-out); }
.fancard.is-hover .fancard__cap{ opacity:1; transform:none; }
.fancard__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0; font-size:15px; line-height:1; }
.fancard__sub{ font-size:11px; letter-spacing:.06em; color:var(--white-70); margin-top:4px; }
.fandeck__hint{ position:absolute; bottom:-2px; left:50%; translate:-50% 0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); }
/* clique: o disco "sai" do encarte antes de abrir o player */
.fancard.is-ejecting{ z-index:400 !important; }
.fancard.is-ejecting .fancard__disc{ transform:translateX(152%) translateY(-8%) rotate(400deg) !important; transition:transform .9s cubic-bezier(.22,.61,.36,1) !important; }
.fancard.is-ejecting .fancard__cover{ transform:rotate(-3deg) scale(1.03); }
.fancard.is-ejecting .fancard__cap{ opacity:1; transform:none; }

/* =====================================================================
   PLAYER "pílula" — réplica do componente Framer (Player)
   arte circular no anel de vidro · título · onda sonora · play/pause
   ===================================================================== */
.splayers{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap:16px; margin-top:clamp(26px,3.5vw,40px); }
/* editorial (não dashboard/glass): radius discreto, capa QUADRADA como um
   objeto físico, fundo escuro muito sutil, fio fino. */
.splayer{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:88px; padding:14px 18px; border-radius:4px; overflow:hidden; cursor:pointer; opacity:.92;
  border:1px solid var(--gray-line); background:rgba(255,255,255,.02);
  transition:opacity .4s var(--e-out), border-color .4s var(--e-out), background-color .4s var(--e-out), transform .35s var(--e-out);
  transform-style:preserve-3d; will-change:transform; }
.splayers{ perspective:1100px; }
.splayer:hover, .splayer:focus-visible{ opacity:1; outline:none; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04); }
.splayer__info{ display:flex; align-items:center; gap:16px; min-width:0; }
.splayer__art{ position:relative; flex:none; width:56px; height:56px; border-radius:3px;
  overflow:hidden; background:var(--panel); box-shadow:0 10px 22px -12px rgba(0,0,0,.85); }
.splayer__art img{ width:100%; height:100%; border-radius:0; object-fit:cover; }
.splayer.is-playing .splayer__art img{ animation:splayerPulse 1.1s var(--e-io) infinite alternate; }
@keyframes splayerPulse{ from{ transform:scale(1) } to{ transform:scale(1.1) } }
.splayer__meta{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.splayer__title{ font-family:"Inter",var(--font-body); font-weight:600; font-size:15px; letter-spacing:0; color:#fff;
  line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.splayer__sub{ display:flex; align-items:center; gap:7px; font-family:"Inter",var(--font-body); font-weight:400;
  font-size:12px; line-height:1; color:rgb(126,122,119); white-space:nowrap; }
.splayer__sub span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.splayer__right{ display:flex; align-items:center; gap:14px; flex:none; }
.splayer__wave{ display:flex; align-items:center; gap:3px; height:30px; }
.splayer__wave i{ display:block; width:3px; border-radius:2px; background:rgba(255,255,255,.5); height:8px; }
.splayer__wave i:nth-child(2n){ height:16px } .splayer__wave i:nth-child(3n){ height:24px }
.splayer__wave i:nth-child(4n){ height:11px } .splayer__wave i:nth-child(5n){ height:28px }
.splayer__wave i:nth-child(7n){ height:6px }
.splayer:hover .splayer__wave i, .splayer.is-playing .splayer__wave i{
  animation:splayerEq .95s var(--e-io) infinite alternate; animation-delay:calc(var(--i) * -.085s); }
@keyframes splayerEq{ 0%{ height:6px } 100%{ height:28px } }
.splayer__btn{ position:relative; flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  cursor:pointer; color:#fff; border:1px solid rgba(255,251,246,.2); background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px); box-shadow:inset 0 1px 1px rgba(255,255,255,.18);
  transition:background-color .3s, transform .18s var(--e-out); }
.splayer__btn:hover{ background:rgba(255,255,255,.13); }
.splayer__btn:active{ transform:scale(.93); }
.splayer__btn svg{ width:13px; height:15px; display:block; }
.splayer__btn .ico-pause{ display:none; }
.splayer.is-playing .splayer__btn .ico-play{ display:none; }
.splayer.is-playing .splayer__btn .ico-pause{ display:block; }
@media (max-width:520px){
  .splayer__wave{ display:none; }
  .splayer__art{ width:52px; height:52px; } .splayer__art img{ width:36px; height:36px; }
}

/* grids simples (clipes) */
.grid{ display:grid; gap:clamp(16px,2vw,26px); }
.grid--wide{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.card{ cursor:pointer; }
.card__ph{ position:relative; overflow:hidden; border-radius:5px; background:var(--panel); }
.grid--wide .card__ph{ aspect-ratio:16/9; }
.card__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e-out), filter .5s; }
.card:hover .card__ph img{ transform:scale(1.05); filter:grayscale(.4); }
.card__play{ position:absolute; left:50%; top:50%; translate:-50% -50%; width:56px; height:56px; border-radius:50%;
  background:var(--red); color:#fff; display:grid; place-content:center; opacity:0; transform:translate(-50%,-50%) scale(.85);
  transition:opacity .35s var(--e-out), transform .5s var(--e-out); }
.card:hover .card__play{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.card__play::before{ content:""; border-left:13px solid currentColor; border-block:8px solid transparent; margin-left:3px; }
.card__name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:18px; margin-top:14px; }
.card__meta{ font-size:12px; letter-spacing:.04em; color:var(--gray); margin-top:3px; }

/* =====================================================================
   DO PALCO PRO BRASIL — foto vazando + camadas
   ===================================================================== */
.feat{ position:relative; z-index:10; display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:clamp(24px,5vw,80px); padding:clamp(70px,10vw,150px) 0; overflow:hidden; }
.feat__media{ position:relative; height:clamp(420px,60vw,760px); }
/* a foto começa colada na borda esquerda da tela e vaza pra cima/baixo */
.feat__photo{ position:absolute; top:-8%; bottom:-8%; left:calc(50% - 50vw); right:-4%; overflow:hidden; border-radius:0 6px 6px 0; will-change:transform; }
.feat__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:grayscale(.2) contrast(1.05); }
.feat__glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 90% 30%, rgba(122,16,23,.3), transparent 65%); mix-blend-mode:screen; }
.feat__body{ position:relative; z-index:2; padding-right:var(--pad); padding-left:clamp(20px,3vw,40px); }
.feat__title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  line-height:.9; font-size:clamp(40px,6vw,92px); }
.feat__text{ color:var(--white-70); margin:22px 0 32px; max-width:42ch; font-size:17px; }

/* =====================================================================
   TURNÊ — lista editorial, divisórias finas, vermelho pontual
   ===================================================================== */
.dates{ border-top:1px solid var(--gray-line); }
.dates__row{ position:relative; display:grid; grid-template-columns:150px 1fr; align-items:center; gap:24px;
  padding:26px 18px; border-bottom:1px solid var(--gray-line);
  transition:background-color .5s var(--e-out), padding-left .5s var(--e-out), box-shadow .5s var(--e-out); }
.dates__row::before{ content:""; position:absolute; left:0; top:18%; bottom:18%; width:2px; background:var(--red); transform:scaleY(0); transform-origin:center; transition:transform .5s var(--e-out); }
.dates__row:hover{ background:linear-gradient(90deg, rgba(122,16,23,.12), transparent 60%); padding-left:28px; box-shadow:inset 0 0 40px -20px rgba(181,22,32,.5); }
.dates__row:hover::before{ transform:scaleY(1); }
.dates__d{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:24px; letter-spacing:0; }
.dates__city{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(20px,2.4vw,30px); line-height:1.04; }
.dates__uf{ color:var(--red); }
.dates__venue{ font-size:13px; letter-spacing:.02em; color:var(--gray); margin-top:5px; }
.dates__tag{ font-family:var(--font-body); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--white-70);
  border:1px solid var(--white-14); border-radius:3px; padding:10px 16px; white-space:nowrap; transition:border-color .3s, background-color .3s, color .3s; }
a.dates__tag{ color:#fff; background:var(--red-deep); border-color:var(--red-deep); }
a.dates__tag:hover{ background:var(--red); border-color:var(--red); transform:translateY(-1px); }
.dates__note{ margin-top:30px; color:var(--gray); font-size:14px; }
.dates__note a{ color:var(--white); border-bottom:1px solid var(--red); }
.dates__empty{ padding:40px 0; color:var(--gray); }
.dates__d small{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); font-weight:400; margin-top:4px; }

/* ---- Reveal "painel de embarque": cada linha CAI como um flap 3D, escalonada.
       A data desliza da esquerda e dá um flash vermelho ao assentar. ---- */
.dates{ perspective:1500px; }
.js .dates__row.reveal{ opacity:0; transform:rotateX(-72deg) translateY(10px); transform-origin:top center;
  backface-visibility:hidden; will-change:transform, opacity;
  transition:opacity .5s var(--e-out), transform .92s var(--e-out); transition-delay:var(--d,0ms); }
.js .dates__row.reveal.on{ opacity:1; transform:rotateX(0deg) translateY(0); }
.js .dates__row.reveal .dates__d{ opacity:0; transform:translateX(-16px); color:var(--red);
  transition:opacity .5s var(--e-out), transform .7s var(--e-out), color 1s var(--e-out);
  transition-delay:calc(var(--d,0ms) + 150ms); }
.js .dates__row.reveal.on .dates__d{ opacity:1; transform:none; color:inherit; }
/* fininha linha vermelha varre a base da linha ao assentar (temático de painel) */
.js .dates__row.reveal::after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:2px;
  background:linear-gradient(90deg, var(--red), rgba(181,22,32,0)); transform:scaleX(0); transform-origin:left; opacity:0; }
.js .dates__row.reveal.on::after{ transform:scaleX(1); opacity:.9;
  transition:transform .8s var(--e-out), opacity .8s var(--e-out); transition-delay:calc(var(--d,0ms) + 300ms); }

/* --- PÁGINA AGENDA (agenda.html) --------------------------------------- */
.agenda-top{ position:relative; z-index:10; padding:clamp(130px,17vh,190px) 0 clamp(30px,4vw,52px); }
.agenda-top__back{ display:block; width:max-content; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray); margin-bottom:26px; transition:color .3s; }
.agenda-top__back:hover{ color:var(--white); }
.agenda-top__title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.04em;
  line-height:.9; font-size:clamp(56px,11vw,150px); }
.agenda-top__sub{ color:var(--white-70); margin-top:18px; max-width:46ch; font-size:clamp(15px,1.5vw,18px); }
.sec--agenda{ padding-top:0; }

/* =====================================================================
   TRAJETÓRIA — 3 tempos (início · meio · agora), estilo editorial.
   Fontes iguais à referência: Archivo Black (títulos/números) + Caveat.
   ===================================================================== */
.jrn__top{ display:grid; grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px;
  margin-bottom:clamp(44px,6vw,84px); }
.jrn__h2{ font-family:"Archivo Black",var(--font-display),sans-serif; text-transform:uppercase; letter-spacing:-.02em;
  line-height:.9; font-size:clamp(38px,7vw,104px); color:#fff; }
.jrn__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray); line-height:1.6; }
@media (min-width:900px){
  .jrn__top{ grid-template-columns:1fr auto 1fr; align-items:center; }
  .jrn__label--l{ justify-self:start; text-align:left; }
  .jrn__h2{ grid-column:2; }
  .jrn__label--r{ justify-self:end; text-align:right; }
}
.jrn__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,46px); align-items:stretch; }
.jrn__col{ display:flex; flex-direction:column; }
.jrn__title{ font-family:"Archivo Black",var(--font-display),sans-serif; text-transform:uppercase; letter-spacing:-.01em;
  line-height:.98; font-size:clamp(24px,2.9vw,42px); color:#fff; }
.jrn__script{ font-family:"Caveat",cursive; font-weight:600; font-size:clamp(21px,2vw,28px); color:var(--gray); margin-top:8px; }
.jrn__desc{ color:var(--white-70); margin-top:14px; font-size:15px; line-height:1.5; max-width:36ch; }
.jrn__media{ position:relative; margin-top:auto; padding-top:clamp(22px,3vw,38px); }
/* frame que recorta a capa e recebe o parallax (o número fica FORA, sem ser cortado) */
.jrn__frame{ position:relative; aspect-ratio:1/1; border-radius:4px; overflow:hidden; }
.jrn__frame img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.04) saturate(1.02); will-change:transform; }
.jrn__cta{ display:flex; justify-content:center; margin-top:clamp(46px,6vw,86px); }
.jrn__link{ font-family:var(--font-display); font-size:clamp(24px,3.4vw,50px); color:#fff; letter-spacing:-.01em;
  position:relative; padding-bottom:8px; display:inline-block; }
.jrn__link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:#fff;
  transform-origin:right; transition:transform .45s var(--e-out); }
.jrn__link:hover::after{ transform:scaleX(.55) rotate(-1.2deg); }
/* profundidade 3D (tilt): perspectiva no pai, o número salta pra frente */
.jrn__col{ perspective:1000px; }
.jrn__media{ transform-style:preserve-3d; transition:transform .35s var(--e-out); will-change:transform; }
.jrn__num{ transform:translateZ(55px); }

/* Trajetória — "polaroid timeline": as fotos inclinam quando estão longe do
   centro da tela e se ENDIREITAM ao passar pelo meio (contínuo, ligado ao
   scroll — no inline JS). Direções alternadas. Sem borda branca (nada infantil). */
.jrn__frame{ transform-origin:center 66%; will-change:transform;
  box-shadow:0 34px 62px -42px rgba(0,0,0,.85); }
@media (prefers-reduced-motion: reduce){ .jrn__frame{ transform:none !important; } }
/* Lenis (scroll suave) */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* =====================================================================
   MANIFESTO — foto P&B em tela cheia que "fica presa" (pin) enquanto
   rola, dando profundidade; o conteúdo seguinte sobe por cima.
   ===================================================================== */
.mf-wrap{ position:relative; height:100vh; margin-bottom:0; z-index:0; }  /* seção cheia normal (sem sobrepor a Turnê, que agora revela o fundo) */
.mf{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; background:#050505; z-index:0; }
.mf__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%;
  filter:grayscale(1) contrast(1.08) brightness(.82); will-change:transform; }
/* containers de foto que ganham parallax de scroll precisam recortar o excesso */
[data-parallax]{ overflow:hidden; }
[data-parallax] > img, [data-parallax] picture{ will-change:transform; }
.card__ph{ overflow:hidden; }

/* =====================================================================
   SPATIAL CAROUSEL — sticky scroll 3D (réplica do componente Framer).
   Altura do container definida por JS (nº de fotos × vh por item).
   ===================================================================== */
.dbc{ position:relative; z-index:11; height:100vh; background:var(--black); }
.dbc__viewport{ position:absolute; inset:0; overflow:hidden; perspective:1000px;
  display:flex; align-items:center; justify-content:center; }
.dbc__track{ position:relative; width:0; height:0; transform-style:preserve-3d; }
.dbc__card{ position:absolute; left:0; top:0; transform-style:preserve-3d; will-change:transform;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.dbc__img{ position:absolute; inset:0; background-size:cover; background-position:center; border-radius:12px; }
.dbc__blur{ position:absolute; top:0; bottom:0; width:22%; pointer-events:none; z-index:50;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.dbc__blur--l{ left:0; -webkit-mask-image:linear-gradient(to right,#000,transparent); mask-image:linear-gradient(to right,#000,transparent); }
.dbc__blur--r{ right:0; -webkit-mask-image:linear-gradient(to left,#000,transparent); mask-image:linear-gradient(to left,#000,transparent); }
.dbc__grab{ position:absolute; inset:0; z-index:60; cursor:grab; touch-action:pan-y; }
.dbc__grab:active{ cursor:grabbing; }

/* =====================================================================
   ESSÊNCIA — texto que "acende" palavra a palavra no scroll + foto parallax.
   ===================================================================== */
.mtx{ position:relative; z-index:11; background:var(--black); overflow:hidden; padding:clamp(90px,14vh,180px) 0; }
.mtx__wrap{ position:relative; width:min(100% - var(--pad)*2, var(--wrap)); margin-inline:auto;
  min-height:clamp(440px,66vh,720px); display:flex; align-items:center; }
/* FOTO: camada de trás, na direita, do topo ao fim do bloco (o texto passa por cima) */
.mtx__photo{ position:absolute; top:0; right:0; bottom:0; width:54%; z-index:1; overflow:hidden; border-radius:10px; }
.mtx__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; will-change:transform; }
.mtx__photo::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,5,5,.92), rgba(5,5,5,.35) 42%, transparent 68%); }
/* TEXTO: camada da frente, mais largo, sobrepondo a foto */
.mtx__text{ position:relative; z-index:2; width:min(74%, 820px);
  font-family:"Inter", var(--font-body); font-weight:600; letter-spacing:-.005em;
  font-size:clamp(20px,2.5vw,37px); line-height:1.22; color:#fff; text-shadow:0 2px 22px rgba(0,0,0,.55); }
.mtx__text p{ margin:0 0 clamp(20px,2.4vw,34px); }
.mtx__text p:last-child{ margin-bottom:0; }
.mtx__w{ opacity:.14; }                        /* base apagado; o JS acende no scroll */
/* MARCAÇÕES à mão (traços brancos irregulares) nas frases-chave */
.mtx__u{ position:relative; }
.mtx__u--line::after, .mtx__u--strike::after{ content:""; position:absolute; left:-2%; right:-2%; height:.5em;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%; pointer-events:none; }
.mtx__u--line::after{ bottom:-.16em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9C70 3 130 12 196 7 250 4 280 5 296 8' fill='none' stroke='%23f2f0ec' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mtx__u--strike::after{ top:40%; height:.42em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M4 7C80 3 150 10 220 5 260 3 285 7 297 5' fill='none' stroke='%23f2f0ec' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mtx__u--circle{ white-space:nowrap; }
.mtx__u--circle::after{ content:""; position:absolute; left:-7%; right:-7%; top:-24%; bottom:-24%; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 96' preserveAspectRatio='none'%3E%3Cpath d='M48 62C14 40 44 16 132 12 252 7 312 30 300 54 288 82 150 92 70 82 28 76 22 64 44 50' fill='none' stroke='%23f2f0ec' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (max-width:820px){
  .mtx__wrap{ display:block; min-height:0; }
  .mtx__photo{ position:relative; width:100%; aspect-ratio:4/3; margin-top:clamp(22px,6vw,34px); }
  .mtx__photo::after{ background:linear-gradient(0deg, rgba(5,5,5,.4), transparent 50%); }
  .mtx__text{ width:100%; font-size:clamp(20px,5.4vw,28px); text-shadow:none; }
  .mtx__u--circle{ white-space:normal; }
}
#turne{ background:var(--black); }   /* opaca: evita bleed do manifesto atrás */
.mf::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 34%, rgba(5,5,5,.62) 100%); }
.mf__inner{ position:relative; z-index:2; text-align:center; color:#fff; padding:0 var(--pad); max-width:1100px; }
.mf__mark{ font-family:var(--font-mono); font-size:12px; letter-spacing:.28em; margin-bottom:26px; line-height:1.9; }
.mf__mark b{ font-weight:700; letter-spacing:.1em; }
.mf__stmt{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.02em; line-height:.98;
  font-size:clamp(28px,5.4vw,78px); }
.mf__sig{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; line-height:1;
  font-size:clamp(24px,4vw,56px); margin-top:clamp(24px,3vw,42px); }
.mf__sig span{ position:relative; white-space:nowrap; }
.mf__sig span::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:-.06em; height:.09em;
  background:var(--red); transform:rotate(-1.4deg); }
.mf__foot{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--white-70); margin-top:clamp(30px,4vw,56px); line-height:1.7; }
@media (max-width:600px){ .mf-wrap{ height:100vh; } }

/* =====================================================================
   FAIXA — silhueta em P&B com wordmark (esq.) + frase manuscrita (dir.),
   no estilo da faixa do site da Sand ("AO VIVO NÃO MENTE").
   ===================================================================== */
/* o card "flutua" com margem; os cantos arredondam conforme rola (--br do JS) */
.banda{ position:relative; z-index:10; background:#050505; padding:clamp(0px,3.4vw,50px) clamp(0px,2.8vw,42px); }
.banda__card{ position:relative; height:clamp(320px,50vw,600px); overflow:hidden;
  border-radius:var(--br,0px); will-change:border-radius; }
.banda__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:grayscale(1) contrast(1.12) brightness(.98); }                 /* preto e branco */
.banda__veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,5,5,.55), transparent 26%, transparent 74%, rgba(5,5,5,.55)),
             linear-gradient(rgba(5,5,5,.15), rgba(5,5,5,.45)); }
.banda__row{ position:relative; z-index:2; height:100%; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(24px,4vw,60px); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.banda__mark{ height:clamp(22px,3vw,40px); width:auto; filter:brightness(0) invert(1); }   /* logo em branco */
.banda__frase{ position:relative; font-family:"Caveat", cursive; font-weight:600; color:#fff;
  font-size:clamp(30px,4.6vw,66px); line-height:1; letter-spacing:.01em; transform:rotate(-3deg); white-space:nowrap; }
/* rabisco de sublinhado, como no "NÃO MENTE" da referência */
.banda__frase::after{ content:""; position:absolute; left:6%; right:6%; bottom:-.14em; height:2px; border-radius:2px;
  background:#fff; transform:rotate(-2deg) scaleX(.9); transform-origin:left; opacity:.9; }
@media (max-width:640px){
  .banda__row{ flex-direction:column; justify-content:center; gap:clamp(18px,5vw,30px); text-align:center; }
  .banda__frase{ white-space:normal; }
}

.jrn__num{ position:absolute; left:-2px; bottom:-8px; font-family:"Archivo Black",var(--font-display),sans-serif;
  font-size:clamp(78px,10vw,150px); line-height:.74; color:#fff; letter-spacing:-.03em;
  text-shadow:0 12px 34px rgba(0,0,0,.55); pointer-events:none; }
@media (max-width:760px){
  .jrn__grid{ grid-template-columns:1fr; gap:clamp(40px,9vw,56px); }
  .jrn__label{ display:none; }
  .jrn__media img{ aspect-ratio:1/1; }
  .jrn__num{ font-size:clamp(66px,20vw,110px); }
}

/* =====================================================================
   SOBRE
   ===================================================================== */
.sec--about{ background:transparent; border-block:1px solid var(--white-08); }

/* ---- SOBRE: logo (efeito heatmap) à esquerda + biografia à direita ---- */
.bio{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; }
.bio__text .tag{ margin-bottom:14px; }
.bio__text .h2{ margin-bottom:clamp(20px,2.4vw,34px); }
.bio__body p{ color:var(--gray); font-size:clamp(15px,1.15vw,17px); line-height:1.75; max-width:52ch; }
.bio__body p + p{ margin-top:18px; }
.bio__body p:first-child{ color:var(--white-70); }

/* ---- efeito HEATMAP na logomarca (campo de ruído térmico em canvas) ---- */
.heat{ position:relative; width:100%; max-width:460px; margin-inline:auto; aspect-ratio:1364/1106;
  background:transparent; border-radius:0; overflow:visible; isolation:isolate; }
.heat__logo{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:13%;
  filter:brightness(0) invert(1); opacity:.96; z-index:1; }
/* halo azul difuso atrás do desenho */
.heat__glow{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(46% 50% at 50% 42%, rgba(40,92,255,.42), rgba(22,48,150,.14) 50%, transparent 74%); }
/* o canvas desenha o térmico já recortado na logo; o brilho azul da borda
   vem do drop-shadow (usa o alpha do próprio recorte) */
.heat__cv{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
  filter:drop-shadow(0 0 20px rgba(46,104,255,.55)) drop-shadow(0 0 52px rgba(40,90,255,.3)); }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--gray-line);
  margin-top:clamp(50px,6vw,90px); border:1px solid var(--gray-line); border-radius:6px; overflow:hidden; }
.stats__item{ background:var(--black-2); padding:32px 26px; }
.stats__val{ font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4.2vw,56px); line-height:1; letter-spacing:0; }
.stats__lbl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); margin-top:12px; }

/* =====================================================================
   CONTATO
   ===================================================================== */
.cta{ position:relative; z-index:10; overflow:hidden; padding:clamp(76px,9vw,140px) 0; background:transparent; }
.cta__embers{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cta__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.cta__title{ margin:18px 0 26px; }
.news{ display:flex; gap:10px; max-width:440px; }
.news input{ flex:1; background:rgba(242,240,236,.04); border:1px solid var(--white-14); border-radius:4px; padding:14px 18px; outline:none; color:var(--white); transition:border-color .3s; }
.news input::placeholder{ color:var(--gray); }
.news input:focus{ border-color:var(--red); }
.news__msg{ font-size:13px; color:var(--white-70); margin:14px 0 0; min-height:18px; }
.cta__cards{ display:grid; gap:12px; margin-top:34px; }
.cta__card{ border:1px solid var(--white-08); border-radius:4px; padding:20px; background:rgba(13,13,13,.5); transition:border-color .3s; }
.cta__card:hover{ border-color:var(--white-14); }
.cta__card h4{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); font-weight:600; margin-bottom:8px; }
.cta__card a{ font-size:16px; color:var(--white); border-bottom:1px solid var(--white-14); }
.cta__card a:hover{ border-color:var(--red); }
.form{ display:grid; gap:16px; background:rgba(13,13,13,.5); border:1px solid var(--white-08); border-radius:6px; padding:clamp(20px,3vw,32px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label{ display:grid; gap:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.form input,.form select,.form textarea{ background:rgba(242,240,236,.03); border:1px solid var(--white-14); border-radius:4px; padding:13px 15px; outline:none; font-size:15px; color:var(--white); transition:border-color .3s; }
.form select option{ background:var(--panel); }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--red); }
.form textarea{ resize:vertical; }
.form .btn{ justify-self:start; }

/* =====================================================================
   FUNDOS FOTOGRÁFICOS DE SEÇÃO — foto + overlay p/ profundidade.
   Usados em Turnê e Contato (index) e no topo da Agenda. O deslize no
   scroll reaproveita [data-parallax] do main.js; overlays combinam
   gradiente linear + radial para legibilidade SEM escurecer demais.
   ===================================================================== */
.secbg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.secbg__img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 28%; will-change:transform;
  filter:contrast(1.04) saturate(1.02); }
.secbg__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(125% 95% at 50% 26%, transparent 0%, rgba(5,5,5,.30) 58%, rgba(5,5,5,.70) 100%),
    linear-gradient(180deg, rgba(5,5,5,.52) 0%, rgba(5,5,5,.26) 26%, rgba(5,5,5,.56) 74%, var(--black) 100%); }
/* o conteúdo da seção sobe acima do fundo */
.sec--photo{ overflow:hidden; }
.sec--photo > .wrap{ position:relative; z-index:2; }

/* Turnê — atmosfera de show atrás da lista de datas */
#turne .secbg__img{ object-position:center 20%; }
#turne .dates{ border-top-color:var(--white-14); }

/* Contato — foto atrás das brasas; os forms translúcidos garantem leitura */
.cta .secbg__img{ object-position:center 32%; filter:contrast(1.05) saturate(.98) brightness(.9); }
.cta .secbg__veil{
  background:
    radial-gradient(120% 100% at 24% 42%, transparent 0%, rgba(5,5,5,.40) 54%, rgba(5,5,5,.82) 100%),
    linear-gradient(180deg, rgba(5,5,5,.64), rgba(5,5,5,.48) 40%, rgba(5,5,5,.72)); }

/* Topo da Agenda — hero cinematográfico (fade de entrada + profundidade) */
.agenda-top{ display:flex; align-items:flex-end; min-height:clamp(360px,56vh,600px); overflow:hidden; }
.agenda-top > .wrap{ position:relative; z-index:2; width:100%; will-change:transform; }
.agenda-top .secbg__img{ object-position:center 30%; transform:scale(1.08); animation:secFade 1.3s var(--e-out) both; }
.agenda-top .secbg__veil{
  background:
    radial-gradient(120% 92% at 30% 30%, transparent 0%, rgba(5,5,5,.26) 55%, rgba(5,5,5,.64) 100%),
    linear-gradient(180deg, rgba(5,5,5,.42) 0%, rgba(5,5,5,.18) 28%, rgba(5,5,5,.72) 82%, var(--black) 100%); }
@keyframes secFade{ from{ opacity:.35 } to{ opacity:1 } }

@media (max-width:900px){
  .secbg__img{ object-position:center 24%; }
  .agenda-top{ min-height:clamp(300px,46vh,440px); }
}
@media (prefers-reduced-motion: reduce){
  .agenda-top .secbg__img{ animation-duration:.01ms; }
}

/* =====================================================================
   FUNDO FIXO ÚNICO — uma foto atrás do site inteiro, revelada só nas
   seções "abertas" (Turnê e Contato). As demais são sólidas e cobrem a
   foto. A profundidade sutil com o mouse vem do main.js (deslize ~9px).
   ===================================================================== */
.pagebg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* fundo alternativo (Sobre pra baixo): entra por cima do base com crossfade */
.pagebg--alt{ opacity:0; transition:opacity .8s var(--e-out); }
.pagebg--alt.on{ opacity:1; }

/* Seção Sobre (04) revela o fundão — película preta p/ legibilidade (on-brand) */
.sec--about{ position:relative; }
.sec--about::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(5,5,5,.72); }
.sec--about > .wrap{ position:relative; z-index:2; }
/* Trajetória (abaixo da Sobre) usa a MESMA opacidade de véu → sem emenda */
#jornada.bg-reveal::before{ background:rgba(5,5,5,.72); }

/* =====================================================================
   DYNAMIC GLASS LOGO (Sobre) — a logo vira "vidro": corpo glossy + bisel +
   varredura de luz automática + brilho especular que SEGUE o mouse (branco
   → vermelho, on-brand) + leve tilt 3D. Camadas mascaradas na forma da logo.
   ===================================================================== */
.glogo{ position:relative; width:100%; height:100%;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s var(--e-out); will-change:transform;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(181,22,32,.22)); }
/* logo SEMPRE visível (prata claro pra o brilho do vidro aparecer) */
.glogo__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:11%;
  filter:brightness(0) invert(.86); }
/* camadas de brilho recortadas na forma da logo (mask). Se o mask não existir,
   ficam ocultas — a logo base continua visível. */
.glogo__sheen, .glogo__spec{ position:absolute; inset:0; pointer-events:none; display:none;
  -webkit-mask:var(--logo) center / 78% no-repeat; mask:var(--logo) center / 78% no-repeat; mix-blend-mode:screen; }
@supports ((-webkit-mask:url(x)) or (mask:url(x))){ .glogo__sheen, .glogo__spec{ display:block; } }
.glogo__sheen{ background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
  background-size:250% 100%; opacity:.75; animation:glsheen 6s var(--e-out) infinite; }
@keyframes glsheen{ 0%{ background-position:120% 0 } 55%,100%{ background-position:-40% 0 } }
.glogo__spec{ background:radial-gradient(circle at var(--mx,50%) var(--my,26%),
    rgba(255,255,255,.95) 0%, rgba(181,22,32,.55) 24%, transparent 55%); opacity:.9; }
/* neutraliza o heatmap antigo se algum script ainda injetar canvas/glow */
.heat__cv, .heat__glow{ display:none !important; }

/* =====================================================================
   LOGO 3D GIRANDO (Sobre) — cópias da logo empilhadas em Z formam um "h"
   sólido metálico que gira no eixo Y. Faces prata, miolo escuro (a aresta).
   ===================================================================== */
.logo3d{ width:100%; height:100%; display:grid; place-items:center; perspective:1200px; }
.logo3d__obj{ position:relative; width:78%; aspect-ratio:1364/1106; transform-style:preserve-3d;
  animation:logospin 12s linear infinite; will-change:transform;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(181,22,32,.22)); }
.logo3d__layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:brightness(0) invert(.9); }   /* base prata — fail-safe se o JS não rodar */
@keyframes logospin{ from{ transform:rotateY(0deg) } to{ transform:rotateY(360deg) } }
@media (prefers-reduced-motion: reduce){ .logo3d__obj{ animation:none; } }

/* EXPANDED CARDS (Sobre) — faixa de fotos em acordeão: o hover expande e revela
   a legenda; as demais encolhem. Clique/toque também expande (mobile). */
#heat{ aspect-ratio:auto; max-width:none; }
.excards{ display:flex; gap:8px; width:100%; height:clamp(340px,48vh,520px); }
.excard{ position:relative; flex:1 1 0; min-width:0; margin:0; border-radius:12px; overflow:hidden;
  cursor:pointer; transition:flex-grow .55s var(--e-out); box-shadow:0 30px 60px -42px rgba(0,0,0,.85); }
.excard img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.18) contrast(1.05) brightness(.9); transition:filter .5s var(--e-out); }
.excard::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(5,5,5,.72)); }
.excard:hover, .excard.is-open{ flex-grow:4.6; }
.excard:hover img, .excard.is-open img{ filter:grayscale(0) contrast(1.05) brightness(1); }
.excard__cap{ position:absolute; z-index:2; left:16px; bottom:16px; color:#fff;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(13px,1.2vw,19px); white-space:nowrap; opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--e-out) .12s, transform .45s var(--e-out) .12s; }
.excard:hover .excard__cap, .excard.is-open .excard__cap{ opacity:1; transform:none; }
@media (max-width:900px){ .excards{ height:clamp(300px,54vw,420px); } }
@media (prefers-reduced-motion: reduce){ .excard, .excard__cap{ transition:none; } }

/* Contato — cards de e-mail ocultos por enquanto (placeholders). Reversível. */
#contactCards{ display:none; }

/* =====================================================================
   MOBILE — seções compridas viram ARRASTÁVEIS pro lado (swipe c/ snap).
   Scroll nativo de toque (leve). Não gera overflow horizontal na página
   (o overflow fica DENTRO do container). Barra de rolagem escondida.
   ===================================================================== */
@media (max-width:760px){
  /* Trajetória: os 3 tempos viram carrossel horizontal */
  #jornada .jrn__grid{ display:flex !important; grid-template-columns:none !important;
    flex-wrap:nowrap; gap:14px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:none; -webkit-overflow-scrolling:touch;
    padding-bottom:14px; scrollbar-width:none; }
  #jornada .jrn__grid::-webkit-scrollbar{ height:0; width:0; }
  #jornada .jrn__col{ flex:0 0 82%; max-width:82%; scroll-snap-align:center; }
  #jornada .jrn__frame{ transform:none !important; }   /* sem tilt no mobile */

  /* Galeria: as fotos viram faixa horizontal */
  #galeria.galgrid{ display:flex !important; grid-template-columns:none !important;
    flex-wrap:nowrap; gap:8px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:none; -webkit-overflow-scrolling:touch;
    padding-bottom:10px; scrollbar-width:none; }
  #galeria.galgrid::-webkit-scrollbar{ height:0; width:0; }
  #galeria .galgrid__item{ flex:0 0 70%; max-width:70%; scroll-snap-align:center; }
}
@media (prefers-reduced-motion: reduce){ .glogo__sheen{ animation:none; } .glogo{ transition:none; } }
.pagebg__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 24%; transform:scale(1.06); will-change:transform;
  filter:grayscale(.28) contrast(1.05) brightness(.9); }
.pagebg__veil{ position:absolute; inset:0;
  background:
    radial-gradient(120% 82% at 50% 30%, transparent 0%, rgba(5,5,5,.36) 60%, rgba(5,5,5,.64) 100%),
    linear-gradient(180deg, rgba(5,5,5,.48), rgba(5,5,5,.4)); }

/* seções sólidas (a atmosfera perdeu o preto, então garantimos a cobertura) */
.hero{ background:var(--black); }
#musica{ background:transparent; }   /* deixa o Cinematic Ambient Glow aparecer atrás dos cards/player */

/* seções que ABREM para o fundo fixo (Turnê, Trajetória, Galeria, Contato) */
/* ============ CINEMATIC AMBIENT GLOW — luz ambiente distante no escuro ============
   Camada fixa atrás de todo conteúdo; só aparece nas áreas pretas transparentes.
   Blur estático; anima só transform/opacity (barato). Não intercepta clique. */
.ambient{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:layout style paint;
  background:linear-gradient(rgba(5,5,5,.5), rgba(5,5,5,.66)), url("hungria-13.jpg") center/cover no-repeat; }
.ambient__blob{ position:absolute; border-radius:50%; will-change:transform, opacity; }
.ambient__b1{ width:60vw; height:60vw; left:-8vw; top:-8vw; filter:blur(90px);
  background:radial-gradient(circle, rgba(140,20,28,.62), transparent 72%);
  animation:ambDrift1 34s ease-in-out infinite alternate; }
.ambient__b2{ width:54vw; height:54vw; right:-12vw; bottom:-12vw; filter:blur(100px);
  background:radial-gradient(circle, rgba(168,104,32,.52), transparent 72%);
  animation:ambDrift2 41s ease-in-out infinite alternate; }
.ambient__b3{ width:46vw; height:46vw; left:32vw; top:40vh; filter:blur(96px);
  background:radial-gradient(circle, rgba(28,80,64,.5), transparent 72%);
  animation:ambDrift3 27s ease-in-out infinite alternate; }
@keyframes ambDrift1{ 0%{ transform:translate3d(0,0,0) scale(1); opacity:.85 } 50%{ transform:translate3d(6vw,4vh,0) scale(1.12); opacity:1 } 100%{ transform:translate3d(-3vw,7vh,0) scale(1.05); opacity:.78 } }
@keyframes ambDrift2{ 0%{ transform:translate3d(0,0,0) scale(1.05); opacity:.72 } 50%{ transform:translate3d(-7vw,-5vh,0) scale(1); opacity:.95 } 100%{ transform:translate3d(-2vw,-9vh,0) scale(1.14); opacity:.8 } }
@keyframes ambDrift3{ 0%{ transform:translate3d(0,0,0) scale(1); opacity:.55 } 50%{ transform:translate3d(-9vw,5vh,0) scale(1.16); opacity:.82 } 100%{ transform:translate3d(5vw,-4vh,0) scale(1.06); opacity:.6 } }
@media (max-width:700px){
  .ambient__b3{ display:none; }
  .ambient__blob{ filter:blur(60px); }
  .ambient__b1{ width:92vw; height:92vw; } .ambient__b2{ width:82vw; height:82vw; }
}
@media (prefers-reduced-motion:reduce){ .ambient__blob{ animation:none !important; opacity:.7 !important; } }

.bg-reveal{ position:relative; background:transparent !important; }
.bg-reveal::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 36%, transparent 0%, rgba(5,5,5,.32) 56%, rgba(5,5,5,.58) 100%),
    linear-gradient(180deg, rgba(5,5,5,.4), rgba(5,5,5,.26) 42%, rgba(5,5,5,.48)); }
.bg-reveal > .wrap{ position:relative; z-index:2; }
.bg-reveal > .dbc__viewport{ position:relative; z-index:2; }   /* coverflow acima do véu */

/* =====================================================================
   GRANDE HIT — clipe em vídeo com SCROLL ZOOM REVEAL: começa como um card
   menor arredondado e cresce até preencher a tela conforme rola (réplica
   do "Scroll Zoom Reveal" do Framer). Zoom/raio vêm do main.js; mudo + loop.
   ===================================================================== */
.ghit{ position:relative; z-index:11; height:240vh; background:var(--black); }
.ghit__pin{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--black);
  --pw:clamp(190px,23vw,320px); --ph:clamp(46px,6vh,64px); }
.ghit__reel{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  gap:clamp(26px,3.2vw,54px); will-change:opacity; }
.ghit__year,.ghit__lab{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(19px,2.7vw,38px); white-space:nowrap; color:var(--white); }
.ghit__year{ color:var(--white-70); }
.ghit__slot{ flex:0 0 auto; width:var(--pw); height:var(--ph); }
/* a pílula ocupa a viewport toda mas é RECORTADA (clip-path) numa cápsula
   central; o main.js abre o recorte no scroll até virar tela cheia. */
.ghit__pill{ position:absolute; inset:0; z-index:4; overflow:hidden; will-change:clip-path;
  clip-path: inset( calc((100vh - var(--ph))/2) calc((100vw - var(--pw))/2) round calc(var(--ph)/2) ); }
.ghit__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.ghit__grad{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,5,.22) 0%, transparent 36%, transparent 60%, rgba(5,5,5,.68) 100%); }
.ghit__cap{ position:absolute; z-index:5; left:clamp(20px,5vw,84px); bottom:clamp(30px,7vh,74px);
  opacity:0; transform:translateY(24px); transition:opacity .7s var(--e-out), transform .7s var(--e-out); pointer-events:none; }
.ghit__pin.is-full .ghit__cap{ opacity:1; transform:none; }
.ghit__kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--white-70); }
.ghit__title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.045em;
  line-height:.88; font-size:clamp(46px,9vw,150px); margin-top:10px; color:#fff; text-shadow:0 20px 60px rgba(0,0,0,.5); }
@media (max-width:900px){ .ghit{ height:200vh; } .ghit__pin{ --pw:clamp(150px,54vw,250px); --ph:clamp(40px,6.4vh,54px); } }
@media (prefers-reduced-motion: reduce){ .ghit__reel{ opacity:0; } .ghit__pill{ clip-path:none; } }
.form__msg{ font-size:13px; color:var(--white-70); min-height:18px; }
.form .err{ border-color:var(--red) !important; }
.ember{ position:absolute; bottom:-16px; width:3px; height:3px; border-radius:50%; background:var(--red); opacity:0; animation:emberRise linear infinite; }
@keyframes emberRise{ 0%{ transform:translateY(0) scale(.8); opacity:0 } 14%{ opacity:.5 } 82%{ opacity:.4 } 100%{ transform:translateY(-380px) scale(.3); opacity:0 } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.ft{ position:relative; z-index:10; background:#040404; padding:clamp(56px,7vw,90px) 0 28px; border-top:1px solid var(--white-08); overflow:hidden; }
.ft__big{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(64px,17vw,260px); line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(242,240,236,.1);
  margin-bottom:clamp(40px,6vw,72px); user-select:none; white-space:nowrap; }
.ft__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; padding-bottom:44px; }
.ft__col h4{ font-family:var(--font-body); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); margin:0 0 16px; font-weight:600; }
.ft__col a{ display:block; font-size:13px; letter-spacing:.02em; color:var(--gray); padding:5px 0; transition:color .25s; }
.ft__col a:hover{ color:var(--white); }
.ft__bar{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; border-top:1px solid var(--white-08); padding-top:24px; font-size:12px; color:var(--gray); }
.ft__bar a:hover{ color:var(--red); }

/* Régua de logos (parceiros) — só a "best" é clicável (link sobreposto na área dela) */
.partners{ padding:clamp(18px,2.6vw,30px) 0; }
.partners__strip{ position:relative; width:100%; max-width:340px; margin:0 auto; }
.partners__img{ display:block; width:100%; height:auto; opacity:.5; transition:opacity .4s var(--e-out); }
.partners__strip:hover .partners__img{ opacity:.7; }
.partners__best{ position:absolute; top:0; left:0; width:30%; height:100%; cursor:pointer; outline:none; }

/* =====================================================================
   MODAL
   ===================================================================== */
.mdl{ position:fixed; inset:0; z-index:170; background:rgba(3,3,3,.94); backdrop-filter:blur(6px);
  display:grid; place-content:center; padding:var(--pad); opacity:0; visibility:hidden; transition:opacity .5s var(--e-io), visibility .5s; }
.mdl.open{ opacity:1; visibility:visible; }
.mdl__box{ width:min(1000px,92vw); transition:transform .55s var(--e-out); transform:scale(.96); }
.mdl.open .mdl__box{ transform:none; }
.mdl__box iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:6px; display:block; }
.mdl__box iframe.aud{ aspect-ratio:auto; height:420px; }
.mdl__x{ position:absolute; top:22px; right:var(--pad); background:none; border:0; color:var(--white-70); cursor:pointer; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.mdl__x:hover{ color:var(--white); }

/* =====================================================================
   REVEAL — entra na direção do scroll, stagger discreto, desaceleração
   buttery (expo-out). Só transform+opacity (GPU), sem filtros pesados.
   ===================================================================== */
.js .reveal{ opacity:0; transform:translateY(46px) scale(.985); transition:opacity .85s var(--e-out), transform 1.2s var(--e-out); transition-delay:var(--d,0ms); will-change:transform,opacity; }
.js .reveal.on{ opacity:1; transform:none; }
.js .reveal--clip{ transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.35s var(--e-out); transition-delay:var(--d,0ms); }
.js .reveal--clip.on{ clip-path:inset(0 -4% -10% 0); }

/* =====================================================================
   TRACKING DISPLAY — Montserrat 800 pede tracking negativo em tamanho
   grande (padrão do SOMA). Bloco no fim para vencer as regras acima.
   ===================================================================== */
.intro__word,.hero__title,.feat__title,.mani p,.stats__val,.ft__big,
.dates__city,.mnav nav a,.sub,.fancard__name,.dates__d,.tk__row span,
.card__name,.cta__title{ letter-spacing:-.033em; }
.intro__word,.hero__title,.ft__big{ letter-spacing:-.045em; }
/* texto pequeno nunca leva tracking negativo (prejudica leitura) */
.tag,.head__d,.hero__sub,.feat__text,.dates__venue,.card__meta,
.fancard__sub,.stats__lbl,.ft__col a,.plats a{ letter-spacing:normal; }
.tag,.stats__lbl,.fandeck__hint,.mnav__social,.ft__col h4{ font-family:var(--font-mono); letter-spacing:.16em; }

/* =====================================================================
   RESPONSIVO — pensado para desktop e mobile separadamente
   ===================================================================== */
@media (max-width:900px){
  .hd__nav, .hd__cta{ display:none; }
  .hd__burger{ display:block; }
  .feat{ grid-template-columns:1fr; gap:0; }
  .feat__media{ height:70vw; max-height:520px; }
  .feat__photo{ left:calc(50% - 50vw); right:calc(50% - 50vw); border-radius:0; }
  .feat__body{ padding:clamp(28px,7vw,48px) var(--pad) 0; }
  .cta__inner{ grid-template-columns:1fr; }
  .ft__grid{ grid-template-columns:1fr 1fr; }
  .bio{ grid-template-columns:1fr; gap:clamp(24px,6vw,44px); }
  .heat{ max-width:320px; }
}
@media (max-width:560px){
  .hero{ padding-bottom:64px; }
  .form__row{ grid-template-columns:1fr; }
  .news{ flex-direction:column; } .news .btn{ width:100%; }
  .dates__row{ grid-template-columns:64px 1fr; column-gap:16px; padding:20px 12px; }
  .dates__d{ font-size:19px; align-self:center; }
  .ft__grid{ grid-template-columns:1fr; gap:26px; }
}
/* leque compacto e recortado no mobile (sem hover em toque, pode clipar) */
@media (max-width:640px){
  .fandeck{ overflow:hidden; height:clamp(280px,74vw,340px); }
  .fancard{ width:118px; }
}
/* toque grande e legível nos aparelhos estreitos (360/390/430) */
@media (max-width:430px){
  .btn{ padding:14px 22px; font-size:15px; }
  /* título grande, mas com respiro nas margens (não encosta na borda) */
  .hero__title{ font-size:clamp(48px,17vw,92px); }
  .hero--center .hero__title{ font-size:clamp(46px,15vw,92px); }
  .hero__agenda{ padding:15px 34px; }
  .hero__sub{ font-size:15px; }
}

/* =====================================================================
   MOVIMENTO REDUZIDO — respeita a preferência do visitante.
   Conteúdo SEMPRE visível (nunca escondido); só cortamos o movimento.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .js .dates__row.reveal .dates__d{ opacity:1 !important; transform:none !important; color:inherit !important; }
  .js .dates__row.reveal::after{ display:none !important; }
  .js .fancard{ opacity:1 !important; animation:none !important; }
  .js .hero__inner > *{ opacity:1 !important; transform:none !important; }
  .js .hero__photo img, .js .hero__photo video{ transform:none !important; }
  .hero__scroll span, .tk__row, .ember, .hero__dust{ display:none !important; }
  /* Exceção: a abertura do site (preloader + revelação do vídeo) sempre roda,
     mesmo com movimento reduzido — pedido explícito do dono do site. */
  .intro{ transition-duration:.6s !important; }
  .intro.reveal-logo .intro__logo{ transition-duration:.7s !important; }
  .go .hero__stage{ animation-duration:1.5s !important; }
  .heat__fill, .heat__glow{ animation:none !important; }
  /* aurora de fundo continua se mexendo (bem devagar) mesmo com movimento reduzido */
  .atmos__fog--1{ animation-duration:46s !important; }
  .atmos__fog--2{ animation-duration:58s !important; }
  .atmos__fog--3{ animation-duration:52s !important; }
}