/* =====================================================================
   Movimiento de la web. Todo se apaga solo si el sistema pide
   "reducir movimiento" (regla global en sitio.css).
   ===================================================================== */

/* ---------- transición entre páginas (Chrome/Edge/Opera; los demás cargan normal) ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: barra; }
.tricolor { view-transition-name: tricolor; }
.pie { view-transition-name: pie; }
main { view-transition-name: contenido; }
::view-transition-old(contenido) { animation: vt-sale .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(contenido) { animation: vt-entra .38s cubic-bezier(0, 0, .2, 1) both; }
::view-transition-old(barra), ::view-transition-new(barra),
::view-transition-old(tricolor), ::view-transition-new(tricolor) { animation: none; }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-10px); filter: blur(3px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
/* cambio de tema: un círculo que se expande */
::view-transition-new(root) { animation: tema-circulo .55s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-old(root) { animation: none; }
@keyframes tema-circulo { from { clip-path: circle(0 at calc(100% - 110px) 32px); } to { clip-path: circle(150% at calc(100% - 110px) 32px); } }

/* ---------- franja tricolor viva ---------- */
.tricolor { background-size: 200% 100%; background-image: linear-gradient(90deg, var(--amarillo) 0 16.6%, var(--azul) 16.6% 33.3%, var(--rojo) 33.3% 50%, var(--amarillo) 50% 66.6%, var(--azul) 66.6% 83.3%, var(--rojo) 83.3%); animation: franja 24s linear infinite; }
@keyframes franja { to { background-position: -200% 0; } }

/* ---------- barra de navegación ---------- */
.nav { transition: box-shadow .3s, background .3s; }
.nav.con-sombra { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; background: var(--amarillo); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; border-radius: 2px; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { box-shadow: none; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width:1060px) {
  .nav.abierta .nav-links { animation: menu-baja .25s ease both; }
  .nav-links a::after { display: none; }
}
@keyframes menu-baja { from { opacity: 0; transform: translateY(-8px); } }
.menu-usuario[open] .caja { animation: menu-baja .18s ease both; }

/* ---------- portada ---------- */
.heroe picture img { animation: acercar 26s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes acercar { to { transform: scale(1.06); } }
.heroe-panel > * { animation: subir .7s cubic-bezier(.2, .8, .2, 1) both; }
.heroe-panel > :nth-child(2) { animation-delay: .08s; }
.heroe-panel > :nth-child(3) { animation-delay: .16s; }
.heroe-panel > :nth-child(4) { animation-delay: .24s; }
@keyframes subir { from { transform: translateY(16px); } }
/* luces de ciudad que titilan sobre la portada */
.heroe { isolation: isolate; }
.heroe::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 58%, rgba(255, 210, 31, .9), transparent 60%),
    radial-gradient(2px 2px at 27% 63%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(2px 2px at 73% 60%, rgba(255, 210, 31, .9), transparent 60%),
    radial-gradient(2px 2px at 86% 55%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 66%, rgba(239, 43, 74, .9), transparent 60%),
    radial-gradient(1.5px 1.5px at 39% 61%, rgba(91, 107, 255, .9), transparent 60%);
  animation: titilar 3.2s ease-in-out infinite alternate; }
@keyframes titilar { 0% { opacity: .25; } 50% { opacity: .9; } 100% { opacity: .4; } }

/* ---------- botones ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primario:hover { box-shadow: 0 8px 24px rgba(255, 210, 31, .28); transform: translateY(-1px); }
.btn-azul:hover, .btn-discord:hover { box-shadow: 0 8px 24px rgba(51, 70, 255, .35); transform: translateY(-1px); }
.btn::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .5s; pointer-events: none; }
.btn-primario:hover::before, .btn-azul:hover::before, .btn-discord:hover::before { left: 130%; }

/* ---------- tarjetas ---------- */
.tarjeta, .paso, .faccion, .rol { transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s; }
.paso:hover, .faccion:hover { transform: translateY(-3px); border-color: var(--linea-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.faccion:hover .escudo { transform: scale(1.06) rotate(-2deg); }
.faccion .escudo { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.rol:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.paso:hover::before { -webkit-text-stroke-color: var(--amarillo); }
.paso::before { transition: -webkit-text-stroke-color .3s; }

/* ---------- aparición al bajar (solo navegadores con scroll-driven animations) ---------- */
@supports (animation-timeline: view()) {
  .aparece { animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes aparecer { from { opacity: .15; transform: translateY(28px) scale(.98); } }
}

/* ---------- avisos ---------- */
.flash { animation: aviso .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes aviso { from { transform: translateY(-8px); } }

/* ---------- asistente ---------- */
.asis:not([hidden]) { animation: abrir-chat .28s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom right; }
@keyframes abrir-chat { from { opacity: 0; transform: scale(.92) translateY(10px); } }
.asis-m { animation: burbuja .25s ease both; }
@keyframes burbuja { from { opacity: 0; transform: translateY(6px); } }
.asis-boton { transition: transform .2s; }
.asis-boton:hover { transform: translateY(-2px) scale(1.03); }

/* ---------- Gaceta: resaltar el artículo al que se salta ---------- */
.gaceta .art:target { animation: resalto 2.4s ease both; }
@keyframes resalto { 0%, 40% { background: var(--hl); } 100% { background: transparent; } }

/* ---------- barra de progreso de lectura (Gaceta y páginas largas) ---------- */
.progreso-lectura { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--amarillo), var(--azul), var(--rojo)); }
@supports (animation-timeline: scroll()) {
  .progreso-lectura { animation: leer linear both; animation-timeline: scroll(root); }
  @keyframes leer { to { transform: scaleX(1); } }
}

/* ---------- volver arriba ---------- */
.arriba { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 55; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-2); background: var(--noche-2); color: var(--texto); cursor:var(--cur-mano,pointer); display: grid; place-items: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.arriba:hover { border-color: var(--amarillo); color: var(--amarillo); }

/* al cambiar de tema solo se anima el círculo, no el contenido */
.cambiando-tema .nav, .cambiando-tema .tricolor, .cambiando-tema .pie, .cambiando-tema main { view-transition-name: none; }