:root {
  --bg: #000;
  --fg: #fff;
  --accent: #f25623;
  --accent-soft: rgba(242, 86, 35, 0.35);
  --w-72: rgba(255, 255, 255, 0.72);
  --w-64: rgba(255, 255, 255, 0.64);
  --w-56: rgba(255, 255, 255, 0.56);
  --w-32: rgba(255, 255, 255, 0.32);
  --w-24: rgba(255, 255, 255, 0.24);
  --w-16: rgba(255, 255, 255, 0.16);
  --w-08: rgba(255, 255, 255, 0.08);
  --b-56: rgba(0, 0, 0, 0.56);
  --b-16: rgba(0, 0, 0, 0.16);
  --gray-1: #161616;
  --gray-2: #262626;
  --gray-3: #3d3d3d;
  --line: #dedede;
  --max: 1440px;
  --pad: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --lvl: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* trava: nada deixa a página mais larga que a tela (o Safari do iPhone encolhia o site
     inteiro para caber o que estourasse). Fica só aqui, no html: com o body também
     cortando, o body vira uma área de rolagem própria e o fixo (sticky) do estúdio para */
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
p,
h1,
h2,
h3 {
  margin: 0;
}
/* sem palavras viúvas: títulos equilibrados e parágrafos com quebra cuidadosa */
h1,
h2,
h3 {
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mono {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.tag {
  font-size: 14px;
  color: var(--w-64);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tag.dark {
  color: var(--b-56);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-head.center {
  align-items: center;
  text-align: center;
}

/* grão de filme sobre tudo */
/* granulado de filme. A moldura tem o tamanho exato da tela e corta o excesso: antes a
   camada tinha o dobro da tela (inset -50%) solta, e o Safari do iPhone somava esse tamanho
   à largura da página, encolhendo o site inteiro para caber. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}
.grain::before {
  content: "";
  position: absolute;
  inset: -50%;
  opacity: 0.07;
  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='0.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 0.9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.nowrap {
  white-space: nowrap;
}
.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.split .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.8s var(--ease) calc(var(--i) * 35ms + var(--d, 0s));
}
.split.in .w > span {
  transform: none;
}

/* ---------- topbar + nav ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: #000;
  padding: 4px var(--pad);
  text-align: center;
}
.topbar p {
  font-size: 12px;
  color: var(--w-72);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* cada parte num elemento: o espaço entre elas encolhe no celular (antes eram espaços
     fixos no texto e "SÃO PAULO" virava reticências) */
  display: flex;
  justify-content: center;
  gap: 16px;
}
@media (max-width: 600px) {
  .topbar p {
    gap: 8px;
    letter-spacing: 0.04em;
  }
}
/* celular muito estreito: o nome já está no logo da nav logo abaixo */
@media (max-width: 359px) {
  .topbar .tb-brand {
    display: none;
  }
}
/* a barra tem sempre a largura da tela; quem muda de forma é o fundo (recorte) e os itens
   deslizam para dentro. Assim a troca barra → pílula não recalcula o layout a cada quadro,
   o que travava no celular. --nav-in (margem da pílula) e --nav-shift (quanto os itens
   entram) vêm do main.js, conforme a largura da tela. */
.nav {
  --nav-in: 24px;
  --nav-shift: 24px;
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 70;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
}
/* fundo: barra translúcida → pílula escura */
.nav::before,
.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: clip-path 0.7s var(--ease), background 0.5s;
}
.nav::before {
  background: rgba(0, 0, 0, 0.08);
  clip-path: inset(0 0 1px 0 round 0);
}
/* contorno: a linha de baixo da barra, que vira a borda da pílula */
.nav::after {
  z-index: -2;
  background: var(--w-16);
  clip-path: inset(63px 0 0 0 round 0);
}
.nav.scrolled::before {
  background: rgba(0, 0, 0, 0.94);
}
/* depois do hero a barra contrai: flutua a 24px do topo, até 1440px, cantos 100% arredondados */
.nav.floating::before {
  background: #0d0d0d;
  clip-path: inset(1px calc(var(--nav-in) + 1px) 1px calc(var(--nav-in) + 1px) round 31px);
}
.nav.floating::after {
  background: var(--w-08);
  clip-path: inset(0 var(--nav-in) 0 var(--nav-in) round 32px);
}
.nav-logo,
.nav-right {
  transition: transform 0.7s var(--ease);
}
.nav.floating .nav-logo {
  transform: translateX(var(--nav-shift));
}
.nav.floating .nav-right {
  transform: translateX(calc(-1 * var(--nav-shift)));
}
/* na pílula, a linha de progresso fica no trecho reto da borda de baixo */
.nav.floating .nav-progress {
  left: calc(var(--nav-in) + 32px);
  right: calc(var(--nav-in) + 32px);
  bottom: 0;
}

.nav-now {
  display: none !important;
}
.nav-inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo img {
  width: 202px;
  height: 32px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-now {
  font-size: 12px;
  color: var(--w-56);
  opacity: 0;
  transition: opacity 0.4s;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-now.on {
  opacity: 1;
}
.nav-now.on::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 1px;
  animation: blink 1.2s infinite;
}
/* progresso da página: a borda do menu vira uma linha que enche */
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
}
.nav-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--page, 0));
}
.menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--w-72);
}
.menu-btn:hover span {
  color: #fff;
}
@keyframes blink {
  50% { opacity: 0.25; }
}

/* ---------- menu: patchbay de estúdio ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 56px 1fr;
  overflow: hidden;
  isolation: isolate;
}
/* fundo em escada: oito colunas que sobem da base (as do meio na frente) só com
   transform. Antes era um recorte da tela inteira redesenhado a cada quadro, que
   travava ao abrir o menu no celular. As colunas são criadas e animadas no main.js. */
.menu-stairs {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  pointer-events: none;
}
.menu-stairs i {
  flex: 1;
  margin-right: -1px;
  background: #0b0b0b;
  transform: translateY(100%);
}
.menu-stairs i:last-child {
  margin-right: 0;
}
/* brilho do topo e conteúdo aparecem quando os degraus já subiram */
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 60% at 70% 0%, rgba(255, 255, 255, 0.04), transparent 70%);
  pointer-events: none;
}
.menu::before,
.menu > :not(.menu-stairs) {
  opacity: 0;
  transition: opacity 0.2s;
}
.menu.revealed::before,
.menu.revealed > :not(.menu-stairs) {
  opacity: 1;
  /* os degraus já cobriram a tela (main.js só liga revealed no fim da subida) */
  transition: opacity 0.3s;
}
.menu[hidden] {
  display: none;
}
/* trilho do rack, com parafusos e a lombada gravada */
.menu-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  background: linear-gradient(90deg, #161616, #1d1d1d 50%, #141414);
  border-right: 1px solid var(--w-08);
}
.menu-rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  color: var(--w-56);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.screw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a5a5a, #222 70%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  position: relative;
}
.screw::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.7);
  transform: rotate(-30deg);
}
.menu-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 24px clamp(24px, 5vw, 80px) 32px;
  overflow-y: auto;
}
.menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
}
/* X com a mesma área e espessura do ícone de hambúrguer */
.menu-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border-radius: 50%;
  transition: background 0.3s, transform 0.5s var(--ease);
}
.menu-close:hover {
  background: var(--w-08);
  transform: rotate(90deg);
}
.patchbay {
  margin: auto 0;
  padding: 40px 0;
}
.patchbay li {
  border-top: 1px solid var(--w-08);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.patchbay li:last-child {
  border-bottom: 1px solid var(--w-08);
}
.menu.open.revealed .patchbay li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 0.05s);
}
.patchbay a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 44px 1fr auto 12px;
  align-items: center;
  gap: 24px;
  padding: 16px;
}
/* fundo laranja que enche a linha quando o cabo conecta */
.patchbay a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.patchbay li.plugged a::before {
  transform: scaleX(1);
}
/* conector P10 */
.jack {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a4a, #1a1a1a 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.4s;
}
.jack i {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #000;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), 0 0 0 2px #2b2b2b;
}
.patchbay li.plugged .jack {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 3px rgba(0, 0, 0, 0.18);
}
.pb-name {
  font-size: clamp(32px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--w-56);
  transition: color 0.35s, transform 0.5s var(--ease);
}
.patchbay li.plugged .pb-name {
  color: #fff;
  transform: translateX(8px);
}
.pb-desc {
  font-size: 14px;
  color: var(--w-32);
  text-align: right;
  transition: color 0.35s;
}
.patchbay li.plugged .pb-desc {
  color: #fff;
}
/* LED: 8px depois do texto, pulsando de leve em loop */
.pb-led {
  width: 8px;
  height: 8px;
  margin-left: -16px;
  border-radius: 50%;
  background: #2a2a2a;
  transition: background 0.3s;
  animation: ledPulse 1.8s ease-in-out infinite;
}
@keyframes ledPulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.3); opacity: 1; }
}
.patchbay li.plugged .pb-led {
  background: #000;
  box-shadow: none;
}
.menu-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.menu-social {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
  color: var(--w-72);
}
.menu-social a:hover {
  color: #fff;
}
/* o cabo */
.cable {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.cable-line {
  fill: none;
  stroke: #444;
  stroke-width: 7;
  stroke-linecap: round;
}
.cable-signal {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 60 2000;
  stroke-dashoffset: 0;
  opacity: 0;
}
.cable-signal.run {
  opacity: 1;
  animation: signal 0.9s var(--ease-io) forwards;
}
@keyframes signal {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: calc(var(--len, 1200) * -1px); opacity: 0; }
}
.cable-plug rect {
  fill: #1f1f1f;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}
.cable-plug .plug-band {
  fill: var(--accent);
  stroke: none;
}
.cable-plug .plug-tip,
.cable-plug .plug-sleeve {
  fill: #c9c9c9;
  stroke: none;
}
.cable-plug .plug-sleeve {
  fill: #a9a9a9;
}
.cable-plug .plug-boot {
  fill: #2a2a2a;
}
@media (max-width: 600px) {
  .menu {
    grid-template-columns: 36px 1fr;
  }
  .patchbay a {
    grid-template-columns: 32px 1fr 10px;
    gap: 16px;
  }
  .jack {
    width: 28px;
    height: 28px;
  }
  .jack i {
    inset: 8px;
  }
  .pb-desc {
    display: none;
  }
  .pb-led {
    margin-left: 0;
  }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.3s, border-color 0.3s, box-shadow 0.25s;
}
.btn-accent {
  background: var(--accent);
  border: 2px solid rgba(0, 0, 0, 0.16);
  color: #fff;
}
/* hover: o botão afunda, como uma tecla sendo pressionada */
.btn-accent {
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}
.btn-accent:hover {
  transform: translateY(1px);
  background: #e44f1e;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.btn-accent:active {
  transform: translateY(2px);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4);
}
.btn-sound {
  padding: 0 16px;
  border: 1px solid var(--w-16);
  color: var(--w-32);
  gap: 8px;
}
.btn-sound:hover {
  color: #fff;
  border-color: var(--w-32);
}
.btn-sound[aria-pressed="true"] {
  color: #fff;
  border-color: var(--accent);
}
.btn-ghost {
  border: 1px solid var(--w-24);
  color: #fff;
  padding: 0 24px;
}
.btn-ghost:hover {
  background: #fff;
  color: #000;
}
.btn-ghost:hover img {
  filter: invert(1);
}
.divider-v {
  width: 1px;
  height: 24px;
  background: var(--w-16);
  flex: none;
}
.divider-v.tall {
  height: auto;
  align-self: stretch;
}

