/* Capa interactiva de la portada: color por sección, brillo bajo el cursor, inclinación 3D,
   barra de progreso tipo XP, logros de exploración y títulos que se "decodifican".
   Curvas y duraciones según la guía de animación (ease-out fuerte, UI < 300 ms). */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sec: var(--menta);
}

/* ---------- Color de cada sección ---------- */
#inicio { --sec: #22f5c8; }
#trailer { --sec: #ff3dac; }
#mi-lab { --sec: #ffd23f; }
#personajes { --sec: #ff3dac; }
#niveles { --sec: #4d7cff; }
#juegos { --sec: #22f5c8; }
#tu-vida { --sec: #ff3dac; }
#arcade { --sec: #4d7cff; }
#aventuras { --sec: #9fdca0; }
#lanzamientos { --sec: #ffd23f; }
#laboratorio { --sec: #22f5c8; }
#contacto { --sec: #ff3dac; }

section[id] { position: relative; isolation: isolate; }
/* Resplandor ambiental del color de la sección */
section[id]::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 40px; width: min(900px, 90vw); height: 420px; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sec) 13%, transparent), transparent 75%);
  opacity: .9;
}
/* Línea de neón que recorre el borde superior de cada sección */
section[id]:not(#inicio)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sec) 50%, transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  opacity: .55; animation: fxBarrido 6s linear infinite;
}
@keyframes fxBarrido { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.cabeza small { color: var(--sec); text-shadow: 0 0 10px color-mix(in srgb, var(--sec) 60%, transparent); }
.cabeza h2 { position: relative; }
.cabeza h2::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--sec), transparent);
  box-shadow: 0 0 14px var(--sec);
  transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease-out) .15s;
}
.cabeza.visto h2::after, .revelar.visto h2::after { transform: scaleX(1); }

/* ---------- Barra de progreso tipo XP ---------- */
.fx-progreso {
  position: fixed; left: 0; top: 0; z-index: 60; height: 3px; width: 100%; pointer-events: none;
  background: linear-gradient(90deg, #22f5c8, #4d7cff, #ff3dac, #ffd23f);
  transform-origin: left; transform: scaleX(0);
  box-shadow: 0 0 12px rgba(34, 245, 200, .7);
}

/* ---------- Brillo que sigue al cursor + inclinación 3D ---------- */
.fx-luz { position: relative; }
.fx-borde, .fx-brillo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.fx-borde {
  z-index: 4; padding: 1.5px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--fx-c, var(--sec)), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.fx-brillo { z-index: 1; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--fx-c, var(--sec)) 14%, transparent), transparent 65%); }
@media (hover: hover) and (pointer: fine) {
  .fx-luz:hover > .fx-borde, .fx-luz:hover > .fx-brillo { opacity: 1; }
  .fx-tilt.fx-activo { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); transition: transform .08s linear, border-color .2s ease, box-shadow .2s ease; }
  .fx-iman { transition: translate .25s var(--ease-out); }
}

/* ---------- Entrada escalonada de tarjetas ---------- */
.fx-entra { animation: fxEntra .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes fxEntra { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* ---------- Chispas al hacer clic ---------- */
.fx-chispa {
  position: fixed; z-index: 90; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  background: var(--c, #22f5c8); box-shadow: 0 0 10px var(--c, #22f5c8);
  animation: fxChispa .5s var(--ease-out) forwards;
}
@keyframes fxChispa { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

/* ---------- Logros de exploración ---------- */
.fx-logros { position: fixed; left: 50%; top: 84px; z-index: 70; display: grid; gap: 8px; transform: translateX(-50%); pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.fx-logro {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 14px;
  background: rgba(16, 16, 43, .92); border: 1px solid var(--c, #22f5c8); backdrop-filter: blur(10px);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c, #22f5c8) 45%, transparent), 0 12px 30px rgba(0, 0, 0, .45);
  font: 600 14px "Space Grotesk", sans-serif; color: #e9e9ff;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
@starting-style { .fx-logro { transform: translateY(-14px) scale(.96); opacity: 0; } }
.fx-logro.sale { transform: translateY(-14px) scale(.96); opacity: 0; }
.fx-logro .ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--c, #22f5c8) 18%, transparent); }
.fx-logro small { display: block; font: 400 8px "Press Start 2P", monospace; color: var(--c, #22f5c8); letter-spacing: 1px; margin-bottom: 3px; }
.fx-logro b { color: var(--c, #22f5c8); }

/* Medidor de exploración en la cabecera */
.fx-mapa {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; background: rgba(16, 16, 43, .85); border: 1px solid var(--linea);
  font: 700 12px "Space Grotesk", sans-serif; color: var(--gris); backdrop-filter: blur(8px);
}
.fx-mapa i { display: block; width: 70px; height: 6px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.fx-mapa i b { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #22f5c8, #ff3dac); transition: transform .5s var(--ease-out); }
@media (max-width: 700px) { .fx-mapa { bottom: auto; top: 78px; right: 10px; } .fx-logros { top: auto; bottom: 150px; } }

/* ---------- Tráiler ---------- */
#trailer { padding-top: 40px; }
.trailer-marco {
  position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; background: #07071a;
  border: 1px solid color-mix(in srgb, var(--sec) 50%, var(--linea));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 60px color-mix(in srgb, var(--sec) 28%, transparent), 0 30px 80px rgba(0, 0, 0, .55);
}
.trailer-marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.trailer-boton {
  position: absolute; left: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); cursor: pointer;
  background: rgba(7, 7, 26, .7); color: #fff; font: 700 14px "Space Grotesk", sans-serif; backdrop-filter: blur(8px);
  transition: background .2s ease, transform .16s var(--ease-out);
}
.trailer-boton:hover { background: rgba(255, 61, 172, .35); }
.trailer-sonido { left: auto; right: 50px; }
.trailer-sonido[aria-pressed="false"] { animation: fxLlamar 2s ease-in-out infinite; }
@keyframes fxLlamar { 50% { box-shadow: 0 0 0 6px rgba(255, 61, 172, .25), 0 0 18px rgba(255, 61, 172, .6); } }
.trailer-boton:active { transform: scale(.97); }
.trailer-esquina { position: absolute; z-index: 2; width: 26px; height: 26px; border: 3px solid var(--sec); pointer-events: none; filter: drop-shadow(0 0 6px var(--sec)); }
.trailer-esquina.a { left: 12px; top: 12px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.trailer-esquina.b { right: 12px; top: 12px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.trailer-esquina.c { left: 12px; bottom: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; opacity: 0; }
.trailer-esquina.d { right: 12px; bottom: 12px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.trailer-rec { position: absolute; right: 18px; top: 18px; z-index: 3; font: 400 9px "Press Start 2P", monospace; color: #fff; display: flex; align-items: center; gap: 6px; }
.trailer-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff3dac; box-shadow: 0 0 8px #ff3dac; animation: fxParpadeo 1.2s steps(2) infinite; }
@keyframes fxParpadeo { 50% { opacity: .2; } }

/* ---------- Movimiento reducido: sin desplazamientos, solo cambios suaves ---------- */
@media (prefers-reduced-motion: reduce) {
  section[id]::after, .trailer-rec::before { animation: none; }
  .fx-entra { animation: fxAparece .2s ease both; }
  @keyframes fxAparece { from { opacity: 0; } }
  .fx-chispa { display: none; }
  .cabeza h2::after { transition: none; transform: scaleX(1); }
}

/* ---------- Fondo interactivo de cada sección (js/fondos-fx.js) ---------- */
.fondo-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .85; }