/* ===== Halloween (temporada) =====
   Todo lo arma js/halloween.js solo del 1 oct al 2 nov (agrega html.hw-on).
   Murciélagos, banderines, telarañas que se tejen, arañas, calabazas y el fantasma. */

/* ── Murciélagos ── */
.hw-bats{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.hw-bat{position:absolute;left:0;top:0;will-change:transform,opacity}
.hw-bat svg{display:block;width:100%;fill:#141118;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
html[data-mode="dark"] .hw-bat svg,html:not([data-mode="light"]) .hw-bat svg{filter:drop-shadow(0 0 6px rgba(255,138,31,.35))}
.hw-bat .hw-wl,.hw-bat .hw-wr{transform-box:fill-box;animation:hwFlap var(--flap,.18s) ease-in-out infinite alternate}
.hw-bat .hw-wl{transform-origin:right center}
.hw-bat .hw-wr{transform-origin:left center}
.hw-bat-sm svg{opacity:.85}
.hw-flash{position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y),rgba(255,138,31,.35),rgba(20,10,30,.35) 35%,transparent 70%);animation:hwFlash 1.6s ease-out forwards}
@keyframes hwFlap{from{transform:scaleY(1)}to{transform:scaleY(.5) translateY(-3px)}}
@keyframes hwFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