/* barras de equalizador */
.eq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
}
.eq i {
  width: 1.5px;
  height: calc(6px + var(--b, 0) * 12px);
  min-height: 4px;
  background: currentColor;
  border-radius: 2px;
  transition: height 0.08s;
}
.eq i:nth-child(1), .eq i:nth-child(5) { --b: 0.1; }
.eq i:nth-child(2), .eq i:nth-child(4) { --b: 0.5; }
.eq i:nth-child(3) { --b: 1; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: max(100svh, 720px);
  display: flex;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: -4%;
  z-index: -2;
  /* --px/--py: luz do mouse; --sy: paralaxe da rolagem */
  transform: translate3d(var(--px, 0), calc(var(--py, 0%) + var(--sy, 0px)), 0) scale(1.06);
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroIn 2.4s var(--ease) both;
}
@keyframes heroIn {
  from { transform: scale(1.18); filter: brightness(0); }
  to { transform: scale(1); filter: brightness(1); }
}
/* luz que segue o mouse: em overlay, só realça o que já está iluminado e mantém os pretos limpos */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: radial-gradient(
    circle calc(380px + var(--lvl) * 140px) at var(--mx, 30%) var(--my, 40%),
    rgba(255, 200, 165, 0.55) 0%,
    rgba(255, 150, 100, 0.28) 35%,
    rgba(242, 86, 35, 0.1) 60%,
    rgba(242, 86, 35, 0) 100%
  );
  opacity: var(--glow, 0);
  transition: opacity 0.8s var(--ease);
}
/* sombra fixa embaixo para o texto respirar */
.hero-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  padding-top: 120px;
  padding-bottom: 80px;
}
/* a máscara sobra para cima e para baixo: as letras crescem com a música sem serem cortadas */
.hero-wordmark {
  mix-blend-mode: plus-lighter;
  clip-path: inset(-50% 100% -8% 0);
  animation: wipe 1.1s var(--ease-io) 0.2s forwards;
}
/* a logo vira SVG na página (main.js) e cada letra pula com a música;
   o conjunto acende um pouco a cada batida */
.hero-wordmark img,
.hero-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: brightness(calc(1 + var(--lvl) * 0.6));
}
@keyframes wipe {
  to { clip-path: inset(-50% 0 -8% 0); }
}
.hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  row-gap: 48px;
  column-gap: 32px;
}
.hero-left {
  flex: 1 1 300px;
  max-width: 936px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 586px;
  text-wrap: balance;
  --d: 0.7s;
}
/* texto, botões e a frase de baixo alinhados à esquerda na mesma coluna.
   384px: a 1ª linha termina em "produção" e "para" desce, sempre em duas linhas */
.hero-right {
  flex: 0 1 384px;
  max-width: 384px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.hero-sub {
  font-size: 18px;
  color: var(--w-72);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* celular (título e texto empilhados): 16px do título ao subtítulo, 32px do texto aos botões */
@media (max-width: 900px) {
  .hero-content {
    row-gap: 16px;
  }
  .hero-right {
    gap: 32px;
  }
}
/* a nota fica colada aos botões (16px), não no espaço de 32px */
.hero-micro {
  margin-top: -16px;
  font-size: 12px;
  color: var(--w-32);
}

/* ---------- ticker ---------- */
.ticker {
  position: relative;
  padding: 80px 0;
  background: #000;
  overflow: hidden;
  border-top: 1px solid var(--w-08);
}
.ticker-row {
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  will-change: transform;
}
.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-size: clamp(56px, 10vw, 160px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.25;
}
.ticker-track span::after {
  content: "";
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
/* o preenchimento na cor do fundo é pintado por cima do contorno e esconde
   as bordas internas das partes sobrepostas das letras (T, ç...) */
.ticker-row--alt .ticker-track span {
  color: #000;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.32);
  paint-order: stroke fill;
  font-size: clamp(40px, 6vw, 96px);
}
.ticker-row--alt .ticker-track span::after {
  background: transparent;
  border: 1px solid var(--w-32);
}
.ticker-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 0 0 8px #000;
}

/* ---------- lançamento ---------- */
.release {
  background: #fff;
  padding: 80px var(--pad);
}
.release-card {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  border-radius: 32px;
  overflow: hidden;
  padding: 16px;
}
.release-bg {
  position: absolute;
  inset: 0;
}
.release-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15) translateY(var(--ry, 0));
}
.release-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.64);
}
.release-glass {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: 32px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--w-32);
}
.release-art {
  position: relative;
  flex: 1 1 300px;
  max-width: 600px;
  aspect-ratio: 600 / 520;
}
.release-cd {
  position: absolute;
  inset: 7.69% 0 7.69% 26.67%;
  transform: translateX(-36%);
  transition: transform 1.6s var(--ease) 0.2s;
}
.release-art.in .release-cd {
  transform: none;
}
.cd-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.cd-spin > img:first-child {
  width: 100%;
  height: 100%;
}
.cd-ring {
  position: absolute;
  inset: 33%;
  width: 34%;
  height: 34%;
}
.cd-hub {
  position: absolute;
  inset: 45%;
  width: 10%;
  height: 10%;
}
.spinning {
  animation: spin 2.4s linear infinite;
}
.paused-spin {
  animation-play-state: paused;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.release-case {
  position: absolute;
  inset: 3.85% 20% 3.85% 0;
  border: 1px solid var(--w-24);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 20px 0 40px rgba(0, 0, 0, 0.5);
}
.release-case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.release-case::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.08));
}
.release-case::before {
  content: "";
  position: absolute;
  left: 4%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 1;
}
.release-info {
  flex: 1 1 300px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.release-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.release-title {
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.release-artist {
  font-size: 18px;
  color: var(--w-72);
}
.release-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--w-56);
}
.player {
  width: 100%;
  background: #fff;
  color: #000;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.player-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.player-play {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  transition: transform 0.3s var(--ease);
  position: relative;
}
.player-play:hover {
  transform: scale(1.08);
}
.player-play .i-pause {
  display: none;
}
.is-playing .player-play .i-pause {
  display: block;
}
.is-playing .player-play .i-play {
  display: none;
}
.player-meta {
  flex: 1;
  min-width: 0;
}
.player-track {
  font-size: 16px;
  font-weight: 500;
}
.player-sub {
  font-size: 12px;
  margin-top: 4px;
}
.player-time {
  font-size: 12px;
  color: var(--b-56);
  text-transform: none;
}
.progress {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  cursor: pointer;
}
.progress::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}
.progress-fill {
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: #000;
  border-radius: 4px;
  position: relative;
}
.progress-fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.2s;
}
.progress:hover .progress-fill::after,
.is-playing .progress-fill::after {
  transform: scale(1);
}
.credits {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}
.credits li {
  border-top: 1px solid var(--w-16);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.credits span {
  font-size: 12px;
  color: var(--w-56);
}
.credits strong {
  font-weight: 500;
}
/* player do lançamento: cartão claro translúcido e barra de progresso laranja */
.release .player {
  background: rgba(255, 255, 255, 0.88);
}
/* tempo no canto de cima, na mesma linha do nome da faixa; nome e "Faixa 13 de 14" nunca
   quebram (antes o tempo ao lado espremia o texto e a linha de baixo quebrava) */
.release .player-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 4px;
}
.release .player-play {
  grid-row: 1 / 3;
  align-self: center;
}
.release .player-meta {
  display: contents;
}
.release .player-sub {
  white-space: nowrap;
}
.release .player-track {
  grid-column: 2;
}
.release .player-track {
  grid-row: 1;
  align-self: baseline;
}
.release .player-sub {
  grid-column: 2 / 4;
  grid-row: 2;
  margin-top: 0;
}
.release .player-time {
  grid-column: 3;
  grid-row: 1;
  align-self: baseline;
  white-space: nowrap;
}
.release .progress {
  background: rgba(0, 0, 0, 0.12);
}
.release .progress-fill {
  background: var(--accent);
}
/* mesmo botão do Contato, ocupando a coluna, com o texto à esquerda */
.release-send {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 64px 0 24px;
  text-align: left;
}
/* ---------- estúdio ---------- */

.studio-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 880px;
  text-wrap: balance;
}

