/**
 * Instagram - @pdru.exe
 * Discord - pdru.exe
 * pdru Scripts
 * © 2024 Dev Project
 *
 * TODOS OS DIREITOS RESERVADOS / ALL RIGHTS RESERVED.
 *
 * Este código-fonte, incluindo sua estrutura, design, layout, animações e
 * interações, é obra protegida pela Lei nº 9.610/1998 (Lei de Direitos
 * Autorais), pela Lei nº 9.609/1998 (Lei do Software) e pela Convenção de
 * Berna, sendo propriedade exclusiva de seu autor.
 *
 * É PROIBIDO, sem autorização prévia e por escrito do autor: copiar,
 * reproduzir, modificar, adaptar, redistribuir, sublicenciar, vender,
 * realizar engenharia reversa ou utilizar este código, total ou
 * parcialmente, em qualquer outro projeto, site ou produto.
 *
 * O conteúdo artístico (fotografias, capas, cartazes, textos, nomes e marcas)
 * pertence a Andrew Só / Monhangarypy e aos respectivos titulares, e não está
 * incluído em nenhuma permissão de uso deste código.
 *
 * A violação destes direitos sujeita o infrator às sanções civis e penais
 * cabíveis, incluindo o art. 184 do Código Penal Brasileiro e os arts. 102
 * a 110 da Lei nº 9.610/1998.
 *
 * This source code is proprietary and confidential. Unauthorized copying,
 * modification or distribution of this file, via any medium, is strictly
 * prohibited. For licensing requests, contact @pdru.exe.
 */

/* =========================================================
   ANDREW SÓ — Portfólio 2026
   Paleta: vermelho do portfólio + pôr do sol amazônico
   ========================================================= */
