/*
 * Decoración de Halloween (inc/temporada.php → Apariencia → Decoración de temporada).
 * Todo cuelga de body.deco-halloween y de los elementos que crea halloween.js.
 * Ilustraciones: Noto Emoji de Google (ver CREDITOS.txt).
 */
.deco-halloween{--hw-orange:#FF7A1A;--hw-purple:#7A3CBE;--hw-night:#160F1F}

/* La isla del menú, con brillo de calabaza */
.deco-halloween .isla{box-shadow:0 10px 30px rgba(32,27,23,.25),0 0 0 1px rgba(255,122,26,.35),0 0 26px rgba(255,122,26,.28)}

/* Héroe de la portada: atardecer morado, niebla y murciélagos */
.deco-halloween .ppa-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(70,25,110,.6) 0%,rgba(120,40,90,.3) 45%,rgba(255,122,26,.18) 75%,transparent 100%);mix-blend-mode:multiply}
.deco-halloween .ppa-hero__body{z-index:2}
.deco-halloween .ppa-hero h1 em{color:var(--hw-orange);text-shadow:0 0 22px rgba(255,122,26,.65),0 2px 18px rgba(0,0,0,.45)}
.hw-fog{position:absolute;left:-20%;right:-20%;bottom:-6%;height:42%;z-index:1;pointer-events:none;opacity:.55}
.hw-fog i{position:absolute;inset:0;background:radial-gradient(30% 60% at 20% 70%,rgba(235,230,245,.55),transparent 70%),radial-gradient(28% 55% at 55% 80%,rgba(235,230,245,.45),transparent 70%),radial-gradient(32% 60% at 85% 70%,rgba(235,230,245,.5),transparent 70%);filter:blur(14px);animation:hw-fog 22s ease-in-out infinite alternate}
.hw-fog i + i{animation-duration:31s;animation-direction:alternate-reverse;opacity:.7;transform:translateX(-8%)}
@keyframes hw-fog{from{transform:translateX(-6%)}to{transform:translateX(8%)}}
.hw-bats{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hw-bat{position:absolute;left:-12%;width:54px;height:54px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;animation:hw-fly 14s linear infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.hw-bat img{width:100%;height:100%;display:block;animation:hw-flap .32s ease-in-out infinite alternate;transform-origin:50% 60%}
.hw-bat:nth-child(1){top:12%;animation-delay:-2s}
.hw-bat:nth-child(2){top:26%;width:40px;height:40px;animation-duration:18s;animation-delay:-9s}
.hw-bat:nth-child(3){top:6%;width:34px;height:34px;animation-duration:22s;animation-delay:-15s}
.hw-bat:nth-child(4){top:36%;width:46px;height:46px;animation-duration:16s;animation-delay:-5s}
@keyframes hw-fly{0%{transform:translate(0,0)}25%{transform:translate(35vw,-24px)}50%{transform:translate(70vw,18px)}75%{transform:translate(105vw,-12px)}100%{transform:translate(140vw,10px)}}
@keyframes hw-flap{to{transform:scaleY(.72) scaleX(1.08)}}
.hw-bat.is-poof{animation-play-state:paused}
.hw-bat.is-poof img{animation:hw-poof .5s ease-out forwards}
@keyframes hw-poof{to{transform:scale(1.8);opacity:0;filter:blur(4px)}}

/* La araña que cuelga de arriba: al pincharla, sube por su hilo */
.hw-spider{position:absolute;top:0;right:9%;z-index:55;width:46px;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 0;animation:hw-swing 4.5s ease-in-out infinite}
.hw-spider__thread{display:block;width:1px;height:var(--hw-len,150px);margin:0 auto;background:linear-gradient(rgba(255,255,255,.2),rgba(200,200,210,.9));transition:height 1.2s cubic-bezier(.5,0,.3,1)}
.hw-spider img{display:block;width:46px;height:46px;margin-top:-4px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));animation:hw-legs .5s ease-in-out infinite alternate}
.hw-spider.is-up .hw-spider__thread{height:18px}
.hw-spider.is-up{animation-play-state:paused}
@keyframes hw-swing{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
@keyframes hw-legs{to{transform:scale(1.04,.96)}}
@media (max-width:759px){.hw-spider{right:5%;width:36px}.hw-spider img{width:36px;height:36px}}

/* Telarañas en algunas esquinas */
.deco-halloween .ppx-board,.deco-halloween .ppa-finde{position:relative}
.deco-halloween .ppx-board::after,.deco-halloween .ppa-finde::after{content:"";position:absolute;top:-2px;right:-2px;width:86px;height:86px;pointer-events:none;background:url("telarana.svg") no-repeat 100% 0/100% auto;opacity:.32;transform:rotate(8deg)}
.deco-halloween .ppx-board::after{opacity:.4;filter:invert(1)}

/* El fantasma que se asoma por los lados */
.hw-ghost{position:fixed;z-index:58;width:74px;height:74px;padding:0;border:0;background:none;cursor:pointer;transition:transform 1.1s cubic-bezier(.3,1.3,.5,1);filter:drop-shadow(0 8px 18px rgba(60,20,90,.35))}
.hw-ghost img{width:100%;height:100%;display:block;animation:hw-float 2.4s ease-in-out infinite}
.hw-ghost.is-left{left:0;transform:translateX(-110%) rotate(20deg)}
.hw-ghost.is-right{right:0;transform:translateX(110%) rotate(-20deg)}
.hw-ghost.is-left.is-in{transform:translateX(-28%) rotate(18deg)}
.hw-ghost.is-right.is-in{transform:translateX(28%) rotate(-18deg)}
.hw-ghost__say{position:absolute;top:-38px;left:50%;transform:translateX(-50%) scale(.6);opacity:0;white-space:nowrap;background:#fff;color:var(--hw-night);font-weight:800;font-size:.95rem;border-radius:999px;padding:.35em .8em;box-shadow:0 6px 16px rgba(0,0,0,.2);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.hw-ghost.is-boo .hw-ghost__say{opacity:1;transform:translateX(-50%) scale(1)}
@keyframes hw-float{50%{transform:translateY(-8px)}}

/* Juego: calabazas escondidas en la portada */
.hw-pk{position:absolute;z-index:6;width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;opacity:.92;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));transition:transform .25s}
.hw-pk:hover{transform:scale(1.18) rotate(-8deg)}
.hw-pk img{width:100%;height:100%;display:block;animation:hw-glow 2.8s ease-in-out infinite}
@keyframes hw-glow{50%{filter:drop-shadow(0 0 10px rgba(255,122,26,.9))}}
.hw-pk.is-found{pointer-events:none;animation:hw-pop .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes hw-pop{40%{transform:scale(1.6) rotate(12deg)}100%{transform:scale(0) rotate(-40deg);opacity:0}}
.hw-candy{position:fixed;z-index:9998;width:30px;height:30px;pointer-events:none;will-change:transform,opacity}

.hw-count{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:57;transform:translate(-50%,160%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);border:0;border-radius:999px;padding:8px 16px 8px 8px;background:var(--hw-night);color:#fff;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;box-shadow:0 12px 30px rgba(22,15,31,.4),0 0 0 1px rgba(255,122,26,.4);transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.hw-count.is-on{transform:translate(-50%,0)}
.hw-count img{width:30px;height:30px}
.hw-count b{color:var(--hw-orange);font-size:1.05em}
.hw-count.is-bump{animation:hw-bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes hw-bump{40%{transform:translate(-50%,0) scale(1.12)}}
@media (min-width:760px){.hw-count{bottom:22px}}

.hw-win{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(22,15,31,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.hw-win.is-on{opacity:1}
.hw-win__card{position:relative;max-width:420px;width:100%;text-align:center;border-radius:28px;padding:30px 24px 24px;background:radial-gradient(70% 60% at 50% 0%,rgba(255,122,26,.35),transparent 70%),var(--hw-night);color:#fff;box-shadow:0 30px 70px rgba(0,0,0,.5);transform:scale(.8);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.hw-win.is-on .hw-win__card{transform:scale(1)}
.hw-win__card img{width:96px;height:96px;margin:-70px auto 6px;display:block;filter:drop-shadow(0 0 24px rgba(255,122,26,.8));animation:hw-float 2.4s ease-in-out infinite}
.hw-win__card h2{margin:0 0 6px;font-family:var(--font-display);font-weight:500;font-size:2rem;line-height:1.05}
.hw-win__card p{margin:0 0 18px;color:#D9CFE3}
.hw-win__go{display:inline-block;border-radius:999px;padding:.85em 1.4em;background:var(--hw-orange);color:var(--hw-night);font-weight:800;text-decoration:none}
.hw-win__close{display:block;margin:12px auto 0;border:0;background:none;color:#B9AEC6;font:inherit;cursor:pointer;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
	.hw-fog i,.hw-bat,.hw-bat img,.hw-spider,.hw-spider img,.hw-ghost img,.hw-pk img{animation:none}
	.hw-bats,.hw-ghost{display:none}
}