/* ==========================================================================
   Vertex — Halloween 2026 theme 🎃  (html[data-theme="halloween"])
   Palette: pumpkin orange / witch purple / midnight black. Overlays never take clicks
   (pointer-events:none), everything calms down with prefers-reduced-motion and pauses
   with html.hw-paused (hidden tab). Effects JS: assets/js/halloween.js
   ========================================================================== */

/* ---------- theme switch button (both themes) ---------- */
.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-size: 1.1rem; line-height: 1;
  cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .25s, background .25s; flex-shrink: 0;
}
.theme-toggle:hover { transform: translateY(-1px) rotate(-8deg); border-color: var(--border-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .tt-emoji { display: block; transition: transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.theme-toggle:active .tt-emoji { transform: scale(.8) rotate(20deg); }

/* ---------- palette ---------- */
html[data-theme="halloween"] {
  --bg: #08050b;
  --bg-elev: #140b1b;
  --bg-card: #190f21;
  --bg-card-hover: #21132b;
  --border: rgba(255, 138, 31, 0.17);
  --border-strong: rgba(255, 138, 31, 0.42);
  --text: #fdf2e6;
  --muted: #c9adbd;
  --accent: #ff8a1f;
  --accent-2: #a855f7;
  --accent-3: #ffb35c;
  --success: #a3e635;
  --grad: linear-gradient(135deg, #ffcf70 0%, #ff7518 42%, #c026d3 78%, #7c3aed 100%);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 117, 24, .04);
  color-scheme: dark;
}
html[data-theme="halloween"] body { background: radial-gradient(1200px 600px at 50% -10%, rgba(124, 58, 237, .14), transparent 60%), var(--bg); }
html[data-theme="halloween"] ::selection { background: rgba(255, 117, 24, .45); color: #fff; }
html[data-theme="halloween"] a { color: var(--accent-3); }
html[data-theme="halloween"] a:hover { color: #ffd19a; }
html[data-theme="halloween"] .bg-orbs span:nth-child(1) { background: #ff6a00; opacity: .18; }
html[data-theme="halloween"] .bg-orbs span:nth-child(2) { background: #6d28d9; opacity: .26; }
html[data-theme="halloween"] .bg-orbs span:nth-child(3) { background: #a21caf; opacity: .16; }
html[data-theme="halloween"] .nav { background: rgba(10, 5, 14, .72); border-bottom-color: rgba(255, 138, 31, .16); }
html[data-theme="halloween"] .nav-links a:hover, html[data-theme="halloween"] .nav-links a.active { background: rgba(255, 117, 24, .16); color: #ffe3c4; }
html[data-theme="halloween"] .btn-primary {
  background: linear-gradient(135deg, #ffb347 0%, #ff7518 55%, #e2561b 100%); color: #1a0b02;
  box-shadow: 0 10px 30px rgba(255, 117, 24, .28), 0 0 0 1px rgba(255, 190, 120, .25) inset;
}
html[data-theme="halloween"] .btn-primary:hover { color: #1a0b02; box-shadow: 0 14px 40px rgba(255, 117, 24, .45), 0 0 24px rgba(168, 85, 247, .25); }
html[data-theme="halloween"] .btn-ghost:hover { background: rgba(168, 85, 247, .12); border-color: rgba(168, 85, 247, .45); }
html[data-theme="halloween"] .card, html[data-theme="halloween"] .feature-card { border-color: var(--border); }
html[data-theme="halloween"] .card:hover { border-color: rgba(168, 85, 247, .38); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(168, 85, 247, .12); }
html[data-theme="halloween"] .stat-num { color: #ffb35c; text-shadow: 0 0 18px rgba(255, 117, 24, .35); }
html[data-theme="halloween"] .scroll-progress { background: linear-gradient(90deg, #ff7518, #a855f7); }
html[data-theme="halloween"] .theme-toggle { background: #1d0f12; border-color: rgba(255, 138, 31, .45); box-shadow: 0 0 16px rgba(255, 117, 24, .35); animation: hwTogglePulse 2.6s ease-in-out infinite; }
@keyframes hwTogglePulse { 0%, 100% { box-shadow: 0 0 10px rgba(255, 117, 24, .25); } 50% { box-shadow: 0 0 22px rgba(255, 117, 24, .55); } }
html[data-theme="halloween"] .footer-copy::after { content: "  🎃"; }
html[data-theme="halloween"] .hexbg, html[data-theme="halloween"] .nav-hex { filter: sepia(1) saturate(4) hue-rotate(-18deg) brightness(.75); }
html[data-theme="halloween"] input:focus, html[data-theme="halloween"] select:focus, html[data-theme="halloween"] textarea:focus { border-color: rgba(255, 138, 31, .6) !important; box-shadow: 0 0 0 3px rgba(255, 117, 24, .18) !important; }
html[data-theme="halloween"] .vx-switch input:checked + span, html[data-theme="halloween"] input[type="checkbox"]:checked { accent-color: #ff7518; }

/* ---------- flickering pumpkin glow (hero) ---------- */
html[data-theme="halloween"] .hero-glow {
  background: radial-gradient(ellipse at center, rgba(255, 128, 20, .55), rgba(168, 85, 247, .18) 45%, transparent 72%);
  animation: hwFlicker 3.2s steps(1, end) infinite, glowPulse 6s ease-in-out infinite alternate;
}
@keyframes hwFlicker {
  0% { opacity: .9; } 7% { opacity: .62; } 9% { opacity: .95; } 21% { opacity: .78; } 23% { opacity: 1; }
  48% { opacity: .85; } 50% { opacity: .55; } 52% { opacity: .92; } 78% { opacity: .8; } 80% { opacity: 1; } 100% { opacity: .9; }
}
html[data-theme="halloween"] .hero-logo { filter: drop-shadow(0 0 22px rgba(255, 117, 24, .55)) drop-shadow(0 0 48px rgba(168, 85, 247, .25)); }

/* ---------- spooky glitch headline ---------- */
.hw-glitch { position: relative; display: inline-block; }
html[data-theme="halloween"] .hw-glitch::before, html[data-theme="halloween"] .hw-glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0;
}
html[data-theme="halloween"] .hw-glitch::before { animation: hwGlitchA 5.5s infinite steps(1, end); text-shadow: -2px 0 rgba(255, 117, 24, .8); }
html[data-theme="halloween"] .hw-glitch::after { animation: hwGlitchB 5.5s infinite steps(1, end); text-shadow: 2px 0 rgba(168, 85, 247, .8); }
html[data-theme="halloween"] .hw-glitch { animation: hwShiver 5.5s infinite; }
@keyframes hwGlitchA {
  0%, 86%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  87% { opacity: .9; transform: translate(-3px, -1px); clip-path: inset(8% 0 62% 0); }
  89% { opacity: .9; transform: translate(3px, 1px); clip-path: inset(55% 0 12% 0); }
  91% { opacity: .8; transform: translate(-2px, 2px); clip-path: inset(30% 0 40% 0); }
  93% { opacity: 0; }
}
@keyframes hwGlitchB {
  0%, 87%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  88% { opacity: .85; transform: translate(3px, 1px); clip-path: inset(62% 0 6% 0); }
  90% { opacity: .85; transform: translate(-3px, -2px); clip-path: inset(12% 0 58% 0); }
  92% { opacity: .7; transform: translate(2px, 0); clip-path: inset(40% 0 30% 0); }
  94% { opacity: 0; }
}
@keyframes hwShiver { 0%, 86%, 95%, 100% { transform: none; filter: none; } 88% { transform: skewX(-4deg); filter: drop-shadow(0 0 8px rgba(255, 117, 24, .7)); } 91% { transform: skewX(3deg); } }

/* ---------- overlays (all pointer-events:none) ---------- */
.hw-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.hw-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; }
.hw-fog { position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; pointer-events: none; z-index: 1; overflow: hidden; contain: strict; }
.hw-fog span {
  position: absolute; bottom: -12vh; left: -50%; width: 200%; height: 100%;
  background:
    radial-gradient(40% 60% at 20% 70%, rgba(190, 170, 220, .10), transparent 70%),
    radial-gradient(35% 55% at 55% 80%, rgba(255, 160, 90, .07), transparent 70%),
    radial-gradient(45% 60% at 85% 75%, rgba(160, 120, 220, .10), transparent 70%);
  filter: blur(18px); animation: hwFog 46s linear infinite; will-change: transform;
}
.hw-fog span:nth-child(2) { bottom: -18vh; opacity: .8; animation-duration: 70s; animation-direction: reverse; }
@keyframes hwFog { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(25%, 0, 0); } }

.hw-web { position: fixed; top: var(--nav-h); width: clamp(90px, 13vw, 170px); height: auto; pointer-events: none; z-index: 91; opacity: .5; }
.hw-web svg { display: block; width: 100%; height: auto; }
.hw-web--left { left: 0; }
.hw-web--right { right: 0; transform: scaleX(-1); }
.hw-spider { position: fixed; top: var(--nav-h); right: clamp(34px, 5vw, 64px); width: 2px; pointer-events: none; z-index: 92; }
.hw-spider .thread { position: absolute; top: 0; left: 0; width: 1px; height: 26px; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .25)); transition: height 1.1s cubic-bezier(.3, 1.4, .5, 1); }
.hw-spider .body { position: absolute; top: 22px; left: -13px; width: 28px; height: 28px; font-size: 24px; line-height: 28px; text-align: center; transition: top 1.1s cubic-bezier(.3, 1.4, .5, 1); animation: hwSway 3.4s ease-in-out infinite; transform-origin: 50% -20px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.hw-spider.is-dropping .thread { height: 190px; }
.hw-spider.is-dropping .body { top: 186px; }
@keyframes hwSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.hw-ghost { position: fixed; left: 0; bottom: 14vh; width: 92px; pointer-events: none; z-index: 93; transform: translateX(-110%); animation: hwPeek 19s ease-in-out infinite; animation-delay: 3s; }
.hw-ghost svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 14px rgba(200, 180, 255, .45)); }
.hw-ghost .bubble { position: absolute; top: -10px; left: 84px; white-space: nowrap; padding: .25rem .6rem; border-radius: 12px; background: rgba(20, 11, 27, .92); border: 1px solid rgba(168, 85, 247, .5); color: #f3e8ff; font-size: .8rem; font-weight: 700; opacity: 0; animation: hwBubble 19s ease-in-out infinite; animation-delay: 3s; }
@keyframes hwPeek {
  0%, 62%, 100% { transform: translateX(-110%) rotate(0); }
  68% { transform: translateX(-38%) rotate(8deg); }
  72% { transform: translateX(-30%) rotate(4deg); }
  80% { transform: translateX(-34%) rotate(10deg); }
  86% { transform: translateX(-110%) rotate(0); }
}
@keyframes hwBubble { 0%, 69%, 84%, 100% { opacity: 0; } 72%, 80% { opacity: 1; } }

/* candy confetti fallback dots */
.hw-toast-boo { position: fixed; z-index: 700; pointer-events: none; font-size: 1.6rem; }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  .hw-web { opacity: .38; width: 84px; }
  .hw-ghost { width: 64px; bottom: 10vh; }
  .hw-ghost .bubble { left: 60px; font-size: .72rem; }
  .hw-fog { height: 34vh; }
  .theme-toggle { width: 34px; height: 34px; font-size: 1rem; }
}

/* ---------- hidden tab: freeze CSS animations ---------- */
html.hw-paused .hw-fog span, html.hw-paused .hw-ghost, html.hw-paused .hw-ghost .bubble, html.hw-paused .hw-spider .body,
html.hw-paused[data-theme="halloween"] .hero-glow, html.hw-paused .hw-glitch, html.hw-paused .hw-glitch::before, html.hw-paused .hw-glitch::after,
html.hw-paused .theme-toggle { animation-play-state: paused !important; }

/* ---------- reduced motion: palette + static decorations only ---------- */
@media (prefers-reduced-motion: reduce) {
  .hw-fog span, .hw-ghost, .hw-ghost .bubble, .hw-spider .body, html[data-theme="halloween"] .hero-glow,
  html[data-theme="halloween"] .hw-glitch, html[data-theme="halloween"] .hw-glitch::before, html[data-theme="halloween"] .hw-glitch::after,
  html[data-theme="halloween"] .theme-toggle { animation: none !important; }
  .hw-ghost { display: none; }
  .hw-spider .thread, .hw-spider .body { transition: none; }
}
@media print { .hw-layer, .hw-canvas, .hw-fog, .hw-web, .hw-spider, .hw-ghost { display: none !important; } }