:root {
  --ink: #0a0406;
  --ink-2: #140809;
  --ink-3: #1e0d10;
  --red: #d7192a;
  --red-deep: #8e0a16;
  --blood: #5a0610;
  --pink: #ff4f7b;
  --orange: #ff7a2f;
  --gold: #ffc24b;
  --purple: #3c0a3f;
  --cream: #f7ecdf;
  --muted: rgba(247, 236, 223, .62);
  --line: rgba(247, 236, 223, .14);
  --sunset: linear-gradient(180deg, #ffb347 0%, #ff4f5e 32%, #c3102a 62%, #3c0a3f 100%);
  --sunset-x: linear-gradient(90deg, #ffb347, #ff4f5e 35%, #d7192a 65%, #7a1d6e);
  --f-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-body: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --f-mono: 'Space Mono', ui-monospace, monospace;
  --pad: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --soft: cubic-bezier(.45, 0, .2, 1);
  --hover: .5s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
b { font-weight: 700; color: #fff; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* film grain */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)} 40%{transform:translate(4%,-6%)} 60%{transform:translate(-3%,5%)} 80%{transform:translate(6%,2%)} 100%{transform:translate(0,0)} }

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px; display: flex; align-items: center; gap: 12px;
}
.eyebrow span { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 6px; border: 1px solid currentColor; border-radius: 99px; font-size: 11px; }
.h-display {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(56px, 10vw, 168px); line-height: .86; letter-spacing: -.01em; margin: 0 0 28px;
}
.h-display em { font-style: normal; background: var(--sunset-x); -webkit-background-clip: text; background-clip: text; color: transparent; }
.line { display: block; overflow: hidden; padding: .1em 0 .04em; margin-top: -.1em; }
.line__in { display: block; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 99px;
  border: 1px solid var(--cream); text-decoration: none; font-weight: 700; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase; transition: background-color var(--hover) var(--soft), color var(--hover) var(--soft), border-color var(--hover) var(--soft);
}
.btn:hover { background: var(--cream); color: var(--ink); }
.btn--solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.roles span {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--cream);
  background: rgba(255, 255, 255, .03);
}

/* ========== LOADER ========== */
.loader {
  position: fixed; inset: 0; z-index: 9999; background: var(--red-deep);
  display: grid; place-items: center; align-content: center; gap: 22px;
  opacity: 0; animation: fadeIn .9s var(--soft) forwards;
}
.loader > * { opacity: 0; transform: translateY(12px); animation: loaderItem 1.1s var(--soft) forwards; }
.loader > :nth-child(2) { animation-delay: .15s } .loader > :nth-child(3) { animation-delay: .3s } .loader > :nth-child(4) { animation-delay: .4s }
.is-ready .loader { animation: fadeOut 1.2s var(--soft) forwards; pointer-events: none; }
.is-ready .loader > * { animation: loaderItemOut .8s var(--soft) forwards; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut { from { opacity: 1 } to { opacity: 0; visibility: hidden } }
@keyframes loaderItem { to { opacity: 1; transform: none } }
@keyframes loaderItemOut { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(-12px) scale(.98) } }
/* page content fades in as the loader fades out */
main, .foot { transition: opacity 1.4s var(--soft) .25s; }
.is-loading main, .is-loading .foot, .is-loading .nav { opacity: 0; }
.loader__eq { display: flex; gap: 6px; height: 64px; align-items: flex-end; }
.loader__eq i { width: 10px; background: var(--cream); border-radius: 3px; animation: eq 0.9s ease-in-out infinite; transform-origin: bottom; height: 100%; }
.loader__eq i:nth-child(2) { animation-delay: -.2s } .loader__eq i:nth-child(3) { animation-delay: -.5s }
.loader__eq i:nth-child(4) { animation-delay: -.1s } .loader__eq i:nth-child(5) { animation-delay: -.7s }
.loader__eq i:nth-child(6) { animation-delay: -.35s } .loader__eq i:nth-child(7) { animation-delay: -.6s }
@keyframes eq { 0%, 100% { transform: scaleY(.2) } 50% { transform: scaleY(1) } }
.loader__name { font-family: var(--f-display); font-size: clamp(48px, 9vw, 120px); line-height: 1; letter-spacing: .01em; }
.loader__count { font-family: var(--f-mono); font-size: 13px; letter-spacing: .2em; }
.loader__bar { width: min(320px, 70vw); height: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.loader__bar span { display: block; height: 100%; background: var(--cream); animation: load 1.6s var(--soft) .3s both; transform-origin: left; }
@keyframes load { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ========== CURSOR ========== */
.cursor { display: none; }
.has-cursor .cursor {
  display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none;
  width: 0; height: 0;
}
.has-cursor .cursor::before {
  content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--cream);
  mix-blend-mode: difference; transition: width .7s var(--soft), height .7s var(--soft), background-color .7s var(--soft), opacity .7s var(--soft);
}
.cursor--link::before { width: 44px !important; height: 44px !important; background: rgba(247,236,223,.9) !important; }
.cursor--big::before { width: 96px !important; height: 96px !important; background: var(--red) !important; mix-blend-mode: normal !important; }
.cursor__label { position: relative; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; opacity: 0; transition: opacity .6s var(--soft); color: #fff; }
.cursor--big .cursor__label { opacity: 1; }

/* ========== NAV ========== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 900; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad); transition: transform .9s var(--soft), background-color .8s var(--soft), backdrop-filter .8s var(--soft), opacity 1.4s var(--soft) .25s;
}
/* Abertura: o menu fica escondido enquanto o "SÓ" ocupa a tela e entra quando o site aparece */
.nav > * { transition: opacity .8s var(--soft), transform .8s var(--soft); }
.nav > :nth-child(2) { transition-delay: .08s; } .nav > :nth-child(3) { transition-delay: .16s; }
.nav--intro > * { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.nav--intro > :nth-child(n) { transition-delay: 0s; }
/* etiquetas do topo do hero: mesmas regras do menu (escondidas durante o "SÓ") */
.hero__top span { transition: opacity .8s var(--soft), transform .8s var(--soft); }
.hero__top span:nth-child(2) { transition-delay: .08s; } .hero__top span:nth-child(3) { transition-delay: .16s; }
.hero__top--intro span { opacity: 0; transform: translateY(-12px); }
.hero__top--intro span:nth-child(n) { transition-delay: 0s; }
.nav--solid { background: rgba(10, 4, 6, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav--hide { transform: translateY(-110%); }
.nav__logo { font-family: var(--f-display); font-size: 26px; letter-spacing: .02em; text-decoration: none; }
.nav__logo b { color: var(--red); font-weight: 400; }
.nav__links { display: flex; gap: 30px; }
.nav__links a { text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; position: relative; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform var(--hover) var(--soft); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; gap: 12px; align-items: center; }
.sound {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(10,4,6,.35); backdrop-filter: blur(8px);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; transition: background-color var(--hover) var(--soft), border-color var(--hover) var(--soft);
}
.sound:hover { border-color: var(--cream); }
.sound.is-on { background: var(--red); border-color: var(--red); }
.sound__bars { display: flex; gap: 3px; height: 16px; align-items: flex-end; }
.sound__bars i { width: 3px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(.3); }
.burger { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); display: grid; place-content: center; gap: 6px; transition: background-color var(--hover) var(--soft); }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .8s var(--soft); }
.menu-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.burger:hover { background: var(--gold); }

/* ========== MENU ========== */
.menu { position: fixed; inset: 0; z-index: 850; visibility: hidden; pointer-events: none; transition: visibility 0s linear 1.15s; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; padding: 110px var(--pad) 40px; }
.menu__bg { position: absolute; inset: 0; background: var(--red-deep); clip-path: circle(0% at calc(100% - 60px) 40px); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1); }
.menu-open .menu { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu-open .menu__bg { clip-path: circle(150% at calc(100% - 60px) 40px); }
.menu__list { position: relative; list-style: none; margin: 0; padding: 0; }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: flex; align-items: baseline; gap: 16px; text-decoration: none; font-family: var(--f-display);
  font-size: clamp(38px, 6.4vw, 92px); line-height: 1.02; text-transform: uppercase;
  transform: translateY(110%); transition: transform 1s cubic-bezier(.22, 1, .36, 1), color var(--hover) var(--soft);
}
.menu__list a small { font-family: var(--f-mono); font-size: 12px; color: var(--gold); }
.menu__list a > * , .menu__list a { will-change: transform; }
.menu__list a .t { display: inline-block; transition: transform .6s var(--soft); }
.menu__list a:hover { color: var(--gold); }
.menu__list a:hover .t { transform: translateX(14px); }
.menu-open .menu__list a { transform: none; }
/* abrindo: de cima para baixo */
.menu-open .menu__list li:nth-child(2) a { transition-delay: .04s } .menu-open .menu__list li:nth-child(3) a { transition-delay: .08s }
.menu-open .menu__list li:nth-child(4) a { transition-delay: .12s } .menu-open .menu__list li:nth-child(5) a { transition-delay: .16s }
.menu-open .menu__list li:nth-child(6) a { transition-delay: .2s } .menu-open .menu__list li:nth-child(7) a { transition-delay: .24s }
.menu-open .menu__list li:nth-child(8) a { transition-delay: .28s }
/* fechando: a mesma animação ao contrário, de baixo para cima */
.menu__list li:nth-child(1) a { transition-delay: .28s } .menu__list li:nth-child(2) a { transition-delay: .24s }
.menu__list li:nth-child(3) a { transition-delay: .2s } .menu__list li:nth-child(4) a { transition-delay: .16s }
.menu__list li:nth-child(5) a { transition-delay: .12s } .menu__list li:nth-child(6) a { transition-delay: .08s }
.menu__list li:nth-child(7) a { transition-delay: .04s }
/* no hover a cor responde na hora, sem esperar o atraso da entrada */
.menu-open .menu__list a:hover { transition-delay: 0s; }
.menu__preview { position: relative; aspect-ratio: 4/5; max-height: 70vh; border-radius: 14px; overflow: hidden; opacity: 0; transform: scale(.96); transition: opacity .6s var(--soft), transform .7s var(--soft); }
.menu-open .menu__preview { opacity: 1; transform: none; transition: opacity .7s var(--soft) .15s, transform .8s var(--soft) .15s; }
.menu__preview img { width: 100%; height: 100%; object-fit: cover; }
.menu__preview img.in { animation: pv .9s var(--soft); }
@keyframes pv { from { opacity: 0; transform: scale(1.06) } to { opacity: 1; transform: none } }
.menu__foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; opacity: 0; transition: opacity .4s var(--soft); }
.menu-open .menu__foot { opacity: 1; transition: opacity .9s var(--soft) .4s; }

/* ========== HERO ========== */
.hero { position: relative; height: 100vh; height: 100svh; }
.hero__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.hero__media, .hero__grade, .hero__mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 40%; }
.hero__grade { background:
  linear-gradient(180deg, rgba(10,4,6,.2) 0%, rgba(10,4,6,0) 30%, rgba(10,4,6,.55) 70%, var(--ink) 100%),
  linear-gradient(90deg, rgba(90,6,16,.75) 0%, rgba(90,6,16,0) 60%); }
.no-anim .hero__mask { display: none; }
.hero__top {
  position: absolute; top: 88px; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: rgba(255,255,255,.85); z-index: 3;
}
.hero__intro { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; z-index: 3; }
.hero__kicker { font-family: var(--f-mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 16px; color: var(--gold); }
.hero__copy { position: absolute; left: var(--pad); right: var(--pad); bottom: 12vh; z-index: 4; max-width: 1100px; }
.anim .hero__copy > * { opacity: 0; }
.hero__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(84px, 17vw, 280px); line-height: .82; margin: 0 0 22px; letter-spacing: -.01em; display: flex; flex-wrap: wrap; gap: 0 .18em; }
.hero__title .outline { color: transparent; -webkit-text-stroke: 2px var(--cream); }
.hero__lead { font-size: clamp(17px, 1.6vw, 22px); max-width: 560px; color: rgba(247,236,223,.85); margin: 0 0 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__scroll { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.hero__scroll i { width: 1px; height: 46px; background: linear-gradient(var(--cream), transparent); animation: drip 2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1); opacity: 0 } }
.hero__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; z-index: 2; pointer-events: none; opacity: .8; }

/* ========== MARQUEE ========== */
.marquee { background: var(--red); color: #fff; overflow: hidden; padding: 18px 0; transform: rotate(-1.5deg) scale(1.03); margin: -24px 0 0; position: relative; z-index: 5; border-block: 2px solid var(--ink); }
.marquee__track { display: flex; width: max-content; gap: 30px; align-items: center; font-family: var(--f-display); font-size: clamp(28px, 4vw, 54px); text-transform: uppercase; white-space: nowrap; }
.marquee__track b { color: var(--gold); font-size: .6em; font-weight: 400; }
.no-anim .marquee__track { animation: mq 30s linear infinite; }
@keyframes mq { to { transform: translateX(-50%) } }

/* ========== ABOUT ========== */
main { overflow-x: clip; }
section { position: relative; }
.about { background: var(--ink); padding: clamp(100px, 14vw, 200px) var(--pad) 80px; }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.about__photo { position: sticky; top: 100px; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5.6; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__tag { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(10,4,6,.55); backdrop-filter: blur(12px); font-size: 13px; }
.about__tag b { font-family: var(--f-display); font-weight: 400; font-size: 26px; color: var(--gold); line-height: 1; white-space: nowrap; }
.about__text p { color: var(--muted); max-width: 640px; }
.about__text .lede { font-size: clamp(19px, 1.7vw, 24px); color: var(--cream); line-height: 1.5; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(70px, 10vw, 140px); border-top: 1px solid var(--line); }
.stat { padding: 34px 24px 10px 0; border-right: 1px solid var(--line); padding-left: 24px; }
.stat:first-child { padding-left: 0; } .stat:last-child { border-right: 0; }
.stat b { font-family: var(--f-display); font-weight: 400; font-size: clamp(64px, 8vw, 128px); line-height: .9; background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat sup { font-family: var(--f-display); font-size: clamp(28px, 3vw, 48px); color: var(--gold); vertical-align: top; position: relative; top: .2em; }
.stat span { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); max-width: 220px; }

/* ========== LABEL ========== */
.label { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 6vw, 100px); align-items: center; padding: clamp(80px, 10vw, 160px) var(--pad); background: radial-gradient(circle at 25% 50%, rgba(215,25,42,.35), transparent 55%), var(--ink-2); overflow: hidden; }
.label__logo { aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: center; border-radius: 50%; background: radial-gradient(circle, var(--red) 0%, var(--red-deep) 60%, var(--blood) 100%); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line), 0 0 120px rgba(215,25,42,.45); position: relative; }
.label__logo::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(0,0,0,.18) 0 1px, transparent 1px 5px); }
.label__logo img { width: 88%; position: relative; }
.label__text p { color: var(--muted); max-width: 560px; }
.label__projects ul { list-style: none; margin: 10px 0 0; padding: 0; }
.label__projects li { font-family: var(--f-display); font-size: clamp(32px, 4vw, 56px); text-transform: uppercase; line-height: 1.08; border-bottom: 1px solid var(--line); padding: 8px 0; display: flex; justify-content: space-between; align-items: center; transition: color var(--hover) var(--soft); }
.label__projects li span { display: inline-block; transition: transform .6s var(--soft); }
.label__projects li::after { transition: transform .6s var(--soft); }
.label__projects li:hover span { transform: translateX(14px); }
.label__projects li:hover::after { transform: translate(-6px, -6px); }
.label__projects li::after { content: '↗'; font-size: .5em; color: var(--red); }
.label__projects li:hover { color: var(--gold); }

