/* =============================================
   BASE.CSS — Reset, Variables, Tipografía
   ============================================= */

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

:root {
  --bg:          #0a0a0b;
  --bg2:         #111114;
  --bg3:         #18181d;
  --surface:     #1e1e25;
  --surface2:    #252530;
  --red:         #c0392b;
  --red-bright:  #e74c3c;
  --red-glow:    rgba(192, 57, 43, 0.3);
  --gold:        #d4a84b;
  --text:        #e8e8e0;
  --text-dim:    #888885;
  --text-muted:  #444440;
  --border:      rgba(255, 255, 255, 0.07);

  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --player-height: 80px;
  --radius:        6px;
  --radius-lg:     12px;
}

html {
  scroll-behavior: smooth;
}

body {
  background:    var(--bg);
  color:         var(--text);
  font-family:   var(--font-body);
  font-size:     15px;
  line-height:   1.6;
  overflow-x:    hidden;
  padding-bottom: var(--player-height);
}

a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
button {
  border: none;
  cursor: pointer;
  background: none;
  font-family: var(--font-body);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }

/* ---- Grain overlay ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;
}

/* ---- Section commons ---- */
section { padding: 75px 0; }

.section-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 56px;
  padding: 0 40px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--red);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}

.section-title em {
  font-style: italic;
  color: var(--red);
}

.section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}



/* ---- Shared close button ---- */
.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 14px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--red); color: white; }

/* =============================================
   ANIMATIONS
   ============================================= */

/* ---- REVEAL ON SCROLL ---- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger children — discos */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
/* Base delay of 0.8s so discos wait for title to finish */
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0.8s;  }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 1.05s; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 1.30s; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 1.55s; }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 1.80s; }
.reveal-stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: 2.05s; }

/* ---- SLIDE FROM LEFT (section titles) ---- */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1.6s cubic-bezier(0.22,1,0.36,1), transform 1.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* ---- PLATFORM BUTTONS SHIMMER ---- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.platform-btn {
  position: relative;
  overflow: hidden;
}
.platform-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.2s;
}
.platform-btn:hover::after {
  opacity: 1;
  animation: shimmer 0.7s ease forwards;
}

/* ---- HERO HALO PULSE ---- */
@keyframes haloPulse {
  0%,100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}
.hero-logo-wrap::before {
  animation: haloPulse 4s ease-in-out infinite !important;
}

/* ---- PAGE TRANSITION FADE ---- */
body.page-exit {
  animation: pageExit 0.3s ease forwards;
}
@keyframes pageExit {
  to { opacity: 0; transform: translateY(-8px); }
}