/* ============================================================
   VINYL INTRO v7.0 – CSS
   ✓ Giro con @keyframes (como v1 que SÍ giraba)
   ✓ Fondo LISO, sin círculo, imagen limpia
   ✓ Color de letras configurable via --vi-text
   ✓ Grande en desktop, responsive en móvil
   ============================================================ */

:root {
  --vi-bg:       #1a1a2e;
  --vi-accent:   #c8a96e;
  --vi-cream:    #f5f0e8;
  --vi-text:     #ffffff;
  --vi-stage:    clamp(320px, 58vw, 520px);
  --vi-sleeve:   clamp(270px, 48vw, 430px);
  --vi-vinyl:    clamp(250px, 45vw, 410px);
  --vi-label:    clamp(90px, 17vw, 150px);
}

* { box-sizing: border-box; }

/* ─── Overlay ─────────────────────────────────────────────── */
#vinyl-intro-overlay {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: var(--vi-bg);
  cursor: pointer; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  opacity: 1; transition: opacity .6s ease;
}
#vinyl-intro-overlay.vi-fade-out {
  opacity: 0; pointer-events: none;
}

/* ─── Stage ───────────────────────────────────────────────── */
.vi-stage {
  position: relative;
  width: var(--vi-stage); height: var(--vi-stage);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  opacity: 0; transform: scale(.88) translateY(16px);
  animation: vi-enter .7s cubic-bezier(.34,1.56,.64,1) .15s forwards;
}
@keyframes vi-enter {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Sleeve ──────────────────────────────────────────────── */
.vi-sleeve {
  position: absolute;
  width: var(--vi-sleeve); height: var(--vi-sleeve);
  border-radius: 6px; overflow: hidden; z-index: 2;
  background: var(--vi-bg);
  box-shadow: 0 20px 55px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .5s cubic-bezier(.5,0,.7,.4), opacity .4s ease;
}
.vi-sleeve-img {
  position: absolute; inset: 0; overflow: hidden;
}
.vi-sleeve-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vi-sleeve-text {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(16px, 3vw, 26px);
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
  z-index: 2;
}
.vi-sleeve-title {
  font-family: 'Georgia', serif;
  font-size: clamp(18px, 3.2vw, 28px);
  font-weight: 700; letter-spacing: .05em;
  color: var(--vi-text); text-transform: uppercase;
  line-height: 1.15; display: block;
}
.vi-sleeve-sub {
  font-family: 'Courier New', monospace;
  font-size: clamp(10px, 1.8vw, 14px);
  letter-spacing: .2em; color: var(--vi-accent);
  text-transform: uppercase; display: block; margin-top: 4px;
}
.vi-sleeve::after {
  content: ''; position: absolute;
  top: 7px; bottom: 7px; right: 0; width: 3px;
  background: rgba(0,0,0,.2); border-radius: 2px;
}

/* ─── Vinyl ───────────────────────────────────────────────── */
.vi-vinyl {
  position: absolute;
  width: var(--vi-vinyl); height: var(--vi-vinyl);
  border-radius: 50%; z-index: 1;
  top: 50%; right: -16px; transform: translateY(-50%);
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.5));
  will-change: transform;
}

/* ─── Disc + Label DENTRO (todo gira junto como v1) ───────── */
.vi-disc {
  width: 100%; height: 100%; border-radius: 50%;
  position: relative;
  background: radial-gradient(circle,
    #2a2a2a 0%, #111 17%, #1c1c1c 17.5%, #0a0a0a 27%,
    #1a1a1a 27.5%, #0d0d0d 37%, #181818 37.5%, #080808 49%,
    #161616 49.5%, #060606 61%, #141414 61.5%, #050505 73%,
    #121212 73.5%, #030303 85%, #101010 85.5%, #020202 97%,
    #0e0e0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 35px rgba(0,0,0,.7);

  /* GIRO: animation pausada, se activa con JS */
  animation: vi-spin 6s linear infinite;
  animation-play-state: paused;
}

@keyframes vi-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Grooves shimmer — asimétrico, hace visible la rotación */
.vi-disc::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,255,255,.04) 10deg,
    transparent 20deg, rgba(255,255,255,.02) 30deg,
    transparent 50deg, rgba(255,255,255,.05) 55deg,
    transparent 70deg, rgba(255,255,255,.02) 90deg,
    transparent 120deg, rgba(255,255,255,.04) 180deg,
    transparent 200deg, rgba(255,255,255,.03) 250deg,
    transparent 280deg, rgba(255,255,255,.05) 320deg,
    transparent 360deg);
}
/* Specular highlight — asimétrico */
.vi-disc::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(
    ellipse 50% 35% at 30% 25%,
    rgba(255,255,255,.09) 0%, transparent 70%);
}

