/* ============================================================
   EFECTOS — estilos de motor/efectos.js
   Solo CSS y degradados: nada se descarga.
   ============================================================ */

/* ---------- Atmósfera (encima de la escena, debajo del HUD y las flechas) ---------- */
.ef-atmosfera { position: absolute; inset: 0; z-index: 14; pointer-events: none; overflow: hidden; }
.ef-atmosfera > * { position: absolute; inset: 0; pointer-events: none; }
.ef-particulas { width: 100%; height: 100%; }

.ef-oscuridad { background: rgba(0,0,0,.85); }

.ef-niebla, .ef-niebla-b { mix-blend-mode: screen; }
.ef-niebla { inset: 0 -60% 0 0; width: 160%;
  background:
    radial-gradient(ellipse 34% 26% at 12% 72%, rgba(200,210,225,.35), transparent 70%),
    radial-gradient(ellipse 28% 20% at 44% 84%, rgba(200,210,225,.30), transparent 70%),
    radial-gradient(ellipse 36% 24% at 78% 66%, rgba(200,210,225,.32), transparent 70%),
    radial-gradient(ellipse 30% 22% at 96% 88%, rgba(200,210,225,.28), transparent 70%);
  animation: ef-niebla 70s linear infinite alternate; }
.ef-niebla-b { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 26% 30% at 25% 40%, rgba(190,200,215,.18), transparent 70%),
    radial-gradient(ellipse 32% 22% at 66% 30%, rgba(190,200,215,.15), transparent 70%),
    radial-gradient(ellipse 22% 26% at 88% 50%, rgba(190,200,215,.18), transparent 70%);
  animation: ef-niebla 46s linear infinite alternate-reverse; }
@keyframes ef-niebla { from { transform: translateX(0); } to { transform: translateX(-34%); } }

.ef-tinte { mix-blend-mode: color; }

.ef-parpadeo { background: #000; opacity: 0; animation: ef-parpadeo 7.3s infinite; }
@keyframes ef-parpadeo {
  0%, 18%, 22%, 24%, 61%, 63.5%, 66%, 88%, 100% { opacity: 0; }
  19%, 23% { opacity: var(--ef-p, .5); }
  62%, 64.5% { opacity: calc(var(--ef-p, .5) * .7); }
  89% { opacity: calc(var(--ef-p, .5) * .45); }
}

.ef-vineta { background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 45%, rgba(0,0,0, var(--ef-v, .6)) 100%); }

.ef-latido { background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 50%, rgba(150,0,0, calc(var(--ef-l, .5) * .75)) 100%);
  animation: ef-latido 1.15s ease-in-out infinite; }
@keyframes ef-latido { 0%, 100% { opacity: .35; } 12% { opacity: 1; } 24% { opacity: .5; } 36% { opacity: .9; } 60% { opacity: .35; } }

.ef-grano { mix-blend-mode: overlay; background-size: 128px 128px; animation: ef-grano .5s steps(5) infinite; }
@keyframes ef-grano { 0% { background-position: 0 0; } 20% { background-position: -40px 30px; } 40% { background-position: 60px -20px; } 60% { background-position: -20px -60px; } 80% { background-position: 30px 50px; } 100% { background-position: 0 0; } }

.ef-relampago { background: #eef3ff; opacity: 0; mix-blend-mode: screen; }

/* Calidad ligera: sin movimiento caro */
.ef-ligera .ef-niebla, .ef-ligera .ef-niebla-b, .ef-ligera .ef-grano { animation: none; }

/* ---------- Respuesta al tocar ---------- */
.ef-onda { position: fixed; z-index: 60; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--acento); opacity: .7; animation: ef-onda .55s ease-out forwards; }
.ef-onda.fuerte { border-width: 3px; box-shadow: 0 0 12px var(--acento); }
@keyframes ef-onda { to { transform: scale(6); opacity: 0; } }

.ef-vuela { position: fixed; z-index: 960; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 46px; pointer-events: none;
  filter: drop-shadow(0 0 10px var(--acento)); }
.ef-vuela img { width: 100%; height: 100%; object-fit: contain; }

/* Zona importante: un brillo que aparece de vez en cuando */
.zona.destacar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 70%, transparent), 0 0 18px 2px color-mix(in srgb, var(--acento) 55%, transparent);
  animation: ef-destacar 4.2s ease-in-out infinite; }
@keyframes ef-destacar { 0%, 64% { opacity: 0; } 76% { opacity: .9; } 100% { opacity: 0; } }

