/* Base & Reset */
:root {
  --bg-black: #050505;
  --bg-dark: #0a0a0a;
  --bg-card: #121212;
  --text-primary: #E1E0CC;
  --text-muted: rgba(225, 224, 204, 0.65);
  --accent-red: #d71912;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-black);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

/* Typography Utilities */
.font-playfair {
  font-family: 'Playfair Display', serif;
}
.italic-accent {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #d71912 0%, #ff6b65 40%, #E1E0CC 55%, #d71912 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: crimson-shine 6s linear infinite;
}

@keyframes crimson-shine {
  0% { background-position: 0% center; }
  100% { background-position: 250% center; }
}

/* Canvas de fondo y Scanlines VHS */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -2;
  opacity: 0.85;
}

.vhs-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.3)
  );
  background-size: 100% 4px;
  opacity: 0.25;
}
.text-primary { color: var(--text-primary); }

/* SVG Noise Overlay */
.noise-bg {
  position: relative;
}
.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  filter: url(#noiseFilter);
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 10;
}

/* Navigation Pill */
.fixed-nav {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none; /* Let clicks pass through outside the pill */
}
.nav-pill {
  pointer-events: auto;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(225, 224, 204, 0.15);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 12px 8px 16px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  font-style: italic;
}
.nav-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(225, 224, 204, 0.2);
}
.nav-links {
  display: flex;
  gap: 24px;
  margin: 0 8px;
}
.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.3s ease;
}
.nav-links a:hover {
  color: var(--text-primary);
}
.nav-links a.active {
  color: var(--text-primary) !important;
  position: relative;
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-red);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(215, 25, 18, 0.8);
}
.nav-cta {
  background: var(--text-primary);
  color: var(--bg-black);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 9999px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-cta:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

@media (max-width: 640px) {
    /* El nav debe existir en móvil (regla AGENTS.md): en vez de ocultar los
       enlaces, se libera espacio ocultando el TEXTO del logo — el símbolo sigue
       siendo el enlace a inicio y el título completo ya está en el hero. */
    .fixed-nav { top: 12px; }
    .nav-pill { gap: 14px; padding: 6px 8px 6px 10px; }
    .nav-brand span { display: none; }
    .nav-links { gap: 16px; margin: 0 2px; }
    .nav-links a { font-size: 0.8rem; padding: 12px 4px; }
    .nav-cta { padding: 8px 16px; font-size: 0.8rem; }
}

/* Hero Section: brand symbol as protagonist */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(215, 25, 18, 0.22), transparent 55%),
    var(--bg-black);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 120px 24px 64px;
  max-width: 720px;
}

.hero-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: 36px;
}

/* The butterfly symbol */
.hero-symbol {
  position: relative;
  width: clamp(220px, 42vw, 360px);
  aspect-ratio: 1 / 1;
  margin-bottom: 32px;
  animation: symbol-float 7s ease-in-out infinite;
}
.hero-symbol::before {
  /* Red glow bleeding the square art into the black background */
  content: '';
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(215, 25, 18, 0.55), transparent 68%);
  filter: blur(28px);
  z-index: -1;
}
.hero-symbol-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(215, 25, 18, 0.25);
}

@keyframes symbol-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* --- Audio-reactive visualizer: the symbol IS the player --- */
.hero-symbol-img {
  position: relative;
  z-index: 2;
  /* Smooth the per-frame bass pulse driven from JS */
  transition: transform 0.08s linear;
}
/* Canvas sits BEHIND the (opaque) artwork, so only the halo of frequency
   bars radiating past the square edges is visible. */
.hero-viz {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
/* The oversized visualizer canvas lives inside the (transformed) symbol, which
   paints above later siblings — keep the copy on top so bars never draw over
   the title/description/buttons. */
.hero-title,
.hero-description,
.hero-actions {
  position: relative;
  z-index: 2;
}
.hero-play {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(225, 224, 204, 0.3);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.hero-play:hover {
  transform: translateX(-50%) scale(1.08);
  border-color: var(--text-primary);
  background: rgba(215, 25, 18, 0.85);
}
.hero-play:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}
.hero-play-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 4px; /* optical centering of the triangle */
}
/* Paused ▶ becomes ⏸ while playing */
.hero-play[aria-pressed="true"] .hero-play-icon {
  width: 16px;
  height: 17px;
  border: 0;
  margin: 0;
  background:
    linear-gradient(currentColor, currentColor) left / 5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 5px 100% no-repeat;
}
.hero-nowplaying {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-top: 26px;
  margin-bottom: -6px;
}
.hero-nowplaying[hidden] { display: none; }
/* While the track plays, give the halo clean space by fading the eyebrow. */
.hero-eyebrow { transition: opacity 0.4s ease; }
.hero-section.is-playing .hero-eyebrow { opacity: 0.12; }

