/* ============================================================================
   Genz × Halloween 2026 — FX decorativos (capa fija)
   Archivo: assets/theme-halloween-fx.css
   ----------------------------------------------------------------------------
   Propósito
      Estilos de los nodos decorativos que crea theme-halloween-fx.js:
        .hw-fx (fixed, z 7, pointer-events none) > niebla, brasas (canvas),
        murciélagos y arañas; la escena Dither Veil (.hw-veil-stage) en el flujo;
        más el "reveal" al scrollear (.hw-reveal).
   Reglas
     - Todo prefijado con `html.theme-halloween` (kill-switch: quitar la clase
       del <html> apaga todo).
     - Nada de aquí toca lógica ni layout del tema: solo nodos propios (.hw-*)
       y las clases .hw-reveal* que el JS agrega a nodos existentes.
     - Solo se animan `transform` y `opacity` en loops. `filter: blur` se aplica
       una sola vez (capa compuesta) y se quita en móvil.
     - Tokens: se consumen con var(--hw-x, fallback) — theme-halloween.css los
       define, pero este archivo funciona sin él.
     - El reveal SOLO oculta estados iniciales bajo `html.hw-js`: si el JS falla,
       nada queda invisible.
     - `prefers-reduced-motion: reduce` y `html.hw-reduced`: cero animación.
   Índice
     1. Capa .hw-fx
     2. Reveal con scroll (.hw-reveal)
      3. Dither Veil (.hw-veil-stage)
      4. Niebla (.hw-fog)
      5. Brasas (canvas.hw-embers)
      6. Arañas (.hw-spider)
      7. Murciélagos (.hw-bat)
      8. Móvil (html.hw-mobile)
      9. Pausa (.hw-fx--paused) y reduced motion
      10. Impresión (@media print)
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. Capa .hw-fx
   Fija, cubre el viewport, z-index 7 (debajo del header z 999 y de cualquier
   overlay/modal; encima del contenido normal sin z-index). Nunca intercepta
   el puntero. `contain: strict` aísla layout/paint de la página.
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-fx {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--hw-z-fx, 7);
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  contain: strict;
}

html.theme-halloween .hw-fx * {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

/* Checkout: sin FX (el JS tampoco crea la capa; doble seguro). */
html.theme-halloween.hw-checkout .hw-fx {
  display: none;
}


/* ---------------------------------------------------------------------------
   2. Reveal con scroll
   El JS agrega .hw-reveal (+ --in cuando entra al viewport, + --done al
   terminar la transición). Solo se oculta el estado inicial si hay JS activo
   (html.hw-js) y no hay reduced motion. Stagger con --hw-delay (inline).
   Nota: sin `will-change` deliberadamente — el translate3d ya composita
   durante la transición y evitamos capas GPU para decenas de secciones
   fuera de pantalla.
   ------------------------------------------------------------------------ */
html.theme-halloween.hw-js:not(.hw-reduced) .hw-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .7s var(--hw-ease, cubic-bezier(.22, .61, .36, 1)),
    transform .8s var(--hw-ease, cubic-bezier(.22, .61, .36, 1));
  transition-delay: var(--hw-delay, 0ms);
}

html.theme-halloween.hw-js:not(.hw-reduced) .hw-reveal.hw-reveal--in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Tras la transición: sin delay residual ni will-change. */
html.theme-halloween.hw-js:not(.hw-reduced) .hw-reveal.hw-reveal--done {
  transition-delay: 0ms;
  will-change: auto;
}


/* ---------------------------------------------------------------------------
   3. Dither Veil (.hw-veil-stage)
   Escena interactiva inyectada por el JS después de la franja institucional
   de la home, a ancho completo. El canvas WebGL2 dibuja la calabaza Genz (con
   el logo) en dithering monocromo y la revela a color siguiendo el cursor.
   Es el único nodo decorativo que recibe el puntero (necesita pointermove);
   ocupa su propio espacio en el flujo, así que no tapa nada.
   `touch-action: pan-y` deja scrollear sobre ella en móvil.
   ------------------------------------------------------------------------ */
html.theme-halloween.hw-home .home-main > .hw-veil-stage {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: clamp(300px, 34vw, 500px);
  margin: clamp(18px, 2vw, 28px) 0;
  overflow: hidden;
  background-color: #121018;
  background-image:
    radial-gradient(60% 90% at 50% 100%, rgba(255, 122, 26, .10), transparent 70%),
    radial-gradient(45% 70% at 12% 20%, rgba(123, 44, 191, .14), transparent 70%),
    radial-gradient(45% 70% at 88% 25%, rgba(123, 44, 191, .10), transparent 70%);
  border-top: 1px solid rgba(123, 44, 191, .18);
  border-bottom: 1px solid rgba(255, 122, 26, .16);
  box-shadow: inset 0 18px 40px rgba(0, 0, 0, .35), inset 0 -18px 40px rgba(0, 0, 0, .35);
  touch-action: pan-y;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  contain: layout paint;
}

html.theme-halloween .hw-veil__canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  opacity: 1;
  transition: opacity .6s ease;
}

/* Mientras cargan calabaza + logo: sólo el fondo grafito (sin flash). */
html.theme-halloween .hw-veil-stage.hw-veil--loading .hw-veil__canvas {
  opacity: 0;
}

/* Textura Halloween encima del canvas: grano fino, telarañas en las esquinas
   y viñeta. Todo pointer-events none y sin animación continua. */
html.theme-halloween .hw-veil-stage::before,
html.theme-halloween .hw-veil-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

html.theme-halloween .hw-veil-stage::before {
  background-image: var(--hw-web-light, none), var(--hw-web-light, none), var(--hw-noise, none);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: left top, right top, 0 0;
  background-size: clamp(120px, 13vw, 190px), clamp(120px, 13vw, 190px), 200px 200px;
  opacity: .22;
  transform: scaleX(1);
}

html.theme-halloween .hw-veil-stage::after {
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(8, 7, 12, .55) 100%);
}

