/* Halloween en nima3d.es (web-temporada-halloween): el juego de adornos de
   Ajustes → Temporadas. Los pone temporada-halloween.js; aquí, cómo se ven y
   cómo se mueven. Solo transform y opacity; de los adornos, solo la araña
   recibe el ratón. La cinta es de temporada.css: aquí, su color de Halloween. */

:root {
  --hw-calabaza: #FF7A1A;
  --hw-ascua:    #B9420A;          /* naranja oscuro: texto sobre papel (5:1) */
  --hw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── La calabaza del logo: apoyada en su esquina de abajo a la derecha ─── */
.nav-logo { position: relative; }
.hw-logo-calabaza {
  position: absolute; right: -4px; bottom: -4px; width: 31px; height: auto;
  transform: rotate(8deg); transform-origin: 50% 100%;
  filter: drop-shadow(0 0 7px rgba(255,150,40,.45)) drop-shadow(0 3px 4px rgba(0,0,0,.35));
  pointer-events: none;
}

/* ── Las calabazas del pie ─────────────────────────────────────────────── */
.hw-calabazas {
  position: absolute; top: 18px; right: max(var(--pad-x), calc((100% - var(--max-w)) / 2));
  display: flex; align-items: flex-end; gap: 6px; pointer-events: none; z-index: 1;
}
.hw-calabaza { display: block; height: auto; }
.hw-calabaza--luz { filter: drop-shadow(0 0 10px rgba(255,170,40,.55)); }

/* ── La telaraña de la esquina ─────────────────────────────────────────── */
.hw-telarana {
  position: absolute; left: 0; top: var(--header-h); width: clamp(84px, 11vw, 150px); height: auto;
  color: rgba(17,17,17,.22); pointer-events: none; z-index: 0;
}

/* ── La luna llena (el dibujo, en el JS) ───────────────────────────────── */
.hw-luna {
  position: absolute; z-index: -1; pointer-events: none;
  right: clamp(18px, 9vw, 170px); top: calc(var(--header-h) + 30px);
  width: clamp(110px, 17vw, 240px); aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 38px 10px rgba(255,255,250,.85), 0 0 110px 40px rgba(226,230,220,.4);
}
.hw-luna svg { display: block; width: 100%; height: 100%; }
/* El «NIMA» grande de fondo, detrás de la luna: si no, sus letras la cruzan y la ensucian. */
.hw-hero .hero-deco { z-index: -2; }
/* En la cabecera de las demás páginas, más pequeña. La cabecera hace de capa propia (si no,
   la luna, que va detrás de todo, quedaría bajo su fondo) y su letra grande, detrás. */
.hw-pagina { isolation: isolate; }
.hw-pagina .page-hero-deco { z-index: -2; }
.hw-pagina .hw-luna { width: clamp(84px, 12vw, 160px); top: calc(var(--header-h) + 26px); }
/* El marketplace: su cabecera es una sección sin más (se le da sitio para los adornos), más
   baja que las otras y con el título muy largo: la luna, más pequeña y más a la derecha, y la
   araña, a su lado y no delante, para que ninguna toque el título. */
.hw-mk { position: relative; overflow: hidden; }
.hw-mk .hw-luna { width: clamp(64px, 8vw, 112px); top: calc(var(--header-h) + 12px); right: clamp(56px, 7vw, 130px); }
.hw-mk .hw-arana { right: clamp(14px, 3vw, 52px); }

/* ── La cinta con el estilo de Halloween: naranja y con su calabaza ────── */
.tp-cinta--halloween { color: #FF9A45; }
.hw-cinta-ico { width: 18px; height: auto; flex: none; }
@media (hover: hover) and (pointer: fine) {
  a.tp-cinta--halloween:hover { color: #FFC23D; }
}
.tp-cinta--halloween:focus-visible { outline-color: var(--hw-calabaza); }

/* ── La araña ──────────────────────────────────────────────────────────── */
.hw-arana {
  --hw-baja: 150px;
  position: absolute; z-index: 3; top: var(--header-h); right: clamp(28px, 17vw, 300px);
  width: 30px; pointer-events: none;
}
.hw-hilo {
  position: absolute; left: 50%; top: 0; width: 1px; height: var(--hw-baja); margin-left: -.5px;
  background: linear-gradient(rgba(17,17,17,.15), rgba(17,17,17,.55));
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .26s var(--hw-ease-out);
}
.hw-bicho {
  position: absolute; left: 0; top: -34px; width: 30px; height: auto; display: block;
  pointer-events: auto; cursor: pointer;
  transform: translateY(0);
  transition: transform .26s var(--hw-ease-out);
}
/* Baja despacio (entrada, ease-out); al tocarla sube rápido (salida, ease-out corta). */
.hw-arana.hw-abajo .hw-hilo { transform: scaleY(1); transition-duration: .9s; }
.hw-arana.hw-abajo .hw-bicho { transform: translateY(calc(var(--hw-baja) + 30px)); transition-duration: .9s; }
.hw-arana.hw-quieta .hw-hilo, .hw-arana.hw-quieta .hw-bicho { transition: none; }
/* En la cabecera de las demás páginas, que es más baja, el hilo es más corto. */
.hw-pagina .hw-arana { --hw-baja: 100px; }

/* ── Los murciélagos ───────────────────────────────────────────────────── */
.hw-murcielagos {
  position: absolute; z-index: 1; left: 0; right: 0; top: var(--header-h); height: 46%;
  pointer-events: none; overflow: hidden;
}
.hw-murcielago {
  position: absolute; left: 0;
  transform: translate3d(-14vw, 0, 0);
  animation-name: hw-vuelo; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: 1;
}
.hw-murcielago--2 { animation-name: hw-vuelo-2; }
/* Aletean las alas, no el murciélago entero (si se aplasta todo, de lejos parece una hoja
   que da vueltas): cada ala gira desde su hombro y el cuerpo sube un poco con cada golpe. */
.hw-alas { display: block; height: auto; overflow: visible; animation: hw-bote .15s ease-in-out infinite alternate; }
.hw-ala { transform-box: view-box; animation: hw-ala-izq .15s ease-in-out infinite alternate; }
.hw-ala--izq { transform-origin: 45px 21px; }
.hw-ala--der { transform-origin: 55px 21px; animation-name: hw-ala-der; }
.hw-murcielago--2 .hw-alas, .hw-murcielago--2 .hw-ala { animation-duration: .12s; }
.hw-murcielago--3 .hw-alas, .hw-murcielago--3 .hw-ala { animation-duration: .17s; }
/* El vuelo, a quiebros cortos, como el de un murciélago (una hoja bajaría en curvas suaves). */
@keyframes hw-vuelo {
  0%   { transform: translate3d(-14vw, 0, 0); }
  12%  { transform: translate3d(4vw, -14px, 0); }
  21%  { transform: translate3d(16vw, 6px, 0); }
  33%  { transform: translate3d(31vw, -10px, 0); }
  41%  { transform: translate3d(40vw, 12px, 0); }
  55%  { transform: translate3d(57vw, -18px, 0); }
  66%  { transform: translate3d(70vw, 2px, 0); }
  78%  { transform: translate3d(85vw, -12px, 0); }
  89%  { transform: translate3d(99vw, 10px, 0); }
  100% { transform: translate3d(114vw, -6px, 0); }
}
@keyframes hw-vuelo-2 {
  0%   { transform: translate3d(-14vw, 10px, 0); }
  10%  { transform: translate3d(1vw, -6px, 0); }
  24%  { transform: translate3d(18vw, 12px, 0); }
  35%  { transform: translate3d(32vw, -14px, 0); }
  47%  { transform: translate3d(46vw, 4px, 0); }
  58%  { transform: translate3d(59vw, 18px, 0); }
  71%  { transform: translate3d(75vw, -8px, 0); }
  84%  { transform: translate3d(92vw, 10px, 0); }
  100% { transform: translate3d(114vw, -4px, 0); }
}
@keyframes hw-ala-izq {
  from { transform: rotate(34deg) scaleX(.8); }
  to   { transform: rotate(-24deg); }
}
@keyframes hw-ala-der {
  from { transform: rotate(-34deg) scaleX(.8); }
  to   { transform: rotate(24deg); }
}
@keyframes hw-bote {
  from { transform: translateY(2px); }
  to   { transform: translateY(-2px); }
}

/* ── En el móvil ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hw-logo-calabaza { width: 26px; right: -8px; bottom: -2px; }
  .hw-arana { --hw-baja: 70px; right: 22px; }
  .hw-calabazas { top: 14px; gap: 4px; }
  .hw-luna { right: 14px; top: calc(var(--header-h) + 18px); }
  /* En las demás páginas, el título llega hasta el borde: la araña, por encima de él. */
  .hw-pagina .hw-arana { --hw-baja: 40px; }
  .hw-mk .hw-luna { right: 14px; width: 60px; }
  .hw-mk .hw-arana { right: 18px; }
}

/* ── Reducir movimiento: nada se mueve ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hw-murcielagos { display: none; }
  .hw-hilo, .hw-bicho { transition: none; }
}