/* ---------- O estúdio: galeria horizontal ---------- */
.studio {
  padding: 120px 0;
}
.st-pin {
  position: relative;
  height: 380vh;
}
.st-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* em telas altas o conteúdo fica no meio da altura (antes ficava no topo e sobrava um
     vazio embaixo); "safe" volta a alinhar no topo se não couber, sem cortar o título */
  justify-content: flex-start;
  justify-content: safe center;
  gap: clamp(24px, 4vh, 48px);
  overflow: hidden; /* iOS antes do 16 não entende clip; os atuais usam o @supports abaixo */
  /* começa abaixo da barra flutuante (24 + 64px) com folga, em vez de colar nela */
  padding-top: 136px;
  padding-bottom: 56px;
}
.st-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
}
.st-head-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* lado direito: subtítulo e dica de que a galeria anda para o lado */
.st-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 320px;
}
.st-aside p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--w-56);
}
/* texto e botão a 16px entre si; o bloco fica a 32px da dica */
.st-hint {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--w-72);
}
.st-hint-arrow {
  color: var(--accent);
  animation: hintArrow 1.6s var(--ease-io) infinite;
}
@keyframes hintArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
.st-hint-mob {
  display: none;
}
@media (max-width: 900px) {
  .st-hint-desk {
    display: none;
  }
  .st-hint-mob {
    display: inline;
  }
}
.st-head .studio-title {
  font-size: clamp(32px, 3.4vw, 48px);
  max-width: 760px;
}
.st-viewport {
  /* iOS antes do 16 não entende clip: corta nos dois eixos (sem rolagem própria) */
  overflow: hidden;
}
@supports (overflow: clip) {
  .st-sticky {
    overflow: visible;
    overflow-x: clip;
  }
  .st-viewport {
    overflow: visible;
    overflow-x: clip;
  }
}
.st-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 64px);
  width: max-content;
  padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  will-change: transform;
}
.st-photo {
  margin: 0;
  flex: none;
  width: clamp(300px, 30vw, 460px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.st-photo--wide {
  width: clamp(420px, 46vw, 720px);
}
.st-img {
  position: relative;
  /* a foto cede espaço em telas baixas para o texto do card nunca ser cortado */
  height: clamp(180px, calc(100vh - 520px), 500px);
  border-radius: 10px;
  overflow: hidden;
  background: #111;
}
.st-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  will-change: transform;
}
.st-rec {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
}
.st-rec i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1s infinite;
}
.st-photo figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
}
.st-photo h3 {
  font-size: 24px;
  font-weight: 600;
}
/* todos os textos dos cards quebram em exatamente duas linhas */
.st-photo p {
  color: var(--w-56);
  line-height: 1.5;
  max-width: 300px;
  min-height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* números como páginas do encarte, entre as fotos */
.st-stat {
  flex: none;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 88px;
  min-width: 200px;
}
.st-stat strong {
  font-size: clamp(96px, 11vw, 176px);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.st-stat .mono {
  font-size: 12px;
  color: var(--w-72);
  padding-left: 4px;
}
.st-line {
  display: block;
  height: 1px;
  background: var(--w-16);
}
.st-line i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}
/* celular: também fixa, com a rolagem levando as fotos para o lado (como no desktop).
   Tudo cabe numa tela: a foto encolhe em telas baixas para o texto do card nunca cortar. */
@media (max-width: 900px) {
  .st-pin {
    height: 320vh;
  }
  .st-sticky {
    height: 100vh;
    height: 100svh;
    gap: 32px;
    justify-content: flex-start;
    padding-top: 104px;
    /* respiro mínimo embaixo, maior que a barra do iPhone */
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px));
  }
  /* a área das fotos ocupa o que sobra da tela: a foto cresce ou encolhe para o texto do
     card e a linha de progresso caberem sempre (antes passavam da borda de baixo) */
  .st-viewport {
    flex: 1 1 0;
    min-height: 0;
  }
  .st-track {
    height: 100%;
  }
  .st-photo {
    height: 100%;
  }
  .st-track {
    padding-inline: var(--pad);
    gap: 24px;
  }
  .st-photo,
  .st-photo--wide {
    width: 78vw;
  }
  .st-img {
    flex: none;
    height: max(120px, min(calc(100% - 100px), 64vw));
  }
  /* a primeira é o vídeo da sessão, sem legenda: ocupa a altura toda */
  .st-photo--wide .st-img {
    height: 100%;
  }
  /* título a 16px do subtítulo, o texto a 32px do botão e o botão a 16px da dica */
  .st-head {
    row-gap: 16px;
  }
  .st-aside p {
    margin-bottom: 16px;
  }
  .st-aside .st-hint {
    margin-top: 0;
  }
  /* sem paralaxe no celular: a foto fica parada dentro do card */
  .st-img img {
    transform: none;
    will-change: auto;
  }
  .st-stat {
    min-width: 0;
    padding-bottom: 88px;
  }
}

/* ---------- discos ---------- */
.discs {
  position: relative;
  padding: 80px 0 120px;
  overflow: hidden;
  --s: 1;
}
.discs-title {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.discs-sub {
  font-size: 18px;
  color: var(--w-56);
  max-width: 423px;
  text-wrap: balance;
}
.shelf {
  position: relative;
  margin-top: 64px;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.shelf-scroll {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-top: 40px;
  scroll-behavior: smooth;
}
.shelf-scroll::-webkit-scrollbar {
  display: none;
}
.shelf-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: max-content;
  margin-inline: auto;
  padding-inline: 4px;
}
.disc {
  position: relative;
  flex: none;
  width: calc(64px * var(--s));
  height: calc(var(--h) * var(--s));
  overflow-x: clip;
  /* sem animar largura e altura: isso refazia o layout da estante inteira a cada quadro.
     Os vizinhos deslizam com transform (main.js, abrir disco) */
  transition: opacity 0.5s;
}
.disc.is-open {
  width: calc(440px * var(--so, var(--s)));
  height: calc(548px * var(--so, var(--s)));
}
/* com um disco aberto, os outros ficam na penumbra: uma camada preta por cima (opacity,
   leve) no lugar do filter brightness, que repintava cada lombada a cada quadro */
.disc-spine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.shelf.has-open .disc:not(.is-open) .disc-spine::after {
  opacity: 0.45;
}
.shelf.has-open .disc:not(.is-open) .disc-spine:hover::after {
  opacity: 0;
}

/* lombada: caixa de CD de acrílico com o encarte colorido por trás */
.disc-spine {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(16px * var(--s)) 0;
  background: var(--col);
  color: var(--ink);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 1px 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), opacity 0.35s;
}
/* acrílico: dobradiça na esquerda, brilho vertical e sombra na direita (igual ao Figma) */
.disc-spine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 2% 14%,
    rgba(255, 255, 255, 0.02) 40%,
    rgba(255, 255, 255, 0.12) 42%,
    rgba(255, 255, 255, 0) 52% 80%,
    rgba(0, 0, 0, 0.22) 100%
  );
  pointer-events: none;
}
.disc-spine:hover,
.disc-spine:focus-visible {
  transform: translateY(-16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 18px 30px rgba(0, 0, 0, 0.6);
}
/* gênero, fio e ano no topo da lombada */
.spine-tag {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--meta);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.spine-tag b {
  font-weight: 700;
  text-transform: uppercase;
}
.spine-tag i {
  align-self: stretch;
  height: 1px;
  background: currentColor;
}
/* nome do disco no meio da lombada, lido de cima para baixo */
.spine-label {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.spine-cover {
  position: relative;
  z-index: 1;
  width: calc(52px * var(--s));
  height: calc(52px * var(--s));
  object-fit: cover;
}
.disc.is-open .disc-spine {
  opacity: 0;
  pointer-events: none;
}
.disc.pulling .disc-spine {
  transform: translateY(-48px);
}

/* disco aberto */
.disc-open {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 440px;
  height: 548px;
  transform: scale(var(--so, var(--s)));
  transform-origin: bottom left;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: linear-gradient(180deg, #151515, #0d0d0d);
  border: 1px solid var(--w-08);
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
  text-align: left;
  cursor: pointer;
}
.disc.is-open .disc-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s 0.35s, visibility 0s;
}
.disc-open:hover {
  border-color: var(--w-16);
}
/* gênero no canto esquerdo e ano no direito, acima do CD.
   O painel é reduzido por --s no celular: a fonte compensa para ficar sempre em 12px */
.disc-top {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  font-size: calc(12px / var(--so, var(--s)));
  color: var(--w-56);
  pointer-events: none;
}
.disc-stage {
  position: relative;
  width: 392px;
  height: 400px;
  overflow: visible;
  flex: none;
}
.disc-cd {
  position: absolute;
  left: 36px;
  top: 0;
  width: 320px;
  height: 320px;
  transform: translateY(80px);
  transition: transform 1s var(--ease) 0.2s;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
}
.disc.is-open .disc-cd {
  transform: translateY(0);
  transition-delay: 0.7s;
}
.disc.is-playing .disc-cd {
  transform: translateY(-18px);
}
.disc-cd .cd-spin > img:first-child {
  width: 100%;
  height: 100%;
}
/* caixa de acrílico com encarte */
.disc-case {
  position: absolute;
  left: 31px;
  top: 70px;
  width: 330px;
  height: 330px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 -18px 36px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(20px);
  transition: transform 0.9s var(--ease) 0.4s;
}
.disc.is-open .disc-case {
  transform: none;
}
/* encarte: a capa real do disco, ao lado da dobradiça */
.disc-case .cover-img {
  position: absolute;
  top: 0;
  left: 16px;
  width: calc(100% - 16px);
  height: 100%;
  object-fit: cover;
}
/* dobradiça da caixa, com os frisos do acrílico */
.disc-case::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  z-index: 2;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #2a2a2a, #1a1a1a 60%, #0f0f0f);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.18);
}
/* reflexo do acrílico */
.disc-case::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.07) 100%);
  pointer-events: none;
}
.disc-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.disc-meta > div {
  flex: 1;
  min-width: 0;
}
.disc-name {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.disc-by {
  font-size: 16px;
  color: var(--w-56);
  margin-top: 4px;
}
.disc-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--w-72);
}
.disc.is-playing .disc-state {
  color: var(--accent);
}
.disc-state .eq {
  height: 14px;
}
.disc:not(.is-playing) .disc-state .eq i {
  height: 3px;
}