/* Pista de interacción: anillo que late suavemente hasta el primer toque/hover
   (opacity + transform). Sólo donde hay puntero fino. */
html.theme-halloween .hw-veil__hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  border: 1px solid rgba(255, 179, 71, .55);
  box-shadow: 0 0 18px rgba(255, 122, 26, .35), inset 0 0 12px rgba(255, 122, 26, .25);
  opacity: 0;
  pointer-events: none;
  animation: hw-veil-hint 2.6s ease-in-out .9s infinite;
}

html.theme-halloween .hw-veil-stage.hw-veil--loading .hw-veil__hint,
html.theme-halloween .hw-veil-stage.hw-veil--touched .hw-veil__hint,
html.theme-halloween .hw-veil-stage.hw-veil--static .hw-veil__hint,
html.theme-halloween .hw-veil-stage:hover .hw-veil__hint,
html.theme-halloween.hw-touch .hw-veil__hint {
  animation: none;
  opacity: 0;
}

@keyframes hw-veil-hint {
  0%, 100% { opacity: 0; transform: scale(.7); }
  40% { opacity: .9; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.35); }
}

/* Fallback sin WebGL2: imagen compuesta estática, algo atenuada. */
html.theme-halloween .hw-veil-stage.hw-veil--static {
  cursor: default;
}


/* ---------------------------------------------------------------------------
   4. Niebla
   Dos capas en el tercio inferior. La capa b vive dentro de .hw-fog-wrap,
   que recibe el parallax por JS (translate3d) — así no se mezcla la animación
   CSS de transform (en el hijo) con el transform del JS (en el wrapper).
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-fog-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
}

/* Valores desktop para el papel #F3EFE9 (html.hw-mobile los sobreescribe en
   §8: sin blur, .22). Opacidad .5 / .35, violeta denso y un toque naranja
   tenue en la capa a; blur 16px. Debe leerse como bruma en el tercio inferior
   sin ensuciar las cards. */
html.theme-halloween .hw-fog {
  position: absolute;
  left: -20%;
  bottom: -6vh;
  width: 140%;
  height: 42vh;
  opacity: .5;
  background:
    radial-gradient(42% 60% at 18% 78%, rgba(150, 120, 210, .55) 0%, rgba(150, 120, 210, 0) 70%),
    radial-gradient(36% 55% at 55% 86%, rgba(255, 150, 80, .28) 0%, rgba(255, 150, 80, 0) 70%),
    radial-gradient(44% 58% at 86% 72%, rgba(150, 120, 210, .50) 0%, rgba(150, 120, 210, 0) 70%);
  filter: blur(16px);
  will-change: transform;
  animation: hw-fog-drift-a 70s linear infinite alternate;
}

html.theme-halloween .hw-fog--b {
  bottom: -14vh;
  height: 50vh;
  opacity: .35;
  background:
    radial-gradient(40% 55% at 35% 80%, rgba(255, 150, 80, .24) 0%, rgba(255, 150, 80, 0) 70%),
    radial-gradient(46% 60% at 70% 76%, rgba(150, 120, 210, .52) 0%, rgba(150, 120, 210, 0) 70%),
    radial-gradient(30% 45% at 8% 90%, rgba(150, 120, 210, .42) 0%, rgba(150, 120, 210, 0) 70%);
  animation: hw-fog-drift-b 95s linear infinite alternate;
}

@keyframes hw-fog-drift-a {
  from { transform: translate3d(-4%, 0, 0); }
  to   { transform: translate3d(4%, 0, 0); }
}

@keyframes hw-fog-drift-b {
  from { transform: translate3d(4%, 0, 0); }
  to   { transform: translate3d(-4%, 0, 0); }
}


/* ---------------------------------------------------------------------------
   4. Brasas (canvas)
   El dibujo lo hace el JS (sprite pre-renderizado, 30 fps máx, dpr ≤ 1.5).
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-embers {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}


/* ---------------------------------------------------------------------------
   5. Arañas
   Geometría: .hw-spider se ancla en `top` (borde inferior del header − 40px,
   lo puesto por JS) y mide --hw-drop de alto. El hilo (scaleY, origen arriba)
   y el cuerpo (translateY −100% → 0, su alto = 100% del contenedor) comparten
   duración/easing, así el hilo siempre termina en el abdomen. Los 40px
   superiores quedan tapados por el header (o recortados por .hw-fx cuando
   top < 0), de modo que la araña "emerge" por debajo del header.
   Fases por clase (encadenadas por animationend en el JS):
     --drop  baja (2.6–4s)   --swing balancea (3–5s)   --up sube (1.8–2.5s)
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-spider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 52px;
  height: var(--hw-drop, 160px);
  margin-left: -26px;
  transform-origin: 50% 0;
  will-change: transform;
}

html.theme-halloween .hw-spider__thread {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  margin-left: -.5px;
  background: linear-gradient(180deg,
    rgba(230, 225, 240, 0) 0%,
    rgba(230, 225, 240, .72) 22%,
    rgba(236, 230, 248, .82) 100%);
  box-shadow: 0 0 2px rgba(214, 196, 255, .35);
  transform-origin: 50% 0;
  transform: scaleY(0);
}

html.theme-halloween .hw-spider__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, -100%, 0);
}

/* Silueta de araña (vista cenital, cuelga cabeza abajo: abdomen arriba,
   cefalotórax y patas abajo). SVG inline, #0B0B12 + brillo violeta 30%. */