/* ── Banderines HAPPY HALLOWEEN ── */
.hw-on .hero2{position:relative}
.hw-on .hero2-grid{margin-top:var(--hw-bh,58px)}
.hw-bunting{position:absolute;left:max(16px,calc(50% - 640px));right:max(16px,calc(50% - 640px));top:6px;height:110px;pointer-events:none;z-index:2}
.hw-garland{position:absolute}
.hw-string{position:absolute;left:0;top:0;width:100%;overflow:visible}
.hw-string path{stroke:var(--ink-2);opacity:.6}
.hw-flag{position:absolute;left:0;top:0;width:var(--fw,48px);transform-origin:50% 0}
.hw-flag-in{position:relative;height:calc(var(--fw,48px)*1.3);background:linear-gradient(180deg,#1d1a22,#0e0c12);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);display:flex;justify-content:center;padding-top:calc(var(--fw,48px)*.2);transform-origin:50% 0;animation:hwSway 3.2s ease-in-out var(--sd,0s) infinite alternate;box-shadow:inset 0 3px 0 rgba(255,255,255,.08)}
.hw-flag-in b{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:calc(var(--fw,48px)*.56);line-height:1;color:#ff8a1f;text-shadow:0 0 10px rgba(255,138,31,.45)}
.hw-mini{position:absolute;right:2px;top:2px;width:42%;height:auto}
.hw-flag-gap .hw-flag-in{background:none;clip-path:none;padding-top:0;margin-top:-2px;box-shadow:none}
.hw-flag-gap svg{width:100%;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
@keyframes hwSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media(max-width:640px){.hw-bunting{left:8px;right:8px}}

/* ── Telarañas (se tejen al entrar en pantalla) ── */
.hw-sec{position:relative}
.hw-web{position:absolute;top:0;pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;z-index:4;overflow:visible;transform-origin:50% 0;animation:hwWebSway 6s ease-in-out infinite alternate}
.hw-web.hw-tr{right:0;--fx:1}
.hw-web.hw-tl{left:0;--fx:-1;transform:scaleX(-1)}
.hw-web path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,.1,.2,1) var(--d,0s)}
.hw-web.is-in path{stroke-dashoffset:0}
@keyframes hwWebSway{from{transform:scaleX(var(--fx,1)) rotate(0)}to{transform:scaleX(var(--fx,1)) rotate(1.6deg)}}
.hw-cweb{width:clamp(90px,42%,150px);color:#fff;opacity:.9;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.8))}
.hw-hweb{width:clamp(150px,18vw,240px);color:var(--ink-2);opacity:.6;top:-20px;z-index:3}
.hw-sweb{width:clamp(120px,14vw,200px);color:var(--ink-2);opacity:.45}
/* Araña: cuelga y baja cuando pasas el mouse por la tarjeta */
.hw-dropper{opacity:0;transition:opacity .6s 1.2s}
.hw-web.is-in .hw-dropper{opacity:1}
.hw-thread{transform-box:fill-box;transform-origin:top;transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.hw-sp{transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.hw-hweb .hw-sp,.hw-sweb .hw-sp{animation:hwBobSpider 3.6s ease-in-out infinite}
.hw-hweb .hw-thread,.hw-sweb .hw-thread{animation:hwStretch 3.6s ease-in-out infinite}
.product-card:hover .hw-thread,.cat-card:hover .hw-thread{transform:scaleY(2.6)}
.product-card:hover .hw-sp,.cat-card:hover .hw-sp{transform:translateY(70px)}
@keyframes hwBobSpider{0%,100%{transform:translateY(0)}50%{transform:translateY(34px)}}
@keyframes hwStretch{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.77)}}

/* ── Calabazas con vela ── */
.hw-pumpkin{position:absolute;bottom:8px;width:clamp(54px,6vw,84px);pointer-events:none;z-index:4;transform-origin:50% 100%;animation:hwWiggle 7s ease-in-out var(--delay,0s) infinite}
.hw-pumpkin.hw-br{right:max(12px,calc(50% - 660px))}
.hw-pumpkin.hw-bl{left:max(12px,calc(50% - 660px))}
.hw-pumpkin svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 8px 14px rgba(232,114,28,.35))}
.hw-candle{fill:#ffd23f;animation:hwCandle 1.4s steps(1) infinite;filter:drop-shadow(0 0 4px #ffb300)}
@keyframes hwCandle{0%{fill:#ffd23f;opacity:1}20%{fill:#ffb300;opacity:.75}35%{fill:#ffe68a;opacity:1}55%{fill:#ffa000;opacity:.6}70%{fill:#ffd23f;opacity:.95}85%{fill:#ffc107;opacity:.8}}
@keyframes hwWiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-8deg) translateY(-6px)}92%{transform:rotate(7deg)}95%{transform:rotate(-4deg)}}

/* ── Fantasma con MacBook ── */
.hw-fly{position:fixed;left:0;top:0;width:clamp(90px,9vw,140px);z-index:60;pointer-events:none;will-change:transform;transform:translate(70vw,30vh)}
.hw-ghost{display:block;width:100%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.28));animation:hwBob 2.4s ease-in-out infinite}
html[data-mode="light"] .hw-ghost{filter:drop-shadow(0 14px 20px rgba(60,40,10,.22))}
.hw-ghost .hw-hand{transform-box:fill-box;transform-origin:center;animation:hwType .5s ease-in-out infinite alternate}
.hw-ghost .hw-hand-r{animation-delay:.25s}
.hw-ghost .hw-spark{transform-box:fill-box;transform-origin:center;animation:hwTwinkle 1.8s ease-in-out infinite}
.hw-ghost .hw-spark2{animation-delay:.9s}
.hw-ghost .hw-eye{animation:hwBlink 5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes hwBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hwType{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes hwTwinkle{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1.15);opacity:1}}
@keyframes hwBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* Celular: versión liviana (sin filtros de sombra ni balanceo de telarañas) para que el scroll vaya fluido */
@media(max-width:768px){
  .hw-ghost,.hw-pumpkin svg,.hw-bat svg,.hw-flag-gap svg,.hw-candle{filter:none!important}
  .hw-fly{width:84px}
  .hw-web{animation:none}
  .hw-cweb{filter:none;opacity:.75}
  .hw-ghost .hw-spark,.hw-ghost .hw-hand{animation:none}
}

/* Sin animaciones: todo queda quieto y el fantasma en una esquina */
@media(prefers-reduced-motion:reduce){
  .hw-fly{transform:none;left:auto;right:16px;top:auto;bottom:96px}
  .hw-ghost,.hw-ghost *,.hw-web,.hw-web *,.hw-flag-in,.hw-pumpkin,.hw-candle{animation:none!important;transition:none!important}
  .hw-web path{stroke-dashoffset:0}
  .hw-dropper{opacity:1}
}