.hero-title {
  font-size: clamp(3rem, 9vw, 6rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.hero-description {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 460px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .hero-description { font-size: 1.125rem; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--text-primary);
  color: var(--bg-black);
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.3s ease, background 0.3s ease;
}
.btn-primary:hover {
  transform: scale(1.03);
  background: #ffffff;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid rgba(225, 224, 204, 0.25);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.btn-ghost:hover {
  border-color: var(--text-primary);
  background: rgba(225, 224, 204, 0.05);
}

/* Scroll-triggered reveal */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sections Base */
.padded-section {
  padding: 100px 24px;
}
@media (min-width: 768px) {
  .padded-section { padding: 160px 48px; }
}
.section-container {
  max-width: 1200px;
  margin: 0 auto;
}
.bg-dark { background-color: var(--bg-dark); }
.bg-black { background-color: var(--bg-black); }

/* Section Headers */
.section-header {
  margin-bottom: 64px;
}
.section-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.section-subtitle {
  color: var(--text-muted);
  font-size: 1.125rem;
  max-width: 500px;
}

/* Releases Grid */
.releases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .releases-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
}

.release-card {
  background: var(--bg-card);
  border: 1px solid rgba(225, 224, 204, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.release-card:hover {
  transform: translateY(-8px);
  border-color: rgba(225, 224, 204, 0.2);
}

.release-image-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.release-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.release-card:hover .release-image {
  transform: scale(1.05);
}

.release-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.release-card:hover .release-overlay {
  opacity: 1;
}
.btn-play {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 12px 24px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 500;
  transform: translateY(10px);
  transition: transform 0.3s ease, background 0.3s ease;
}
.release-card:hover .btn-play {
  transform: translateY(0);
}
.btn-play:hover {
  background: rgba(255,255,255,0.2);
}

/* Touch devices: hover never fires, so the play overlay must be visible —
   otherwise it stays clickable at opacity 0 (invisible tap target). */
@media (hover: none) {
  .release-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 45%);
    align-items: flex-end;
    padding-bottom: 20px;
  }
  .btn-play {
    transform: none;
    background: rgba(0, 0, 0, 0.5);
  }
}

.empty-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(225, 224, 204, 0.05);
}
.empty-wrapper span {
  font-size: 1.5rem;
  color: var(--text-muted);
}

.release-info {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.release-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-red);
  margin-bottom: 12px;
  font-weight: 600;
}
.release-info h3 {
  font-size: 2rem;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.release-info p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 24px;
  flex-grow: 1;
}

.platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.platform-links a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid rgba(225, 224, 204, 0.2);
  border-radius: 9999px;
  transition: background 0.3s ease, color 0.3s ease;
}
.platform-links a:hover {
  background: var(--text-primary);
  color: var(--bg-black);
}

/* Bio Section */
.bio-text {
  max-width: 680px;
}

.eyebrow {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.bio-heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}

.bio-text p {
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}
.social-links a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.3s ease;
}
.social-links a:hover {
  border-color: var(--text-primary);
}

/* Footer */
.site-footer {
  padding: 40px 24px;
  background: var(--bg-black);
  border-top: 1px solid rgba(225, 224, 204, 0.05);
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.875rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-symbol { animation: none; }
  /* No motion visualizer: audio still plays, the halo just stays hidden. */
  .hero-viz { display: none; }
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Phone hero tuning — placed after the base hero rules so it wins the cascade.
   The full hero can be taller than the viewport, so flow it from the top (not
   vertically centered) to avoid clipping under the fixed nav, and shrink the
   symbol so its halo doesn't crowd the copy. */
@media (max-width: 640px) {
  .hero-section { align-items: flex-start; }
  .hero-content { padding-top: 92px; padding-bottom: 48px; }
  .hero-symbol { width: clamp(180px, 52vw, 240px); margin-bottom: 28px; }
}

/* =================================================================
   VANGUARD INTERACTIONS — Spotlight, 3D Tilt, Status Dots & Toasts
   ================================================================= */

/* Spotlight & 3D Tilt */
.release-card {
  position: relative;
  --mouse-x: 50%;
  --mouse-y: 50%;
  transform-style: preserve-3d;
}

.release-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    450px circle at var(--mouse-x) var(--mouse-y),
    rgba(215, 25, 18, 0.22),
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .release-card:hover::before { opacity: 1; }
}

/* Indicadores de estado pulsantes */
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  vertical-align: middle;
}

.status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.75;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.status-live { background-color: var(--accent-red); color: var(--accent-red); }

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Toast Container & Items */
.toast-container {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast-item {
  background: var(--bg-card);
  border: 1px solid var(--accent-red);
  color: var(--text-primary);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 12px 20px;
  border-radius: 9999px;
  box-shadow: 0 12px 24px rgba(215, 25, 18, 0.25);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.toast-item.is-show {
  transform: translateY(0);
  opacity: 1;
}