/* ========== DISCOGRAFIA ========== */
.disco { background: var(--red-deep); background: linear-gradient(180deg, var(--red-deep), var(--blood)); }
.disco__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 40px; overflow: hidden; }
.disco__head { padding: 0 var(--pad); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0 40px; }
.disco__head .eyebrow { width: 100%; }
.disco__head .h-display { margin-bottom: 10px; }
.disco__hint { margin: 0 0 18px; }
.disco__track { display: flex; gap: 34px; padding: 30px var(--pad) 20px; width: max-content; will-change: transform; }
.rec { width: clamp(220px, 21vw, 300px); flex: none; cursor: pointer; outline-offset: 8px; }
.rec__year { font-family: var(--f-display); font-size: 44px; line-height: 1; margin-bottom: 14px; color: var(--gold); }
.rec__year--dim { color: transparent; -webkit-text-stroke: 1px rgba(255,194,75,.35); }
.rec__art { position: relative; aspect-ratio: 1; }
.rec__sleeve { position: absolute; inset: 0; z-index: 2; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: transform .8s var(--soft), box-shadow .8s var(--soft); background: #000; }
.rec__sleeve img { width: 100%; height: 100%; object-fit: cover; }
.rec__disc { position: absolute; inset: 3%; border-radius: 50%; z-index: 1; transition: transform .9s var(--soft);
  background: radial-gradient(circle, #111 0 16%, transparent 16.5%), repeating-radial-gradient(circle, #151515 0 2px, #0a0a0a 2px 4px);
  box-shadow: 0 10px 40px rgba(0,0,0,.6); display: grid; place-items: center; }
.rec__disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent, rgba(255,255,255,.12) 10%, transparent 20%, transparent 50%, rgba(255,255,255,.1) 60%, transparent 70%); }
.rec__disc span { width: 34%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 3px #000; position: relative; }
.rec__disc span::after { content: ''; position: absolute; inset: 44%; border-radius: 50%; background: var(--ink); }
/* só vale sem a animação via JS (sem GSAP / telas de toque); com JS o GSAP controla o disco */
body:not(.js-hover) .rec:hover .rec__disc, body:not(.js-hover) .rec:focus-visible .rec__disc { transform: translateX(28%) rotate(120deg); }
body:not(.js-hover).is-playing .rec:hover .rec__disc { animation: spin 1.8s linear infinite; }
.js-hover .rec__disc, .js-hover .rec__sleeve, .js-hover .poster__img img, .js-hover .film__img img, .js-hover .pod__img img, .js-hover .pod { transition-property: background-color, filter, box-shadow, opacity !important; }
.js-hover.is-playing .rec:hover .rec__disc { animation: none; }
.rec__art { transform-style: preserve-3d; will-change: transform; }
/* vinil e capa em camadas próprias da placa de vídeo: girar/deslizar não obriga a redesenhar os gradientes */
.rec__disc, .rec__sleeve { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rec__meta h3, .rec__meta p { transition: color var(--hover) var(--soft); }
.rec:hover .rec__meta h3 { color: var(--gold); }
@keyframes spin { from { transform: translateX(28%) rotate(120deg) } to { transform: translateX(28%) rotate(480deg) } }
.rec__meta { margin-top: 18px; }
.rec__type { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rec--solo .rec__type { color: var(--gold); }
.rec__meta h3 { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.02; margin: 4px 0 2px; text-transform: uppercase; }
.rec__meta p { margin: 0; font-size: 14px; color: rgba(255,255,255,.7); }
.rec--end { display: grid; align-content: center; justify-items: start; gap: 18px; padding-top: 60px; cursor: default; }
.disco__track { cursor: grab; user-select: none; -webkit-user-select: none; }
.disco__track.is-grab { cursor: grabbing; }
.disco__track.is-grab .rec { pointer-events: none; }
.no-anim .disco__track { width: auto; overflow-x: auto; scrollbar-width: none; }
.disco__bar { display: flex; align-items: center; gap: 16px; margin: 18px var(--pad) 0; }
.disco__arrow { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); font-size: 18px; transition: background-color var(--hover) var(--soft), color var(--hover) var(--soft), border-color var(--hover) var(--soft); }
.disco__arrow:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.disco__scroll { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
.disco__scroll::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(255,255,255,.18); border-radius: 2px; }
.disco__thumb { position: absolute; left: 0; top: 50%; height: 6px; border-radius: 99px; background: var(--gold); transform: translate(0, -50%); transition: height .6s var(--soft), background-color .6s var(--soft); cursor: grab; }
.disco__scroll:hover .disco__thumb, .disco__scroll.is-drag .disco__thumb { height: 10px; background: #ffd57a; }
.disco__scroll.is-drag, .disco__scroll.is-drag .disco__thumb { cursor: grabbing; }

/* ========== SPOTLIGHT ========== */
.spot { overflow: hidden; padding: clamp(90px, 12vw, 180px) var(--pad); }
.spot__bg { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(60px) saturate(1.3) brightness(.45); }
.spot::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--blood) 0%, transparent 25%, transparent 75%, var(--ink) 100%); }
.spot__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.spot__turntable { position: relative; aspect-ratio: 1; width: 78%; }
.spot__sleeve { position: absolute; inset: 0; z-index: 2; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.6); }
.spot__sleeve img { width: 100%; height: 100%; object-fit: cover; }
.spot__vinyl { position: absolute; inset: 2%; border-radius: 50%; z-index: 1;
  background: repeating-radial-gradient(circle, #151515 0 2px, #080808 2px 4px); box-shadow: 0 20px 60px rgba(0,0,0,.7); display: grid; place-items: center; }
.spot__vinyl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.14) 8%, transparent 16%, transparent 50%, rgba(255,255,255,.1) 58%, transparent 66%); }
.spot__label { width: 36%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; }
.no-anim .spot__vinyl { transform: translateX(40%); }
.spot__meta { color: var(--gold); margin: -10px 0 20px; }
.spot__text > p:not(.eyebrow):not(.spot__meta) { color: rgba(247,236,223,.8); max-width: 520px; }
.spot__also { display: flex; gap: 16px; align-items: center; margin-top: 34px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,4,6,.4); backdrop-filter: blur(10px); max-width: 460px; }
.spot__also img { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; }
.spot__also b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 26px; text-transform: uppercase; line-height: 1; }
.spot__also span { font-size: 13px; color: var(--muted); }

