/* LiteraryScore™ — sistema de diseño compartido por todas las páginas.
   Tokens de color, tipo, forma, sombra y movimiento + componente «portada viva».
   Se carga primero; cada página añade después sus propios estilos. */

@property --amb-a { syntax: '<color>'; inherits: true; initial-value: rgba(196,150,58,0.12); }
@property --amb-b { syntax: '<color>'; inherits: true; initial-value: rgba(139,58,42,0.08); }

:root {
  /* Color */
  --navy:      #0F1535;
  --navy-deep: #090D24;
  --surface:   #162040;
  --surface2:  #1C2850;
  --gold:      #C4963A;
  --gold2:     #D4A84B;
  --gold-light:#F0D08A;
  --cream:     #F2E8DC;
  --cream2:    #F5F0E8;
  --muted:     #A39A87;
  --muted2:    #93A0BD;
  --line:      rgba(196,150,58,0.22);
  --gold-metal: linear-gradient(115deg, #A87C2C 0%, #C4963A 28%, #F0D08A 50%, #C4963A 72%, #A87C2C 100%);

  /* Ambientes de cada libro */
  --amb-desert-a:  rgba(196,150,58,0.16);  --amb-desert-b:  rgba(139,58,42,0.12);
  --amb-sea-a:     rgba(70,130,180,0.18);  --amb-sea-b:     rgba(196,150,58,0.08);
  --amb-sunrise-a: rgba(232,150,90,0.18);  --amb-sunrise-b: rgba(214,120,140,0.10);

  /* Tipo */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --fs-micro: 0.7rem;    /* 11,2 px: navegación y píldoras densas */
  --fs-label: 0.75rem;   /* 12 px: mínimo para etiquetas */
  --fs-small: 0.95rem;
  --fs-body:  1.1rem;
  --tracking-label: 0.14em;

  /* Forma y profundidad */
  --r-sm: 6px;
  --r-md: 14px;
  --r-pill: 999px;
  --sh-1: 0 10px 30px -12px rgba(0,0,0,0.6);
  --sh-2: 0 30px 70px -25px rgba(0,0,0,0.85);
  --sh-gold: 0 12px 32px -10px rgba(196,150,58,0.6);

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.5s;
  --dur-slow: 0.9s;
}

/* ── Transición entre páginas: la portada viaja de la biblioteca al reproductor ── */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ══════════════════════════════════════
   PORTADA VIVA
   La imagen original no se toca: todos los efectos son capas encima.
   Estructura:
   <a class="live-cover"><span class="lc-frame"><img><span class="lc-sheen"></span><span class="lc-edge"></span><span class="lc-cta">Escuchar</span></span></a>
══════════════════════════════════════ */
.live-cover {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --lift: 0px; --zoom: 1;
  position: relative; display: block; text-decoration: none; color: inherit;
  perspective: 900px; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.lc-frame {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-sm);
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--zoom));
  transform-style: preserve-3d;
  box-shadow: var(--sh-2), 0 0 0 0.5px var(--line);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  will-change: transform;
}
.lc-frame img { display: block; width: 100%; height: auto; }

/* Reflejo metálico diagonal con una banda dorada fina en su centro */
.lc-sheen {
  position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255,240,210,0.10) 45%,
    rgba(240,208,138,0.55) 49.6%, rgba(255,250,235,0.85) 50%, rgba(240,208,138,0.55) 50.4%,
    rgba(255,240,210,0.10) 55%,
    transparent 62%);
  transform: translateX(-75%);
  mix-blend-mode: screen; opacity: 0;
}

/* Borde que se ilumina hacia el puntero */
.lc-edge {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--gold-light), rgba(196,150,58,0.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-base) ease;
}

/* Botón que aparece al interactuar */
.lc-cta {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 10px;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--navy); background: var(--gold-metal); background-size: 200% 100%;
  padding: 0.7rem 1.2rem; border-radius: var(--r-pill); box-shadow: var(--sh-gold);
  opacity: 0; transition: opacity var(--dur-base) ease, translate var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.lc-cta svg { width: 12px; height: 12px; fill: currentColor; }

/* Estado activo: ratón encima, foco de teclado o tarjeta centrada en táctil */
.live-cover:hover, .live-cover:focus-visible, .live-cover.is-active { --lift: -8px; --zoom: 1.03; }
.live-cover:hover .lc-frame, .live-cover:focus-visible .lc-frame, .live-cover.is-active .lc-frame {
  box-shadow: 0 40px 80px -25px rgba(0,0,0,0.9), 0 0 40px -6px rgba(196,150,58,0.35), 0 0 0 0.5px rgba(196,150,58,0.6);
}
.live-cover:hover .lc-edge, .live-cover:focus-visible .lc-edge, .live-cover.is-active .lc-edge { opacity: 1; }
.live-cover:hover .lc-cta, .live-cover:focus-visible .lc-cta, .live-cover.is-active .lc-cta { opacity: 1; translate: -50% 0; }
.live-cover:hover .lc-sheen, .live-cover:focus-visible .lc-sheen, .live-cover.is-active .lc-sheen {
  animation: lc-sweep 1.4s var(--ease-out) forwards;
}
.live-cover:focus-visible .lc-frame { outline: 2px solid var(--gold); outline-offset: 4px; }
.live-cover:active { --zoom: 0.99; }

@keyframes lc-sweep {
  0%   { transform: translateX(-75%); opacity: 1; }
  100% { transform: translateX(75%);  opacity: 1; }
}

/* En táctil el botón queda visible: no depende del ratón */
@media (hover: none) {
  .lc-cta { opacity: 0.92; translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-frame { transform: none !important; transition: box-shadow var(--dur-base) ease; }
  .live-cover .lc-sheen { animation: none !important; }
}