/* Tema Roaring Knight (Deltarune) y cinemáticas
   (archivo: css/components/roaring-theme.css) */
/* ============================================================
   ROARING — TEMA DELTARUNE EXTENDIDO AL REPRODUCTOR DE MÚSICA
   Se activa en #music-player-overlay SOLO cuando la canción que
   se reproduce pertenece al guante Roaring
   ============================================================ */
#music-player-overlay.roaring-active,
#music-player-overlay.roaring-active * {
  font-family: '8bitoperatorplus2', 'Press Start 2P', 'Courier New', monospace !important;
  letter-spacing: 0.5px;
}
#music-player-overlay.roaring-active #music-player-frame {
  background: #000000 !important;
  border: 4px solid #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#music-player-overlay.roaring-active #music-player-close {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 0 !important;
}
#music-player-overlay.roaring-active #music-player-close:hover {
  background: #ffffff !important;
  color: #000000 !important;
  filter: none !important;
}
#music-player-overlay.roaring-active #music-vinyl-disc-big {
  background: repeating-radial-gradient(circle at center, #1a1a1a 0 3px, #000000 3px 6px) !important;
  box-shadow: 0 0 0 3px #ffffff, inset 0 0 0 3px #000000 !important;
}
#music-player-overlay.roaring-active #music-vinyl-center {
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 0 3px #000000 !important;
}
#music-player-overlay.roaring-active #music-vinyl-center-img {
  image-rendering: pixelated;
}
#music-player-overlay.roaring-active #music-track-name {
  color: #ffffff !important;
  text-shadow: none !important;
}
#music-player-overlay.roaring-active .music-roblox-value { color: #cccccc !important; }
#music-player-overlay.roaring-active .music-roblox-value:hover { color: #ffffff !important; }
#music-player-overlay.roaring-active .music-roblox-toast {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 0 !important;
}
#music-player-overlay.roaring-active #music-time-current,
#music-player-overlay.roaring-active #music-time-total { color: #aaaaaa !important; }

#music-player-overlay.roaring-active input[type="range"].slap-range::-webkit-slider-runnable-track,
#music-player-overlay.roaring-active input[type="range"].slap-volume::-webkit-slider-runnable-track {
  background: #333333 !important;
  border-radius: 0 !important;
}
#music-player-overlay.roaring-active input[type="range"].slap-range::-moz-range-track,
#music-player-overlay.roaring-active input[type="range"].slap-volume::-moz-range-track {
  background: #333333 !important;
  border-radius: 0 !important;
}
#music-player-overlay.roaring-active input[type="range"].slap-range::-webkit-slider-thumb,
#music-player-overlay.roaring-active input[type="range"].slap-volume::-webkit-slider-thumb {
  background-image: url('../../assets/img/ui/soul.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
#music-player-overlay.roaring-active input[type="range"].slap-range::-moz-range-thumb,
#music-player-overlay.roaring-active input[type="range"].slap-volume::-moz-range-thumb {
  background-image: url('../../assets/img/ui/soul.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

#music-player-overlay.roaring-active #music-btn-prev,
#music-player-overlay.roaring-active #music-btn-next,
#music-player-overlay.roaring-active #music-btn-shuffle {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 0 !important;
}
#music-player-overlay.roaring-active #music-btn-prev:hover,
#music-player-overlay.roaring-active #music-btn-next:hover,
#music-player-overlay.roaring-active #music-btn-shuffle:hover {
  background: #ffffff !important;
  color: #000000 !important;
}
#music-player-overlay.roaring-active #music-btn-playpause {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}
#music-player-overlay.roaring-active #music-btn-playpause:hover { filter: none !important; }
#music-player-overlay.roaring-active #music-btn-shuffle.active {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
}
#music-player-overlay.roaring-active #music-volume-wrap { border-left-color: #444444 !important; }
#music-player-overlay.roaring-active #music-volume-icon,
#music-player-overlay.roaring-active #music-volume-pct { color: #ffffff !important; }

/* ============================================================
   ROARING — CINEMÁTICA DURANTE LA REPRODUCCIÓN
   Fases:
     0:00–0:11      Normal
     0:11–0:12.5    Flash blanco progresivo sobre TODO excepto el reproductor
     0:12.5–0:39    Beat Pulse: la pantalla late con la música
     0:39–2:30      Reproductor vuela en forma de ∞ dejando rastro
     2:30–2:37      Reproductor vuelve al centro, fin
   ============================================================ */

/* ── Capa de flash blanco (cubre toda la pantalla excepto #music-player-frame) ── */
#roaring-white-flash {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 901;          /* encima del overlay bg (900) pero el frame lo ponemos en z-index 910 cuando está en modo flying */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
#roaring-white-flash.active { opacity: 1; }

/* Durante el flash el frame necesita estar encima de la capa blanca */
#music-player-overlay.roaring-flash-active #music-player-frame {
  position: relative;
  z-index: 10 !important;
}

/* ── Beat Pulse: el reproductor late al ritmo (en body causaba descuadre con position:fixed) ── */
@keyframes roaringBeatPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
#music-player-frame.roaring-beat-pulse {
  animation: roaringBeatPulse 0.5s ease-in-out infinite;
  transform-origin: center center;
}