/* ========== TOUR ========== */
.tour { padding: clamp(90px, 12vw, 180px) var(--pad); background: var(--ink); }
.tour__head { text-align: center; margin-bottom: clamp(50px, 8vw, 100px); }
.tour__head .eyebrow { justify-content: center; }
.tour__head .h-display { font-size: clamp(72px, 15vw, 240px); background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tour__head .line__in { background: inherit; -webkit-background-clip: text; background-clip: text; }
.tour__sub { margin: 0; }
.tour__year { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); border-top: 1px solid var(--line); padding: 30px 0; }
.tour__yr { overflow: hidden; }
.tour__yr span { display: block; font-family: var(--f-display); font-size: clamp(60px, 8vw, 128px); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--red); position: sticky; top: 100px; }
.tour__year ul { list-style: none; margin: 0; padding: 0; }
.gig { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.4fr); gap: 20px; align-items: baseline; padding: 18px 12px; border-bottom: 1px dashed var(--line); transition: background-color var(--hover) var(--soft); border-radius: 6px; }
.gig > * { transition: transform .6s var(--soft), color var(--hover) var(--soft); }
.gig:last-child { border-bottom: 0; }
.gig:hover { background: rgba(215,25,42,.14); }
.gig:hover > * { transform: translateX(10px); }
.gig:hover > .gig__info { transform: translateX(6px); }
.gig__name { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); text-transform: uppercase; line-height: 1.05; }
.gig__name em { font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; background: var(--gold); color: var(--ink); padding: 3px 8px; border-radius: 99px; margin-left: 10px; vertical-align: middle; white-space: nowrap; }
.gig__place { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.gig__info { font-size: 14px; color: var(--muted); }

/* ========== SECTION HEAD ========== */
.section-head { margin-bottom: clamp(40px, 6vw, 80px); max-width: 1100px; }
.section-head__txt { color: var(--muted); max-width: 640px; font-size: 18px; }

/* ========== CULTURE ========== */
.culture { padding: clamp(90px, 12vw, 180px) var(--pad); background: linear-gradient(180deg, var(--ink), var(--ink-3)); }
.culture__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.poster { cursor: pointer; }
.poster:nth-child(even) { margin-top: 80px; }
.poster__img { aspect-ratio: 3/4; overflow: hidden; border-radius: 10px; background: var(--ink-3); }
.poster__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--soft), filter .7s var(--soft); filter: saturate(.9); }
.poster:hover .poster__img img { transform: scale(1.04); filter: saturate(1.2); }
.poster__meta { padding-top: 16px; }
.poster__meta time { font-family: var(--f-mono); font-size: 12px; color: var(--gold); letter-spacing: .1em; }
.poster:hover .poster__meta h3, .film:hover .film__meta h3, .pod:hover h3 { color: var(--gold); }
.poster__meta h3 { transition: color var(--hover) var(--soft); font-family: var(--f-display); font-weight: 400; font-size: 28px; text-transform: uppercase; line-height: 1.02; margin: 6px 0; }
.poster__meta p { margin: 0; font-size: 14px; color: var(--muted); }

