/* =========================================================
   MODO HALLOWEEN · Bomberos Puchuncaví  (v2 — más efectos)
   Se carga solo cuando index.php activa $halloween.
   ========================================================= */

body.halloween{
  --ambar: #E8742A;
  --noche: #0B1118;
  --noche-2: #101820;
}

/* ---- Ticker ---- */
.halloween .ticker-track .aviso{color:#E8742A; font-weight:600;}

/* ---- Hero: orden de capas ----
   1 niebla · 2 linterna (oscuridad) · 3 ojos/murciélagos/araña
   4 texto (siempre legible) · 6 relámpago */
.halloween .hero{position:relative; isolation:isolate;}
.halloween .hero > .wrap{position:relative; z-index:4;}
.hw-capa{position:absolute; inset:0; pointer-events:none; overflow:hidden;}

/* Linterna: oscuridad fuerte sobre el fondo, el texto queda por encima */
.hw-linterna{
  position:absolute; inset:0; z-index:2;
  --mx:70%; --my:30%;
  background:radial-gradient(circle 300px at var(--mx) var(--my),
    rgba(255,180,100,0.12) 0%,
    rgba(255,180,100,0.04) 30%,
    transparent 50%,
    rgba(2,4,7,0.72) 100%);
}

/* Niebla más densa, en dos capas */
.hw-niebla{position:absolute; left:0; right:0; bottom:0; height:70%; z-index:1;}
.hw-niebla::before,
.hw-niebla::after{
  content:""; position:absolute; bottom:-10%; left:0; width:200%; height:100%;
  background:
    radial-gradient(ellipse 22% 40% at 12% 82%, rgba(215,222,232,0.26), transparent 70%),
    radial-gradient(ellipse 26% 34% at 38% 92%, rgba(215,222,232,0.20), transparent 70%),
    radial-gradient(ellipse 24% 44% at 64% 86%, rgba(215,222,232,0.24), transparent 70%),
    radial-gradient(ellipse 28% 36% at 88% 94%, rgba(215,222,232,0.18), transparent 70%);
  background-size:50% 100%;
  background-repeat:repeat-x;
  filter:blur(10px);
  animation:hw-niebla 40s linear infinite;
}
.hw-niebla::after{bottom:-24%; opacity:0.85; animation-duration:62s; animation-direction:reverse;}
@keyframes hw-niebla{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* Murciélagos */
.hw-murcielagos{position:absolute; inset:0; z-index:3;}
.hw-bat{position:absolute; left:0; top:0; width:80px; will-change:transform;
  filter:drop-shadow(0 0 7px rgba(232,116,42,0.45));}
.hw-bat.cerca{filter:blur(2px) drop-shadow(0 0 10px rgba(232,116,42,0.4));}
.hw-bat path, .hw-bat ellipse{fill:#030507;}
.hw-bat .ala{transform-box:fill-box; transform-origin:50% 75%;
  animation:hw-aleteo .18s ease-in-out infinite alternate;}
@keyframes hw-aleteo{from{transform:scaleY(1);} to{transform:scaleY(-0.5);}}

/* Ojos que brillan en la oscuridad y se esconden de la linterna */
.hw-ojos{position:absolute; inset:0; z-index:3;}
.hw-par{position:absolute; width:46px; transition:opacity .35s ease;}
.hw-par svg{display:block; width:100%; animation:hw-parpadeo 4.5s infinite;
  filter:drop-shadow(0 0 6px rgba(255,140,40,.9));}
.hw-par.oculto{opacity:0;}
@keyframes hw-parpadeo{0%,44%,50%,100%{transform:scaleY(1);} 47%{transform:scaleY(0.08);}}

/* Relámpago */
.hw-relampago{position:absolute; inset:0; z-index:6; background:#dfe8ff; opacity:0;}
.hw-relampago.on{animation:hw-rayo 1.1s ease-out;}
@keyframes hw-rayo{
  0%{opacity:0;} 4%{opacity:.55;} 9%{opacity:0;} 14%{opacity:.75;}
  20%{opacity:.1;} 26%{opacity:.4;} 45%{opacity:0;} 100%{opacity:0;}
}

/* Araña más grande */
.hw-arana{position:absolute; top:0; right:7%; width:46px; z-index:3;
  transform-origin:50% 0; animation:hw-columpio 3.4s ease-in-out infinite alternate;}
.hw-hilo{width:1px; margin:0 auto; background:rgba(237,230,214,0.45);
  height:70px; animation:hw-baja 11s ease-in-out infinite alternate;}
.hw-arana svg{width:46px; display:block; margin-top:-4px;
  filter:drop-shadow(0 0 5px rgba(232,116,42,.35));}
@keyframes hw-columpio{from{transform:rotate(-5deg);} to{transform:rotate(5deg);}}
@keyframes hw-baja{0%,15%{height:70px;} 55%,70%{height:230px;} 100%{height:120px;}}

/* Escudo con vela más intensa */
.halloween .hero-escudo img{animation:hw-vela 4s infinite;}
@keyframes hw-vela{
  0%,100%{filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) drop-shadow(0 0 28px rgba(232,116,42,.5));}
  18%    {filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) drop-shadow(0 0 44px rgba(232,116,42,.8));}
  21%    {filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(232,116,42,.3));}
  24%    {filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(232,116,42,.75));}
  60%    {filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(232,116,42,.45));}
  63%    {filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) drop-shadow(0 0 50px rgba(232,116,42,.85));}
}

