/* ==========================================================================
   Coletivo Candango — base
   Tokens, tipografia, grão de papel, cursor, navegação, vinil reutilizável
   ========================================================================== */

:root {
  /* Paleta: noite do cerrado, capa envelhecida, sol e mato do logo */
  --bg: #0d0b09;
  --bg-2: #15120e;
  --bg-3: #1f1a14;
  --cream: #f1e7d0;
  --cream-2: #cdbf9f;
  --muted: #8a7f6a;
  --sun: #f4b41a;
  --sun-deep: #d9930b;
  --mato: #3baa57;
  --barro: #d2552b;
  --rule: rgba(241, 231, 208, 0.16);
  --rule-strong: rgba(241, 231, 208, 0.42);

  --f-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-mono: 'DM Mono', ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.18, 1);
  --gutter: clamp(16px, 3.2vw, 44px);
  --nav-h: 76px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--sun); color: var(--bg); }

/* ---------- Rótulos (estilo etiqueta de catálogo de gravadora) ---------- */
.lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
a.box:hover, button.box:hover { background: var(--cream); color: var(--bg); border-color: var(--cream); }
.box--sun { border-color: var(--sun); color: var(--sun); }
a.box--sun:hover, button.box--sun:hover { background: var(--sun); color: var(--bg); border-color: var(--sun); }

.display {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.01em;
}
.serif-i { font-family: var(--f-serif); font-style: italic; font-weight: 400; }

/* Máscara para revelar texto subindo (nunca opacidade) */
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mask > * { display: block; }
/* títulos em caixa alta: espaço para acentos (Á, Ó) dentro da máscara */
.display .mask, .display .swap, .display.mask { margin-top: -0.14em; }
.display .mask > *, .display .swap > *, .display.mask > * { padding-top: 0.14em; }
.reveal .mask > * { transform: translateY(110%); }
.reveal.is-in .mask > * {
  transform: none;
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Grão de papel / ruído de vinil ---------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.5;
  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(-1%, -1%); }
  100% { transform: translate(3%, 1%); }
}

/* ---------- Navegação ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; }
.nav__brand img { width: 54px; height: auto; }
.nav__brand span { display: grid; gap: 4px; }
.nav__brand b { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; line-height: 0.9; text-transform: uppercase; }
.nav__links { display: flex; gap: 6px; }
.nav__links a[aria-current='page'] { background: var(--sun); color: var(--bg); border-color: var(--sun); }
.nav__right { justify-self: end; display: flex; gap: 6px; align-items: center; }
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 -30px 0;
  background: linear-gradient(var(--bg) 20%, transparent);
  pointer-events: none;
  z-index: -1;
  opacity: var(--nav-bg, 0);
  transition: opacity 0.4s;
}
.nav.is-solid { --nav-bg: 1; }

@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .nav { grid-template-columns: auto 1fr; }
  .nav__links { justify-self: end; }
  .nav__right { display: none; }
  .nav__brand span { display: none; }
  .nav__brand img { width: 44px; }
  .nav__links .box { height: 24px; padding: 0 8px; font-size: 10px; }
}

/* ---------- Cursor personalizado (agulha) ---------- */
.cursor { display: none; }
@media (pointer: fine) {
  html, body, a, button, [role='button'] { cursor: none; }
  .cursor {
    display: block;
    position: fixed;
    left: 0; top: 0;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    z-index: 100;
    pointer-events: none;
    mix-blend-mode: normal;
  }
  .cursor__ring {
    position: absolute; inset: 0;
    border: 1.5px solid var(--cream);
    border-radius: 50%;
    transition: transform 0.5s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  /* sulcos do "mini vinil" do cursor */
  .cursor__ring::after {
    content: '';
    position: absolute; inset: 9px;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: var(--rule-strong);
    transition: transform 0.4s var(--ease);
  }
  .cursor__dot {
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--sun);
    transition: transform 0.4s var(--ease);
  }
  .cursor__label {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    text-align: center;
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg);
    transform: scale(0);
    transition: transform 0.45s var(--ease);
  }
  .cursor.is-link .cursor__ring { transform: scale(0.5); border-color: var(--sun); }
  .cursor.is-link .cursor__ring::after { transform: scale(0); }
  .cursor.is-link .cursor__dot { transform: scale(0); }
  .cursor.is-small .cursor__ring { transform: scale(0.7); }
  .cursor.is-label .cursor__ring { transform: scale(1.7); background: var(--sun); border-color: var(--sun); }
  .cursor.is-label .cursor__ring::after { color: rgba(13, 11, 9, 0.25); }
  .cursor.is-label .cursor__dot { transform: scale(0); }
  .cursor.is-label .cursor__label { transform: scale(1); }
  .cursor.is-drag .cursor__ring { transform: scale(1.3) rotate(0); border-style: dashed; }
  .cursor.is-hidden .cursor__ring, .cursor.is-hidden .cursor__dot { transform: scale(0); }
}