/* capas: mesma paleta do encarte da lombada */
.cover {
  position: absolute;
  inset: 0;
  background: var(--col);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 24px 24px 24px;
  overflow: hidden;
  --pat: color-mix(in srgb, var(--ink) 14%, transparent);
}
.cover-art {
  position: absolute;
  inset: 0;
}
.cover-top,
.cover-bottom {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.75;
  display: flex;
  justify-content: space-between;
}
.cover-title {
  position: relative;
  z-index: 1;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.cv-rings .cover-art {
  background: repeating-radial-gradient(circle at 70% 40%, transparent 0 16px, var(--pat) 16px 18px);
}
.cv-sun .cover-art {
  background: radial-gradient(circle at 50% 46%, var(--accent) 0 26%, transparent 26.3%);
}
.cv-stripes .cover-art {
  background: repeating-linear-gradient(-35deg, transparent 0 22px, var(--pat) 22px 44px);
}
.cv-grid .cover-art {
  background-image: linear-gradient(var(--pat) 1px, transparent 1px), linear-gradient(90deg, var(--pat) 1px, transparent 1px);
  background-size: 31px 31px;
}
.cv-grid .cover-art::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 93px;
  width: 93px;
  height: 93px;
  background: var(--ink);
  opacity: 0.85;
}
.cv-split .cover-art {
  background: linear-gradient(180deg, transparent 52%, var(--ink) 52%);
  opacity: 0.9;
}
.cv-split .cover-bottom {
  color: var(--col);
  opacity: 1;
}
.cv-wave .cover-art {
  background: radial-gradient(120% 60% at 50% 120%, var(--accent), transparent 62%), repeating-linear-gradient(0deg, transparent 0 10px, var(--pat) 10px 11px);
}
.cv-dot .cover-art {
  background: radial-gradient(var(--pat) 2px, transparent 2.2px);
  background-size: 14px 14px;
}
.cv-big .cover-title {
  font-size: 120px;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 70%, transparent);
}

/* prateleira de madeira: tampo, frente com veios e a sombra dos discos */
.shelf-plank {
  position: relative;
  z-index: 1;
  height: 32px;
  border-radius: 1px;
  background: linear-gradient(180deg, #6b4e39 0, #5a412f 8px, #2f2219 9px, #3a2a1f 12px, #2a1e16 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.shelf-plank::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px, rgba(0, 0, 0, 0.08) 9px 11px, transparent 11px 27px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
  pointer-events: none;
}
.shelf-plank::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}
/* as setas têm a largura do disco aberto e ficam sempre no centro */
.shelf-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(440px * var(--so, var(--s)));
  max-width: 100%;
  margin: 0 auto;
}
/* ---------- móvel da estante ----------
   O tampo (shelf-plank) segura os discos; o corpo desce até o chão com as laterais
   de madeira, um painel da frente rebaixado onde ficam as setas e dois pés. */
.cabinet {
  position: relative;
  z-index: 1;
}
.cabinet-body {
  position: relative;
  margin-inline: 8px;
  padding: 48px 24px 64px;
  background: linear-gradient(90deg, #2b1f16 0, #3a2a1f 2px, #2b1f16 16px, #1a130d 16px, #1a130d calc(100% - 16px), #2b1f16 calc(100% - 16px), #3a2a1f calc(100% - 2px), #2b1f16 100%);
}
/* painel da frente, um pouco para dentro, com veios bem discretos */
.cabinet-body::before {
  content: "";
  position: absolute;
  inset: 16px 32px 24px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 7px, rgba(0, 0, 0, 0.06) 7px 8px, transparent 8px 23px),
    linear-gradient(180deg, #140e0a, #100b08);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 220, 180, 0.04);
  pointer-events: none;
}
/* sombra do tampo caindo sobre o corpo */
.cabinet-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none;
}
.cabinet-feet {
  display: flex;
  justify-content: space-between;
  padding-inline: 40px;
  height: 16px;
}
.cabinet-feet i {
  width: 40px;
  height: 16px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #120d09, #1d150f);
}
/* sombra do móvel no chão */
.cabinet::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 12px;
  z-index: -1;
  background: radial-gradient(50% 100% at 50% 100%, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
}
@media (max-width: 900px) {
  .cabinet-body {
    padding: 40px 32px 48px;
  }
  .cabinet-body::before {
    inset: 12px 24px 16px;
  }
  .cabinet-feet {
    padding-inline: 24px;
  }
}
.shelf-line {
  position: relative;
  flex: 1;
  height: 16px;
  margin-inline: 8px;
}
/* sem linha no meio: só barras arredondadas, centradas na altura das setas.
   Paradas ficam como pontinhos que respiram devagar; com música sobem até 16px */
.shelf-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shelf-wave i {
  width: 2px;
  height: 16px; /* a altura real vem do scaleY no main.js (de 2 a 16px) */
  transform: scaleY(0.125);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.24);
}
/* setas no mesmo padrão dos botões principais: laranja com borda interna preta */
.shelf-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(0, 0, 0, 0.16);
  color: #fff;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.shelf-arrow svg {
  transition: transform 0.35s var(--ease);
}
#shelfPrev:hover:not(:disabled) svg {
  transform: translateX(-2px);
}
#shelfNext:hover:not(:disabled) svg {
  transform: translateX(2px);
}
.shelf-arrow:disabled {
  background: #1c1c1c;
  border-color: var(--w-08);
  color: var(--w-32);
  cursor: default;
}

/* ---------- serviços ---------- */
.services {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #faf8f5;
  color: #000;
  padding: 80px 0 120px;
}
.services-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 64px;
}
/* celular (título e texto empilhados): 16px do título ao subtítulo, como no hero */
@media (max-width: 900px) {
  .services-head {
    gap: 16px;
  }
}
.services-head > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.services-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 560px;
}
.services-sub {
  max-width: 220px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--b-56);
}

/* ---------- contato ---------- */
/* depois do mapa (120px embaixo) não precisa de mais 160px em cima */
.contact {
  padding-top: 80px;
  padding-bottom: 80px;
}
.contact-card {
  position: relative;
  border-radius: 32px;
  border: 1px solid var(--w-08);
  padding: 16px;
  overflow: hidden;
}
.contact-bg {
  position: absolute;
  inset: 0;
}
.contact-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1) translateY(var(--cy, 0));
}
.contact-glass {
  position: relative;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid var(--w-08);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.contact-title {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  line-height: 1;
  max-width: 600px;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.96);
}
.form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px;
}
.fields {
  flex: 1 1 344px;
  display: flex;
  flex-direction: column;
}
.field {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--w-24);
  padding-top: 24px;
}
.field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.field:focus-within::after {
  transform: scaleX(1);
}
.field input,
.field textarea {
  width: 100%;
  background: none;
  border: 0;
  outline: 0;
  color: #fff;
  font: inherit;
  font-size: 16px;
  padding: 0 0 16px;
  resize: none;
}
.field span {
  position: absolute;
  left: 0;
  top: 26px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.48);
  pointer-events: none;
  transition: transform 0.35s var(--ease), color 0.3s, font-size 0.3s;
  transform-origin: left;
}
.field input:focus + span,
.field input:not(:placeholder-shown) + span,
.field textarea:focus + span,
.field textarea:not(:placeholder-shown) + span {
  transform: translateY(-22px) scale(0.75);
  color: var(--w-72);
}
.field.invalid {
  border-color: var(--accent);
}
.field--area textarea {
  min-height: 72px;
}
.form-side {
  flex: 0 1 340px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* sempre dois por linha (Gravação e Mixagem em cima, Masterização e Produção embaixo),
   em português e em inglês; cada linha com a largura das próprias palavras */
.chips {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.chips-row {
  display: flex;
  gap: 8px;
}
.chips legend {
  font-size: 14px;
  color: var(--w-56);
  margin-bottom: 16px;
  padding: 0;
}
.chips label {
  position: relative;
}
.chips input {
  position: absolute;
  opacity: 0;
}
.chips span {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--w-16);
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.chips span:hover {
  border-color: var(--w-32);
}
.chips input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
}
/* celular pequeno: os dois chips de cada linha cabem lado a lado */
@media (max-width: 480px) {
  .chips span {
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
  }
}
.chips input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.send {
  position: relative;
  height: 57px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 500;
  overflow: hidden;
  border: 2px solid var(--w-16);
}
.send span {
  position: relative;
  z-index: 1;
  transition: color 0.4s;
}
.send i {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 48px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* (48 - 24) / 2: a seta fica no centro exato do círculo */
  padding-right: 12px;
  transition: width 0.6s var(--ease);
}
.send:hover i {
  width: calc(100% - 8px);
}
.send:hover span {
  color: #fff;
}
.send img {
  transition: transform 0.4s var(--ease);
}
.send:hover img {
  transform: rotate(45deg);
}
.form-ok {
  width: 100%;
  font-size: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
}
.form-ok[hidden] {
  display: none;
}
.form-ok::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- footer ---------- */
.footer {
  padding: 160px 0 24px;
}
.footer {
  overflow: hidden;
}
.footer-wordmark {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wm {
  display: block;
  width: 100%;
  height: auto;
}
.wm-letter,
.wm-bar,
.wm-mic,
.wm-mic-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
/* antes de entrar na tela: o mic ainda está no céu */
.wm-mic {
  transform: translateY(-900px);
}
.wm.landed .wm-mic {
  transform: none;
}
.wm.landed .wm-bar {
  transform: translateY(210px);
}

/* hover: a logo dança e o mic balança no ritmo */
.wm.dancing .wm-letter {
  animation: wmDance 0.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.17s);
}
.wm.dancing .wm-mic-body {
  animation: wmSway 0.5s ease-in-out infinite alternate;
}
@keyframes wmDance {
  0% { transform: translateY(0) rotate(-3deg) scaleY(1); }
  50% { transform: translateY(-16px) rotate(0deg) scaleY(1.04); }
  100% { transform: translateY(0) rotate(3deg) scaleY(0.97); }
}
@keyframes wmSway {
  0% { transform: rotate(-6deg) translateY(0); }
  100% { transform: rotate(6deg) translateY(-8px); }
}
.wm-note {
  pointer-events: none;
}
/* rodapé: créditos à esquerda, redes no centro, endereço à direita (abre o mapa) */
.footer-row {
  margin-top: 16px;
  border-top: 1px solid var(--w-16);
  padding-top: 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 32px;
  font-size: 14px;
  color: var(--w-64);
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 32px;
  color: var(--w-72);
}
.footer-row a:hover {
  color: var(--accent);
}
.footer-address {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--w-72);
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: color 0.3s, background-size 0.4s var(--ease);
}
.footer-address:hover {
  background-size: 100% 1px;
}
.footer-address svg {
  transition: transform 0.35s var(--ease);
}
.footer-address:hover svg {
  transform: translate(2px, -2px);
}
@media (max-width: 900px) {
  .footer-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .footer-social {
    justify-content: flex-start;
  }
  .footer-address {
    justify-self: start;
  }
}

