/* ===========================================================
   CAPA DE INMERSIÓN · crissnowww
   Ken Burns · parallax · tile→book · tilt 3D · sonido
   Todo se apaga solo con "reducir movimiento" activado.
   =========================================================== */

/* --- 1. KEN BURNS: la portada respira --- */
@keyframes ekKenBurns {
  from { transform: scale(1.005); }
  to   { transform: scale(1.075); }
}
.hero-layer.on .hl-main { animation: ekKenBurns 9s linear both; }
.hero-layer.on .hl-blur { animation: ekKenBurns 9s linear both reverse; }

/* --- 2. PARALLAX: el hero se queda atrás al bajar --- */
.hero-content, .hero-media { will-change: transform; }

/* --- 3. VUELO DE LA TILE AL BOOK --- */
#ekFlyer {
  position: fixed;
  z-index: 345;                    /* por debajo del panel #book (350) */
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center 18%;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.95);
  transform-origin: 0 0;
  pointer-events: none;
}

/* --- 4. TILT 3D en los carteles del catálogo --- */
.nf-top-tile { perspective: 1000px; }
.nf-top-poster.ek-tilting { transition: transform .12s cubic-bezier(.23,1,.32,1); }

/* --- 5. BOTÓN DE SONIDO --- */
#ekSound {
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  z-index: 85;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,11,12,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.55);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, transform 140ms var(--ease-out, cubic-bezier(.23,1,.32,1));
}
@media (hover:hover) and (pointer:fine) { #ekSound:hover { color: #FFD500; border-color: rgba(255,213,0,.5); } }
#ekSound:active { transform: scale(.92); }
#ekSound.on { color: #FFD500; border-color: rgba(255,213,0,.45); }
#ekSound .ek-eq {
  position: absolute; inset: -1px;
  border-radius: 100px;
  border: 1px solid rgba(255,213,0,.35);
  opacity: 0;
}
#ekSound.on .ek-eq { animation: ekPing 2.6s ease-out infinite; }
@keyframes ekPing {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* --- Movil: el hero ocupa toda la pantalla y animarlo mientras se hace
       scroll ahoga a la GPU del telefono. Se queda quieto. --- */
@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .hero-layer.on .hl-main,
  .hero-layer.on .hl-blur { animation: none !important; }
  .nf-top-tile { perspective: none; }
}

/* --- Accesibilidad: si piden menos movimiento, nada de esto ocurre --- */
@media (prefers-reduced-motion: reduce) {
  .hero-layer.on .hl-main,
  .hero-layer.on .hl-blur { animation: none !important; }
  #ekSound.on .ek-eq { animation: none !important; }
}