/* VHS: grano en toda la página (sin scanlines: hacen moiré con zoom/escalado), glitch ocasional, REC en la portada */
body::after { content: ""; position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .09;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite; }
@keyframes grain { 0% { translate: 0 0; } 20% { translate: -6% 4%; } 40% { translate: 5% -7%; } 60% { translate: -3% 8%; } 80% { translate: 7% 2%; } }

/* Araña que baja con el scroll (--p = progreso 0..1, lo pone el JS) */
.spider { position: fixed; top: 64px; right: 5%; z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: sway 3.5s ease-in-out infinite alternate; }
.spider::before { content: ""; width: 1px; height: calc(12px + var(--p, 0) * 60vh); background: linear-gradient(#ffffff22, #ffffff88); }
.spider svg { width: 44px; margin-top: -4px; filter: drop-shadow(0 0 6px #ff7a1a99);
  /* se puede tocar (el resto de la araña deja pasar los clics); el padding agranda la zona táctil */
  pointer-events: auto; cursor: pointer; padding: 10px; margin: -14px -10px -10px; box-sizing: content-box; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* sin esto, dos toques rápidos hacen zoom en el móvil en vez de contar como toques */ }

/* Toques: cosquillas → mosqueo → se lanza hacia la pantalla */
.spider svg.tickle { animation: tickle .6s ease-in-out; }
.spider svg.annoyed { animation: tickle .3s ease-in-out 3; filter: drop-shadow(0 0 8px #ff2b2b); }
.spider svg.angry { animation: approach 2.8s cubic-bezier(.2, 1.5, .4, 1), rage .07s linear 40; filter: drop-shadow(0 0 4px #ff2b2b) drop-shadow(0 0 2px #000); }
.spider svg.annoyed .eye, .spider svg.angry .eye { fill: #ff0000; }
@keyframes tickle {
  0%, 100% { rotate: 0deg; scale: 1; }
  20% { rotate: -18deg; scale: 1.1 .85; }
  40% { rotate: 14deg; scale: .9 1.12; }
  60% { rotate: -10deg; scale: 1.06 .92; }
  80% { rotate: 6deg; scale: 1; }
}
/* --dx/--dy/--big los calcula el JS: lleva la araña al centro y la hace ocupar casi toda la pantalla */
@keyframes approach {
  0%, 100% { translate: 0 0; scale: 1; }
  18% { translate: var(--dx) var(--dy); scale: calc(var(--big) * 1.12); }
  26%, 80% { translate: var(--dx) var(--dy); scale: var(--big); }
}
.spider .rage-only { opacity: 0; transition: opacity .2s; }
.spider svg.angry .rage-only { opacity: 1; }
/* Enfadada: silueta casi negra para que solo destaquen los ojos y los colmillos */
.spider svg.angry > g:first-child { stroke: #241c2e; }
.spider svg.angry ellipse, .spider svg.angry > circle:not(.eye) { fill: #120d18; stroke: #2e2438; }

/* Pantalla que se oscurece y enrojece mientras la araña está encima */
.dread { position: fixed; inset: 0; z-index: 39; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #5a000088 0%, #000000ee 70%); }
html.scare .dread { animation: dread 2.8s ease-in-out; }
@keyframes dread { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } 40% { opacity: .85; } 55% { opacity: 1; } }
@keyframes rage { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes sway { from { rotate: -3deg; } to { rotate: 3deg; } }
@media (max-width: 640px) { .spider { right: 0; } .spider svg { width: 22px; } }

@media (prefers-reduced-motion: reduce) {
  body::after, .spider { animation: none !important; }
  /* Con "reducir movimiento" la araña sigue reaccionando, pero sin lanzarse a la pantalla */
  .spider svg.angry { animation: rage .08s linear 30; }
}