/* ---------- mini player ---------- */
.mini {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 16px 16px;
  background: #1c1c1c;
  border: 1px solid var(--w-16);
  border-radius: 999px;
  overflow: hidden;
  transform: translate(-50%, 140%);
  transition: transform 0.7s var(--ease);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  max-width: calc(100vw - 32px);
}
.mini.show {
  transform: translate(-50%, 0);
}
.mini-cd {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
}
.mini-meta {
  min-width: 0;
}
.mini-title {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.mini-artist {
  font-size: 12px;
  color: var(--w-56);
  margin-top: 2px;
  white-space: nowrap;
}
.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}
.mini-bars i {
  width: 2px;
  background: var(--accent);
  height: calc(3px + var(--v, 0) * 15px);
  border-radius: 1px;
  transition: height 0.08s;
}
.mini-toggle {
  font-size: 12px;
  color: var(--w-72);
  padding: 4px 0;
}
.mini-toggle:hover {
  color: #fff;
}
.mini-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}
.mini-progress div {
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--accent);
}

.tp {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  background: linear-gradient(180deg, #171717 0%, #0b0b0b 100%);
  border: 1px solid var(--w-08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
/* dígitos "apagados" atrás, como num display de segmentos */

@media (max-width: 1100px) {
  .tp {
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ---------- controle de som flutuante ---------- */
.sound-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 125;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.7s var(--ease), opacity 0.4s;
}
.sound-fab.show {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.sound-pill {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: 999px;
  background: #1c1c1c;
  border: 1px solid var(--w-16);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  transition: border-color 0.3s;
}
.sound-pill:has([aria-pressed="true"]) {
  border-color: var(--accent);
}
.sound-fab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px 0 16px;
  border-radius: 999px 0 0 999px;
  color: var(--w-56);
  transition: color 0.3s;
}
.sound-fab-btn:hover,
.sound-fab-btn[aria-pressed="true"] {
  color: #fff;
}
.vol {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px 0 16px;
  border-left: 1px solid var(--w-16);
  cursor: pointer;
}
.vol input {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --v: 100%;
}
.vol input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--v), var(--w-24) var(--v));
}
.vol input::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--v), var(--w-24) var(--v));
}
.vol input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  transition: transform 0.2s var(--ease);
}
.vol input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}
.vol input:hover::-webkit-slider-thumb,
.vol input:focus-visible::-webkit-slider-thumb {
  transform: scale(1.25);
}
/* sem contorno ao mexer no volume: o foco aparece no botão branco, que cresce */
.vol input:focus-visible {
  outline: none;
}
.vol-n {
  width: 26px;
  font-size: 12px;
  color: var(--w-56);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sound-fab-btn[aria-pressed="true"] .eq {
  color: var(--accent);
}
.sound-fab-btn .eq {
  height: 20px;
}
.fab-label {
  font-size: 12px;
  white-space: nowrap;
}
/* anel que pulsa para chamar atenção enquanto o som está desligado */
.sound-pill::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.sound-fab.nudge .sound-pill:not(:has([aria-pressed="true"]))::after {
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0% { opacity: 0.8; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.18, 1.5); }
}
.sound-tip {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 248px;
  padding: 16px 16px 16px 16px;
  border-radius: 14px;
  background: #fff;
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: tipIn 0.6s var(--ease) both;
}
.sound-tip[hidden] {
  display: none;
}
.sound-tip::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}
.sound-tip p {
  flex: 1;
}
.sound-tip-close {
  font-size: 18px;
  line-height: 1;
  color: var(--b-56);
}
.sound-tip-close:hover {
  color: #000;
}
@keyframes tipIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .shelf-track {
    padding-inline: max(4px, calc(50vw - var(--pad) - 220px * var(--s)));
  }
}
@media (max-width: 900px) {
  .discs {
    /* 0.8: a lombada fica com 51px, o mínimo para "HIP-HOP" caber em 12px */
    --s: 0.8;
  }
  .spine-label {
    font-size: 13px;
  }
  .hero-right {
    align-items: flex-start;
  }
  .nav-now {
    display: none;
  }
}
/* telas médias: o mini player sobe e fica empilhado acima do controle de som */
@media (max-width: 1200px) {
  .mini {
    left: auto;
    right: 24px;
    bottom: 92px;
    transform: translateY(calc(100% + 120px));
  }
  .mini.show {
    transform: none;
  }
}
@media (max-width: 600px) {
  :root {
    --pad: 16px;
  }
  .nav-logo img {
    width: 152px;
    height: 24px;
  }
  .topbar p {
    font-size: 12px;
  }
  .release {
    padding: 48px var(--pad);
  }
  .release-card {
    padding: 16px;
    border-radius: 32px;
  }
  .release-glass {
    padding: 24px;
    border-radius: 16px;
  }
  .form-side {
    min-width: 0;
    flex: 1 1 100%;
  }
  .fields {
    flex-basis: 100%;
  }
  .hero-actions {
    flex-wrap: wrap;
  }
  .btn {
    padding: 0 24px;
  }
  .mini-title {
    max-width: 120px;
  }
  .sound-fab {
    right: 16px;
    bottom: 16px;
  }
  .sound-fab-btn {
    padding: 0 16px 0 16px;
  }
  .vol {
    padding: 0 16px 0 16px;
  }
  .vol input {
    width: 88px;
  }
  .vol-n {
    display: none;
  }
  .fab-label {
    display: none;
  }
  .sound-tip {
    width: min(248px, calc(100vw - 32px));
  }
  .mini {
    left: 16px;
    right: 16px;
    bottom: 82px;
    max-width: none;
    padding-right: 16px;
  }
  .mini-meta {
    flex: 1;
  }
  .mini-bars {
    display: none;
  }
  .ticker-center {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* o "tocando" do menu só aparece onde cabe ao lado da onda de progresso */
@media (max-width: 1280px) {
  .nav-now {
    display: none;
  }
}

/* ---------- progresso: fader de mesa de som ----------
   Branco com mix-blend difference: fica escuro sozinho sobre as sections brancas. */
.fader {
  --rail: clamp(220px, 42vh, 380px);
  position: fixed;
  right: 2px;
  top: 50%;
  z-index: 110;
  width: 24px;
  height: var(--rail);
  transform: translateY(-50%);
  mix-blend-mode: difference;
  color: #fff;
}
.fader-rail {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, 0.28);
}
.fader-marks li {
  position: absolute;
  right: 0;
  top: calc(var(--y, 0) * 100%);
  transform: translateY(-50%);
}
.fader-marks button {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 16px;
  color: inherit;
}
.fader-tick {
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.3s, transform 0.3s var(--ease);
  transform: scaleX(0.5);
}
.fader-marks button.on .fader-tick,
.fader-marks button:hover .fader-tick {
  background: #fff;
  transform: scaleX(1);
}
.fader-name {
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s, transform 0.3s var(--ease);
  pointer-events: none;
}
.fader:hover .fader-name {
  opacity: 0.6;
  transform: none;
  pointer-events: auto;
}
.fader:hover .fader-marks button:hover .fader-name {
  opacity: 1;
}
/* a tampa do fader */
.fader-cap {
  position: absolute;
  left: 50%;
  top: calc(var(--page, 0) * 100%);
  width: 22px;
  height: 10px;
  margin: -5px 0 0 -11px;
  border-radius: 2px;
  background: #fff;
  pointer-events: none;
}
.fader-cap::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1px;
  background: #000;
}
.fader-now {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translate(6px, -50%);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s var(--ease);
}
.fader.moving .fader-now {
  opacity: 1;
  transform: translate(0, -50%);
}
.fader:hover .fader-now {
  opacity: 0;
}
.nav-progress {
  display: none;
}
@media (max-width: 900px) {
  .fader {
    display: none;
  }
  .nav-progress {
    display: block;
  }
}

/* ---------- lançamento: fundo claro com luz difusa ---------- */
.release {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #faf8f5;
}
.release-card {
  z-index: 1;
}
.release-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* sulcos concêntricos, como as trilhas de um CD, sumindo nas bordas */
.release-aura::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1600px;
  height: 1600px;
  margin: -800px 0 0 -800px;
  background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 22px);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 65%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 65%);
  transform: scale(calc(1 + var(--lvl) * 0.04));
  transition: transform 0.2s;
}
.release-aura i {
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 1100px;
  max-height: 1100px;
  border-radius: 50%;
  animation: aura 26s ease-in-out infinite alternate;
}
.release-aura i:nth-child(1) {
  left: -20%;
  top: -40%;
  background: radial-gradient(circle, rgba(255, 196, 168, 0.75), rgba(255, 196, 168, 0) 65%);
}
.release-aura i:nth-child(2) {
  right: -25%;
  top: -10%;
  background: radial-gradient(circle, rgba(242, 86, 35, 0.22), rgba(242, 86, 35, 0) 62%);
  animation-duration: 32s;
  animation-delay: -8s;
}
.release-aura i:nth-child(3) {
  left: 10%;
  bottom: -55%;
  background: radial-gradient(circle, rgba(232, 222, 205, 0.9), rgba(232, 222, 205, 0) 65%);
  animation-duration: 38s;
  animation-delay: -14s;
}
.release-aura i:nth-child(4) {
  right: 5%;
  bottom: -45%;
  background: radial-gradient(circle, rgba(214, 222, 230, 0.8), rgba(214, 222, 230, 0) 62%);
  animation-duration: 30s;
  animation-delay: -20s;
}
@keyframes aura {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 4vw) scale(1.12); }
  100% { transform: translate(-4vw, -3vw) scale(0.94); }
}