html.theme-halloween .hw-spider__body::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 52px;
  height: 58px;
  /* -12px: el hilo termina dentro del abdomen (que arranca a ~10px del borde). */
  margin: -12px 0 0 -26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 58'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%232c2540'/%3E%3Cstop offset='.55' stop-color='%2314111d'/%3E%3Cstop offset='1' stop-color='%2308070c'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='.4' cy='.35' r='.8'%3E%3Cstop offset='0' stop-color='%23262036'/%3E%3Cstop offset='1' stop-color='%230a0910'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%230B0B12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.45' d='M22 29 13 22 9 14 7 6.5M21.5 31 10.5 27 4.5 21.5 1.8 15M21.5 33.2 10.5 36.5 4.5 42.5 2.2 49M22.2 35.2 14.5 42 10.5 50 9.2 56.5M30 29 39 22 43 14 45 6.5M30.5 31 41.5 27 47.5 21.5 50.2 15M30.5 33.2 41.5 36.5 47.5 42.5 49.8 49M29.8 35.2 37.5 42 41.5 50 42.8 56.5'/%3E%3Cpath stroke-width='2.3' d='M22 29 13 22M21.5 31 10.5 27M21.5 33.2 10.5 36.5M22.2 35.2 14.5 42M30 29 39 22M30.5 31 41.5 27M30.5 33.2 41.5 36.5M29.8 35.2 37.5 42'/%3E%3C/g%3E%3Cg fill='%230B0B12'%3E%3Ccircle cx='13' cy='22' r='1.05'/%3E%3Ccircle cx='10.5' cy='27' r='1.05'/%3E%3Ccircle cx='10.5' cy='36.5' r='1.05'/%3E%3Ccircle cx='14.5' cy='42' r='1.05'/%3E%3Ccircle cx='39' cy='22' r='1.05'/%3E%3Ccircle cx='41.5' cy='27' r='1.05'/%3E%3Ccircle cx='41.5' cy='36.5' r='1.05'/%3E%3Ccircle cx='37.5' cy='42' r='1.05'/%3E%3Ccircle cx='9' cy='14' r='.85'/%3E%3Ccircle cx='4.5' cy='21.5' r='.85'/%3E%3Ccircle cx='4.5' cy='42.5' r='.85'/%3E%3Ccircle cx='10.5' cy='50' r='.85'/%3E%3Ccircle cx='43' cy='14' r='.85'/%3E%3Ccircle cx='47.5' cy='21.5' r='.85'/%3E%3Ccircle cx='47.5' cy='42.5' r='.85'/%3E%3Ccircle cx='41.5' cy='50' r='.85'/%3E%3C/g%3E%3Cpath d='M24.2 37.4 23.4 40.6M27.8 37.4 28.6 40.6' fill='none' stroke='%230B0B12' stroke-width='1.3' stroke-linecap='round'/%3E%3Cellipse cx='26' cy='17' rx='7.6' ry='10.2' fill='url%28%23a%29'/%3E%3Cellipse cx='23.6' cy='12.6' rx='2.6' ry='3.6' fill='%239b6ad6' fill-opacity='.22'/%3E%3Cpath d='M23.9 13.6h4.2L26 16.9zM26 17.5l2.1 3.4h-4.2z' fill='%23FF7A1A' fill-opacity='.78'/%3E%3Cellipse cx='26' cy='27.6' rx='1.6' ry='1.4' fill='%230B0B12'/%3E%3Cellipse cx='26' cy='32.2' rx='5.2' ry='5.6' fill='url%28%23c%29'/%3E%3Ccircle cx='24.5' cy='35.4' r='.85' fill='%23FFB347'/%3E%3Ccircle cx='27.5' cy='35.4' r='.85' fill='%23FFB347'/%3E%3Ccircle cx='24.3' cy='35.1' r='.3' fill='%23fff8e0'/%3E%3Ccircle cx='27.3' cy='35.1' r='.3' fill='%23fff8e0'/%3E%3C/svg%3E") no-repeat center / contain;
  /* Sombra difusa (separa la silueta de banners claros) + halo lavanda fino
     (legible sobre fondos oscuros). Estático: se rasteriza una vez con la capa. */
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)) drop-shadow(0 0 1.6px rgba(214, 196, 255, .8));
}

/* Fase: bajar */
html.theme-halloween .hw-spider--drop .hw-spider__thread {
  animation: hw-spider-thread-grow 3.2s cubic-bezier(.33, 0, .2, 1) forwards;
}

html.theme-halloween .hw-spider--drop .hw-spider__body {
  animation: hw-spider-drop 3.2s cubic-bezier(.33, 0, .2, 1) forwards;
}

/* Fase: balancear (rotación ±6° en el origen superior + leve bob del cuerpo) */
html.theme-halloween .hw-spider--swing {
  animation: hw-spider-swing 4s ease-in-out 1;
}

html.theme-halloween .hw-spider--swing .hw-spider__thread {
  transform: scaleY(1);
}

html.theme-halloween .hw-spider--swing .hw-spider__body {
  transform: none;
  animation: hw-spider-bob 1.9s ease-in-out infinite alternate;
}

/* Fase: subir */
html.theme-halloween .hw-spider--up .hw-spider__thread {
  animation: hw-spider-thread-shrink 2.1s cubic-bezier(.4, 0, .7, 1) forwards;
}

html.theme-halloween .hw-spider--up .hw-spider__body {
  animation: hw-spider-up 2.1s cubic-bezier(.4, 0, .7, 1) forwards;
}

@keyframes hw-spider-drop {
  from { transform: translate3d(0, -100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@keyframes hw-spider-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -100%, 0); }
}

@keyframes hw-spider-thread-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes hw-spider-thread-shrink {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}

@keyframes hw-spider-swing {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(-6deg); }
  52%  { transform: rotate(5deg); }
  80%  { transform: rotate(-2.5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes hw-spider-bob {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 4px, 0); }
}

/* Variante "gutter" (lo pone el JS cuando el header ya no está a la vista y
   hay gutter lateral ≥ 90px): cuelga del borde superior dentro del gutter,
   cuerpo ≤ 40px y 30–70px de hilo visible, para no pisar cards/precios/banners. */
html.theme-halloween .hw-spider--gutter {
  width: 40px;
  margin-left: -20px;
}

html.theme-halloween .hw-spider--gutter .hw-spider__body::after {
  width: 40px;
  height: 45px;
  margin: -9px 0 0 -20px;
}