/* ========== CINEMA ========== */
.cinema { padding: clamp(90px, 12vw, 180px) var(--pad); background: var(--ink-3); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.filters button { padding: 10px 18px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: background-color var(--hover) var(--soft), color var(--hover) var(--soft), border-color var(--hover) var(--soft); }
.filters button sup { font-family: var(--f-mono); font-size: 10px; margin-left: 4px; color: var(--gold); }
.filters button:hover { border-color: var(--cream); }
.filters button[aria-selected="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.filters button[aria-selected="true"] sup { color: var(--red); }
.cinema__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 22px; }
.film { cursor: pointer; }
.film.is-hidden { display: none; }
.film__img { aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; position: relative; background: #000; }
.film__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(215,25,42,.6)); opacity: 0; transition: opacity .6s var(--soft); }
.film:hover .film__img::after { opacity: 1; }
.film__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--soft); }
.film:hover .film__img img { transform: scale(1.04); }
.film__meta { padding-top: 14px; }
.film__meta span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.film__meta h3 { transition: color var(--hover) var(--soft); font-family: var(--f-display); font-weight: 400; font-size: 24px; text-transform: uppercase; line-height: 1.05; margin: 4px 0; }
.film__meta p { margin: 0; font-size: 13px; color: var(--muted); }

/* ========== PODS ========== */
.pods { padding: clamp(90px, 12vw, 180px) var(--pad); background: var(--ink); }
.pods__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pod { cursor: pointer; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--ink-2); transition: background-color var(--hover) var(--soft), transform .6s var(--soft); }
.pod:hover { background: var(--ink-3); transform: translateY(-4px); }
.pod__img { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.pod__img img { width: 100%; height: 100%; object-fit: cover; }
.pod__play { position: absolute; right: 12px; bottom: 12px; width: 48px; height: 48px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font-size: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transform: scale(.9); opacity: 0; transition: opacity var(--hover) var(--soft), transform var(--hover) var(--soft); }
.pod:hover .pod__play { transform: none; opacity: 1; }
.pod__kind { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.pod h3 { transition: color var(--hover) var(--soft); font-family: var(--f-display); font-weight: 400; font-size: 24px; text-transform: uppercase; line-height: 1.05; margin: 6px 0; }
.pod p { margin: 0; font-size: 13px; color: var(--muted); }

/* ========== STUDY ========== */
.study { padding: clamp(90px, 12vw, 180px) var(--pad); background: linear-gradient(180deg, var(--ink), var(--ink-2)); }
.study__sides { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); }
.side__label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; color: var(--ink); background: var(--gold); display: inline-block; padding: 6px 12px; border-radius: 4px; margin: 0 0 16px; }
.tracks { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.tracks li { counter-increment: t; display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background-color var(--hover) var(--soft); }
.tracks li::before { content: counter(t, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--f-mono); font-size: 12px; color: var(--red); padding-top: 4px; }
.tracks li b { font-size: 17px; font-weight: 700; }
.tracks li span { grid-column: 2; font-size: 14px; color: var(--muted); }
.tracks li time { grid-column: 3; grid-row: 1; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.tracks li:hover { background: rgba(255,255,255,.03); }
.tracks li b { transition: transform .6s var(--soft), color var(--hover) var(--soft); }
.tracks li:hover b { transform: translateX(8px); color: var(--gold); }

/* ========== CONTACT ========== */
.contact { padding: clamp(90px, 12vw, 180px) var(--pad); overflow: hidden; background: var(--red-deep); }
.contact__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; overflow: hidden; }
.contact__photo img { width: 100%; height: 120%; object-fit: cover; object-position: 50% 30%; opacity: .55; mix-blend-mode: luminosity; }
.contact__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--red-deep) 0%, rgba(142,10,22,.4) 50%, rgba(142,10,22,.2)); }
.contact__inner { position: relative; z-index: 2; }
.contact .eyebrow { color: var(--gold); }