/* plug visto por trás, dentro do furo do conector */
.plug-cap .cap-shade {
  fill: rgba(0, 0, 0, 0.45);
}
.plug-cap .cap-body {
  fill: #1f1f1f;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 1;
}
.plug-cap .cap-band {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.plug-cap .cap-boot {
  fill: #2c2c2c;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}
.plug-cap .cap-cable {
  fill: #444;
}

/* número do estúdio entrando quando começa a contar */
.st-stat {
  opacity: 0.15;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.st-stat.counted {
  opacity: 1;
  transform: none;
}

/* barra de rolagem no estilo da página: trilho escuro e tampa de fader */
html {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #0b0b0b;
  /* o espaço da barra fica reservado desde o começo: quando o loader sai e a rolagem
     volta, a página não pula para o lado (o GTmetrix contava isso como salto de layout) */
  scrollbar-gutter: stable;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0b0b0b;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
::-webkit-scrollbar-thumb {
  border: 2px solid #0b0b0b;
  border-radius: 999px;
  background: linear-gradient(180deg, #4a4a4a, #2c2c2c);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* cabeçalho do lançamento, fora do card: título à esquerda, texto à direita */
.release-top {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 32px;
  color: #000;
}
.release-h {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 640px;
}
.release-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--b-56);
  max-width: 320px;
}

/* ---------- cursor ---------- */
.cursor-dot,
.cursor-ring {
  display: none;
}
.has-cursor,
.has-cursor * {
  cursor: none !important;
}
.has-cursor input,
.has-cursor textarea {
  cursor: text !important;
}
.has-cursor .cursor-dot,
.has-cursor .cursor-ring {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  pointer-events: none;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
}
/* branco em difference: fica escuro sozinho sobre as sections claras */
.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  mix-blend-mode: difference;
}
.cursor-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: transform 0.35s var(--ease), background 0.35s, border-color 0.35s;
}
/* sobre algo clicável o anel cresce e vira um disco com furo no centro */
.cursor-hover .cursor-ring::before,
.cursor-plane .cursor-ring::before {
  transform: scale(1.7);
  border-color: transparent;
  background: radial-gradient(circle, transparent 0 16%, rgba(255, 255, 255, 0.9) 17% 19%, rgba(255, 255, 255, 0.16) 20%);
}
.cursor-down .cursor-ring::before {
  transform: scale(0.8);
}
/* tela estreita: cursor menor, proporcional ao layout */
@media (max-width: 900px) {
  .cursor-dot {
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
  }
  .cursor-ring {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
  }
  .cursor-hover .cursor-ring::before,
  .cursor-plane .cursor-ring::before {
    transform: scale(1.5);
  }
}
.cursor-hover.cursor-down .cursor-ring::before {
  transform: scale(1.45);
}
.cursor-text .cursor-dot,
.cursor-text .cursor-ring,
.cursor-out .cursor-dot,
.cursor-out .cursor-ring {
  opacity: 0;
}

/* microanimação da barra: ao virar pílula ela cai no lugar com um quique curto.
   Só movimento vertical: escala junto com a mudança de largura fazia a barra tremer. */
.nav.docking {
  animation: navDock 0.85s linear;
}
.nav.undocking {
  animation: navUndock 0.5s var(--ease);
}
@keyframes navDock {
  0% { transform: translate(-50%, -26px); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  42% { transform: translate(-50%, 0); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  62% { transform: translate(-50%, -7px); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  80% { transform: translate(-50%, 0); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  90% { transform: translate(-50%, -2px); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  100% { transform: translate(-50%, 0); }
}
@keyframes navUndock {
  0% { transform: translate(-50%, 0); }
  45% { transform: translate(-50%, -6px); }
  100% { transform: translate(-50%, 0); }
}

/* a faixa de cima fica fixa sobre a barra e sobe quando a barra vira pílula */
.topbar {
  transition: transform 0.5s var(--ease);
}
.topbar.hide {
  transform: translateY(-100%);
}

/* ---------- CD realista ----------
   Camada parada (a luz não gira com o disco): miolo de plástico transparente,
   área espelhada com reflexo anisotrópico, microssulcos, arco-íris de difração,
   brilho especular e o furo central vazado. */
.cd-real {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 14.6%, rgba(255, 255, 255, 0.55) 14.8% 15.3%, transparent 15.5%),
    radial-gradient(circle, rgba(225, 230, 236, 0.22) 0 22.2%, transparent 22.4%);
  -webkit-mask: radial-gradient(circle, transparent 0 6.8%, #000 7.1%);
  mask: radial-gradient(circle, transparent 0 6.8%, #000 7.1%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.cd-real::before,
.cd-real::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 0 22.3%, #000 22.6%);
  mask: radial-gradient(circle, transparent 0 22.3%, #000 22.6%);
}
.cd-real::before {
  background:
    radial-gradient(circle, transparent 0 22.6%, rgba(255, 255, 255, 0.7) 22.8% 23.3%, rgba(120, 126, 135, 0.35) 23.5% 24%, transparent 24.2% 33%, rgba(80, 86, 95, 0.35) 33.2% 33.6%, transparent 33.8% 98.6%, rgba(255, 255, 255, 0.8) 99% 100%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 0.3%, rgba(0, 0, 0, 0.05) 0.3% 0.6%),
    conic-gradient(from 18deg, #f4f5f7, #aab0b8 10%, #e7e9ec 22%, #868c95 34%, #f7f8f9 48%, #b0b6be 60%, #eceef1 72%, #8a9098 84%, #f4f5f7);
}
.cd-real::after {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.22) 100%),
    conic-gradient(from 300deg, transparent 0deg, rgba(255, 80, 170, 0.32) 16deg, rgba(255, 215, 90, 0.38) 28deg, rgba(100, 255, 175, 0.32) 40deg, rgba(80, 165, 255, 0.38) 52deg, rgba(175, 95, 255, 0.28) 64deg, transparent 82deg 180deg, rgba(255, 80, 170, 0.26) 196deg, rgba(255, 215, 90, 0.32) 208deg, rgba(100, 255, 175, 0.26) 220deg, rgba(80, 165, 255, 0.32) 232deg, rgba(175, 95, 255, 0.22) 244deg, transparent 262deg);
  mix-blend-mode: hard-light;
  opacity: 0.85;
}
/* inscrição gravada no miolo: gira quando o disco toca */
.cd-print {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cd-print text {
  font-family: var(--mono);
  font-size: 2.7px;
  letter-spacing: 0.2px;
  fill: rgba(30, 32, 36, 0.55);
}

/* pop-up de som minimizável: recolhe o volume e o texto, sobra o ícone */
.sound-min {
  display: grid;
  place-items: center;
  width: 36px;
  height: 100%;
  border-left: 1px solid var(--w-16);
  border-radius: 0 999px 999px 0;
  color: var(--w-56);
  transition: color 0.3s;
}
.sound-min:hover {
  color: #fff;
}
.sound-min svg {
  transition: transform 0.4s var(--ease);
}
.sound-fab.is-min .sound-min svg {
  transform: rotate(180deg);
}
.vol,
.fab-label {
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.3s;
}
.sound-fab.is-min .vol,
.sound-fab.is-min .fab-label {
  max-width: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  border-left-width: 0;
}
.sound-fab.is-min .sound-fab-btn {
  gap: 0;
  padding: 0 16px 0 16px;
}
/* ---------- Serviços: versões ---------- */

/* o mini player saiu: o pop-up de som da direita já controla tocar, pausar e volume */
.mini {
  display: none !important;
}

/* fundo explícito nas sections pretas: a cor de trás da transição em escada não vaza nelas */
.studio,
.contact,
.footer {
  background: #000;
}
/* fundo: São Paulo à noite, desenhada no canvas (main.js).
   O topo dissolve no preto da section anterior com uma máscara longa e suave. */
.discs {
  background: #000;
  padding-bottom: 0;
  /* segurar o dedo no céu chama o OVNI: sem menu de contexto nem seleção de texto */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.discs-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.2) 8%, rgba(0, 0, 0, 0.65) 18%, #000 28%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.2) 8%, rgba(0, 0, 0, 0.65) 18%, #000 28%);
}
/* a cidade tem paralaxe (main.js): já começa ampliada para as bordas não aparecerem */
#discsBg {
  transform: scale(1.06);
  will-change: transform;
}
/* os aviões só somem bem no alto, para continuarem visíveis no céu */
.discs-planes {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%);
}
.discs > .container {
  position: relative;
  z-index: 1;
}
/* ---------- Serviços: equipamento de estúdio ----------
   Raios padronizados com o resto do site: moldura 16px, módulos e cards 12px,
   fotos internas 8px (raio interno sempre menor que o externo). */

.svc p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--b-56);
  max-width: 400px;
  /* a quebra é controlada no texto (sem rebalancear as linhas) */
  text-wrap: wrap;
}
.svc-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.svc-h {
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
/* linha entre o Antes/Depois e o botão: 8px de cada lado, até 24px de altura */
.svc-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.16);
}
/* visibility (e não display): o traço guarda o lugar, então esconder não muda a quebra de linha */
.svc-actions.wrapped .svc-divider {
  visibility: hidden;
}
.svc-cta {
  height: 48px;
}
.mix-photo img {
  transition: filter 0.5s;
}
.mix-photo.antes img {
  filter: grayscale(1) brightness(0.6);
}

/* Antes / Depois: seletor que desliza entre as duas opções */
.ab {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--b-16);
  background: #fff;
}
.ab::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid rgba(0, 0, 0, 0.16);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.ab[data-mode="antes"]::before {
  transform: translateX(0);
}
.ab-btn {
  position: relative;
  z-index: 1;
  min-width: 84px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
  transition: color 0.35s;
}
.ab-btn:hover {
  color: #000;
}
.ab-btn.is-on {
  color: #fff;
}

/* peças de hardware compartilhadas */
.vu {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
}
.vu i {
  width: 4px;
  height: 100%;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.1);
  transform-origin: bottom;
  transform: scaleY(0.15);
}
.on .vu i {
  background: #222;
}
.on .vu i:nth-child(n + 10) {
  background: var(--accent);
}
.ru-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #2b2b2b;
  border: 2px solid rgba(0, 0, 0, 0.16);
  transition: background 0.3s;
}
.ru-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(#fff, #cfcfcf);
  transition: transform 0.35s var(--ease);
}
.on .ru-switch {
  background: var(--accent);
}
.on .ru-switch::after {
  transform: translateX(20px);
}
.ru-led {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9c6c0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.on .ru-led {
  background: var(--accent);
  animation: ledPulse 1.8s ease-in-out infinite;
}

/* conteúdo alinhado com o título do módulo, sem vazios */

/* rack + monitor dentro de um card claro: 16px de respiro, cantos 32 fora e 16 dentro, 64px entre as colunas */
.mon {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 64px;
  align-items: stretch;
  padding: 16px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(236, 235, 232, 0.92), rgba(226, 224, 220, 0.92));
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.mon-rack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mon-unit {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  min-height: 96px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f7f6f3, #e6e4df);
  box-shadow: inset 0 1px 0 #fff;
  color: rgba(0, 0, 0, 0.48);
  text-align: left;
  transition: color 0.3s, box-shadow 0.4s;
}
.mon-unit:hover,
.mon-slot.on .mon-unit {
  color: #000;
}
.mon-slot.on .mon-unit {
  box-shadow: inset 4px 0 0 var(--accent);
}
.mon-name {
  flex: 1;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.mon-unit .vu {
  height: 22px;
}
/* monitor: moldura escura e tela com o serviço */
.mon-screen {
  border-radius: 16px;
  overflow: hidden;
}
.mon-display {
  position: relative;
  height: 100%;
  min-height: 460px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.mon-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}
.mon-photo {
  position: absolute;
  inset: 0;
}
.mon-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 120px 32px 32px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: #fff;
}
.mon-overlay p {
  color: rgba(255, 255, 255, 0.72);
}
.mon-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .mon {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* troca deslizando, na direção do módulo escolhido */
.mon-item.on {
  opacity: 1;
  visibility: visible;
  animation: paneIn 0.6s var(--ease) both;
}
.mon-item.on.from-up {
  animation-name: paneInUp;
}

@keyframes paneIn {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes paneInUp {
  from { opacity: 0; transform: translateY(-32px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .mon-display {
    min-height: 420px;
  }
}

/* gaveta do card: só no celular, onde o monitor sai de cena */
.mon-slot {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mon-drawer {
  display: none;
}
@media (max-width: 900px) {
  .mon-screen {
    display: none;
  }
  /* no celular cada card tem a própria altura (no desktop eles dividem a altura do monitor) */
  .mon-slot {
    flex: none;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
  }
  .mon-slot .mon-unit {
    flex: none;
    min-height: 72px;
    border: 0;
    border-radius: 0;
  }
  .mon-drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s var(--ease);
  }
  .mon-slot.on .mon-drawer {
    grid-template-rows: 1fr;
  }
  .mon-drawer-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 16px;
  }
  .mon-slot.on .mon-drawer-inner {
    padding: 16px 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .mon-drawer-photo {
    position: relative;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
  }
  .mon-drawer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mon-drawer .svc-actions {
    width: 100%;
  }
  .mon-drawer .svc-divider {
    background: rgba(0, 0, 0, 0.16);
  }
}

/* ---------- Onde estamos ---------- */
.where {
  padding: 120px 0;
  background: #000;
}
.where-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 64px;
  /* o card do mapa acompanha a altura da coluna de texto */
  align-items: stretch;
}
/* padrão de cabeçalho: etiqueta 16 título 16 subtítulo 32 botão 32 bloco */
.where-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.where-info .where-sub {
  margin-top: 16px;
}
.where-info > .btn {
  margin-top: 32px;
}
.where-title {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 480px;
}
.where-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--w-56);
  white-space: nowrap;
}
.where-legend {
  margin: 32px 0 0;
  width: 100%;
  border-top: 1px solid var(--w-16);
}
.where-legend div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--w-08);
}
.where-legend dt {
  flex: none;
  font-size: 12px;
  color: var(--w-56);
}
.where-legend dd {
  margin: 0;
  font-size: 14px;
  color: #fff;
  text-align: right;
  /* o valor encolhe e quebra linha se precisar, nunca empurra a borda da tela */
  min-width: 0;
  overflow-wrap: anywhere;
}
.where-legend dd.mono {
  font-size: 12px;
}
/* moldura do mapa (32 fora, 16px de respiro) e o card do mapa dentro (16) */
.map-frame {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--w-08);
}
.map-card {
  --pin-left: calc(100% * var(--pin-x, 0.7));
  --pin-top: calc(100% * var(--pin-y, 0.68));
  position: relative;
  flex: 1;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--w-08);
}
.map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* as regiões não são clicáveis: sem hover. As outras ficam mais escuras, como afundadas,
   e a do estúdio sobressai */
