/* Seasonal Themes – Halloween: portada de bienvenida + restos decorativos */
@font-face{font-family:"STZ Creepster";src:url("creepster.woff2") format("woff2");font-display:block}

.stz-hw{
  --hw-night:#140a07; --hw-choc:#2b160e; --hw-amber:#f0a830; --hw-pumpkin:#ee7a1e;
  --hw-cream:#f6e7cf; --hw-slime:#9fd13a; --hw-slime-deep:#5f8f1c;
  position:fixed;inset:0;z-index:2147483000;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 58%,rgba(240,140,40,.28),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%,var(--hw-choc),var(--hw-night) 75%);
  color:var(--hw-cream);
  transition:clip-path .9s cubic-bezier(.7,0,.2,1),opacity .9s ease;
  clip-path:inset(0 0 0 0);
}
.stz-hw.stz-hw--out{clip-path:inset(0 0 100% 0);opacity:.6}
.stz-hw::after{ /* viñeta */
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 180px 40px rgba(0,0,0,.75);
}
.stz-hw__fog{position:absolute;inset:-20% -50%;pointer-events:none;opacity:.35;
  background:
    radial-gradient(closest-side at 30% 70%,rgba(246,231,207,.18),transparent),
    radial-gradient(closest-side at 70% 80%,rgba(246,231,207,.14),transparent),
    radial-gradient(closest-side at 50% 95%,rgba(246,231,207,.2),transparent);
  animation:stz-fog 26s ease-in-out infinite alternate}
@keyframes stz-fog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

.stz-hw__content{position:relative;z-index:2;padding:0 24px;max-width:900px;
  transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .5s ease}
.stz-hw--out .stz-hw__content{transform:translateY(-40px);opacity:0}

.stz-hw__logo{display:block;margin:0 auto 18px;width:min(340px,62vw);aspect-ratio:var(--logo-ratio,3);
  background:var(--hw-amber);
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
  filter:drop-shadow(0 0 18px rgba(240,168,48,.35));
  opacity:0;animation:stz-rise-in 1.1s .2s cubic-bezier(.2,.7,.2,1) forwards}
.stz-hw__logo-text{font:700 clamp(28px,5vw,44px)/1.1 Inter,system-ui,sans-serif;color:var(--hw-amber);margin:0 0 12px}

.stz-hw__title{margin:0;font-family:"STZ Creepster",fantasy;font-weight:400;
  font-size:clamp(52px,11vw,138px);line-height:.95;letter-spacing:.02em;
  color:var(--hw-pumpkin);
  text-shadow:0 0 22px rgba(238,122,30,.55),0 0 2px #000,0 6px 0 #3a1406;
  opacity:0;animation:stz-rise-in 1.2s .55s cubic-bezier(.2,.7,.2,1) forwards,stz-flicker 6s 2s infinite}
@keyframes stz-rise-in{from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes stz-flicker{0%,92%,100%{opacity:1}93%{opacity:.75}94%{opacity:1}96%{opacity:.85}}

.stz-hw__hint{margin:34px 0 0;font:500 13px/1.4 Inter,system-ui,sans-serif;letter-spacing:.08em;color:rgba(246,231,207,.75);
  opacity:0;animation:stz-fade 1s 1.6s forwards}
.stz-hw__hint span{display:block;width:14px;height:14px;margin:12px auto 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);animation:stz-nudge 1.6s ease-in-out infinite}
@keyframes stz-fade{to{opacity:1}}
@keyframes stz-nudge{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}

/* Telarañas */
.stz-web{position:absolute;pointer-events:none}
.stz-web svg{display:block;width:100%;height:100%}
.stz-web--tl{top:0;left:0}
.stz-web--tr{top:0;right:0;transform:scaleX(-1)}
.stz-hw .stz-web{width:min(300px,42vw);height:min(300px,42vw);opacity:.55}
.stz-hw .stz-web--tr{width:min(220px,32vw);height:min(220px,32vw)}

/* Arañas */
.stz-spider2{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;transform-origin:top center}
.stz-spider2 .stz-thread{width:1px;background:linear-gradient(rgba(246,231,207,.15),rgba(246,231,207,.6));height:var(--len,160px);
  transform-origin:top;animation:stz-descend 2.4s var(--d,0s) cubic-bezier(.3,.8,.3,1) both}
