/* ================================================================
   FRAN96MC.ES — PORTADA · epico.css
   Piel del modo «Épico» (fondo = 'epico' en el panel del Menú):
   el escenario clásico de siempre, con un cielo de cine debajo y
   una entrada cinematográfica al cargar. Lo que se mueve vive en
   portada/epico.js; aquí solo están las capas y el título vivo.

   NADA DE ESTO SE VE SIN body.fondo-epico: el resto de fondos no
   cargan ni un píxel de más.
   ================================================================ */

/* ----------------------------------------------------------------
   1) EL CIELO — un lienzo entre el degradado (.cielo) y las
      estrellas de siempre (#fx). Va por DEBAJO del castillo y de
      las nubes: es profundidad, no decoración encima.
   ---------------------------------------------------------------- */
#epicoCielo{
  position:absolute;inset:0;width:100%;height:100%;
  display:none;
}
body.fondo-epico #epicoCielo{display:block}

/* ----------------------------------------------------------------
   2) EL VELO DE ENTRADA — tapa la página entera mientras dura la
      entrada. Está por encima de TODO (barra, HUD, aviso de
      cookies): es una cortina de cine, no un elemento de la página.
      Se abre como un iris (clip-path) desde el título hacia fuera.
   ---------------------------------------------------------------- */
#epicoVelo{
  /* Por encima incluso del aviso de cookies (includes/consentimiento.js
     usa 2147483000): son tres segundos de cortina y el aviso sigue ahí
     debajo cuando se abre. Con un z menor, el aviso asomaba encima de
     la película como un cartel pegado en la pantalla del cine.
     --z-cine (tokens.css) es el mismo valor máximo de siempre, solo
     que ahora con nombre en vez de suelto: no vale usar la escala
     normal (--z-warp:50 se quedaría muy por debajo de esos overlays). */
  position:fixed;inset:0;z-index:var(--z-cine);
  /* Sin fondo propio: el negro lo pinta el lienzo, que al final se
     AGUJEREA desde el título hacia fuera (destination-out) para que la
     portada aparezca por el centro. Con un fondo CSS debajo, el
     agujero no enseñaría nada. */
  background:transparent;
  display:none;pointer-events:none;
}
#epicoVelo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body.epico-entrando #epicoVelo{display:block;pointer-events:auto}
body.epico-entrando{overflow:hidden}

/* Botón para saltar la entrada: el mismo estilo de mando pixel que
   el resto de la portada. Aparece al segundo, no en el primer
   fotograma. */
#epicoSaltar{
  position:absolute;right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  font-family:var(--f-pixel);font-size:.55rem;line-height:1;letter-spacing:.05em;
  color:var(--tinta-suave);background:rgba(4,5,26,.6);
  border:2px solid var(--panel-borde);padding:.7rem .9rem;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .4s ease,color .2s,border-color .2s
}
#epicoSaltar.visible{opacity:.6;pointer-events:auto}
#epicoSaltar:hover,#epicoSaltar:focus-visible{opacity:1;color:var(--tinta);border-color:var(--oro)}

/* ----------------------------------------------------------------
   3) EL TÍTULO VIVO — el mismo h1 de siempre, con un halo que
      respira detrás y un brillo que va y viene. Solo en épico.
   ---------------------------------------------------------------- */
body.fondo-epico .heroe-titulo h1{
  animation:epicoTituloBrillo 5.5s ease-in-out infinite;
}
@keyframes epicoTituloBrillo{
  0%,100%{text-shadow:0 4px 0 #b3781c,0 8px 0 rgba(0,0,0,.45),0 0 34px rgba(255,207,92,.35)}
  50%{text-shadow:0 4px 0 #b3781c,0 8px 0 rgba(0,0,0,.45),
      0 0 60px rgba(255,207,92,.7),0 0 120px rgba(89,224,255,.22)}
}
/* El halo: una mancha de luz detrás del título, que late a otro
   ritmo que el brillo para que no parezca un simple parpadeo. */
body.fondo-epico .heroe-titulo::before{
  content:"";position:absolute;left:50%;top:50%;
  width:min(90vw,44rem);height:16rem;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,207,92,.20),rgba(166,137,255,.10) 45%,transparent 70%);
  pointer-events:none;z-index:-1;
  animation:epicoHalo 7s ease-in-out infinite;
}
@keyframes epicoHalo{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
}

/* Mientras dura la entrada el título real se esconde: lo dibuja el
   velo con partículas y en el último fotograma se cambia por el de
   verdad, ya en su sitio. */
body.epico-entrando .heroe-titulo h1{opacity:0}
body.epico-entrando.epico-aterrizado .heroe-titulo h1{opacity:1}

/* ----------------------------------------------------------------
   4) MOVIMIENTO REDUCIDO — sin entrada y sin latidos. El cielo
      queda como un fotograma fijo (lo decide epico.js).
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.fondo-epico .heroe-titulo h1{animation:none}
  body.fondo-epico .heroe-titulo::before{animation:none;opacity:.7}
  #epicoVelo{display:none !important}
  body.epico-entrando{overflow:auto}
  body.epico-entrando .heroe-titulo h1{opacity:1}
}