/* ============================================================
   ХЭЛЛОУИН 2026 — сезонный слой поверх style.css + autumn.css.
   Подключается одной строкой в header.ejs и account.ejs (+ halloween.js
   в footer.ejs и account.ejs). ОТКАТ = убрать эти строки.
   Эффекты (DOM строит halloween.js): луна, туман, тлеющие искры, летучие
   мыши, паутина с пауком, гирлянда фонарей-тыкв под шапкой, призрак,
   далёкие зарницы, искры за курсором, вспышка по клику.
   ============================================================ */

:root{
  --gold:#ff9a3c; --gold2:#ffd2a1; --gold-deep:#d9631e;
  --ice:#b07bff;  --ice2:#d9c2ff;
  --violet:#9b5cff;
  --hw-orange:#ff8a1f; --hw-purple:#8f4dff; --hw-green:#8dff6a; --hw-blood:#c4202f;
}

/* ---------- фон: ночь с фиолетом и тыквенным заревом снизу ---------- */
.bg-fx{background:
  radial-gradient(55% 45% at 15% 0%,rgba(143,77,255,.20),transparent 60%),
  radial-gradient(45% 40% at 88% 6%,rgba(255,138,31,.10),transparent 60%),
  radial-gradient(80% 60% at 50% 115%,rgba(255,110,20,.20),transparent 62%),
  linear-gradient(180deg,#07050d,#0b0712 45%,#060409)!important}
.bg-grid{opacity:.28!important}

/* ---------- шапка: тлеющая кромка ---------- */
.topbar{border-bottom:1px solid rgba(255,138,31,.35)!important;
  box-shadow:0 1px 0 rgba(255,138,31,.15),0 8px 30px -12px rgba(255,110,20,.45)}
.brand .mark{background:radial-gradient(circle at 50% 60%,#ffb347,#e2620f 70%,#a63d06)!important;
  color:#2a0f00!important;box-shadow:0 0 18px rgba(255,138,31,.7),0 6px 20px rgba(255,110,20,.4)!important;
  animation:hwFlicker 4s infinite}
.nav a.link::after{background:linear-gradient(90deg,var(--hw-orange),var(--hw-purple))!important}
.nav a.link:hover{color:#ffc58a!important;text-shadow:0 0 12px rgba(255,138,31,.6)}

/* ---------- заголовки: тыква → фиолет ---------- */
.section-title,h1.section-title,.page-title{
  background:linear-gradient(180deg,#fff3e0 0%,#ffb35c 45%,#c06bff 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  filter:drop-shadow(0 0 18px rgba(255,120,30,.25))}
.eyebrow{color:#c49bff!important;text-shadow:0 0 10px rgba(143,77,255,.5)}

/* ---------- кнопки ---------- */
.btn:not(.ghost):not(.ice):not(.violet){
  background:linear-gradient(135deg,#ffb04d,#ff7a1a 55%,#d4520c)!important;color:#2a0f00!important;
  box-shadow:0 10px 30px rgba(255,110,20,.35),inset 0 0 0 1px rgba(255,220,170,.25)!important}
.btn:not(.ghost):not(.ice):not(.violet):hover{box-shadow:0 0 26px rgba(255,138,31,.75),0 16px 40px rgba(255,90,10,.45)!important}
.btn.ghost:hover{border-color:var(--hw-orange)!important;background:rgba(255,138,31,.10)!important;box-shadow:0 0 18px rgba(255,138,31,.35)}

/* ---------- панели и карточки: свечение свечи при наведении ---------- */
.card,.panel,.lk-sec,.shop-main [class*="card"],.shop-main [class*="item"]{
  transition:box-shadow .3s,border-color .3s,transform .3s}
.card:hover,.panel:hover,.shop-main [class*="card"]:hover{
  border-color:rgba(255,138,31,.55)!important;
  box-shadow:0 0 0 1px rgba(255,138,31,.25),0 0 28px rgba(255,120,30,.28),0 0 60px -10px rgba(143,77,255,.35)!important}
.shop-hero,.lk-head,.hero:not(.sky){position:relative}
.shop-hero::after,.lk-head::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;
  background:linear-gradient(0deg,rgba(255,110,20,.10),transparent);border-radius:inherit}

/* ---------- скролл и выделение ---------- */
::selection{background:rgba(255,138,31,.45);color:#fff}
html{scrollbar-color:#d9631e #0b0712}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0b0712}
::-webkit-scrollbar-thumb{background:linear-gradient(#ff9a3c,#8f4dff);border-radius:8px;border:2px solid #0b0712}

/* ---------- герой главной ---------- */
.hero.sky .sky-ring{border-color:rgba(255,138,31,.55)!important;
  box-shadow:inset 0 0 90px rgba(143,77,255,.25),0 0 120px rgba(255,120,30,.22)!important}
.hero.sky .sky-wm,.hero.sky h1{text-shadow:0 0 40px rgba(255,120,30,.35)}

/* ============================================================
   ЭФФЕКТЫ
   ============================================================ */
.hw-back,.hw-front{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.hw-back{z-index:-1}
.hw-front{z-index:45}

/* луна */
.hw-moon{position:absolute;top:96px;right:6vw;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#fff6dc,#ffd9a0 45%,#e8964a 80%,#b9652a);
  box-shadow:0 0 60px 18px rgba(255,170,80,.35),0 0 180px 60px rgba(255,120,30,.18);opacity:.85;
  animation:hwMoon 9s ease-in-out infinite}
.hw-moon::before,.hw-moon::after{content:"";position:absolute;border-radius:50%;background:rgba(170,90,40,.28)}
.hw-moon::before{width:34px;height:28px;left:30%;top:46%}
.hw-moon::after{width:18px;height:18px;left:60%;top:28%}
.hw-moon i{position:absolute;inset:-30%;border-radius:50%;
  background:radial-gradient(circle,transparent 55%,rgba(255,140,40,.08) 60%,transparent 72%)}

/* туман */
.hw-fog{position:absolute;left:-50%;width:200%;bottom:-6vh;height:42vh;opacity:.55;
  background:
    radial-gradient(28% 55% at 15% 70%,rgba(190,170,255,.16),transparent 70%),
    radial-gradient(30% 60% at 45% 80%,rgba(255,170,120,.10),transparent 70%),
    radial-gradient(26% 50% at 75% 75%,rgba(190,170,255,.14),transparent 70%),
    radial-gradient(32% 60% at 95% 85%,rgba(160,140,230,.12),transparent 70%);
  filter:blur(8px);animation:hwFog 60s linear infinite}
.hw-fog.f2{bottom:-12vh;height:36vh;opacity:.4;animation-duration:95s;animation-direction:reverse}

/* тлеющие искры */
.hw-ember{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;
  background:var(--c,#ff9a3c);box-shadow:0 0 10px 3px var(--c,#ff9a3c);opacity:0;
  animation:hwEmber var(--dur,14s) linear var(--d,0s) infinite}

/* зарница */
.hw-flash{position:absolute;inset:0;background:radial-gradient(70% 50% at var(--fx,30%) 0%,rgba(200,180,255,.55),transparent 70%);opacity:0}
.hw-flash.go{animation:hwFlash 1.1s ease-out}

/* летучие мыши */
.hw-bat{position:absolute;left:0;top:0;width:var(--s,46px);
  animation:hwBatFly var(--dur,9s) linear forwards;filter:drop-shadow(0 0 6px rgba(255,120,30,.35))}
.hw-bat.rtl{animation-name:hwBatFlyR}
.hw-bat svg{display:block;width:100%;animation:hwFlap .18s ease-in-out infinite alternate;transform-origin:50% 50%}

/* паутина + паук */
.hw-web{position:absolute;top:74px;width:170px;height:170px;opacity:.38}
.hw-web.l{left:0}.hw-web.r{right:0;transform:scaleX(-1)}
.hw-spider{position:absolute;top:74px;left:118px;width:2px;transform-origin:top;animation:hwSpider 7s ease-in-out infinite}
.hw-spider b{position:absolute;left:0;top:0;width:1px;height:100%;background:linear-gradient(rgba(220,220,240,.15),rgba(220,220,240,.55))}
.hw-spider svg{position:absolute;bottom:-20px;left:-14px;width:30px}

/* гирлянда фонарей-тыкв под шапкой */
.hw-garland{position:absolute;left:0;right:0;top:100%;height:70px;pointer-events:none;z-index:-1;transition:opacity .4s,transform .4s}
.hw-garland.hw-hide{opacity:0;transform:translateY(-14px)}
.hw-garland svg.rope{position:absolute;inset:0;width:100%;height:40px}
.hw-lan{position:absolute;top:0;width:26px;transform-origin:50% 0;animation:hwSway 3.4s ease-in-out infinite}
.hw-lan svg{display:block;width:100%;filter:drop-shadow(0 0 8px rgba(255,140,30,.85))}
.hw-lan .glow{animation:hwFlicker 2.6s infinite}

/* призрак */
.hw-ghost{position:absolute;width:70px;opacity:0;animation:hwGhost 16s ease-in-out forwards}
.hw-ghost svg{width:100%;animation:hwBob 2.2s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(200,190,255,.6))}

/* искры курсора и клика */
.hw-spark{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--c);box-shadow:0 0 8px 2px var(--c);animation:hwSpark .8s ease-out forwards}
.hw-pop{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--c);box-shadow:0 0 12px 3px var(--c);animation:hwPop .9s cubic-bezier(.2,.7,.3,1) forwards}

/* ---------- keyframes ---------- */
@keyframes hwFlicker{0%,100%{opacity:1}42%{opacity:1}44%{opacity:.6}46%{opacity:1}70%{opacity:.85}72%{opacity:1}}
@keyframes hwMoon{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes hwFog{from{transform:translateX(0)}to{transform:translateX(25%)}}
@keyframes hwEmber{
  0%{transform:translate(0,0) scale(1);opacity:0}
  10%{opacity:.9}
  50%{transform:translate(28px,-50vh) scale(.8)}
  85%{opacity:.6}
  100%{transform:translate(-18px,-100vh) scale(.3);opacity:0}}
@keyframes hwFlash{0%{opacity:0}8%{opacity:.9}16%{opacity:.1}24%{opacity:.6}100%{opacity:0}}
@keyframes hwFlap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
@keyframes hwBatFly{
  0%{transform:translate(-80px,var(--y0)) rotate(4deg)}
  25%{transform:translate(25vw,calc(var(--y0) - 40px)) rotate(-6deg)}
  50%{transform:translate(50vw,calc(var(--y0) + 30px)) rotate(5deg)}
  75%{transform:translate(75vw,calc(var(--y0) - 30px)) rotate(-4deg)}
  100%{transform:translate(calc(100vw + 80px),var(--y1)) rotate(3deg)}}
@keyframes hwBatFlyR{
  0%{transform:translate(calc(100vw + 80px),var(--y0)) scaleX(-1)}
  25%{transform:translate(75vw,calc(var(--y0) + 35px)) scaleX(-1)}
  50%{transform:translate(50vw,calc(var(--y0) - 35px)) scaleX(-1)}
  75%{transform:translate(25vw,calc(var(--y0) + 25px)) scaleX(-1)}
  100%{transform:translate(-80px,var(--y1)) scaleX(-1)}}
@keyframes hwSpider{0%,100%{height:60px}45%{height:150px}55%{height:140px}}
@keyframes hwSway{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
@keyframes hwGhost{
  0%{transform:translate(var(--gx0),var(--gy)) ;opacity:0}
  15%{opacity:.55}
  85%{opacity:.55}
  100%{transform:translate(var(--gx1),calc(var(--gy) - 60px));opacity:0}}
@keyframes hwBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes hwSpark{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes hwPop{from{transform:translate(0,0) scale(1.2);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ---------- адаптив и доступность ---------- */
@media(max-width:1300px){.hw-web,.hw-spider{display:none}}
@media(max-width:900px){.hw-garland{display:none}.hw-moon{width:90px;height:90px;top:84px;right:12px}.hw-ember:nth-child(even){display:none}}
@media(prefers-reduced-motion:reduce){
  .hw-front,.hw-ember,.hw-flash,.hw-garland{display:none!important}
  .hw-fog,.hw-moon,.brand .mark{animation:none!important}
}