/* ─── Label (DENTRO del disc, gira con él) ────────────────── */
.vi-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--vi-label); height: var(--vi-label);
  border-radius: 50%;
  background: radial-gradient(circle, var(--vi-accent) 0%, #a07a3a 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 0 4px rgba(0,0,0,.15);
  overflow: hidden; z-index: 3;
}
.vi-label::before {
  content: ''; position: absolute; inset: 4px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
}

.vi-label-1 {
  font-family: 'Georgia', serif;
  font-size: clamp(9px, 1.6vw, 15px);
  font-weight: 700; letter-spacing: .04em;
  color: var(--vi-text); text-align: center;
  line-height: 1.2; max-width: 84%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vi-label-2 {
  font-family: 'Courier New', monospace;
  font-size: clamp(6.5px, 1.2vw, 10px);
  letter-spacing: .14em; color: var(--vi-text);
  opacity: .7; text-align: center;
}
.vi-label-3 {
  font-family: 'Courier New', monospace;
  font-size: clamp(5.5px, 1vw, 8px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--vi-text); opacity: .45;
  text-align: center; margin-top: 1px;
}

.vi-hole {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(8px, 1.5vw, 13px); height: clamp(8px, 1.5vw, 13px);
  border-radius: 50%; background: #111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08); z-index: 4;
}

/* ─── Hint ────────────────────────────────────────────────── */
.vi-hint {
  position: absolute;
  bottom: clamp(-55px, -8vw, -38px); left: 50%;
  transform: translateX(-50%); text-align: center;
  animation: vi-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
.vi-hint span {
  font-family: 'Courier New', monospace;
  font-size: clamp(10px, 1.7vw, 13px);
  letter-spacing: .3em; color: var(--vi-text);
  opacity: .35; text-transform: uppercase;
}
.vi-hint-bar {
  width: 1px; height: 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
  margin: 6px auto 0;
}
@keyframes vi-pulse {
  0%, 100% { opacity: .45; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;   transform: translateX(-50%) translateY(5px); }
}

/* ─── Glow ────────────────────────────────────────────────── */
.vi-glow {
  position: fixed;
  width: clamp(300px, 54vw, 500px); height: clamp(300px, 54vw, 500px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(200,169,110,.18) 0%, rgba(200,169,110,.03) 50%, transparent 72%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0); opacity: 0;
  z-index: 999998; pointer-events: none;
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
.vi-glow.on  { transform: translate(-50%,-50%) scale(1.5); opacity: 1; }
.vi-glow.off { transform: translate(-50%,-50%) scale(2.2); opacity: 0;
  transition: transform .6s ease, opacity .5s ease; }

/* ─── Floating decorations ────────────────────────────────── */
.vi-note {
  position: fixed; opacity: 0; pointer-events: none; z-index: 999999;
  animation: vi-float 2.8s ease-out forwards;
}
@keyframes vi-float {
  0%   { opacity: 0; transform: translateY(0) scale(.6) rotate(-12deg); }
  18%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-110px) scale(1.15) rotate(18deg); }
}
.vi-heart {
  position: fixed; pointer-events: none; z-index: 999999; opacity: 0;
  animation: vi-heart 3.2s ease-out forwards;
}
@keyframes vi-heart {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  14%  { opacity: .55; }
  100% { opacity: 0; transform: translateY(-150px) scale(1) rotate(12deg); }
}

/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --vi-stage:  88vw;
    --vi-sleeve: 74vw;
    --vi-vinyl:  68vw;
    --vi-label:  27vw;
  }
}