/* ============================================================
   OYÁ TEMPO //2026 — as letras
   Scoped under .oya-letra so it's safe to load on the index too
   (the persistent-audio overlay reuses these rules).
   1/3–2/3 layout: sticky card + nav on the left, lyric on the right.
   No backdrop-filter anywhere (trackpad-scroll performance).
   ============================================================ */

.oya-letra { margin: 0; background: #000001; color: var(--oya-ink);
  font-family: var(--oya-font); min-height: 100vh; overflow-x: hidden; }
.oya-letra *, .oya-letra *::before, .oya-letra *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- backdrop layers (fixed, behind everything) ---- */
.oya-letra .strata { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.oya-letra .strata div { position: absolute; background-repeat: repeat-x; }

@keyframes rx-pan { to { background-position-x: var(--rx-shift); } }
@keyframes rx-raio { 0%, 91% { opacity: 0; } 92%, 95% { opacity: 0.9; } 96%, 100% { opacity: 0; } }
@keyframes rx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@media (prefers-reduced-motion: reduce) { .oya-letra .strata div { animation: none !important; } }

/* 1. pó em ouro — cosmos */
.letra-po-em-ouro .strata { background: url(../img/bg-cosmo-0.gif); }
.letra-po-em-ouro .rx-galaxia {
  inset: 0; margin: auto; width: min(90vw, 949px); height: min(70vh, 621px);
  background: url(../img/galaxia-hue-ani-625.gif) center / contain no-repeat; opacity: 0.5; }

/* 2. úmido iv v — a cidade */
.letra-umido-iv-v .rx-gradient { inset: 0; background: url(../img/gradient-big-0.png);
  --rx-shift: -240px; animation: rx-pan 16s linear infinite; opacity: 0.45; }
.letra-umido-iv-v .rx-skyline { left: 0; right: 0; bottom: 0; height: 408px;
  background-image: url(../img/sp-skyline.gif);
  --rx-shift: -1660px; animation: rx-pan 57.6s linear infinite; opacity: 0.85; }
.letra-umido-iv-v .rx-clouds { left: 0; right: 0; bottom: 0; height: 408px;
  background-image: url(../img/sky-clouds.gif);
  --rx-shift: 1224px; animation: rx-pan 170s linear infinite; opacity: 0.5; }

/* 3. a cadeira estava sem as pernas — jardim de esculturas */
.letra-a-cadeira-estava-sem-as-pernas .strata { background: url(../img/gradiente.png); background-repeat: repeat-x; background-position: bottom; }
.letra-a-cadeira-estava-sem-as-pernas .rx-torso { left: 3vw; bottom: 0; width: 215px; height: 490px;
  background: url(../img/broken_torso.png) no-repeat; opacity: 0.7; }
.letra-a-cadeira-estava-sem-as-pernas .rx-face { right: 5vw; bottom: 30px; width: 240px; height: 160px;
  background: url(../img/statua-face-pq.png) no-repeat; opacity: 0.65; }
.letra-a-cadeira-estava-sem-as-pernas .rx-luazul { right: 12vw; top: 9vh; width: 160px; height: 160px;
  background: url(../img/luazul.gif) no-repeat; background-size: contain;
  animation: rx-float 9s ease-in-out infinite; opacity: 0.75; }

/* 4. oyá — a tempestade */
.letra-oya .rx-nuvens { inset: 0; background-image: url(../img/nuvens-atras.png);
  --rx-shift: -1826px; animation: rx-pan 304s linear infinite; opacity: 0.7; }
.letra-oya .rx-raio-a { left: 7vw; top: 0; width: 422px; height: 100vh;
  background: url(../img/raioum.gif) no-repeat; animation: rx-raio 7s linear infinite; }
.letra-oya .rx-raio-b { right: 3vw; top: 0; width: 910px; height: 100vh;
  background: url(../img/raiocinco.gif) no-repeat; animation: rx-raio 11s linear infinite 3s; }

/* 5. manada — o mar */
.letra-manada .rx-mar { left: 0; right: 0; bottom: 130px; height: 497px;
  background-image: url(../img/mar-reflect-emerald.gif); opacity: 0.85; }
.letra-manada .rx-mar-ampl { left: 0; right: 0; bottom: 0; height: 310px;
  background-image: url(../img/mar-ampl.gif); }

/* 6. estrada — o fundo do mar */
.letra-estrada .rx-dark { inset: 0; background-image: url(../img/dark.gif);
  --rx-shift: 1257px; animation: rx-pan 95s linear infinite; opacity: 0.55; }
.letra-estrada .rx-jelly { left: 6vw; top: 20vh; width: 332px; height: 257px;
  background: url(../img/jellyfish.gif) no-repeat;
  animation: rx-float 12s ease-in-out infinite; opacity: 0.5; }
.letra-estrada .rx-jello { right: 4vw; bottom: 8vh; width: 300px; height: 290px;
  background: url(../img/moon-jello.gif) no-repeat; background-size: contain;
  animation: rx-float 16s ease-in-out infinite 2s; opacity: 0.55; }

/* 7. tucum — o subterrâneo */
.letra-tucum .strata { background: #0F0F1E; }
.letra-tucum .rx-landlines { left: 0; right: 0; bottom: 0; height: 650px;
  background-image: url(../img/landlines-deep.png); opacity: 0.85; }
.letra-tucum .rx-mono { left: 5vw; bottom: 0; width: 209px; height: 450px;
  background: url(../img/mono-dois.png) no-repeat; opacity: 0.8; }
.letra-tucum .rx-venus { right: 7vw; bottom: 0; width: 262px; height: 500px;
  background: url(../img/venus-willendorf.png) no-repeat; opacity: 0.8; }
.letra-tucum .rx-vagveg { left: 0; right: 0; top: 0; height: 289px;
  background-image: url(../img/vagveg.png); opacity: 0.45; }

/* ============================================================
   LAYOUT — 1/3 (card + nav) : 2/3 (lyric), asymmetric
   ============================================================ */
.oya-letra main.letra-layout {
  position: relative; z-index: 1;
  max-width: 78rem; margin: 0 auto;
  padding: 7vh 1.4rem 10vh;
  display: grid;
  grid-template-columns: minmax(14rem, 31%) 1fr;
  gap: clamp(1.4rem, 4.5vw, 4.5rem);
  align-items: start;
}

/* left column: sticky card + nav */
.oya-letra .letra-aside {
  position: sticky; top: 6vh;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.oya-letra .letra-card {
  background: rgba(6, 9, 13, 0.72);
  border-left: 2px solid var(--oya-accent);
  padding: 1.1rem 1.25rem 1.35rem;
  margin-left: clamp(-1.4rem, -2vw, -0.4rem);   /* slight left overhang */
}
.oya-letra .breadcrumb {
  display: inline-block; color: var(--oya-accent); text-decoration: none;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px; margin: 0 0 0.7rem -3px; background: rgba(0, 255, 204, 0.08);
}
.oya-letra .breadcrumb:hover { background: var(--oya-accent); color: #001; }
.oya-letra .song-title {
  color: var(--oya-ink); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 2.4vw + 1rem, 2.7rem); line-height: 1.04;
}
.oya-letra .credit { color: var(--oya-dim); font-size: 0.86rem; margin-top: 0.55rem; }
.oya-letra .album-tag {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oya-accent); border: 1px solid var(--oya-accent-soft);
  padding: 4px 9px;
}

/* right column: the lyric — offset down for asymmetry */
.oya-letra .lyric-col { padding-top: 2.6rem; }
.oya-letra .lyric p {
  display: table; max-width: 100%;
  background: rgba(6, 9, 13, 0.72);
  color: var(--oya-ink); font-size: 1.04rem; line-height: 1.9;
  padding: 0.4em 0.72em; margin: 0 0 0.5rem;
}
.oya-letra .lyric .dir { color: var(--oya-accent); opacity: 0.72; font-style: italic; }
.oya-letra .lyric h2 {
  display: table; background: rgba(6, 9, 13, 0.82);
  color: var(--oya-accent); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.34em; padding: 4px 10px; margin: 1.8rem 0 0.9rem;
}
.oya-letra .lyric-col > .lyric > p:first-child,
.oya-letra .lyric-col > .lyric > h2:first-child { margin-top: 0; }

/* nav — a row BELOW the lyric (title + lyric alone in the card was too much) */
.oya-letra .descida-nav {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem;
  margin-top: 3.5rem; padding-top: 1.6rem;
  border-top: 1px solid var(--oya-accent-soft);
}
.oya-letra .descida-nav a {
  display: table; text-decoration: none; background: rgba(6, 9, 13, 0.72);
  color: var(--oya-ink); padding: 0.45em 0.8em;
  transition: background 0.15s, color 0.15s;
}
.oya-letra .descida-nav a:hover { background: var(--oya-accent); color: #001; }
.oya-letra .descida-nav .lbl {
  display: block; font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--oya-accent);
}
.oya-letra .descida-nav a:hover .lbl { color: #003; }
.oya-letra .descida-nav .ttl { display: block; font-size: 1.28rem; font-weight: 600; line-height: 1.12; }
.oya-letra .descida-nav .nav-all { font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--oya-dim); }
.oya-letra .descida-nav .nav-all:hover { color: #001; }

/* ---- letras index ---- */
.oya-letra .letras-list { list-style: none; margin-top: 2rem; }
.oya-letra .letras-list li { margin-bottom: 0.7rem; }
.oya-letra .letras-list a {
  display: table; text-decoration: none; background: rgba(6, 9, 13, 0.72);
  color: var(--oya-ink); padding: 0.45em 0.85em; font-size: 1.4rem; font-weight: 600;
}
.oya-letra .letras-list a:hover { background: var(--oya-accent); color: #001; }
.oya-letra .letras-list .num { color: var(--oya-accent); margin-right: 0.5em; font-weight: 400; }
.oya-letra .letras-list a:hover .num { color: #003; }
.oya-letra.letras-index main.letra-layout { display: block; max-width: 46rem; }

/* ============================================================
   MOBILE — single column (card → lyric → nav is now the natural order,
   since the nav lives inside the lyric column)
   ============================================================ */
@media (max-width: 760px) {
  .oya-letra main.letra-layout { display: flex; flex-direction: column; gap: 1.6rem; padding-top: 5vh; }
  .oya-letra .letra-aside { position: static; }
  .oya-letra .letra-card { margin-left: 0; }
  .oya-letra .lyric-col { padding-top: 0; }
}