/* ---------------------------------------------------------------------------
   6. Murciélagos
   Solo desktop con hover (en móvil/táctil y reduced motion no se crean).
   Estructura por murciélago (todo transform/opacity, sin filtros):
     span.hw-bat                vuelo translateX −12vw → 112vw (lineal)
       > i.hw-bat__bob          ondulación vertical ±12px + leve alabeo
         > i.hw-bat__wing--l    ala izquierda: rota desde el hombro (pivote
         > i.hw-bat__wing--r    ala derecha    en el SVG) con escorzo en el
         > i.hw-bat__body       cuerpo         golpe hacia abajo; el cuerpo
                                               sube/baja en contrapunto.
   Silueta en 3 piezas (lienzo 120×56): membrana con huesos de los dedos,
   borde de fuga festoneado, pulgar, orejas, pelaje y ojos ámbar mínimos. El
   filo lavanda del borde de ataque viene horneado en el SVG → se lee sobre
   fondos oscuros sin drop-shadow (cero costo por frame).
   Variables inline (JS): --hw-s escala (profundidad), --hw-flap duración del
   medio aleteo, --hw-flap-delay desfase. Dirección inversa: .hw-bat--rtl.
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-bats {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

html.theme-halloween .hw-bat {
  position: absolute;
  top: 30vh;
  left: 0;
  width: calc(42px * var(--hw-s, 1));
  height: calc(19.6px * var(--hw-s, 1));
  opacity: .75;
  transform: translate3d(-12vw, 0, 0);
  animation: hw-bat-fly 11s linear 1 forwards;
}

html.theme-halloween .hw-bat--rtl {
  transform: translate3d(112vw, 0, 0);
  animation-name: hw-bat-fly-rtl;
}

html.theme-halloween .hw-bat__bob {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  animation: hw-bat-bob 1.7s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

html.theme-halloween .hw-bat--rtl .hw-bat__bob {
  animation-name: hw-bat-bob-rtl;
}

html.theme-halloween .hw-bat__wing,
html.theme-halloween .hw-bat__body {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

html.theme-halloween .hw-bat__wing {
  width: 50%;
  animation-duration: var(--hw-flap, .28s);
  animation-delay: var(--hw-flap-delay, 0s);
  animation-timing-function: cubic-bezier(.45, 0, .55, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

html.theme-halloween .hw-bat__wing--l {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 56'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%230B0A11'/%3E%3Cstop offset='.55' stop-color='%2317121f'/%3E%3Cstop offset='1' stop-color='%2333264a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M55 21 Q44 8 31 9.5 Q18 8.5 2 15.5 Q9.5 21 7.5 30 Q14.5 30.5 18.5 38.5 Q26.5 35.5 33.5 42 Q43 37 50 39.5 Q54 37.5 57 34 Z' fill='url%28%23l%29'/%3E%3Cpath d='M55 22 Q42 12 31 10 M31 10 Q17 12 3.5 15.6 M31 10 Q20 19 8 29.6 M31 10 Q25 24 19 38 M31 10 Q32 26 33.6 41.4' fill='none' stroke='%23060509' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M31 9.6 Q29.4 7.2 28 6.4' fill='none' stroke='%23060509' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M55 21 Q44 8 31 9.5 Q18 8.5 2 15.5' fill='none' stroke='%23d6c4ff' stroke-opacity='.7' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M2 15.5 Q9.5 21 7.5 30 Q14.5 30.5 18.5 38.5 Q26.5 35.5 33.5 42 Q43 37 50 39.5' fill='none' stroke='%23d6c4ff' stroke-opacity='.3' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform-origin: 91.67% 39.29%;
  animation-name: hw-bat-wing-l;
}

html.theme-halloween .hw-bat__wing--r {
  left: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 0 60 56'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230B0A11'/%3E%3Cstop offset='.55' stop-color='%2317121f'/%3E%3Cstop offset='1' stop-color='%2333264a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 65 21 Q 76 8 89 9.5 Q 102 8.5 118 15.5 Q 110.5 21 112.5 30 Q 105.5 30.5 101.5 38.5 Q 93.5 35.5 86.5 42 Q 77 37 70 39.5 Q 66 37.5 63 34 Z' fill='url%28%23r%29'/%3E%3Cpath d='M 65 22 Q 78 12 89 10 M 89 10 Q 103 12 116.5 15.6 M 89 10 Q 100 19 112 29.6 M 89 10 Q 95 24 101 38 M 89 10 Q 88 26 86.4 41.4' fill='none' stroke='%23060509' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M 89 9.6 Q 90.6 7.2 92 6.4' fill='none' stroke='%23060509' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M 65 21 Q 76 8 89 9.5 Q 102 8.5 118 15.5' fill='none' stroke='%23d6c4ff' stroke-opacity='.7' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M 118 15.5 Q 110.5 21 112.5 30 Q 105.5 30.5 101.5 38.5 Q 93.5 35.5 86.5 42 Q 77 37 70 39.5' fill='none' stroke='%23d6c4ff' stroke-opacity='.3' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform-origin: 8.33% 39.29%;
  animation-name: hw-bat-wing-r;
}

html.theme-halloween .hw-bat__body {
  left: 40%;
  width: 20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='48 0 24 56'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.42' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%232a2036'/%3E%3Cstop offset='1' stop-color='%230A0910'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M55.6 15.5 L54.6 7.2 L58.4 12.6 Z M64.4 15.5 L65.4 7.2 L61.6 12.6 Z' fill='%230B0A11'/%3E%3Cpath d='M55.4 9.6 L54.9 7.6 L56.3 9.8' fill='none' stroke='%23d6c4ff' stroke-opacity='.6' stroke-width='.7'/%3E%3Cpath d='M64.6 9.6 L65.1 7.6 L63.7 9.8' fill='none' stroke='%23d6c4ff' stroke-opacity='.6' stroke-width='.7'/%3E%3Cellipse cx='60' cy='28.5' rx='5.6' ry='10.5' fill='url%28%23b%29'/%3E%3Cellipse cx='60' cy='16.8' rx='5' ry='4.6' fill='%230F0D16' stroke='%23d6c4ff' stroke-opacity='.3' stroke-width='.6'/%3E%3Cpath d='M58 23 Q57.2 28 58.2 33 M62 23 Q62.8 28 61.8 33 M60 22 L60 35' fill='none' stroke='%233a2d4a' stroke-opacity='.55' stroke-width='.55' stroke-linecap='round'/%3E%3Cpath d='M58.2 38.6 L57.4 41.4 M61.8 38.6 L62.6 41.4' stroke='%230B0A11' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='58.1' cy='16.6' r='.85' fill='%23FFB347'/%3E%3Ccircle cx='61.9' cy='16.6' r='.85' fill='%23FFB347'/%3E%3C/svg%3E");
  animation: hw-bat-body var(--hw-flap, .28s) cubic-bezier(.45, 0, .55, 1) var(--hw-flap-delay, 0s) infinite alternate;
}

@keyframes hw-bat-fly {
  from { transform: translate3d(-12vw, 0, 0); }
  to   { transform: translate3d(112vw, 0, 0); }
}

@keyframes hw-bat-fly-rtl {
  from { transform: translate3d(112vw, 0, 0); }
  to   { transform: translate3d(-12vw, 0, 0); }
}

/* Ondulación con alabeo: el morro acompaña la subida/bajada. */
@keyframes hw-bat-bob {
  from { transform: translate3d(0, -12px, 0) rotate(-6deg); }
  to   { transform: translate3d(0, 12px, 0) rotate(5deg); }
}

