/* ============================================================
   DROP ZONE — Decoraciones de Halloween (TEMPORAL)
   ------------------------------------------------------------
   PARA QUITAR cuando Mario diga que terminó Halloween:
     1. Borrar este archivo (static/css/halloween.css)
     2. Borrar la línea <link ... halloween.css> en templates/base.html
     3. Borrar el bloque <!-- HALLOWEEN INICIO --> ... <!-- HALLOWEEN FIN -->
        en templates/base.html
   No modifica el fondo ni el tema actual: todo es aditivo.
   ============================================================ */

/* ---------- tinte ambiental sutil (naranja arriba, morado abajo) ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 110, 0, 0.07) 0%,
    transparent 28%,
    transparent 72%,
    rgba(120, 40, 200, 0.09) 100%
  );
}

/* ---------- capa de elementos flotantes (detrás del contenido) ---------- */
.halloween-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* El contenido principal queda por encima de las decoraciones */
.container { position: relative; z-index: 2; }
.footer { position: relative; z-index: 2; }

/* ---------- calabazas, fantasmas y dulces cayendo ---------- */
.hw-float {
  position: absolute;
  top: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(255, 140, 0, 0.45));
  animation: hw-fall linear infinite;
  will-change: transform;
}

@keyframes hw-fall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg);   opacity: 0; }
  8%   { opacity: var(--hw-op, 0.55); }
  50%  { transform: translate3d(var(--hw-sway, 30px), 46vh, 0) rotate(180deg); }
  92%  { opacity: var(--hw-op, 0.55); }
  100% { transform: translate3d(calc(var(--hw-sway, 30px) * -1), 108vh, 0) rotate(360deg); opacity: 0; }
}

.hw-f1  { left: 4%;  font-size: 2.2rem; --hw-op: .6;  --hw-sway: 34px;  animation-duration: 17s; animation-delay: -2s; }
.hw-f2  { left: 14%; font-size: 1.5rem; --hw-op: .45; --hw-sway: -26px; animation-duration: 23s; animation-delay: -11s; }
.hw-f3  { left: 26%; font-size: 2.8rem; --hw-op: .5;  --hw-sway: 40px;  animation-duration: 19s; animation-delay: -7s; }
.hw-f4  { left: 38%; font-size: 1.3rem; --hw-op: .4;  --hw-sway: -30px; animation-duration: 26s; animation-delay: -16s; }
.hw-f5  { left: 52%; font-size: 2.4rem; --hw-op: .55; --hw-sway: 28px;  animation-duration: 21s; animation-delay: -4s; }
.hw-f6  { left: 63%; font-size: 1.6rem; --hw-op: .45; --hw-sway: -36px; animation-duration: 24s; animation-delay: -13s; }
.hw-f7  { left: 74%; font-size: 2.6rem; --hw-op: .5;  --hw-sway: 32px;  animation-duration: 18s; animation-delay: -9s; }
.hw-f8  { left: 85%; font-size: 1.4rem; --hw-op: .4;  --hw-sway: -28px; animation-duration: 27s; animation-delay: -19s; }
.hw-f9  { left: 93%; font-size: 2.1rem; --hw-op: .55; --hw-sway: 24px;  animation-duration: 20s; animation-delay: -6s; }
.hw-f10 { left: 47%; font-size: 1.8rem; --hw-op: .42; --hw-sway: -34px; animation-duration: 25s; animation-delay: -22s; }

/* ---------- murciélagos cruzando arriba ---------- */
.hw-bat {
  position: absolute;
  top: 9%;
  left: 0;
  font-size: 1.7rem;
  opacity: 0.5;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
  animation: hw-fly linear infinite;
  will-change: transform;
}

@keyframes hw-fly {
  0%   { transform: translate(-8vw, 0) scaleX(1); }
  45%  { transform: translate(45vw, -22px) scaleX(1); }
  55%  { transform: translate(55vw, 6px) scaleX(1); }
  100% { transform: translate(112vw, -10px) scaleX(1); }
}

.hw-b1 { animation-duration: 26s; animation-delay: -5s; top: 7%; }
.hw-b2 { animation-duration: 34s; animation-delay: -21s; top: 13%; font-size: 1.3rem; opacity: .4; }

/* ---------- telarañas en las esquinas ---------- */
.hw-web {
  position: fixed;
  top: 58px; /* debajo de la navbar */
  font-size: 4.2rem;
  opacity: 0.32;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(200, 200, 220, 0.25));
}
.hw-web-left  { left: 6px; transform: scaleX(-1); }
.hw-web-right { right: 6px; }

/* ---------- título del hero con degradado de Halloween ---------- */
.hero h1 {
  background: linear-gradient(135deg, #ff8c1a 10%, #ff5e3a 45%, #a855f7 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 120, 20, 0.35));
}

/* ---------- brillo naranja en la navbar ---------- */
.navbar {
  box-shadow: 0 2px 26px rgba(255, 123, 28, 0.28);
  border-bottom-color: rgba(255, 123, 28, 0.45);
}

/* ---------- insignia flotante "¡Feliz Halloween!" ---------- */
.hw-badge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  pointer-events: none;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffd9a8;
  background: rgba(20, 10, 4, 0.82);
  border: 1px solid rgba(255, 140, 26, 0.65);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 0 22px rgba(255, 120, 20, 0.45), inset 0 0 12px rgba(255, 120, 20, 0.15);
  letter-spacing: 0.5px;
}

/* ---------- accesibilidad: sin animación si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  .hw-float, .hw-bat { animation: none; opacity: 0.35; }
  .hw-f1, .hw-f2, .hw-f3, .hw-f4, .hw-f5,
  .hw-f6, .hw-f7, .hw-f8, .hw-f9, .hw-f10 { transform: none; top: 12%; }
}

@media (max-width: 640px) {
  .hw-web { font-size: 3rem; top: 54px; }
  .hw-badge { font-size: 0.8rem; padding: 8px 14px; right: 12px; bottom: 12px; }
}