/* ============================================================
   OYÁ TEMPO //2026 — index (the descent)
   Pure-CSS pans (formerly jquery.spritely) + the player.
   Moira menu lives in oya-ui.css. Scaling handled by remix.js.
   ============================================================ */

/* ---- the 14 pans ---- duration = image width / (speed × fps) */
@keyframes rx-pan { to { background-position-x: var(--rx-shift); } }

/* the 8 meaningful pans stay animated */
#skyline      { --rx-shift: -1660px; animation: rx-pan 57.6s  linear infinite; }
#sky-clouds   { --rx-shift:  1224px; animation: rx-pan 170s   linear infinite; }
#gradient-zero{ --rx-shift:  -240px; animation: rx-pan 16s    linear infinite; }
#crouds       { --rx-shift:  1344px; animation: rx-pan 124.4s linear infinite; }
#nuvens-atras { --rx-shift: -1826px; animation: rx-pan 304.3s linear infinite; }
#dark         { --rx-shift:  1257px; animation: rx-pan 95.2s  linear infinite; }
#dark-j       { --rx-shift:  -954px; animation: rx-pan 120.5s linear infinite; }
#greenshroom  { --rx-shift:  1019px; animation: rx-pan 84.9s  linear infinite; }
/* the 6 big low-opacity texture layers stay STATIC — their pan was barely
   perceptible and they were the heaviest to repaint every frame. Dropping
   them is what stops the scroll/playback stutter (they're 1995–2238px wide). */

/* perf: keep the animated pans off the scroll repaint path, AND pause them
   entirely while actively scrolling so the compositor is free for the scroll
   (remix.js toggles html.rx-scrolling) — the fix for jank while audio plays */
#skyline, #sky-clouds, #gradient-zero, #crouds,
#nuvens-atras, #dark, #dark-j, #greenshroom {
  will-change: background-position; backface-visibility: hidden;
}
html.rx-scrolling #skyline, html.rx-scrolling #sky-clouds, html.rx-scrolling #gradient-zero,
html.rx-scrolling #crouds, html.rx-scrolling #nuvens-atras, html.rx-scrolling #dark,
html.rx-scrolling #dark-j, html.rx-scrolling #greenshroom { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #skyline, #sky-clouds, #gradient-zero, #crouds,
  #nuvens-atras, #dark, #dark-j, #greenshroom { animation: none; will-change: auto; }
}

/* ---- responsive: the cosmos is scaled by remix.js (scale-don't-reflow);
        remove the 2016 "come back on desktop" gate ---- */
.player h2 { display: none !important; }
.cosmos { transform-origin: top center; }

/* ---- the player (2016 brief: "player do EP imerso em web art") ---- */
.player {
  position: absolute; z-index: 20;
  left: 0; right: 0; top: 300px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.player iframe {
  pointer-events: auto;
  width: 380px; max-width: 94vw; height: 395px;
  border: 1px solid rgba(0, 255, 204, 0.4);
  box-shadow: 0 0 60px rgba(0, 255, 204, 0.22), 0 0 160px rgba(80, 20, 120, 0.35);
  background: #20222b;
}

/* ---- persistent lyric overlay (audio keeps playing behind it) ----
   When CLOSED it must be fully inert: opacity:0 alone still left it covering
   the viewport and swallowing trackpad/wheel scroll (the home would only
   scroll via the scrollbar afterwards). pointer-events:none + visibility:hidden
   fix that; visibility is delayed so the fade-out still shows. */
#rx-letra-view {
  position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; overflow-x: hidden;
  background: #000001;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
#rx-letra-view.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.3s;
}
/* the now-playing / voltar chip lives in oya-ui.css (site-wide) */