@keyframes hw-bat-bob-rtl {
  from { transform: translate3d(0, -12px, 0) rotate(6deg); }
  to   { transform: translate3d(0, 12px, 0) rotate(-5deg); }
}

/* Aleteo: arriba (alas levantadas, membrana extendida) ↔ abajo (alas bajas
   con escorzo). Ala izquierda: rotación positiva = punta arriba. */
@keyframes hw-bat-wing-l {
  from { transform: rotate(28deg) scaleY(.92); }
  to   { transform: rotate(-20deg) scaleY(.62); }
}

@keyframes hw-bat-wing-r {
  from { transform: rotate(-28deg) scaleY(.92); }
  to   { transform: rotate(20deg) scaleY(.62); }
}

/* Contrapunto del cuerpo: baja cuando las alas suben, sube en el golpe. */
@keyframes hw-bat-body {
  from { transform: translate3d(0, 1.5px, 0); }
  to   { transform: translate3d(0, -1.5px, 0); }
}


/* ---------------------------------------------------------------------------
   8. Móvil (html.hw-mobile, viewport < 992px; lo pone el JS)
   Una sola capa de niebla sin blur (el blur es caro), sin murciélagos,
   araña más pequeña. Las partículas se reducen en el JS (10).
   ------------------------------------------------------------------------ */
html.theme-halloween.hw-mobile .hw-fog {
  opacity: .22;
  filter: none;
}

html.theme-halloween.hw-mobile .hw-fog-wrap,
html.theme-halloween.hw-mobile .hw-bats {
  display: none;
}

html.theme-halloween.hw-mobile .hw-spider {
  width: 36px;
  margin-left: -18px;
}

html.theme-halloween.hw-mobile .hw-spider__body::after {
  width: 36px;
  height: 40px;
  margin: -8px 0 0 -18px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)) drop-shadow(0 0 1.3px rgba(214, 196, 255, .8));
}

@media (max-width: 991px) {
  html.theme-halloween.hw-home .home-main > .hw-veil-stage {
    height: clamp(230px, 62vw, 320px);
    margin: 14px 0 18px;
    cursor: default;
  }

  html.theme-halloween .hw-veil-stage::before {
    background-size: 96px, 96px, 200px 200px;
    opacity: .18;
  }
}


/* ---------------------------------------------------------------------------
   9. Pausa y reduced motion
   .hw-fx--paused: lo pone el JS en document.hidden (las animaciones CSS se
   congelan; el rAF se cancela aparte). Va al final para ganar por orden a
   las reglas de misma especificidad que definen `animation`.
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-fx.hw-fx--paused,
html.theme-halloween .hw-fx.hw-fx--paused * {
  animation-play-state: paused;
}

html.theme-halloween .hw-fx--paused ~ .hw-veil-stage .hw-veil__hint {
  animation-play-state: paused;
}

/* html.hw-reduced (lo pone el JS al detectar la preferencia).
   La opacidad .18 va SOLO en las capas .hw-fog: el wrapper (.hw-fog-wrap)
   contiene la capa b y, si también llevara .18, la b quedaría a .18 × .18. */
html.theme-halloween.hw-reduced .hw-fog {
  opacity: .18;
  filter: none;
  transform: none;
  animation: none;
  will-change: auto;
}

html.theme-halloween.hw-reduced .hw-fog-wrap {
  opacity: 1;
  transform: none;
  animation: none;
  will-change: auto;
}

html.theme-halloween.hw-reduced .hw-embers,
html.theme-halloween.hw-reduced .hw-bats,
html.theme-halloween.hw-reduced .hw-spider {
  display: none;
}

html.theme-halloween.hw-reduced .hw-veil__hint {
  animation: none;
  opacity: 0;
}

/* Y lo mismo directamente por media query (por si el JS no corre). */
@media (prefers-reduced-motion: reduce) {
  html.theme-halloween .hw-fog {
    opacity: .18;
    filter: none;
    transform: none;
    animation: none;
    will-change: auto;
  }

  html.theme-halloween .hw-fog-wrap {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }

  html.theme-halloween .hw-embers,
  html.theme-halloween .hw-bats,
  html.theme-halloween .hw-spider {
    display: none;
  }

  html.theme-halloween .hw-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.theme-halloween .hw-veil__hint {
    animation: none;
    opacity: 0;
  }
}


/* ---------------------------------------------------------------------------
   10. Impresión
   Al imprimir / guardar como PDF nada debe quedar oculto por el reveal ni
   imprimirse la capa decorativa. Misma especificidad que las reglas de §2 y
   §1 (gana por orden al estar al final del archivo; sin !important).
   ------------------------------------------------------------------------ */
