/* =========================================================================
   OUT2FI — Capa visual "premium" (Fase 1 del rediseño)
   -------------------------------------------------------------------------
   Reglas de este archivo:
   - NUNCA elimina ni renombra selectores de style.css o de main.js.
   - Es puramente ADITIVO: refina sombras, glow, bordes, hover y transiciones
     de los mismos componentes que ya existen.
   - Se carga DESPUÉS de style.css en includes/head.php, así que puede
     reforzar valores (mismos selectores, mismas reglas, solo más pulidas)
     sin usar !important salvo donde se indica explícitamente.
   - No introduce layout nuevo que pueda romper el grid actual: solo
     transform/opacity/filter/box-shadow, que no afectan el flujo del
     documento.
   ========================================================================= */

:root {
  --premium-glow-1: 0 0 40px rgba(168, 85, 247, 0.25);
  --premium-glow-2: 0 0 60px rgba(236, 72, 153, 0.18);
  --premium-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reduced motion: honor the OS setting site-wide for our additions --- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   Hero — glass reinforcement + room for the decorative 3D layer
------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  /* Extra breathing room (aditivo sobre el padding-block de style.css:
     ese sigue valiendo, esto solo agrega más arriba/abajo) so the 3D
     scene behind the player card actually has visible space to show —
     without this, the card fills ~100% of .hero and the scene is
     technically running but invisible. */
  padding-top: clamp(1.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* Resplandor de fondo del hero — puro CSS, sin JavaScript de por medio.
   Se ve siempre, en cualquier navegador y dispositivo. (Antes esto era el
   respaldo de una escena 3D que se retiró del proyecto; ahora es la
   decoración definitiva del fondo.) */
.hero::before {
  content: '';
  position: absolute;
  inset: -18% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 18% 20%, color-mix(in srgb, var(--accent-1) 30%, transparent), transparent 70%),
    radial-gradient(40% 50% at 85% 75%, color-mix(in srgb, var(--accent-3) 26%, transparent), transparent 70%);
  filter: blur(10px);
}

.hero .container { position: relative; z-index: 1; }

.player-card {
  box-shadow: var(--shadow-card), var(--premium-glow-1);
  transition: box-shadow 0.5s var(--premium-ease);
}

.player-card:hover {
  box-shadow: var(--shadow-card), var(--premium-glow-1), var(--premium-glow-2);
}

.player-neon-logo {
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent-1) 60%, transparent);
}

.play-btn {
  transition: transform 0.25s var(--premium-ease), box-shadow 0.25s var(--premium-ease);
}
.play-btn:hover { transform: scale(1.06); }
.play-btn:active { transform: scale(0.96); }

/* -------------------------------------------------------------------------
   Panels & cards — subtle lift + border glow on hover (microinteracciones)
------------------------------------------------------------------------- */
.panel,
.stat-card {
  transition: transform 0.35s var(--premium-ease), border-color 0.35s var(--premium-ease),
    box-shadow 0.35s var(--premium-ease);
}

.panel:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--accent-2) 20%, transparent);
}

.stat-card:hover { transform: translateY(-3px); }

.show-row,
.trending-item {
  transition: transform 0.25s var(--premium-ease), background 0.25s var(--premium-ease),
    border-color 0.25s var(--premium-ease);
}
.show-row:hover,
.trending-item:hover { transform: translateX(2px); }

.icon-btn,
.trending-play,
.show-play {
  transition: transform 0.2s var(--premium-ease), color 0.2s var(--premium-ease);
}
.icon-btn:hover,
.trending-play:hover,
.show-play:hover { transform: scale(1.1); }

/* -------------------------------------------------------------------------
   Scroll-reveal target — GSAP ScrollTrigger (assets/js/scroll-reveal.js)
   toggles this class; base state here so content is visible even if that
   script fails to load, is blocked, or the user has reduced motion on.
------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 1;
  transform: none;
}
.js-reveal-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
}
.js-reveal-ready .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--premium-ease), transform 0.7s var(--premium-ease);
}

/* -------------------------------------------------------------------------
   Mini-player visualizer — small canvas, decorative, next to the track info
------------------------------------------------------------------------- */
.mini-visualizer {
  width: 44px;
  height: 22px;
  flex-shrink: 0;
  margin-left: auto;
}
.mini-visualizer-canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
  .mini-visualizer { display: none; } /* keep the compact bar uncluttered on small screens */
}

/* -------------------------------------------------------------------------
   Featured content modal (new UI — distinct from .player-card.is-fullscreen)
------------------------------------------------------------------------- */
[data-featured-open] { cursor: pointer; }

.featured-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  background: rgba(4, 2, 10, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
}

.featured-modal-dialog {
  position: relative;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), var(--premium-glow-1);
  outline: none;
}

.featured-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  border: none;
  cursor: pointer;
  z-index: 1;
}

.featured-modal-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.featured-modal-body { padding: 1.5rem; }
.featured-modal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--accent-1);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.featured-modal-title { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.6rem; }
.featured-modal-desc { color: var(--text-dim); margin-bottom: 1.2rem; }

/* -------------------------------------------------------------------------
   Interactive card glow — pointer-tracked, added as a sibling <span>,
   never replaces card content. Disabled on touch devices (see card-glow.ts).
------------------------------------------------------------------------- */
.card-glow-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    color-mix(in srgb, var(--accent-1) 22%, transparent),
    transparent 70%
  );
}