/* Halloween decoration — EP Classroom. Photo background + CSS/SVG, no feTurbulence. */
:root { --hw-garland-h: 30px; }

body.halloween-decor-active { padding-top: var(--hw-garland-h); }
body.halloween-decor-active .app-layout { height: calc(100vh - var(--hw-garland-h)); }
body.halloween-decor-active .page-wrapper { position: relative; z-index: 1; }

/* Fondo base: noche con resplandor naranja abajo y violeta arriba */
#halloween-decor-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 50% 105%, rgba(249, 115, 22, .16), transparent 70%),
    radial-gradient(ellipse 55% 45% at 10% 0%, rgba(124, 58, 237, .16), transparent 70%),
    #0d1117;
}
/* Foto: del tamaño de .page-wrapper (igual que Spring), bordes esfumados con máscara */
#halloween-decor-img {
  position: fixed; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(13, 17, 23, .35), rgba(13, 17, 23, .35)),
    url('../images/halloween/halloween-bg.webp') center / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

#halloween-decor-root { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
#halloween-decor-root * { pointer-events: none; }
/* Hojas y bichos: arriba de los paneles, debajo de los modales (9001+) */
/* z-index 0: por encima de la foto de fondo pero DETRÁS de la hoja de notas (.page-wrapper, z 1), así no tapa el texto */
#halloween-decor-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#halloween-decor-fx * { pointer-events: none; }

.hw-garland { position: absolute; top: 0; left: 0; width: 100%; height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.hw-ground  { position: absolute; bottom: 0; left: 0; width: 100%; height: 74px; }

/* Telarañas */
.hw-web { position: absolute; top: var(--hw-garland-h); }
.hw-web.left  { left: 0; }
.hw-web.right { right: 0; transform: scaleX(-1); }
.hw-spider { position: absolute; top: 18px; left: 46%; animation: hw-dangle 5s ease-in-out infinite alternate; transform-origin: top center; }
@keyframes hw-dangle { from { transform: translateY(-8px) rotate(-6deg); } to { transform: translateY(16px) rotate(6deg); } }

/* Hojas que caen */
.hw-leaf { position: absolute; top: -24px; animation: hw-fall linear infinite; opacity: 0; }
.hw-leaf i {
  display: block; border-radius: 0 100% 0 100%; opacity: .85;
  animation: hw-sway ease-in-out infinite alternate;
}
@keyframes hw-fall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  8%   { opacity: .9; }
  92%  { opacity: .9; }
  100% { transform: translateY(108vh) rotate(360deg); opacity: 0; }
}
@keyframes hw-sway {
  from { transform: translateX(-26px) rotate(-35deg); }
  to   { transform: translateX(26px) rotate(35deg); }
}

/* Murciélagos y fantasmas */
.hw-critter { position: absolute; left: 0; will-change: transform; }
.hw-critter.ltr { animation: hw-cross-ltr linear forwards; }
.hw-critter.rtl { animation: hw-cross-rtl linear forwards; }
@keyframes hw-cross-ltr { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw + 90px)); } }
@keyframes hw-cross-rtl { from { transform: translateX(calc(100vw + 90px)); } to { transform: translateX(-90px); } }
.hw-critter .bob { animation: hw-bob ease-in-out infinite alternate; }
.hw-critter.ghost .bob { opacity: .8; }
.hw-critter.rtl .bob svg { transform: scaleX(-1); }
.hw-critter img { max-width: none; height: auto; }
@keyframes hw-bob { from { transform: translateY(-22px); } to { transform: translateY(22px); } }
.hw-wing { transform-origin: 50% 60%; animation: hw-flap .22s ease-in-out infinite alternate; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }

/* Calabazas, calaveras y caramelos que giran; esqueletos que bailan; gato que mueve la cola */
.hw-spin { display: inline-block; animation: hw-spin 3.2s linear infinite; }
.hw-spin.slow { animation-duration: 6s; }
@keyframes hw-spin { to { transform: rotate(360deg); } }
.hw-critter.pumpkin .bob, .hw-critter.candy .bob { filter: drop-shadow(0 0 8px rgba(249, 115, 22, .45)); }
.hw-critter.skeleton .bob, .hw-critter.skull .bob { filter: drop-shadow(0 0 6px rgba(226, 232, 240, .25)); }
.hw-skel { animation: hw-wobble 1.4s ease-in-out infinite alternate; transform-origin: 50% 10%; }
@keyframes hw-wobble { from { rotate: -10deg; } to { rotate: 10deg; } }
.hw-limb { transform-box: fill-box; animation: hw-swing .7s ease-in-out infinite alternate; }
.hw-limb.arm-l { transform-origin: 100% 0; }
.hw-limb.arm-r { transform-origin: 0 0; animation-delay: -.35s; }
.hw-limb.leg-l { transform-origin: 80% 0; animation-delay: -.2s; }
.hw-limb.leg-r { transform-origin: 20% 0; animation-delay: -.55s; }
@keyframes hw-swing { from { rotate: -14deg; } to { rotate: 14deg; } }
.hw-tail { transform-box: fill-box; transform-origin: 0 100%; animation: hw-swing 1.1s ease-in-out infinite alternate; }

@media (max-width: 700px) {
  :root { --hw-garland-h: 22px; }
  .hw-garland { height: 34px; }
  .hw-ground { height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-leaf, .hw-leaf i, .hw-critter, .hw-critter .bob, .hw-wing, .hw-spider,
  .hw-spin, .hw-skel, .hw-limb, .hw-tail { animation: none !important; }
  .hw-leaf { opacity: 0; }
}