@media print {
  html.theme-halloween.hw-js:not(.hw-reduced) .hw-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.theme-halloween .hw-fx {
    display: none;
  }

  html.theme-halloween .hw-veil-stage {
    display: none;
  }
}

@media (forced-colors: active) {
  html.theme-halloween .hw-veil-stage {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Haunted Graphite: transición gradual de la escena de la calabaza.
   En vez de cortar con bordes, la escena se funde arriba y abajo con el fondo
   grafito (máscara estática; los eventos de puntero no se ven afectados).
   ------------------------------------------------------------------------ */
html.theme-halloween.hw-home .home-main > .hw-veil-stage {
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}

@media (max-width: 991px) {
  html.theme-halloween.hw-home .home-main > .hw-veil-stage {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

/* ---------------------------------------------------------------------------
   11. Velas del megamenú (.hw-candle, las inserta el JS en .nav-main-box)
   Decoración pura (aria-hidden, sin eventos). Van por encima del panel de
   subcategorías (z 9999 dentro del contexto del dropdown), pero solo en
   esquinas libres: una vela a la derecha del título "Categorías" (columna de
   244 px; 232 px entre 992 y 1199) y un par abajo a la derecha, separado de
   la barra de scroll del panel. El halo (::before, degradado cálido muy
   transparente) entibia la superficie cercana. Con el menú cerrado (display:none) no se anima nada.
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-candle {
  display: none;
}

@media (min-width: 992px) {
  html.theme-halloween .nav-main-box > .hw-candle {
    position: absolute;
    z-index: 10000;
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
  }

  html.theme-halloween .hw-candle .hw-candle__svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  html.theme-halloween .hw-candle--single {
    top: 6px;
    left: 206px;
    width: 22px;
    height: 48px;
  }

  html.theme-halloween .hw-candle--pair {
    right: 32px;
    bottom: 10px;
    width: 62px;
    height: 84px;
  }

  html.theme-halloween .nav-main-box > .hw-candle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 22%;
    width: 240%;
    height: 0;
    padding-bottom: 240%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 168, 82, .22), rgba(255, 138, 48, .08) 55%, rgba(255, 138, 48, 0));
    animation: hw-candle-halo 2.6s ease-in-out infinite alternate;
  }

  html.theme-halloween .nav-main-box > .hw-candle--pair::before {
    top: 18%;
    width: 300%;
    padding-bottom: 300%;
    animation-duration: 3.1s;
    animation-delay: -1.2s;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  html.theme-halloween .hw-candle--single {
    left: 194px;
  }
}

/* Velas apoyadas sobre el borde superior de la barra de categorías. Son hijas
   directas del header para quedar fuera del layout y por encima de su contenido
   sin elevar toda la barra ni alterar dropdowns. El JS calcula la posición,
   comprueba colisiones y aplica .is-off cuando no existe un hueco seguro. */
html.theme-halloween .header > .hw-candle--bar {
  position: absolute;
  z-index: 10;
  display: block;
  width: 16px;
  height: 36px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

html.theme-halloween .header > .hw-candle--bar-r {
  width: 27px;
}

html.theme-halloween .header > .hw-candle--bar.is-off {
  display: none;
}

html.theme-halloween .header > .hw-candle--bar .hw-candle__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Halo cálido suave (sobre el fondo crema de la barra: sin blend). */
html.theme-halloween .header > .hw-candle--bar::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 14%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 160, 70, .30), rgba(255, 140, 50, .10) 55%, rgba(255, 140, 50, 0));
  animation: hw-candle-halo 2.8s ease-in-out infinite alternate;
}

html.theme-halloween .header > .hw-candle--bar-l.is-compact {
  width: 10px;
  height: 24px;
}

html.theme-halloween .header > .hw-candle--bar.is-compact::before {
  width: 20px;
  height: 20px;
}

@media (max-width: 991px) {
  html.theme-halloween .header > .hw-candle--bar-r {
    display: none;
  }
}

@keyframes hw-candle-halo {
  0%   { opacity: .72; }
  35%  { opacity: .95; }
  55%  { opacity: .8; }
  100% { opacity: 1; }
}


/* ---------------------------------------------------------------------------
   12. Fantasmas asustadizos (.hw-ghost dentro de .hw-fx)
   Posición, giro, escala y opacidad los pone el JS (transform/opacity en el
   nodo, cuadro a cuadro solo mientras hay alguno visible). El CSS hace la
   flotación (.hw-ghost__float), el susto (--startle) y el temblor de huida
   (--flee); la cara cambia con is-idle / is-alert / is-scared / is-escape.
   Hereda pointer-events: none de .hw-fx: nunca tapa clics ni toques.
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--hw-ghost-size, 72px);
  opacity: 0;
  transform-origin: 50% 62%;
  will-change: transform, opacity;
}

html.theme-halloween .hw-ghost.hw-ghost--hidden {
  display: none;
}

html.theme-halloween .hw-ghost__float {
  position: relative;
  animation: hw-ghost-bob var(--hw-ghost-bob, 3400ms) ease-in-out infinite;
}

html.theme-halloween .hw-ghost .hw-ghost__svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Resplandor violeta-azulado alrededor (detrás del cuerpo). */
html.theme-halloween .hw-ghost__glow {
  position: absolute;
  left: -40%;
  right: -40%;
  top: -24%;
  bottom: -8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(186, 170, 255, .30), rgba(150, 128, 255, .12) 55%, rgba(150, 128, 255, 0));
  transition: opacity .3s ease;
}

html.theme-halloween .hw-ghost.is-alert .hw-ghost__glow,
html.theme-halloween .hw-ghost.is-scared .hw-ghost__glow {
  opacity: .65;
}

/* Sombra/resplandor ambiental bajo el fantasma, sincronizada con la flotación. */
html.theme-halloween .hw-ghost__shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -11%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(28, 16, 56, .5), rgba(120, 100, 220, .12) 60%, rgba(120, 100, 220, 0));
  animation: hw-ghost-shadow var(--hw-ghost-bob, 3400ms) ease-in-out infinite;
}