.map-regions {
  pointer-events: none;
}
.map-regions path {
  fill: rgba(0, 0, 0, 0.45);
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
/* a microrregião do estúdio fica destacada */
.map-regions path.home {
  fill: rgba(255, 255, 255, 0.64);
  stroke: rgba(255, 255, 255, 0.64);
}
.map-state {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.5;
  stroke-linejoin: round;
  pointer-events: none;
}
/* pino do estúdio */
.map-pin {
  position: absolute;
  left: var(--pin-left);
  top: var(--pin-top);
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.map-pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(0, 0, 0, 0.16);
  transition: transform 0.3s var(--ease);
}
.map-pin:hover .map-pin-dot {
  transform: scale(1.3);
}
.map-pin-ring {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: pinPulse 2.4s var(--ease) infinite;
}
.map-pin-ring + .map-pin-ring {
  animation-delay: 1.2s;
}
@keyframes pinPulse {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(2); opacity: 0; }
}
/* rótulo com fundo escuro: legível também sobre a região destacada */
.map-pin-label {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  white-space: nowrap;
  color: #fff;
}
/* prévia da foto no hover */
.map-preview {
  position: absolute;
  left: var(--pin-left);
  top: var(--pin-top);
  z-index: 3;
  width: 240px;
  margin: 0;
  padding: 8px;
  border-radius: 16px;
  background: #1c1c1c;
  border: 1px solid var(--w-16);
  transform: translate(-50%, calc(-100% - 32px)) scale(0.9);
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.map-card.peek .map-preview {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 32px)) scale(1);
}
.map-preview img {
  width: 100%;
  height: 144px;
  object-fit: cover;
  border-radius: 8px;
}
.map-preview figcaption {
  padding: 8px 4px 0;
  font-size: 12px;
  color: var(--w-72);
}
/* clique: a foto abre a partir do pino e ocupa o card inteiro */
.map-full {
  position: absolute;
  inset: 0;
  z-index: 4;
  clip-path: circle(0 at var(--pin-left) var(--pin-top));
  transition: clip-path 0.8s var(--ease-io), visibility 0s 0.8s;
  visibility: hidden;
}
.map-card.full .map-full {
  visibility: visible;
  clip-path: circle(150% at var(--pin-left) var(--pin-top));
  transition: clip-path 0.8s var(--ease-io), visibility 0s;
}
.map-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 40%);
  pointer-events: none;
}
.map-full-caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 1;
  font-size: 12px;
  color: #fff;
}
.map-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.64);
  border: 1px solid var(--w-16);
  transition: background 0.3s, transform 0.5s var(--ease);
}
.map-close:hover {
  background: #000;
  transform: rotate(90deg);
}
@media (max-width: 900px) {
  .map-card {
    min-height: 0;
    aspect-ratio: var(--map-ratio, 1000 / 669);
  }
  .where-sub {
    white-space: normal;
  }
  .where-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}


.map-silhouette {
  fill: rgba(255, 255, 255, 0.06);
  stroke: none;
}
.map-wave {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  /* a onda cresce mas o traço continua fino */
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: mapWave 3s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  opacity: 0;
}
@keyframes mapWave {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(3); opacity: 0; }
}


/* ---------- idioma ----------
   Na nav: botão com bandeira e sigla, abre uma lista logo abaixo.
   No menu: seletor PT / EN ao lado do fechar. */
.nav-right {
  gap: 16px;
}
.nav-divider {
  width: 1px;
  height: 24px;
  background: var(--w-16);
  flex: none;
}
.flag {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.flag svg {
  display: block;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--w-16);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--w-72);
  transition: color 0.3s, border-color 0.3s;
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] {
  color: #fff;
  border-color: var(--w-32);
}
.lang-chev {
  transition: transform 0.3s var(--ease);
}
.lang-btn[aria-expanded="true"] .lang-chev {
  transform: rotate(180deg);
}
.lang-list {
  position: fixed;
  z-index: 80;
  min-width: 216px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  background: #111;
  border: 1px solid var(--w-08);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.3s var(--ease);
}
.lang-list.open {
  opacity: 1;
  transform: none;
}
.lang-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--w-72);
  text-align: left;
  transition: background 0.2s, color 0.2s;
}
.lang-list button:hover,
.lang-list button:focus-visible {
  background: var(--w-08);
  color: #fff;
  outline: none;
}
.lang-list button[aria-checked="true"] {
  color: #fff;
}
.lang-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--w-56);
  background: var(--w-08);
}
.lang-list button[aria-checked="true"] .lang-tag {
  background: var(--accent);
  color: #fff;
}
.menu-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lang-seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--w-16);
}
.lang-seg button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--w-64);
  transition: background 0.3s, color 0.3s;
}
.lang-seg button:hover {
  color: #fff;
}
.lang-seg button[aria-pressed="true"] {
  background: #fff;
  color: #000;
}
.lang-list[hidden] {
  display: none;
}


/* ---------- loader: Cabo P10 ----------
   Amplificador apagado no escuro; o cabo cai, encaixa como o cabo do menu e cada pulso
   de sinal acende uma letra. No fim, a tela sobe como uma persiana (loader.js). */
