/* =====================================================================
   MUSIDOM — Motion system
   Animações de entrada controladas por IntersectionObserver (motion.js)
   ===================================================================== */

/* ---------- Estados de revelação ---------- */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out),
              filter var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"]     { transform: translateY(38px); }
[data-reveal="down"]   { transform: translateY(-32px); }
[data-reveal="left"]   { transform: translateX(48px); }
[data-reveal="right"]  { transform: translateX(-48px); }
[data-reveal="scale"]  { transform: scale(.92); }
[data-reveal="blur"]   { filter: blur(14px); transform: translateY(20px); }
[data-reveal="clip"]   { clip-path: inset(0 0 100% 0); transform: none; opacity: 1; transition: clip-path var(--t-slower) var(--ease-out); }
[data-reveal="rotate"] { transform: translateY(30px) rotate(-3deg); }

[data-reveal].is-inview {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Revelação em cascata para listas (o JS aplica --reveal-delay) */
[data-stagger] > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
[data-stagger].is-inview > * { opacity: 1; transform: none; }

/* Texto revelado palavra a palavra (motion.js aplica os spans)

   A máscara precisa de folga vertical: os títulos usam line-height menor que 1,
   então a caixa da palavra é mais baixa que os glifos e o overflow:hidden
   decepava ascendentes e descendentes ("sonhou" sem o topo do h, "sempre" sem
   a perna do p). O padding abre a máscara e a margem negativa devolve o
   espaço, mantendo o layout idêntico. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: .16em;
  margin-block: -.16em;
}
.split-word > span {
  display: inline-block;
  /* 125% (e não 105%) para a palavra partir fora da máscara já alargada */
  transform: translateY(125%) rotate(4deg);
  transition: transform var(--t-slower) var(--ease-out);
  transition-delay: var(--word-delay, 0ms);
}
.is-inview .split-word > span { transform: none; }

/* ---------- Keyframes reutilizáveis ---------- */
@keyframes fade-up   { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade-in   { from { opacity: 0; } }
@keyframes pop-in    { from { opacity: 0; transform: scale(.9); } }
@keyframes float-y   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-x   { 0%,100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(210,230,45,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(210,230,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(210,230,45,0); }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes equalize {
  0%,100% { transform: scaleY(.28); }
  50%     { transform: scaleY(1); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.anim-float   { animation: float-y 6s var(--ease-in-out) infinite; }
.anim-float-x { animation: float-x 8s var(--ease-in-out) infinite; }
.anim-spin    { animation: spin-slow 22s linear infinite; }
.anim-pulse   { animation: pulse-ring 2.4s var(--ease-out) infinite; }
.anim-delay-1 { animation-delay: .4s; }
.anim-delay-2 { animation-delay: .9s; }
.anim-delay-3 { animation-delay: 1.4s; }

/* ---------- Equalizador (assinatura visual da escola) ---------- */
.equalizer { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.equalizer span {
  width: 3px; height: 100%; border-radius: 2px;
  background: var(--lime-400);
  transform-origin: bottom;
  animation: equalize 1.1s var(--ease-in-out) infinite;
}
.equalizer span:nth-child(1) { animation-delay: -.1s; }
.equalizer span:nth-child(2) { animation-delay: -.5s; }
.equalizer span:nth-child(3) { animation-delay: -.25s; }
.equalizer span:nth-child(4) { animation-delay: -.75s; }
.equalizer span:nth-child(5) { animation-delay: -.4s; }
.equalizer.is-paused span { animation-play-state: paused; }

/* ---------- Marquee (faixa de instrumentos) ---------- */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-speed, 34s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: .9rem; padding-inline: 2rem; white-space: nowrap; }

/* ---------- Contador animado ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Parallax controlado por JS ---------- */
[data-parallax] { will-change: transform; }

/* ---------- Barra de progresso de leitura ---------- */
.reading-bar {
  position: fixed; top: 0; left: 0; height: 3px; z-index: var(--z-toast);
  background: linear-gradient(90deg, var(--lime-400), var(--mint));
  width: 0%; transition: width 80ms linear;
}

/* ---------- Cursor personalizado: disco de vinil (desktop) ----------
   Dois elementos: um ponto no lugar exato do ponteiro (a precisão do clique
   não pode ficar atrás) e o vinil, que segue com inércia. Parados, o ponto
   coincide com o furo central do disco. */
.cursor-dot, .cursor-vinyl {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: var(--z-cursor);
  opacity: 0; transition: opacity var(--t-base);
  will-change: transform;
}

/* O ponto tem contorno escuro para se manter visível tanto sobre as seções
   claras quanto sobre o hero preto — sem depender de mix-blend-mode, que
   arruinaria as cores do disco. */
.cursor-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime-400);
  box-shadow: 0 0 0 1.5px rgba(13,13,10,.5);
}

.cursor-vinyl { width: 62px; height: 62px; }

.cursor-vinyl__disc {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  /* Camadas, da frente para o fundo: furo · etiqueta lime · sulcos · corpo */
  background:
    radial-gradient(circle at 50% 50%, #0B0B08 0 6.5%, transparent 7%),
    radial-gradient(circle at 50% 50%,
      var(--lime-400) 0 26%, rgba(11,11,8,.85) 26% 27.5%, transparent 28%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(247,247,241,.14) 0 1px, transparent 1px 3.5px),
    conic-gradient(from 200deg, #15150F, #2E2E23 25%, #15150F 50%, #2E2E23 75%, #15150F);
  box-shadow: 0 0 0 1px rgba(247,247,241,.24), 0 4px 12px rgba(0,0,0,.28);
  /* "scale" como propriedade própria (e não dentro de transform) para não
     brigar com a animação de giro, que usa transform */
  scale: .6;
  transition: scale var(--t-base) var(--ease-spring);
  animation: vinyl-spin 2.6s linear infinite;
}

/* Sobre um elemento clicável o disco cresce e acelera, como um toca-discos
   ganhando rotação */
body.cursor-hover .cursor-vinyl__disc { scale: 1; animation-duration: 1.05s; }

@keyframes vinyl-spin { to { transform: rotate(360deg); } }

body.has-cursor .cursor-dot, body.has-cursor .cursor-vinyl { opacity: 1; }

/* ---------- Transição entre páginas ---------- */
.page-transition {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--ink-950); transform: translateY(100%);
  pointer-events: none;
}
.page-transition.is-leaving { animation: page-cover .55s var(--ease-in-out) forwards; }
@keyframes page-cover { to { transform: translateY(0); } }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center; gap: 1.5rem;
  background: var(--ink-950);
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__bar { width: min(240px, 60vw); height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.preloader__fill { height: 100%; width: 0; background: var(--lime-400); transition: width .3s var(--ease-out); }

/* ---------- Efeito de brilho seguindo o mouse ---------- */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx,50%) var(--my,50%), rgba(210,230,45,.12), transparent 42%);
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
}
.spotlight:hover::before { opacity: 1; }

/* ---------- Tilt 3D nos cartões ---------- */
[data-tilt] { transform-style: preserve-3d; transition: transform var(--t-base) var(--ease-out); }
[data-tilt] > * { transform: translateZ(28px); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .split-word > span { transform: none !important; }
  .marquee__track, .equalizer span, .anim-float, .anim-spin, .anim-pulse { animation: none !important; }
  .cursor-dot, .cursor-vinyl { display: none; }
}