/* Ilustración de Halloween en CSS. Conserva el tema editorial azul.
   Movimiento breve de bienvenida y respuesta al tocar la calabaza. */
.halloween-decoration{position:absolute;inset:0;z-index:3;pointer-events:none}
.halloween-decoration[hidden]{display:none!important}
.halloween-pumpkin{position:absolute;top:42px;right:0;width:86px;height:90px;display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;transform:rotate(8deg)}
.halloween-pumpkin:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:12px}
.halloween-pumpkin-art{position:relative;display:block;width:72px;height:58px;border-radius:44% 44% 42% 42%;background:radial-gradient(ellipse at 50% 38%,#eda55b 0 20%,#d5813d 55%,#b85e2c 100%);box-shadow:inset 12px 0 0 -7px #af572b,inset -12px 0 0 -7px #af572b,inset 26px 0 0 -21px #e49a52,inset -26px 0 0 -21px #e49a52,0 7px 9px #18212724;transition:transform .2s}
.halloween-pumpkin-art:before{content:'';position:absolute;width:11px;height:17px;left:32px;top:-12px;background:#536349;border-radius:3px 3px 0 0;transform:rotate(12deg);box-shadow:inset -3px 0 #374936}
.halloween-eyes{position:absolute;inset:0}
.halloween-eyes:before,.halloween-eyes:after{content:'';position:absolute;top:18px;width:15px;height:13px;background:#382719;clip-path:polygon(50% 0,100% 100%,0 85%)}
.halloween-eyes:before{left:15px;transform:rotate(-10deg)}
.halloween-eyes:after{right:15px;transform:rotate(10deg) scaleX(-1)}
.halloween-smile{position:absolute;left:19px;top:36px;width:34px;height:13px;background:#382719;clip-path:polygon(0 0,24% 28%,24% 0,42% 0,42% 34%,65% 28%,65% 0,80% 0,80% 14%,100% 0,85% 80%,55% 100%,28% 85%)}
.is-lit .halloween-eyes:before,.is-lit .halloween-eyes:after,.is-lit .halloween-smile{background:#fff0b6}
.halloween-flight{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.halloween-bat{position:absolute;left:75%;top:24%;width:42px;height:23px;opacity:0;--flight-x:-280px;--flight-y:-95px;--flight-delay:0s}
.halloween-bat:nth-child(2){left:83%;top:32%;width:31px;height:18px;--flight-x:-230px;--flight-y:-140px;--flight-delay:.3s}
.halloween-bat:nth-child(3){left:72%;top:35%;width:36px;height:21px;--flight-x:-310px;--flight-y:-60px;--flight-delay:.65s}
.halloween-bat:before,.halloween-bat:after{content:'';position:absolute;top:0;width:52%;height:100%;background:var(--ink);clip-path:polygon(0 0,24% 17%,52% 8%,78% 25%,100% 58%,100% 100%,72% 64%,48% 74%,36% 44%,14% 46%)}
.halloween-bat:before{left:0;transform-origin:right center}
.halloween-bat:after{right:0;transform:scaleX(-1);transform-origin:left center}
.halloween-bat>span{position:absolute;z-index:1;left:43%;top:35%;width:14%;height:64%;background:var(--ink);clip-path:polygon(0 0,35% 20%,65% 20%,100% 0,100% 72%,50% 100%,0 72%)}
.halloween-toggle{display:block;min-height:44px;margin-top:10px;padding:6px 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.halloween-toggle:hover{color:var(--blue)}
@media(prefers-reduced-motion:no-preference){
  .halloween-pumpkin:hover .halloween-pumpkin-art{transform:translateY(-3px) rotate(-5deg)}
  .is-flying .halloween-bat{animation:halloween-flight 3.8s var(--flight-delay) ease-in-out both}
  .is-flying .halloween-bat:before{animation:halloween-wing-left .28s ease-in-out 16 alternate}
  .is-flying .halloween-bat:after{animation:halloween-wing-right .28s ease-in-out 16 alternate}
  @keyframes halloween-flight{
    0%{opacity:0;transform:translate(0,0) rotate(-12deg)}
    12%{opacity:.85}
    48%{opacity:.85;transform:translate(calc(var(--flight-x) * .45),calc(var(--flight-y) * .25)) rotate(8deg)}
    80%{opacity:.75}
    100%{opacity:0;transform:translate(var(--flight-x),var(--flight-y)) rotate(-18deg)}
  }
  @keyframes halloween-wing-left{to{transform:scaleY(.45) rotate(-10deg)}}
  @keyframes halloween-wing-right{to{transform:scaleX(-1) scaleY(.45) rotate(10deg)}}
}
@media(max-width:767px){
  .halloween-pumpkin{top:28px;right:-4px;width:76px;height:80px}
  .halloween-pumpkin-art{transform:scale(.85)}
  .halloween-bat{--flight-x:-180px;--flight-y:-70px}
  .halloween-bat:nth-child(2){--flight-x:-155px;--flight-y:-115px}
  .halloween-bat:nth-child(3){--flight-x:-205px;--flight-y:-40px}
}