html:has(body.is-loading),
body.is-loading {
  overflow: hidden;
}
.loader {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: #0a0a0a;
  user-select: none;
  -webkit-user-select: none;
}
.loader.done {
  display: none;
}
.ld-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.ld-amp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 760px);
  padding: clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  border-radius: 16px;
  background: linear-gradient(180deg, #171717, #0f0f0f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
/* faixa de metal escovado no topo e parafusos nos cantos */
.ld-amp::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  border-radius: 16px 16px 0 0;
  background: repeating-linear-gradient(90deg, #2a2a2a 0 1px, #222 1px 3px);
}
.ld-screw {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2c2c2c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.ld-mark {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.ld-mark path {
  fill: #1b1b1b;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill 0.12s, stroke 0.4s;
}
.ld-amp.on .ld-mark path {
  stroke: rgba(255, 255, 255, 0.3);
}
.ld-mark g.lit path {
  fill: var(--accent);
  stroke: transparent;
}
.ld-io {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--w-24);
  transition: color 0.35s;
}
.ld-amp.on .ld-io {
  color: #fff;
}
.ld-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a2a2a;
  transition: background 0.2s;
}
.ld-amp.on .ld-led {
  background: var(--accent);
}
/* conector igual ao do menu; encaixado, o anel clareia */
.ld-jack {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a4a, #1a1a1a 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.4s;
}
.ld-jack i {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #000;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), 0 0 0 2px #2b2b2b;
}
.ld-amp.on .ld-jack {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.ld-foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--w-56);
}
.ld-foot b {
  font-weight: 400;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* barra de metal da borda de baixo da persiana, com a sombra caindo sobre o site */
.ld-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(180deg, #4a4a4a, #2a2a2a 50%, #161616);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 16px 32px rgba(0, 0, 0, 0.55);
}
/* som bloqueado pelo navegador (primeira visita): um toque libera a música atrás da cortina */
.ld-hint {
  position: absolute;
  left: 50%;
  bottom: max(48px, 8vh);
  z-index: 3;
  margin: 0;
  transform: translate(-50%, 0);
  color: var(--w-56);
  white-space: nowrap;
  opacity: 0;
  /* aparece de uma vez, sem animação de entrada */
  pointer-events: none;
}
.ld-hint.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- transição em escada (main.js) ----------
   Oito colunas da cor da section anterior por cima da section; encolhem de baixo para
   cima só com transform (sem recorte nem repintura da section). */
.stair-cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 50;
  display: flex;
  pointer-events: none;
}
.stair-cover i {
  flex: 1;
  margin-right: -1px; /* sem fresta de 1px entre as colunas */
  background: var(--stair);
  transform-origin: 50% 0;
  /* sem will-change: seriam 56 camadas do tamanho das sections na memória o tempo todo;
     a animação (Web Animations) já promove cada coluna só enquanto ela roda */
}
.stair-cover i:last-child {
  margin-right: 0; /* a última não estica a página em 1px */
}

/* ---------- O estúdio com o celular deitado (tela baixa) ----------
   A galeria fica presa na altura da tela; com 390px de altura o título em cima e as fotos
   embaixo não cabiam (os cards cortavam). Aqui o título vai para uma coluna à esquerda,
   sem o texto e o botão, e as fotos andam à direita usando a altura toda. */
@media (max-height: 560px) and (orientation: landscape) {
  .st-sticky {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding-top: 96px;
    padding-bottom: 16px;
  }
  .st-head {
    flex: 0 0 min(34vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding-right: 0;
  }
  .st-head .studio-title {
    font-size: clamp(20px, 3vw, 28px);
  }
  .st-aside p,
  .st-aside .btn {
    display: none;
  }
  .st-aside .st-hint {
    margin-top: 0;
  }
  .st-viewport {
    flex: 1;
    min-width: 0;
  }
  .st-track {
    padding-inline: 0 var(--pad);
  }
  .st-photo,
  .st-photo--wide {
    width: min(48vw, 420px);
  }
  .st-img {
    height: calc(100svh - 96px - 16px - 16px - 76px);
  }
  .st-stat {
    padding-bottom: 76px;
  }
  .st-stat strong {
    font-size: clamp(64px, 16svh, 120px);
  }
  .st-foot {
    display: none;
  }
}

/* ---------- navbar em celular muito estreito (iPhone SE, Android pequeno) ----------
   A logo (152px) e o grupo da direita não cabiam juntos na pílula de 320px e se
   sobrepunham. Abaixo de 375px: o idioma mostra só a bandeira (o nome segue no
   aria-label), os itens se aproximam e a logo encolhe junto com a tela. */
@media (max-width: 374px) {
  .lang-code {
    display: none;
  }
  .nav-right {
    gap: 12px;
  }
  .nav-logo img {
    width: min(152px, 40vw);
    height: auto;
  }
}

/* ---------- O estúdio: fotos só dentro do container (tablet e desktop) ----------
   A área das fotos tem a largura do conteúdo da section (como o título), então o que
   está fora dela não aparece. As bordas se dissolvem num esfumado: à direita sempre;
   à esquerda ele cresce só depois que a faixa começa a andar (--st-fade, do studio.js),
   para não cortar a primeira foto na entrada. */
@media (min-width: 901px) {
  .st-viewport {
    --st-fade: 0px;
    width: calc(min(100%, var(--max)) - 2 * var(--pad));
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--st-fade), #000 calc(100% - 72px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--st-fade), #000 calc(100% - 72px), transparent 100%);
  }
  .st-track {
    padding-inline: 0;
  }
}

/* ---------- faixa (ticker) no celular ----------
   A pílula do meio era mais larga que a tela e cobria as duas faixas. Aqui ela sai do
   meio e fica entre as faixas, quebrando linha se precisar. */
@media (max-width: 900px) {
  .ticker {
    display: flex;
    flex-direction: column;
    padding: 56px 0;
  }
  .ticker-row--alt {
    order: 2;
  }
  /* velocidade fixa no celular (main.js mede a duração de cada faixa) */
  .ticker-css .ticker-track {
    animation: tickerRun var(--tk-dur, 60s) linear infinite;
  }
  .ticker-css .ticker-row--alt .ticker-track {
    animation-direction: reverse;
  }
  .ticker-center {
    order: 1;
    position: static;
    transform: none;
    align-self: center;
    max-width: calc(100% - 2 * var(--pad));
    margin: 24px auto;
    white-space: normal;
    text-align: center;
    box-shadow: none;
  }
}

@keyframes tickerRun {
  to { transform: translate3d(-50%, 0, 0); }
}

/* estúdio no celular: a faixa e a linha de progresso seguem a rolagem pelo próprio navegador
   (studio.js liga a classe st-css e mede o --st-travel) */
@supports (animation-timeline: view()) {
  @media (max-width: 900px) {
    .st-css .st-pin {
      view-timeline: --stpin block;
    }
    .st-css .st-track {
      animation: stSlide linear both;
      animation-timeline: --stpin;
      animation-range: contain 0% contain 100%;
    }
    .st-css #stBar {
      animation: stBar linear both;
      animation-timeline: --stpin;
      animation-range: contain 0% contain 100%;
    }
  }
}
@keyframes stSlide {
  to { transform: translate3d(calc(-1 * var(--st-travel, 0px)), 0, 0); }
}
@keyframes stBar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* lançamento no celular: menos moldura em volta do player para o nome da faixa e o tempo
   caberem na mesma linha */
@media (max-width: 900px) {
  .release-glass {
    padding: 16px;
  }
  .release .player {
    padding: 16px;
  }
}
@media (max-width: 374px) {
  .release .player-time {
    font-size: 11px;
  }
  .release .player-play,
  .release .player-play img,
  .release .player-play svg {
    width: 40px;
    height: 40px;
  }
}

/* ---------- menu aberto: a página de trás para ----------
   A rolagem trava no html (só o body não segurava: o html corta a largura e vira quem rola).
   Quando os degraus terminam de cobrir a tela, a página some por baixo (menu-covered): o
   navegador para de desenhar fotos, canvas e animações que ninguém está vendo. */
html.menu-open,
html.menu-open body {
  overflow: hidden;
}
.menu {
  overscroll-behavior: contain;
}
html.menu-covered main,
html.menu-covered .footer,
html.menu-covered .topbar,
html.menu-covered .nav,
html.menu-covered .fader,
html.menu-covered .sound-fab {
  visibility: hidden;
}

/* ---------- botão de som do hero: largura fixa ----------
   "Ativar som" e "Som ativado" ficam uma sobre a outra na mesma célula: o botão tem a
   largura da maior e não muda ao trocar (antes crescia e caía para a linha de baixo). */
.sound-label {
  display: inline-grid;
}
.sound-label > span {
  grid-area: 1 / 1;
}
.sound-label > [aria-hidden="true"] {
  visibility: hidden;
}

/* barras do equalizador por escala, não por altura: mudar a altura a cada quadro refazia
   o layout do botão (e da linha dos botões) 60 vezes por segundo */
.eq i {
  height: 18px;
  min-height: 0;
  transform: scaleY(calc(0.333 + var(--b, 0) * 0.667));
  transition: transform 0.08s;
}
.disc-state .eq i {
  height: 14px;
}
.disc:not(.is-playing) .disc-state .eq i {
  height: 14px;
  transform: scaleY(0.214);
}

/* ---------- O estúdio no celular ----------
   A área das fotos ocupa o espaço que sobra embaixo do título, e esse espaço muda de
   celular para celular. Antes a foto tinha altura fixa e a área cortava a legenda do card
   (ex.: S24 FE). Agora o studio.js mede o espaço livre (--st-avail) e a altura da legenda,
   e a foto fica com o que resta (--st-photo-h): foto e legenda sempre cabem inteiras.
   Só corta na horizontal, por onde a faixa anda. */
@media (max-width: 900px) {
  .st-viewport {
    overflow: hidden;
  }
  @supports (overflow: clip) {
    .st-viewport {
      overflow: visible;
      overflow-x: clip;
    }
  }
  .st-stat {
    padding-bottom: min(88px, 12svh);
  }
  .st-stat strong {
    font-size: clamp(56px, 12svh, 96px);
  }
}
@media (max-width: 900px) and (max-height: 760px) {
  .st-sticky {
    gap: 24px;
    padding-top: 96px;
  }
  .st-head .studio-title {
    font-size: 28px;
  }
}
/* foto com a altura medida pelo studio.js; o celular deitado (tela baixa) segue a regra própria */
@media (max-width: 900px) and (orientation: portrait), (max-width: 900px) and (min-height: 561px) {
  .st-track,
  .st-photo {
    height: auto;
  }
  .st-img {
    height: var(--st-photo-h, max(120px, min(calc(100% - 100px), 64vw)));
  }
  .st-photo--wide .st-img {
    height: var(--st-avail, 100%);
  }
}
/* celular bem baixo (ex.: 360 × 640 com as barras do navegador): sem o subtítulo da seção e
   com menos espaço no cabeçalho, para sobrar altura para a foto e a legenda inteiras */
@media (max-width: 900px) and (max-height: 700px) {
  .st-sticky {
    gap: 16px;
    padding-top: 88px;
  }
  .st-head {
    row-gap: 8px;
  }
  .st-aside p {
    display: none;
  }
}

/* ---------- granulado parado no celular ----------
   A camada animada tinha quatro vezes o tamanho da tela por cima de tudo: no celular pesava
   na placa de vídeo e na memória. Parada, do tamanho da tela, o efeito continua. */
@media (max-width: 900px) {
  .grain::before {
    inset: 0;
    animation: none;
  }
}