.stz-spider2 svg{width:var(--s,40px);height:var(--s,40px);margin-top:-3px;animation:stz-drop-in 2.4s var(--d,0s) cubic-bezier(.3,.8,.3,1) both}
.stz-spider2 .stz-bob{animation:stz-bob 4.5s calc(var(--d,0s) + 2.4s) ease-in-out infinite alternate}
@keyframes stz-descend{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes stz-drop-in{from{transform:translateY(calc(var(--len,160px) * -1));opacity:0}15%{opacity:1}to{transform:none}}
@keyframes stz-bob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-14px) rotate(3deg)}}
.stz-hw .stz-spider2 svg{filter:drop-shadow(0 0 6px rgba(240,168,48,.45))}
.stz-legs{animation:stz-twitch 3.2s steps(1) infinite;transform-box:fill-box;transform-origin:center}
@keyframes stz-twitch{0%,88%,100%{transform:none}90%{transform:scaleX(1.06)}94%{transform:scaleX(.96)}}

/* Slime */
.stz-slime{--slime-a:#8c3f06;--slime-b:#dc7414;--slime-c:#ffb44f;
  position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;
  filter:url(#stz-goo) drop-shadow(0 4px 5px rgba(45,15,0,.5))}
.stz-slime__band{position:absolute;left:-10px;right:-10px;top:-6px;height:var(--band,18px);
  background:linear-gradient(180deg,var(--slime-a),var(--slime-b) 70%,var(--slime-c))}
.stz-lump{position:absolute;border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,var(--slime-c),var(--slime-b) 55%,var(--slime-a));
  animation:stz-breathe var(--t,6s) var(--d,0s) ease-in-out infinite alternate}
@keyframes stz-breathe{from{transform:scale(1,.85)}to{transform:scale(1.06,1.12)}}
.stz-drip{position:absolute;top:0;left:var(--x);width:var(--w,14px);height:var(--h,40px);
  background:linear-gradient(90deg,var(--slime-a),var(--slime-b) 40%,var(--slime-c) 60%,var(--slime-b));
  clip-path:polygon(0 0,100% 0,78% 45%,72% 100%,28% 100%,22% 45%);
  transform-origin:top;
  animation:stz-ooze var(--t,7s) var(--d,0s) cubic-bezier(.45,0,.55,1) infinite alternate}
.stz-drip-tip{position:absolute;top:0;left:var(--x);width:var(--w,14px);height:var(--w,14px);margin-top:calc(var(--h,40px) - var(--w,14px) * .55);
  border-radius:50% 50% 50% 50% / 45% 45% 55% 55%;
  background:radial-gradient(circle at 40% 35%,var(--slime-c),var(--slime-b) 60%,var(--slime-a));
  transform-origin:50% calc(var(--h,40px) * -1);
  animation:stz-tip var(--t,7s) var(--d,0s) cubic-bezier(.45,0,.55,1) infinite alternate}
.stz-drip-top{position:absolute;top:0;left:calc(var(--x) - var(--w,14px) * .5);width:calc(var(--w,14px) * 2);height:calc(var(--w,14px) * .9);
  border-radius:0 0 50% 50%;background:var(--slime-b)}
@keyframes stz-ooze{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
@keyframes stz-tip{from{transform:translateY(calc(var(--h,40px) * -.45)) scale(.9,.95)}to{transform:translateY(0) scale(1.08,1.15)}}
.stz-drop{position:absolute;left:var(--x);top:0;width:calc(var(--w,14px) * .75);height:calc(var(--w,14px) * .9);margin-left:calc(var(--w,14px) * .125);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 40% 35%,var(--slime-c),var(--slime-b) 65%,var(--slime-a));
  animation:stz-fall-drop var(--t,7s) var(--d,0s) ease-in infinite}
@keyframes stz-fall-drop{0%,70%{transform:translateY(calc(var(--h,40px) - 8px)) scaleY(1);opacity:0}72%{opacity:1}80%{transform:translateY(calc(var(--h,40px) + 20px)) scale(.85,1.35)}100%{transform:translateY(var(--fall,220px)) scale(.9,1.2);opacity:0}}
.stz-hw .stz-slime{height:55vh}

/* Restos tras cerrar: se quedan en la parte alta de la portada y se van con el scroll */
.stz-remnants{--hw-cream:#f6e7cf;
  position:absolute;left:0;width:100%;height:0;z-index:40;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity 1.2s ease .3s}
.stz-remnants.stz-on{opacity:1}
.stz-remnants .stz-web{width:min(170px,30vw);height:min(170px,30vw);opacity:.5}
.stz-remnants .stz-web--tr{width:min(120px,22vw);height:min(120px,22vw)}
.stz-remnants .stz-slime{height:160px;overflow:hidden}
.stz-remnants .stz-slime__band{top:-2px}
.stz-remnants .stz-spider2 svg{filter:drop-shadow(0 0 5px rgba(240,168,48,.4)) drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.stz-remnants .stz-thread{background:linear-gradient(rgba(246,231,207,.2),rgba(246,231,207,.75))}

/* Cartel colgante "Feliz Halloween" que queda tras cerrar la bienvenida */
.stz-sign{position:absolute;top:0;left:var(--sx,62%);z-index:3;transform-origin:50% 0;
  animation:stz-swing 4.8s ease-in-out infinite alternate;
  opacity:0;transition:opacity .8s ease 1s}
.stz-remnants.stz-on .stz-sign{opacity:1}
.stz-sign__ropes{position:relative;height:var(--rope,46px)}
.stz-sign__ropes::before,.stz-sign__ropes::after{content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(rgba(246,231,207,.25),rgba(246,231,207,.7))}
.stz-sign__ropes::before{left:18%;transform:rotate(8deg);transform-origin:top}
.stz-sign__ropes::after{right:18%;transform:rotate(-8deg);transform-origin:top}
.stz-sign__board{position:relative;padding:10px 22px 12px;border-radius:6px;white-space:nowrap;
  font-family:"STZ Creepster",fantasy;font-size:30px;line-height:1;letter-spacing:.03em;color:#f08a2c;
  text-shadow:0 0 10px rgba(240,138,44,.55),0 2px 0 #2a1208;
  background:
    repeating-linear-gradient(178deg,rgba(0,0,0,0) 0 7px,rgba(0,0,0,.12) 7px 8px),
    linear-gradient(180deg,#6b3f22,#4a2914 60%,#3a1f0f);
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,170,.25),inset 0 -2px 0 rgba(0,0,0,.35)}
.stz-sign__board::before,.stz-sign__board::after{content:"";position:absolute;top:6px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#c9a77a,#5b3a1c)}
.stz-sign__board::before{left:14%}
.stz-sign__board::after{right:14%}
.stz-sign__spider{position:absolute;right:-12px;bottom:-14px;width:24px;height:24px;transform:rotate(-20deg)}
.stz-sign__spider svg{width:100%;height:100%;filter:drop-shadow(0 0 4px rgba(240,168,48,.45))}
@keyframes stz-swing{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}

/* Partes con las que se puede interactuar */
.stz-remnants .stz-touch{pointer-events:auto;cursor:pointer}
.stz-remnants .stz-slime{pointer-events:none}
.stz-sign__board{transform-origin:50% 0;backface-visibility:hidden}
.stz-sign{perspective:400px}
.stz-mini-bat{position:absolute;width:40px;height:20px;z-index:41;pointer-events:none}
.stz-mini-bat svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 3px rgba(255,170,60,.8))}
.stz-mini-bat .stz-wings{transform-box:fill-box;transform-origin:50% 35%;animation:stz-flap .16s ease-in-out infinite alternate}
@keyframes stz-flap{from{transform:scaleY(1)}to{transform:scaleY(.3)}}

@media (max-width:767px){
  .stz-sign{left:auto;right:10px}
  .stz-sign__board{font-size:17px;padding:7px 14px 8px}
  .stz-sign__ropes{height:34px}
  .stz-hw__hint{margin-top:26px}
  .stz-remnants .stz-sp-b{display:none}
  .stz-remnants .stz-sp-a{left:30%!important}
}
@media (prefers-reduced-motion:reduce){
  .stz-hw *,.stz-remnants *{animation:none!important}
  .stz-hw__logo,.stz-hw__title,.stz-hw__hint,.stz-sign{opacity:1}
  .stz-hw{transition:opacity .3s}
  .stz-hw.stz-hw--out{clip-path:none;opacity:0}
}