/* ============================================================================
   MOTOR DE TEMPORADAS · Altiendix — estaciones.css
   Estilos genéricos de la capa decorativa. El color de acento lo pone el JS
   por temporada (--sea-accent / --sea-accent-2), así el CSS sirve para todas.
   Todo respeta prefers-reduced-motion.

   Copia adaptada para Los Reyes del Mojito desde clientes/mojitos-articos/
   web/assets/estaciones.css (mismo motor, ver referencia-patrones-sitios-cliente).
   ============================================================================ */

:root { --sea-accent:#ff6a00; --sea-accent-2:#3a1e5c; }

/* --- Barra / marquee superior ------------------------------------------------ */
.sea-marquee{overflow:hidden;white-space:nowrap;position:relative;z-index:6;
  padding:9px 0;
  background:linear-gradient(90deg,#120a1e, color-mix(in srgb, var(--sea-accent-2) 70%, #120a1e), #120a1e);
  border-top:1px solid color-mix(in srgb, var(--sea-accent) 45%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--sea-accent) 45%, transparent);}
.sea-marquee .sea-track{display:inline-block;animation:seaMq 28s linear infinite;
  font-weight:800;letter-spacing:.14em;font-size:12.5px;text-transform:uppercase;
  color:var(--sea-accent);}
.sea-marquee .sea-track span{padding:0 6px}
@keyframes seaMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Capa decorativa: emojis flotando + telarañas + neblina + viñeta ---------- */
.sea-deco{position:fixed;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.sea-deco .em{position:absolute;font-size:28px;opacity:.3;will-change:transform;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.sea-deco .fog{position:absolute;left:0;right:0;bottom:0;height:24vh;
  background:linear-gradient(0deg, color-mix(in srgb, var(--sea-accent-2) 55%, transparent), transparent);
  animation:seaFog 9s ease-in-out infinite}
/* viñeta con el acento de la temporada, muy sutil */
.sea-deco::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--sea-accent) 16%, transparent), transparent 60%),
    radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--sea-accent-2) 28%, transparent), transparent 62%)}

@keyframes seaFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-26px) rotate(6deg)}}
@keyframes seaDrift{0%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(22px,-18px) rotate(6deg)}100%{transform:translate(0,0) rotate(-4deg)}}
@keyframes seaFog{0%,100%{opacity:.5}50%{opacity:.85}}

@media(max-width:640px){ .sea-deco .em{font-size:22px} }

/* Respeta a quien pidió menos movimiento: se ve la temática, pero quieta */
@media(prefers-reduced-motion:reduce){
  .sea-marquee .sea-track, .sea-deco .em, .sea-deco .fog{animation:none !important}
}