.bcard-wrap { perspective: 1400px; width: min(560px, 100%); margin: 0 0 60px; padding: 20px 0; }
.bcard { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; aspect-ratio: 1.75; width: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); transform: rotateX(var(--rx)) rotateY(var(--ry)); cursor: pointer; }
.bcard.is-flipped { transform: rotateX(var(--rx)) rotateY(calc(180deg + var(--ry))); }
.bcard__face { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); padding: clamp(18px, 4%, 30px); }
.bcard__front { background: radial-gradient(circle at 85% 20%, #ff4f5e 0%, transparent 45%), linear-gradient(135deg, #1b0508 0%, #5a0610 55%, #d7192a 130%); display: flex; flex-direction: column; justify-content: flex-end; }
.bcard__logo { position: absolute; right: -8%; top: -14%; width: 62%; opacity: .16; }
.bcard__eq { position: absolute; top: clamp(18px, 6%, 30px); left: clamp(18px, 4%, 30px); display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.bcard__eq i { width: 4px; height: 100%; background: var(--gold); border-radius: 2px; transform-origin: bottom; transform: scaleY(.3); }
.bcard__name { font-family: var(--f-display); font-size: clamp(40px, 9vw, 72px); line-height: .9; }
.bcard__name span { color: transparent; -webkit-text-stroke: 1.5px var(--cream); }
.bcard__role { font-size: clamp(11px, 2vw, 14px); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; color: rgba(255,255,255,.85); }
.bcard__foot { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: clamp(8px, 1.6vw, 10px); letter-spacing: .14em; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); gap: 10px; }
.bcard__back { transform: rotateY(180deg); background: linear-gradient(135deg, #f7ecdf, #ead7c3); color: var(--ink); display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.bcard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(4px, 1.4vw, 10px); font-size: clamp(11px, 2.2vw, 15px); font-weight: 600; line-height: 1.3; word-break: break-word; }
.bcard__list small { display: block; font-family: var(--f-mono); font-size: clamp(8px, 1.6vw, 10px); letter-spacing: .14em; text-transform: uppercase; color: var(--red); font-weight: 400; }
.bcard__qr { width: clamp(80px, 22vw, 130px); aspect-ratio: 1; padding: 8px; background: #fff; border-radius: 10px; }
.bcard__qr svg { width: 100%; height: 100%; display: block; }
.bcard__qr svg path { fill: var(--ink); }
.bcard__shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.28), transparent 45%); mix-blend-mode: overlay; }
.bcard__hint { margin: 18px 0 0; text-align: center; }

.links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.2); max-width: 1100px; }
.link { display: grid; grid-template-columns: 1fr auto; text-align: left; padding: 22px 18px 22px 0; border-bottom: 1px solid rgba(255,255,255,.2); text-decoration: none; position: relative; overflow: hidden; transition: color var(--hover) var(--soft); }
.link small, .link b { transition: transform .6s var(--soft), color var(--hover) var(--soft); }
.link i { transition: transform .6s var(--soft); }
.link:hover small, .link:hover b { transform: translateX(14px); }
.link:hover i { transform: translate(-4px, -3px); }
.link::before { content: ''; position: absolute; inset: 0; background: var(--cream); opacity: 0; transition: opacity var(--hover) var(--soft); z-index: -1; }
.link:hover { color: var(--ink); }
.link:hover::before { opacity: 1; }
.link b { transition: color var(--hover) var(--soft); }
.link:hover b { color: var(--ink); }
.link small { grid-column: 1; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.link b { grid-column: 1; font-size: clamp(15px, 1.4vw, 19px); word-break: break-word; }
.link i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 22px; }