/* ── Rastro del reproductor: cuadrado que aparece tenue y sube a opacidad 1 ── */
.roaring-trail-ghost {
  position: fixed;
  z-index: 898;
  pointer-events: none;
  border-radius: 0;
  border: 3px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.5);
  opacity: 0.2;
  animation: roaringTrailFadeIn 2s ease-out forwards;
  overflow: hidden;
}
@keyframes roaringTrailFadeIn {
  0%   { opacity: 0.2; }
  30%  { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ── El reproductor se mueve libremente durante la fase ∞ ── */
#music-player-frame.roaring-flying {
  position: fixed !important;
  /* left/top se controlan desde JS con requestAnimationFrame */
  z-index: 910;
  transition: none !important;
  /* pequeño glow blanco para reforzar el efecto Roaring Knight */
  box-shadow: 0 0 0 4px #ffffff, 0 0 30px rgba(255,255,255,0.5), 0 0 60px rgba(180,80,255,0.4) !important;
}

/* ── Botón de toggle de efectos cinemáticos ── */
#roaring-fx-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  background: rgba(30,30,30,0.85);
  color: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  cursor: pointer;
  z-index: 20;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  user-select: none;
}
#roaring-fx-toggle:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: rgba(50,50,50,0.95);
}
#roaring-fx-toggle.fx-off {
  color: rgba(255,80,80,0.65);
  border-color: rgba(255,80,80,0.3);
}
#roaring-fx-toggle.fx-off:hover {
  color: #ff6060;
  border-color: rgba(255,80,80,0.6);
}
/* Cuando el reproductor está en modo Roaring, adaptar el botón al estilo B&W */
#music-player-overlay.roaring-active #roaring-fx-toggle {
  font-family: '8bitoperatorplus2', 'Press Start 2P', 'Courier New', monospace !important;
  background: #000 !important;
  color: rgba(255,255,255,0.4) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 0 !important;
}
#music-player-overlay.roaring-active #roaring-fx-toggle.fx-off {
  color: rgba(255,80,80,0.55) !important;
  border-color: rgba(255,80,80,0.3) !important;
}

/* ============================================================
   ROARING — MINI-CINEMÁTICA DE SALIDA
   Línea diagonal roja (arriba-izq → abajo-der) que "corta" la
   pantalla en dos; ambas mitades se separan revelando la
   selección de guantes que hay detrás.
   ============================================================ */
#roaring-exit-transition {
  position: fixed;
  inset: 0;
  z-index: 99000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  /* Aísla repintados: el navegador no recalcula el resto de la página
     mientras se anima la cinemática (clave para Opera/Firefox) */
  contain: layout paint;
}
#roaring-exit-transition.active { opacity: 1; visibility: visible; }

#rt-slash-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* overflow:hidden → viewport exacto de repintado sin expansión extra */
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
#roaring-exit-transition.split #rt-slash-svg { opacity: 0; }

/* Glow SIN filter CSS → evita la rasterización en CPU que laggea Opera.
   Segunda línea más gruesa y semitransparente simula el efecto luminoso. */
#rt-slash-glow {
  stroke: rgba(255, 30, 30, 0.4);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 142 142;
  stroke-dashoffset: 142;
  opacity: 0;
}
#rt-slash-line {
  stroke: #ff3030;
  stroke-width: 1.4;
  stroke-dasharray: 142 142;
  stroke-dashoffset: 142;
  opacity: 0;
}
#roaring-exit-transition.slash #rt-slash-glow,
#roaring-exit-transition.slash #rt-slash-line {
  animation: rtSlashDraw .26s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes rtSlashDraw {
  0%   { stroke-dashoffset: 142; opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}

.rt-panel {
  position: absolute;
  inset: 0;
  background: #000000;
  /* translate3d: promueve a capa GPU desde el inicio */
  transform: translate3d(0, 0, 0);
  /* backface-visibility: evita re-rasterizaciones en motores Blink/WebKit */
  backface-visibility: hidden;
}
/* will-change SOLO cuando la cinemática está activa → no malgasta VRAM en reposo */
#roaring-exit-transition.active .rt-panel { will-change: transform; }

/* +2 % de margen: cero gap sub-píxel en cualquier aspecto de pantalla */
#rt-panel-a { clip-path: polygon(-2% -2%, 102% -2%, 102% 102%); }
#rt-panel-b { clip-path: polygon(-2% -2%, -2% 102%, 102% 102%); }

/* @keyframes en lugar de CSS transition: se ejecuta garantizadamente en el
   compositor-thread → sin jank en Opera, Firefox ni Safari */
@keyframes rtPanelAOut {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(110%, -110%, 0); }
}
@keyframes rtPanelBOut {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-110%, 110%, 0); }
}
#roaring-exit-transition.split #rt-panel-a {
  animation: rtPanelAOut .52s cubic-bezier(.6,0,.2,1) forwards;
}
#roaring-exit-transition.split #rt-panel-b {
  animation: rtPanelBOut .52s cubic-bezier(.6,0,.2,1) forwards;
}

/* END ROARING DELTARUNE THEME */