html.theme-halloween .hw-ghost.hw-ghost--startle .hw-ghost__float {
  animation: hw-ghost-startle 440ms cubic-bezier(.2, .8, .3, 1) both;
}

html.theme-halloween .hw-ghost.hw-ghost--flee .hw-ghost__float {
  animation: hw-ghost-flee 220ms ease-in-out infinite alternate;
}

html.theme-halloween .hw-ghost.hw-ghost--startle .hw-ghost__shadow,
html.theme-halloween .hw-ghost.hw-ghost--flee .hw-ghost__shadow {
  animation: none;
  opacity: .35;
  transform: scale(.7);
}

@keyframes hw-ghost-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes hw-ghost-shadow {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(.8); opacity: .55; }
}

/* Sobresalto: salto con squash & stretch y un temblor que se apaga. */
@keyframes hw-ghost-startle {
  0%   { transform: translateY(0) scale(1, 1) rotate(0); }
  16%  { transform: translateY(-13px) scale(1.08, .92) rotate(0); }
  30%  { transform: translateY(-16px) scale(.94, 1.08) rotate(-5deg); }
  44%  { transform: translateY(-14px) scale(1.02, .98) rotate(5deg); }
  58%  { transform: translateY(-13px) scale(1, 1) rotate(-4deg); }
  72%  { transform: translateY(-12px) rotate(3deg); }
  86%  { transform: translateY(-11px) rotate(-1.5deg); }
  100% { transform: translateY(-10px) rotate(0); }
}

@keyframes hw-ghost-flee {
  from { transform: translateY(-10px) scale(.96, 1.05); }
  to   { transform: translateY(-6px) scale(1.04, .96); }
}

/* Reduced motion / impresión: sin fantasmas; velas encendidas pero quietas. */
html.theme-halloween.hw-reduced .hw-ghost {
  display: none;
}

html.theme-halloween.hw-reduced .nav-main-box > .hw-candle::before,
html.theme-halloween.hw-reduced .header > .hw-candle--bar::before {
  animation: none;
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-halloween .hw-ghost {
    display: none;
  }

  html.theme-halloween .nav-main-box > .hw-candle::before,
  html.theme-halloween .header > .hw-candle--bar::before {
    animation: none;
    opacity: .85;
  }
}

@media print {
  html.theme-halloween .hw-candle,
  html.theme-halloween .hw-ghost {
    display: none;
  }
}


/* ---------------------------------------------------------------------------
   13. Arte de velas y fantasmas (llamas, caras, cola) — "Velas pilar góticas "Haunted Graphite" (single 44×100 + pair 124×168)" / "Genz Haunted Graphite: fantasma mascota "Boo-Lila" (versión premium achuchable)"
   Solo transform/opacity; sin filtros. Reduced motion: todo quieto.
   ------------------------------------------------------------------------ */
html.theme-halloween .hw-candle {line-height:0;pointer-events:none}
html.theme-halloween .hw-candle .hw-candle__svg {display:block;overflow:visible}


html.theme-halloween .hw-candle .c-glow,
html.theme-halloween .hw-candle .c-flame,
html.theme-halloween .hw-candle .c-flame__inner,
html.theme-halloween .hw-candle .c-flame__core {transform-box:fill-box;transform-origin:50% 100%}

html.theme-halloween .hw-candle .c-glow {transform-origin:50% 50%;opacity:.74;animation:hwc-glow 2.6s ease-in-out infinite}
html.theme-halloween .hw-candle .c-flame {animation:hwc-flicker 2.1s ease-in-out infinite}
html.theme-halloween .hw-candle .c-flame__inner {animation:hwc-inner 1.7s ease-in-out infinite}
html.theme-halloween .hw-candle .c-flame__core {animation:hwc-core 1.3s ease-in-out infinite}


html.theme-halloween .hw-candle .c-candle--2 .c-flame {animation-duration:2.35s;animation-delay:-.95s}
html.theme-halloween .hw-candle .c-candle--2 .c-flame__inner {animation-duration:1.55s;animation-delay:-.6s}
html.theme-halloween .hw-candle .c-candle--2 .c-flame__core {animation-delay:-.45s}

@keyframes hwc-flicker{
  0%,100%{transform:translate(0,0) skewX(0deg) scale(1,1)}
  11%{transform:translate(-.15px,0) skewX(-2deg) scale(.97,1.06)}
  23%{transform:translate(.2px,0) skewX(1.5deg) scale(1.03,.95)}
  37%{transform:translate(0,-.1px) skewX(-.8deg) scale(.98,1.08)}
  48%{transform:translate(.25px,0) skewX(2.4deg) scale(1.02,.97)}
  61%{transform:translate(-.2px,0) skewX(-1.6deg) scale(.96,1.04)}
  74%{transform:translate(.1px,0) skewX(1deg) scale(1.04,.93)}
  88%{transform:translate(-.1px,0) skewX(-.6deg) scale(.99,1.05)}
}
@keyframes hwc-inner{
  0%,100%{transform:skewX(0deg) scale(1,1)}
  18%{transform:skewX(.8deg) scale(1.05,.94)}
  34%{transform:skewX(-1deg) scale(.95,1.07)}
  52%{transform:skewX(1.2deg) scale(1.02,.97)}
  69%{transform:skewX(-.6deg) scale(.97,1.05)}
  85%{transform:skewX(.5deg) scale(1.03,.96)}
}
@keyframes hwc-core{0%,100%{opacity:.95}30%{opacity:.78}55%{opacity:1}78%{opacity:.85}}
@keyframes hwc-glow{0%,100%{opacity:.72}14%{opacity:.86}27%{opacity:.62}41%{opacity:.9}56%{opacity:.68}70%{opacity:.83}82%{opacity:.55}92%{opacity:.78}}