/* ---------- Vinil reutilizável ----------
   Estrutura:
   .vinyl            → contêiner (brilho fixo, não gira)
     .vinyl__disc    → gira (sulcos + rótulo)
       .vinyl__label → selo central (imagem ou cor)
*/
.vinyl {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
}
.vinyl__disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33.5%, rgba(255, 255, 255, 0.06) 34% 34.4%, transparent 35%),
    radial-gradient(circle, transparent 0 62%, rgba(255, 255, 255, 0.05) 62.3% 62.7%, transparent 63%),
    radial-gradient(circle, transparent 0 79%, rgba(255, 255, 255, 0.05) 79.3% 79.7%, transparent 80%),
    repeating-radial-gradient(circle, #0c0c0c 0 1.2px, #151515 1.6px 2.4px, #0e0e0e 2.8px 3.4px),
    #0b0b0b;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 0 5px #070707,
    0 30px 80px -30px rgba(0, 0, 0, 0.8);
  will-change: transform;
}
/* reflexo de luz fixo (o disco gira por baixo) */
.vinyl::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg,
      transparent 0deg, rgba(255, 255, 255, 0.13) 22deg, transparent 52deg,
      transparent 180deg, rgba(255, 255, 255, 0.1) 202deg, transparent 232deg);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
.vinyl__label {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: var(--label-bg, var(--sun)) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.vinyl__label::after { /* furo central */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7%; height: 7%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}
.vinyl__label svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Braço da vitrola (SVG 0..100 sobre o disco) ---------- */
.tonearm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.tonearm__arm {
  transform-box: view-box;
  transform-origin: 104px 4px;
  transform: rotate(var(--arm, -10deg));
  transition: transform 1.3s var(--ease-io);
}
.tonearm__base { fill: #2b241b; stroke: rgba(241, 231, 208, 0.35); stroke-width: 0.4; }
.tonearm__pin { fill: var(--cream-2); }
.tonearm__tube { fill: none; stroke: var(--cream-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(1.5px 2.5px 1.2px rgba(0, 0, 0, 0.6)); }
.tonearm__head { fill: var(--sun); filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.6)); }
.tonearm__weight { fill: #3a3229; stroke: rgba(241, 231, 208, 0.3); stroke-width: 0.3; }


/* ---------- Transição entre páginas (círculo de rótulo) ---------- */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--sun);
  pointer-events: none;
  clip-path: circle(0 at 50% 50%);
}

/* ---------- Rodapé ---------- */
.footer {
  position: relative;
  padding: 80px var(--gutter) 34px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 40px;
}
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.footer__big {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(64px, 15vw, 260px);
  line-height: 0.8;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--cream);
}
.footer__big em { font-family: var(--f-serif); font-weight: 400; text-transform: none; color: var(--sun); letter-spacing: -0.03em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .reveal .mask > * { transform: none !important; }
}