/* ===== Halloween theme — подключается ПОСЛЕ styles.css. Включается классом .hw на <html> ===== */

/* ---------- Перекраска акцентов (фиолетовый → оранжевый) ---------- */
:where(.hw) ::-webkit-scrollbar-thumb { background: rgba(255,122,26,.4); }
:where(.hw) ::selection { background: rgba(255,122,26,.4); color: #fff4e8; }
:where(.hw) :focus-visible { outline-color: rgba(255,179,107,.8); }

:where(.hw) .bg { filter: brightness(.6) contrast(1.1) saturate(.9) hue-rotate(-12deg); }

:where(.hw) .card {
  border-color: rgba(255,122,26,.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 25px 50px -12px rgba(0,0,0,.65),
              0 0 70px rgba(255,122,26,.16), 0 0 120px rgba(124,58,237,.1);
}
:where(.hw) .card:hover {
  border-color: rgba(255,179,107,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 25px 50px -12px rgba(0,0,0,.7),
              0 0 90px rgba(255,122,26,.26), 0 0 140px rgba(124,58,237,.14);
}
:where(.hw) .card::before,
:where(.hw) .card::after {
  background: linear-gradient(90deg, #ff7a1a, #7c3aed, #ff7a1a);
  background-size: 200% 100%;
}
:where(.hw) .col-identity::before { background: radial-gradient(ellipse at center, rgba(255,122,26,.22), transparent 70%); }

:where(.hw) .avatar {
  border-color: rgba(255,179,107,.8);
  box-shadow: 0 0 0 4px rgba(13,13,13,.9), 0 0 32px rgba(255,122,26,.5), 0 0 70px rgba(255,122,26,.22);
}
:where(.hw) .avatar::after { border-color: rgba(255,122,26,.55); }

:where(.hw) .col-identity h1 {
  background: linear-gradient(90deg, #ffe0c2, #ffb36b 45%, #ff7a1a);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 18px rgba(255,122,26,.45));
  animation: hwFlicker 5s infinite;
}

:where(.hw) .status { background: rgba(255,122,26,.12); border-color: rgba(255,122,26,.4); color: #ffb36b; }
:where(.hw) .status::before { background: #ff7a1a; box-shadow: 0 0 8px #ff7a1a; }

:where(.hw) .block h2 { color: #ff7a1a; }
:where(.hw) .block h2::before { background: linear-gradient(90deg, #ff7a1a, transparent); }

:where(.hw) .project-link { color: #ffb36b; border-bottom-color: rgba(255,122,26,.4); }
:where(.hw) .project-link:hover { color: #ffe0c2; border-bottom-color: #ffb36b; background: rgba(255,122,26,.1); }

/* общий hover ссылок; у YouTube/GitHub/Discord/Telegram/Skype/Roblox остаются фирменные цвета */
:where(.hw) .links a:not([href*="youtube"]):not([href*="github"]):not([href*="discord"]):not([href*="t.me"]):not(.skype-link):not(.roblox-link):hover {
  background: rgba(255,122,26,.16); border-color: rgba(255,122,26,.5); color: #ffb36b;
}

:where(.hw) .lang-btn:hover { border-color: rgba(255,122,26,.5); color: #ffb36b; }
:where(.hw) .lang-btn.active { background: rgba(255,122,26,.16); border-color: rgba(255,122,26,.55); color: #ffb36b; }

:where(.hw) .modal-content { border-color: rgba(255,122,26,.35); }
:where(.hw) .modal-title { color: #ffb36b; }
:where(.hw) .close-btn:hover { color: #ffb36b; }
:where(.hw) .friend-card:hover { border-color: rgba(255,122,26,.5); background: rgba(255,122,26,.09); }

@keyframes hwFlicker {
  0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .75; } 94% { opacity: 1; } 96% { opacity: .85; } 97% { opacity: 1; }
}

/* ---------- Декор: скрыт, пока нет .hw ---------- */
.hw-decor { display: none; pointer-events: none; }
.hw .hw-decor { display: block; }

/* тёплый подсвет + туман */
.hw-tint {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255,122,26,.28), transparent 60%),
    radial-gradient(ellipse at 90% -10%, rgba(124,58,237,.18), transparent 55%);
}
.hw-fog {
  position: fixed; left: -10%; right: -10%; bottom: -30px; height: 220px; z-index: -1; opacity: .55;
  background:
    radial-gradient(ellipse 260px 70px at 10% 70%, rgba(220,210,255,.28), transparent 70%),
    radial-gradient(ellipse 320px 80px at 40% 85%, rgba(220,210,255,.22), transparent 70%),
    radial-gradient(ellipse 280px 70px at 70% 65%, rgba(255,220,190,.2), transparent 70%),
    radial-gradient(ellipse 340px 90px at 95% 85%, rgba(220,210,255,.24), transparent 70%);
  filter: blur(8px);
  animation: hwFog 40s linear infinite alternate;
}
.hw-fog.b { bottom: -60px; opacity: .4; animation-duration: 60s; animation-direction: alternate-reverse; transform: scaleX(-1); }
@keyframes hwFog { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* луна */
.hw-moon {
  position: fixed; top: 4vh; right: 5vw; width: 92px; height: 92px; border-radius: 50%; z-index: -1; opacity: .9;
  background:
    radial-gradient(circle at 30% 35%, rgba(190,160,90,.5) 0 8%, transparent 9%),
    radial-gradient(circle at 62% 60%, rgba(190,160,90,.45) 0 11%, transparent 12%),
    radial-gradient(circle at 70% 25%, rgba(190,160,90,.4) 0 6%, transparent 7%),
    radial-gradient(circle at 35% 35%, #fff7d6, #f3d98a 60%, #d9b45a);
  box-shadow: 0 0 50px 14px rgba(255,205,100,.28), 0 0 160px 50px rgba(255,160,60,.14);
  animation: hwMoon 8s ease-in-out infinite;
}
@keyframes hwMoon { 50% { box-shadow: 0 0 60px 20px rgba(255,205,100,.38), 0 0 180px 60px rgba(255,160,60,.2); } }

/* тыквы */
.hw-pumpkin { position: fixed; bottom: -4px; z-index: -1; width: clamp(90px, 13vw, 170px); }
.hw-pumpkin.l { left: 2vw; transform: rotate(-4deg); }
.hw-pumpkin.r { right: 2vw; width: clamp(70px, 10vw, 130px); transform: rotate(5deg) scaleX(-1); }
.hw-pumpkin .face { fill: #ffd24a; filter: drop-shadow(0 0 6px #ffb020) drop-shadow(0 0 16px #ff7a1a); animation: hwCandle 2.6s infinite; }
.hw-pumpkin.r .face { animation-delay: -1.3s; }
@keyframes hwCandle {
  0%, 100% { opacity: 1; } 20% { opacity: .82; } 35% { opacity: 1; } 55% { opacity: .7; } 70% { opacity: .95; } 85% { opacity: .8; }
}

/* паутина в углах карточки */
.hw-web { position: absolute; z-index: 3; width: 120px; height: 120px; color: rgba(255,255,255,.4); }
.hw-web.tl { top: 0; left: 0; }
.hw-web.tr { top: 0; right: 0; transform: scaleX(-1); }
.hw-web.bl { bottom: 0; left: 0; transform: scaleY(-1); width: 90px; height: 90px; color: rgba(255,255,255,.28); }
.hw-web.br { bottom: 0; right: 0; transform: scale(-1, -1); width: 90px; height: 90px; color: rgba(255,255,255,.28); }

/* пауки на нитях */
.hw-spider { position: fixed; top: 0; z-index: 3; width: 44px; transform-origin: 50% 0; animation: hwSway 4.5s ease-in-out infinite; }
.hw-spider .thread { display: block; width: 1px; margin: 0 auto; background: rgba(255,255,255,.5); height: var(--len, 120px); animation: hwDrop 7s ease-in-out infinite; transform-origin: top; }
.hw-spider svg { display: block; width: 44px; height: 44px; margin-top: -4px; animation: hwDropBody 7s ease-in-out infinite; }
.hw-spider.s1 { left: 9%; --len: 110px; }
.hw-spider.s2 { right: 12%; --len: 70px; animation-duration: 5.5s; animation-delay: -2s; }
.hw-spider.s2 .thread, .hw-spider.s2 svg { animation-delay: -3s; }
@keyframes hwSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes hwDrop { 0%, 100% { transform: scaleY(.65); } 50% { transform: scaleY(1); } }
@keyframes hwDropBody { 0%, 100% { transform: translateY(calc(var(--len, 120px) * -.35)); } 50% { transform: translateY(0); } }

/* летучие мыши */
.hw-bat { position: fixed; left: 0; z-index: 4; width: 54px; opacity: .9; animation: hwBatX var(--dur, 12s) linear forwards; }
.hw-bat > svg { display: block; width: 100%; animation: hwBatY 1.6s ease-in-out infinite; }
.hw-bat path { fill: #0d0d0d; stroke: rgba(255,122,26,.55); stroke-width: 1; }
.hw-bat .wings { transform-origin: 50% 50%; animation: hwFlap .22s ease-in-out infinite alternate; }
@keyframes hwBatX { from { transform: translateX(-120px); } to { transform: translateX(calc(100vw + 120px)); } }
.hw-bat.rtl { animation-name: hwBatXr; left: auto; right: 0; }
@keyframes hwBatXr { from { transform: translateX(120px) scaleX(-1); } to { transform: translateX(calc(-100vw - 120px)) scaleX(-1); } }
@keyframes hwBatY { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-26px) rotate(4deg); } }
@keyframes hwFlap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* призраки */
.hw-ghost { position: fixed; bottom: -70px; z-index: -1; width: 44px; opacity: 0; animation: hwGhost var(--dur, 26s) linear infinite; animation-delay: var(--delay, 0s); }
.hw-ghost svg { display: block; width: 100%; filter: drop-shadow(0 0 10px rgba(255,255,255,.5)); }
@keyframes hwGhost {
  0% { transform: translate(0, 0) rotate(-6deg); opacity: 0; }
  10% { opacity: .38; }
  50% { transform: translate(40px, -55vh) rotate(6deg); }
  90% { opacity: .3; }
  100% { transform: translate(-20px, -110vh) rotate(-6deg); opacity: 0; }
}

/* тыква-бейдж на аватарке */
.hw-avatar-wrap { position: relative; width: 80px; margin: 0 auto; }
.hw-avatar-wrap .avatar { margin-bottom: 12px; }
.hw-badge { position: absolute; right: -6px; bottom: -4px; font-size: 22px; line-height: 1; z-index: 2; filter: drop-shadow(0 0 8px rgba(255,122,26,.8)); animation: hwBob 2.4s ease-in-out infinite; }
@keyframes hwBob { 50% { transform: translateY(-3px) rotate(8deg); } }

/* кнопка вкл/выкл */
.hw-toggle {
  position: fixed; top: 14px; left: 14px; z-index: 20; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(13,13,13,.8); border: 1px solid rgba(255,122,26,.45); font-size: 18px; cursor: pointer;
  display: grid; place-items: center; transition: transform .2s, opacity .2s, box-shadow .2s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hw-toggle:hover { transform: scale(1.1) rotate(-8deg); box-shadow: 0 0 16px rgba(255,122,26,.5); }
html:not(.hw) .hw-toggle { opacity: .55; filter: grayscale(1); border-color: rgba(255,255,255,.2); }

@media (max-width: 700px) {
  .hw-spider { display: none !important; }
  .hw-moon { width: 56px; height: 56px; top: 2vh; }
  .hw-web.tl, .hw-web.tr { width: 84px; height: 84px; }
  .hw-bat { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-decor, .hw-decor *, .hw-badge, .hw .col-identity h1 { animation: none !important; }
  .hw-bat, .hw-ghost { display: none !important; }
}