@media (prefers-reduced-motion:reduce){
  html.theme-halloween .hw-candle .c-glow,
html.theme-halloween .hw-candle .c-flame,
html.theme-halloween .hw-candle .c-flame__inner,
html.theme-halloween .hw-candle .c-flame__core {animation:none}
}
html.theme-halloween.hw-reduced .hw-candle .c-glow,
html.theme-halloween.hw-reduced .hw-candle .c-flame,
html.theme-halloween.hw-reduced .hw-candle .c-flame__inner,
html.theme-halloween.hw-reduced .hw-candle .c-flame__core {animation:none}

html.theme-halloween .hw-ghost .g-eye,
html.theme-halloween .hw-ghost .g-look > *,
html.theme-halloween .hw-ghost .g-mouth,
html.theme-halloween .hw-ghost .g-brows,
html.theme-halloween .hw-ghost .g-hand { transform-box: fill-box; transform-origin: center; }

html.theme-halloween .hw-ghost .g-eye { transition: transform .26s cubic-bezier(.34,1.45,.55,1); }
html.theme-halloween .hw-ghost .g-look { transform: translate(var(--look-x,0px), var(--look-y,0px)); transition: transform .25s ease-out; }
html.theme-halloween .hw-ghost .g-look > * { transition: transform .25s ease-out; }

html.theme-halloween .hw-ghost .g-mouth { transition: opacity .2s ease, transform .28s cubic-bezier(.34,1.5,.55,1); }
html.theme-halloween .hw-ghost .g-mouth--idle { opacity: 1; }
html.theme-halloween .hw-ghost .g-mouth--alert,
html.theme-halloween .hw-ghost .g-mouth--scared { opacity: 0; transform: scale(.4); }

html.theme-halloween .hw-ghost .g-brows { opacity: 0; transform: translateY(3px); transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.6,.55,1); }
html.theme-halloween .hw-ghost .g-blush { opacity: 1; transition: opacity .3s ease; }
html.theme-halloween .hw-ghost .g-chill { opacity: 0; transition: opacity .3s ease; }

html.theme-halloween .hw-ghost .g-hand { transition: transform .32s cubic-bezier(.34,1.5,.55,1); }
html.theme-halloween .hw-ghost .g-hand--l { transform-origin: 80% 20%; }
html.theme-halloween .hw-ghost .g-hand--r { transform-origin: 20% 20%; }


html.theme-halloween .hw-ghost.is-idle .g-eye { animation: hwg-blink 5.2s ease-in-out var(--blink-delay, 0s) infinite; }
@keyframes hwg-blink {
  0%, 91%, 97%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.08); }
}


html.theme-halloween .hw-ghost.is-alert .g-eye { transform: scale(1.18); }
html.theme-halloween .hw-ghost.is-alert .g-mouth--idle,
html.theme-halloween .hw-ghost.is-scared .g-mouth--idle,
html.theme-halloween .hw-ghost.is-escape .g-mouth--idle { opacity: 0; transform: scale(.6); }
html.theme-halloween .hw-ghost.is-alert .g-mouth--alert { opacity: 1; transform: none; }
html.theme-halloween .hw-ghost.is-alert .g-hand--l { transform: rotate(14deg); }
html.theme-halloween .hw-ghost.is-alert .g-hand--r { transform: rotate(-14deg); }


html.theme-halloween .hw-ghost.is-scared .g-eye,
html.theme-halloween .hw-ghost.is-escape .g-eye { transform: scale(1.4); }
html.theme-halloween .hw-ghost.is-scared .g-look > *,
html.theme-halloween .hw-ghost.is-escape .g-look > * { transform: scale(.55); }
html.theme-halloween .hw-ghost.is-scared .g-brows,
html.theme-halloween .hw-ghost.is-escape .g-brows { opacity: 1; transform: translateY(-3px); }
html.theme-halloween .hw-ghost.is-scared .g-mouth--scared,
html.theme-halloween .hw-ghost.is-escape .g-mouth--scared { opacity: 1; transform: none; animation: hwg-quiver .16s ease-in-out .3s infinite alternate; }
@keyframes hwg-quiver {
  from { transform: scale(1); }
  to   { transform: scale(.9, 1.1); }
}
html.theme-halloween .hw-ghost.is-scared .g-chill,
html.theme-halloween .hw-ghost.is-escape .g-chill { opacity: .3; }
html.theme-halloween .hw-ghost.is-scared .g-blush,
html.theme-halloween .hw-ghost.is-escape .g-blush { opacity: .3; }
html.theme-halloween .hw-ghost.is-scared .g-hand--l,
html.theme-halloween .hw-ghost.is-escape .g-hand--l { transform: rotate(44deg); }
html.theme-halloween .hw-ghost.is-scared .g-hand--r,
html.theme-halloween .hw-ghost.is-escape .g-hand--r { transform: rotate(-44deg); }


@media (prefers-reduced-motion: reduce) {
  html.theme-halloween .hw-ghost .g-eye,
html.theme-halloween .hw-ghost .g-look,
html.theme-halloween .hw-ghost .g-look > *,
html.theme-halloween .hw-ghost .g-mouth,
html.theme-halloween .hw-ghost .g-brows,
html.theme-halloween .hw-ghost .g-hand,
html.theme-halloween .hw-ghost .g-blush,
html.theme-halloween .hw-ghost .g-chill { animation: none !important; transition-property: opacity !important; }
}
html.theme-halloween.hw-reduced .hw-ghost .g-eye,
html.theme-halloween.hw-reduced .hw-ghost .g-look,
html.theme-halloween.hw-reduced .hw-ghost .g-look > *,
html.theme-halloween.hw-reduced .hw-ghost .g-mouth,
html.theme-halloween.hw-reduced .hw-ghost .g-brows,
html.theme-halloween.hw-reduced .hw-ghost .g-hand,
html.theme-halloween.hw-reduced .hw-ghost .g-blush,
html.theme-halloween.hw-reduced .hw-ghost .g-chill { animation: none !important; transition-property: opacity !important; }