/* =====================================================================
   WWT — «Жуткий месяц» (Хэллоуин) + прелоадер сообщества.
   Тема включается классом html.spooky (по дате, см. скрипт в <head>),
   прелоадер — классом html.pre (один раз за визит).
   Удалить тему: убрать подключение этого файла и spooky.js из index.html.
   ===================================================================== */

/* ---------- прелоадер (работает и вне сезона) ---------- */
#wwt-pre{display:none}
html.pre #wwt-pre{
  display:grid;place-items:center;position:fixed;inset:0;z-index:9999;overflow:hidden;
  background:radial-gradient(900px 600px at 50% 38%,#1a1236 0%,#0a0814 55%,#05040a 100%);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),visibility .7s,filter .7s;
}
html.pre.pre-done #wwt-pre{opacity:0;visibility:hidden;filter:blur(8px)}
html.pre body{overflow:hidden}
html.pre.pre-done body{overflow:auto}
.pre-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding:24px}
.pre-logo{position:relative;width:132px;height:132px;margin:34px 0 26px}
.pre-logo svg.hex{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 26px rgba(124,92,255,.65))}
.pre-logo .hex-body{fill:url(#preGradCalm)}
.pre-logo .hex-w{fill:none;stroke:#fff;stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:80;stroke-dashoffset:80;animation:preDraw 1.1s .15s cubic-bezier(.65,0,.35,1) forwards}
.pre-logo .stem{display:none}
.pre-ring{position:absolute;inset:-26px;border-radius:50%;border:2px solid rgba(124,92,255,.25);border-top-color:#26d9ff;animation:preSpin 1.1s linear infinite}
.pre-bats{display:none}
.pre-name{font:800 1.5rem/1.1 'Segoe UI',system-ui,sans-serif;letter-spacing:.5px;color:#eef0ff}
.pre-name b{background:linear-gradient(120deg,#7c5cff,#26d9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pre-sub{font-size:.95rem;color:#9aa0c0;margin-top:-12px;min-height:1.3em}
.pre-bar{width:min(260px,70vw);height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.pre-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;background:linear-gradient(90deg,#7c5cff,#26d9ff);
  box-shadow:0 0 14px rgba(38,217,255,.6);transition:width .35s ease}
.pre-skip{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:none;border:0;color:#6b7095;font:600 .85rem 'Segoe UI',sans-serif;cursor:pointer;padding:8px 14px;border-radius:10px}
.pre-skip:hover{color:#eef0ff;background:rgba(255,255,255,.06)}
@keyframes preDraw{to{stroke-dashoffset:0}}
@keyframes preSpin{to{transform:rotate(360deg)}}

/* хэллоуинский вид прелоадера */
html.spooky.pre #wwt-pre{background:radial-gradient(800px 560px at 50% 36%,#2a1206 0%,#120712 52%,#050308 100%)}
html.spooky #wwt-pre .pre-logo svg.hex{filter:drop-shadow(0 0 30px rgba(255,122,24,.75)) drop-shadow(0 0 60px rgba(255,90,0,.35))}
html.spooky #wwt-pre .hex-body{fill:url(#preGradPumpkin)}
html.spooky #wwt-pre .hex-w{stroke:#ffe08a;filter:drop-shadow(0 0 6px #ffb347);animation:preDraw 1.1s .15s cubic-bezier(.65,0,.35,1) forwards,flicker 2.4s 1.3s infinite}
html.spooky #wwt-pre .stem{display:block;fill:#3d8b2f}
html.spooky #wwt-pre .pre-ring{border-color:rgba(255,122,24,.18);border-top-color:#ff7a18;border-right-color:#b13cff}
html.spooky #wwt-pre .pre-bats{display:block;position:absolute;inset:-64px;animation:preSpin 6s linear infinite}
html.spooky #wwt-pre .pre-bats svg{position:absolute;width:46px;height:23px;fill:#2a1424;filter:drop-shadow(0 0 6px rgba(255,140,40,.85))}
html.spooky #wwt-pre .pre-bats svg:nth-child(1){top:0;left:50%;animation:flap .32s ease-in-out infinite alternate}
html.spooky #wwt-pre .pre-bats svg:nth-child(2){bottom:12%;left:4%;animation:flap .28s .1s ease-in-out infinite alternate}
html.spooky #wwt-pre .pre-bats svg:nth-child(3){bottom:12%;right:4%;animation:flap .3s .2s ease-in-out infinite alternate}
html.spooky #wwt-pre .pre-name b{background:linear-gradient(120deg,#ff7a18,#ffb347 45%,#b13cff);-webkit-background-clip:text;background-clip:text;color:transparent}
html.spooky #wwt-pre .pre-sub{font-family:'Rubik Wet Paint','Segoe UI',cursive;font-size:1.35rem;letter-spacing:.5px;color:#ff9a3c;text-shadow:0 0 14px rgba(255,122,24,.55)}
html.spooky #wwt-pre .pre-bar i{background:linear-gradient(90deg,#ff7a18,#b13cff);box-shadow:0 0 16px rgba(255,122,24,.7)}
.pre-web{display:none}
html.spooky #wwt-pre .pre-web{display:block;position:absolute;top:0;left:0;width:min(34vw,240px);opacity:.35}
html.spooky #wwt-pre .pre-web.r{left:auto;right:0;transform:scaleX(-1)}
.pre-spider{display:none}
html.spooky #wwt-pre .pre-spider{display:block;position:absolute;top:0;left:72%;width:2px;height:22vh;background:linear-gradient(#fff3,#fff6);
  transform-origin:top;animation:spiderDrop 2.6s cubic-bezier(.45,0,.2,1) infinite alternate}
html.spooky #wwt-pre .pre-spider::after{content:"";position:absolute;bottom:-14px;left:-9px;width:20px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cg stroke='%23120a14' stroke-width='2.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M14 14 4 6M14 18 2 18M14 22 4 30M26 14l10-8M26 18h12M26 22l10 8'/%3E%3C/g%3E%3Cellipse cx='20' cy='18' rx='8' ry='9' fill='%23120a14'/%3E%3Ccircle cx='17' cy='15' r='1.6' fill='%23ff7a18'/%3E%3Ccircle cx='23' cy='15' r='1.6' fill='%23ff7a18'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes spiderDrop{0%{transform:scaleY(.55)}100%{transform:scaleY(1)}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
@keyframes flicker{0%,100%{opacity:1}8%{opacity:.75}12%{opacity:1}46%{opacity:.88}50%{opacity:.6}54%{opacity:1}}

/* =====================================================================
   ТЕМА «ЖУТКИЙ МЕСЯЦ»
   ===================================================================== */
html.spooky{
  --bg:#07050b;
  --bg-2:#0e0912;
  --card:rgba(255,236,220,.035);
  --card-brd:rgba(255,170,90,.12);
  --txt:#f6efe8;
  --muted:#b3a3a6;
  --violet:#b13cff;
  --cyan:#ffa94d;
  --magenta:#ff5e3a;
  --grad:linear-gradient(120deg,#ff7a18 0%,#ffb347 40%,#b13cff 100%);
  --grad-2:linear-gradient(120deg,#ff5e3a 0%,#b13cff 100%);
}
html.spooky body{background:var(--bg)}
html.spooky ::selection{background:#ff7a18;color:#120a14}

/* фон: вместо фиолетовой сетки — свой холст с искрами и мышами, туман, луна */
html.spooky #bg-canvas{display:none}
html.spooky .glow.g1{background:#ff5a00;opacity:.32}
html.spooky .glow.g2{background:#5b12b8;opacity:.42}
html.spooky .glow.g3{background:#2bdc6c;opacity:.10}
#spooky-canvas{position:fixed;inset:0;z-index:1;pointer-events:none}
.spooky-fog{position:fixed;left:-20%;right:-20%;bottom:-8vh;height:46vh;z-index:1;pointer-events:none;opacity:.55;
  background:
    radial-gradient(40% 60% at 20% 70%,rgba(190,170,210,.16),transparent 70%),
    radial-gradient(35% 55% at 55% 80%,rgba(200,180,220,.13),transparent 70%),
    radial-gradient(45% 60% at 85% 75%,rgba(180,160,200,.15),transparent 70%);
  filter:blur(18px);animation:fogDrift 26s ease-in-out infinite alternate}
.spooky-fog.f2{bottom:-14vh;opacity:.4;animation-duration:38s;animation-direction:alternate-reverse}
@keyframes fogDrift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}

/* шапка */
html.spooky header.scrolled{background:rgba(9,6,12,.78);border-bottom-color:rgba(255,140,60,.15)}
html.spooky .logo .mark{box-shadow:0 6px 22px rgba(255,122,24,.55)}
html.spooky .logo .mark::after{content:"";position:absolute;width:10px;height:7px;margin:-24px 0 0 2px;border-radius:4px 4px 1px 1px;background:#3d8b2f;transform:rotate(-14deg)}
html.spooky .logo .mark{position:relative}
html.spooky .btn-primary{box-shadow:0 8px 26px rgba(255,122,24,.38);color:#1a0d06}
html.spooky .btn-primary svg path{stroke:#1a0d06}
html.spooky .btn-primary:hover{box-shadow:0 14px 36px rgba(255,122,24,.55)}
html.spooky .nav-links a::after{background:var(--grad)}
html.spooky .more-menu{background:#140c14}

/* герой */
html.spooky .hero{overflow:hidden}
.spooky-moon{display:none}
html.spooky .spooky-moon{display:block;position:absolute;z-index:0;top:14vh;right:max(4vw,calc(50% - 600px));width:clamp(160px,24vw,330px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 34%,#fff6dc 0%,#ffe2a6 35%,#f0b65a 62%,#c97a2a 100%);
  box-shadow:0 0 70px 18px rgba(255,190,90,.28),0 0 180px 60px rgba(255,120,30,.16);opacity:.92}
html.spooky .spooky-moon::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 62% 58%,rgba(160,90,30,.35) 0 9%,transparent 10%),radial-gradient(circle at 30% 64%,rgba(160,90,30,.25) 0 6%,transparent 7%),radial-gradient(circle at 70% 28%,rgba(160,90,30,.22) 0 5%,transparent 6%)}
html.spooky .spooky-moon svg{position:absolute;width:34%;left:-6%;top:58%;fill:#0b0710;animation:batHover 3.2s ease-in-out infinite}
@keyframes batHover{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(10px,-12px) rotate(4deg)}}
html.spooky .hero .wrap{z-index:2}
html.spooky .hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,122,24,.35))}
.spooky-tag{display:none}
html.spooky .spooky-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px 12px;padding:8px 16px;border-radius:100px;vertical-align:top;
  font-family:'Rubik Wet Paint','Segoe UI',cursive;font-size:1.05rem;letter-spacing:.5px;color:#ffb347;
  background:linear-gradient(120deg,rgba(255,122,24,.16),rgba(177,60,255,.14));border:1px solid rgba(255,140,60,.35);text-shadow:0 0 12px rgba(255,122,24,.5)}
html.spooky .spooky-tag .pk{font-size:1.1rem;animation:flicker 3s infinite}
.spooky-pumpkins{display:none}
html.spooky .spooky-pumpkins{display:block;position:absolute;z-index:1;bottom:2vh;left:0;right:0;height:0;pointer-events:none}
html.spooky .spooky-pumpkins svg{position:absolute;bottom:0;filter:drop-shadow(0 0 22px rgba(255,120,20,.45))}
html.spooky .spooky-pumpkins .p1{right:max(3vw,calc(50% - 590px));width:clamp(84px,11vw,140px)}
html.spooky .spooky-pumpkins .p2{right:calc(max(3vw,calc(50% - 590px)) + clamp(76px,10vw,128px));width:clamp(54px,7vw,88px);transform:rotate(-8deg)}
html.spooky .spooky-pumpkins .glow-face{animation:flicker 2.6s infinite}
html.spooky .spooky-pumpkins .p2 .glow-face{animation-delay:-1.3s}
.spooky-web,.spooky-spider{display:none}
html.spooky .spooky-web{display:block;position:absolute;top:72px;left:0;width:clamp(120px,16vw,220px);opacity:.28;z-index:1;pointer-events:none}
html.spooky .spooky-spider{display:block;position:absolute;top:72px;right:16%;width:1px;height:150px;background:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.35));z-index:3;
  transform-origin:top;animation:spiderBob 4.5s ease-in-out infinite;cursor:pointer;pointer-events:auto}
html.spooky .spooky-spider::after{content:"";position:absolute;bottom:-17px;left:-12px;width:25px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cg stroke='%23d8c7b8' stroke-width='2.2' fill='none' stroke-linecap='round'%3E%3Cpath d='M14 14 4 6M14 18 2 18M14 22 4 30M26 14l10-8M26 18h12M26 22l10 8'/%3E%3C/g%3E%3Cellipse cx='20' cy='18' rx='8' ry='9' fill='%23120a14' stroke='%23d8c7b8' stroke-width='1.4'/%3E%3Ccircle cx='17' cy='15' r='1.8' fill='%23ff7a18'/%3E%3Ccircle cx='23' cy='15' r='1.8' fill='%23ff7a18'/%3E%3C/svg%3E") center/contain no-repeat}
html.spooky .spooky-spider.drop{animation:spiderFall .9s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes spiderBob{0%,100%{transform:scaleY(.8)}50%{transform:scaleY(1)}}
@keyframes spiderFall{from{transform:scaleY(1)}to{transform:scaleY(2.6)}}

/* секции */
html.spooky .sec-tag{color:#ffa94d;text-shadow:0 0 14px rgba(255,122,24,.35)}
html.spooky .sec-tag::before{content:"🦇 ";letter-spacing:0}
html.spooky .stat:hover,html.spooky .member:hover,html.spooky .soc-card:hover{border-color:rgba(255,140,60,.5)}
html.spooky .feat .ic{background:linear-gradient(135deg,rgba(255,122,24,.22),rgba(177,60,255,.2))}
html.spooky .feat .ic svg [stroke="#26d9ff"]{stroke:#ffb347}
html.spooky .feat .ic svg [stroke="#7c5cff"]{stroke:#c26bff}
html.spooky .feat:hover{box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,140,60,.35),0 0 40px rgba(255,100,20,.12)}
html.spooky .stat .num{filter:drop-shadow(0 0 14px rgba(255,122,24,.3))}
html.spooky .rate-row.top1 .rate-ava{background:linear-gradient(135deg,#ff9a3c,#ff5e3a)}
html.spooky .live .chip .dot,html.spooky .badge .dot{background:#ff8a2a;box-shadow:0 0 12px #ff7a18}
html.spooky .badge.live-badge:hover{border-color:#ff8a2a}
html.spooky .member .role.founder{color:#ffd0a3;background:rgba(255,122,24,.14);border-color:rgba(255,140,60,.38)}
html.spooky .member .role.mod{color:#e2b8ff;background:rgba(177,60,255,.14);border-color:rgba(177,60,255,.36)}
html.spooky .cta-band{background:linear-gradient(120deg,rgba(255,122,24,.16),rgba(177,60,255,.16));border-color:rgba(255,140,60,.25)}
html.spooky .tstep a.lnk{color:#ffa94d;border-bottom-color:rgba(255,169,77,.5)}
html.spooky footer{border-top-color:rgba(255,140,60,.15)}
html.spooky .foot-soc a:hover{border-color:#ff8a2a}
.spooky-foot{display:none}
html.spooky .spooky-foot{display:block;margin-top:8px;font-family:'Rubik Wet Paint','Segoe UI',cursive;letter-spacing:.5px;color:#ff9a3c;font-size:1rem}

/* «конфетки» при клике по тыкве */
.spooky-candy{position:fixed;z-index:60;pointer-events:none;font-size:22px;animation:candy 1.1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes candy{from{transform:translate(0,0) scale(.6);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1);opacity:0}}

@media(max-width:900px){
  html.spooky .spooky-moon{top:12vh;right:-40px;width:180px;opacity:.55}
  html.spooky .spooky-spider{right:10%;height:110px}
  html.spooky .spooky-tag{margin-left:0}
}
@media(max-width:600px){
  html.spooky .spooky-pumpkins .p1{width:70px;right:14px}
  html.spooky .spooky-pumpkins .p2{width:46px;right:78px}
  html.spooky .spooky-web{width:110px;top:64px}
}
@media(prefers-reduced-motion:reduce){
  #wwt-pre *,html.spooky .spooky-fog,html.spooky .spooky-moon svg,html.spooky .spooky-spider,html.spooky .spooky-pumpkins .glow-face,html.spooky .spooky-tag .pk{animation:none!important}
  .pre-logo .hex-w{stroke-dashoffset:0}
}