/* ---------- Decorados y animaciones de sprites ---------- */
.decorado { position: absolute; pointer-events: none; will-change: transform; }
.decorado img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.decorado.frente { z-index: 2; }
.anim-flotar { animation: ef-flotar 4.6s ease-in-out infinite; }
.anim-respirar { animation: ef-respirar 4s ease-in-out infinite; }
.anim-balancear { transform-origin: 50% 0; animation: ef-balancear 3.6s ease-in-out infinite; }
.anim-mecer { transform-origin: 50% 100%; animation: ef-mecer 5s ease-in-out infinite; }
.anim-parpadear { animation: ef-parpadear 5.5s steps(1) infinite; }
.anim-brillar { animation: ef-brillar 2.8s ease-in-out infinite; }
.anim-temblar { animation: ef-temblar .35s linear infinite; }
.anim-girar { animation: ef-girar 18s linear infinite; }
.anim-deriva { animation: ef-deriva 40s ease-in-out infinite alternate; }
.anim-latir { animation: ef-latir 1.2s ease-in-out infinite; }
@keyframes ef-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
@keyframes ef-respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes ef-balancear { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ef-mecer { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes ef-parpadear { 0%, 41%, 45%, 78%, 100% { opacity: 1; } 42%, 44%, 79% { opacity: .15; } 43% { opacity: .8; } }
@keyframes ef-brillar { 0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--acento) 40%, transparent)); } 50% { filter: drop-shadow(0 0 14px var(--acento)); } }
@keyframes ef-temblar { 0% { transform: translate(0,0); } 25% { transform: translate(.6%,-.4%); } 50% { transform: translate(-.5%,.5%); } 75% { transform: translate(.4%,.3%); } 100% { transform: translate(0,0); } }
@keyframes ef-girar { to { transform: rotate(360deg); } }
@keyframes ef-deriva { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes ef-latir { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } 45% { transform: scale(1.05); } }

/* ---------- Momentos ---------- */
.ef-transicion { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.ef-transicion .hoja { position: absolute; top: 0; bottom: 0; }
.ef-transicion.cortina .hoja { width: 51%;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 18%, transparent 85%, rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg, #5c0d14 0 18px, #7a1620 30px, #4a0a10 46px, #5c0d14 60px);
  box-shadow: 0 0 40px rgba(0,0,0,.8); }
.ef-transicion.cortina .izq { left: 0; border-right: 3px solid #c9a04a; }
.ef-transicion.cortina .der { right: 0; border-left: 3px solid #c9a04a; }
.ef-transicion.barrido .hoja { inset: 0 -20% 0 0; width: 120%; background: linear-gradient(90deg, transparent, #000 18%, #000); }

.ef-destello { position: fixed; inset: 0; z-index: 790; pointer-events: none; }
.ef-glitch { position: fixed; inset: 0; z-index: 795; pointer-events: none; mix-blend-mode: difference; }
.ef-glitch i { position: absolute; left: -10%; width: 120%; display: none; }

.ef-sombra { position: fixed; left: 0; bottom: -2vh; height: 80vh; z-index: 790; pointer-events: none; filter: blur(2px); opacity: 0; }

.ef-escribir { position: fixed; inset: 0; z-index: 470; display: flex; align-items: center; justify-content: center; cursor: pointer;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at center, rgba(4,4,6,.95), #000); opacity: 0; transition: opacity .25s; }
.ef-escribir.abierta { opacity: 1; }
.ef-escribir-caja { width: min(640px, 100%); max-height: 100%; overflow-y: auto; }
.ef-escribir h2 { margin: 0 0 18px; font-family: var(--fuente-titulos); color: var(--acento); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(18px, 3vmin + 10px, 30px); }
.ef-escribir p { margin: 0; white-space: pre-line; color: var(--texto); font-family: var(--fuente-texto); line-height: 1.6; font-size: clamp(17px, 1.8vmin + 11px, 23px); text-shadow: 0 0 12px rgba(0,0,0,.9); }
.ef-cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--acento); animation: ef-cursor .8s steps(1) infinite; }
@keyframes ef-cursor { 50% { opacity: 0; } }
.ef-seguir { margin-top: 22px; color: var(--tenue); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .4s; }
.ef-seguir.visible { opacity: 1; animation: latir 1.6s infinite; }

/* El botón de la mochila responde cuando llega algo */
#b-mochila { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .ef-niebla, .ef-niebla-b, .ef-grano, .ef-latido, .ef-parpadeo, .zona.destacar::before,
  [class^="anim-"], [class*=" anim-"] { animation: none !important; }
}