/* ========== FOOTER ========== */
.foot { background: var(--ink); overflow: hidden; padding: 60px var(--pad) 30px; }
.foot__big { font-family: var(--f-display); font-size: 21vw; line-height: 1; padding-top: .06em; text-align: center; background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.01em; white-space: nowrap; }
.foot__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 30px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
/* o letreiro gigante é decorativo: não pode bloquear os cliques da linha de baixo */
.foot__big { pointer-events: none; }
.foot__row { position: relative; z-index: 1; }
.foot__row a { text-decoration: none; color: var(--cream); }
/* crédito: mesma cor e fonte do texto ao lado (sem destaque), mas clicável */
.foot__row a.foot__credit { color: inherit; font: inherit; letter-spacing: inherit; }

/* ========== MODAL ========== */
.modal { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 20px; visibility: hidden; pointer-events: none; transition: visibility 0s linear .55s; }
.modal.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10,4,6,.8); backdrop-filter: blur(10px); opacity: 0; transition: opacity .5s var(--soft); }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__box { position: relative; width: min(1000px, 100%); max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .5s var(--soft), opacity .45s var(--soft); }
.modal.is-open .modal__box { transition: transform .55s var(--soft) .05s, opacity .5s var(--soft) .05s; }
.modal.is-open .modal__box { transform: none; opacity: 1; }
.modal__box.swap .modal__media img { animation: pv .45s var(--soft); }
.modal__box.swap .modal__body > :not(.modal__nav) { animation: fadeUp .45s var(--soft); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.modal__media { background: #000; display: grid; place-items: center; }
.modal__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.modal--tall .modal__media img { aspect-ratio: auto; max-height: 80vh; object-fit: contain; }
.modal__body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; }
.modal__body .mono { color: var(--gold); margin: 0 0 10px; }
.modal__body h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(38px, 4.4vw, 64px); line-height: .95; text-transform: uppercase; margin: 0 0 12px; }
.modal__sub { color: var(--muted); margin: 0; }
.modal__body .roles::before { content: 'Créditos'; width: 100%; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.modal__nav { display: flex; justify-content: space-between; margin-top: auto; padding-top: 30px; gap: 10px; }
.modal__nav button { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; transition: background-color var(--hover) var(--soft), color var(--hover) var(--soft); }
.modal__nav button:hover { background: var(--cream); color: var(--ink); }
.modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 16px; }
.modal__close { transition: background-color var(--hover) var(--soft), transform var(--hover) var(--soft); }
.modal__close:hover { background: var(--gold); transform: rotate(90deg); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .culture__grid, .pods__grid { grid-template-columns: repeat(2, 1fr); }
  .links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  body { font-size: 16px; }
  .menu { grid-template-columns: 1fr; }
  .menu__preview { display: none; }
  .hero__top span:nth-child(2) { display: none; }
  .about__grid, .label, .spot__inner, .study__sides { grid-template-columns: 1fr; }
  .about__photo { position: relative; top: 0; max-width: 460px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 26px 16px 14px !important; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .disco__pin { min-height: 0; padding-top: 90px; }
  .disco__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 30px; }
  .disco__track::-webkit-scrollbar { display: none; }
  .rec { scroll-snap-align: start; width: 64vw; max-width: 280px; }
  .spot__turntable { width: 70%; margin-bottom: 20px; }
  .tour__year { grid-template-columns: 1fr; }
  .tour__yr span { position: static; margin-bottom: 8px; }
  .gig { grid-template-columns: 1fr; gap: 4px; padding: 16px 4px; }
  .poster:nth-child(even) { margin-top: 40px; }
  .contact__photo { width: 100%; opacity: .5; }
  .modal__box { grid-template-columns: 1fr; }
  .modal--tall .modal__media img { max-height: 50vh; }
}
@media (max-width: 560px) {
  .sound__txt { display: none; }
  .sound { padding: 0 14px; }
  .hero__title { font-size: 26vw; }
  .culture__grid, .pods__grid { gap: 14px; }
  .poster__meta h3 { font-size: 20px; }
  .pod { padding: 10px; } .pod h3 { font-size: 19px; }
  .cinema__grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .film__meta h3 { font-size: 19px; }
  .links { grid-template-columns: 1fr; }
  .tracks li { grid-template-columns: 34px 1fr; }
  .tracks li time { grid-column: 2; grid-row: auto; }
  .bcard__back { grid-template-columns: 1fr; align-content: center; }
  .bcard__qr { display: none; }
  .foot__row { flex-direction: column; }
}
/* "Efeitos de animação" desligado no sistema: mantém hovers e fades suaves (movimentos pequenos),
   e só remove o que é movimento contínuo de tela inteira. */
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .hero__scroll i { animation: none; }
}