/* Fantasma que se asoma al llegar a "Nuestra historia" */
.hw-fantasma{position:fixed; right:0; bottom:22%; width:110px; z-index:40; pointer-events:none;
  transform:translateX(130%); filter:drop-shadow(0 0 16px rgba(255,255,255,.35));}
.hw-fantasma.asoma{animation:hw-asoma 5.5s ease-in-out;}
@keyframes hw-asoma{
  0%{transform:translateX(130%) rotate(0);}
  18%{transform:translateX(35%) rotate(-12deg);}
  30%{transform:translateX(38%) rotate(-6deg) translateY(-6px);}
  45%{transform:translateX(30%) rotate(-14deg) translateY(4px);}
  62%{transform:translateX(36%) rotate(-8deg) translateY(-4px);}
  78%{transform:translateX(34%) rotate(-12deg);}
  100%{transform:translateX(130%) rotate(0);}
}

/* Telarañas en tarjetas */
.halloween .comp-card{position:relative;}
.halloween .comp-card::after{
  content:""; position:absolute; top:0; right:0; width:90px; height:90px; opacity:.35; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%2314181C' stroke-width='1'%3E%3Cpath d='M100 0L0 0M100 0L30 55M100 0L75 95M100 0L100 100'/%3E%3Cpath d='M75 0Q80 7 80.4 15.5Q88 18 93.6 24.2Q98 23 100 25'/%3E%3Cpath d='M50 0Q58 15 60.7 30.9Q76 38 87.3 48.5Q95 47 100 50'/%3E%3Cpath d='M25 0Q37 22 41 46.4Q62 58 80.9 72.7Q92 72 100 75'/%3E%3C/svg%3E") no-repeat top right/contain;
}

/* Botón */
.hw-toggle{
  position:fixed; left:16px; bottom:16px; z-index:50;
  background:var(--carbon); color:var(--arena); border:1px solid rgba(232,116,42,.6);
  padding:8px 12px; font-size:12px; border-radius:2px; cursor:pointer;
}
.hw-toggle:hover{border-color:#E8742A; color:#fff;}
.hw-toggle:focus-visible{outline:2px solid #E8742A; outline-offset:2px;}

/* Apagado por el visitante */
body.hw-off .hw-capa, body.hw-off .hw-fantasma{display:none;}
body.hw-off .hero-escudo img{animation:none;}

/* Menos movimiento */
@media (prefers-reduced-motion: reduce){
  .hw-niebla::before, .hw-niebla::after,
  .hw-arana, .hw-hilo, .hw-bat .ala, .hw-par svg,
  .halloween .hero-escudo img{animation:none;}
  .hw-murcielagos, .hw-relampago, .hw-fantasma{display:none;}
}

@media (max-width:820px){
  .hw-arana{right:10%; width:38px;}
  .hw-arana svg{width:38px;}
  .hw-bat{width:60px;}
  .hw-fantasma{width:80px;}
}