/**
 * assets/themes.css
 * ------------------
 * Houses every seasonal theme's styling. Loaded unconditionally on every
 * page (so the stylesheet itself is safely cacheable and never needs to
 * change per-request) — nothing in here actually applies until JS adds
 * the matching theme-* class to <html>, which happens client-side via a
 * never-cached fetch (see theme-proxy.php + initTheme in header.js).
 * This keeps a theme switch in the admin panel effective immediately,
 * rather than trapped behind Cloudflare's page cache.
 */

/* ============================================================
   HALLOWEEN
   ============================================================ */

.theme-halloween{
  /* Re-theming just these two variables re-colors every button, link,
     glow and badge across the whole site automatically, since they're
     already referenced pervasively rather than hardcoded per-component. */
  --blue:#b3410c;
  --blue-bright:#ff7a1a;
}

/* The logo is a single flat image, not re-colorable component-by-component
   like the rest of the UI — shifted from its native blue toward pumpkin
   orange with a filter instead of requiring a whole new asset. */
.theme-halloween .logo img{
  filter:hue-rotate(-150deg) saturate(1.3) brightness(1.05);
}

/* Every other place in style.css that uses a hardcoded blue RGB/hex value
   instead of the shared --blue/--blue-bright variables (glows, shadows,
   icon backgrounds, card accents, etc). Generated by walking the actual
   stylesheet for every rule containing those literal values, rather than
   hand-picked — the first two passes of this theme missed most of the
   site's ambient glow/shadow depth this way, which is why it looked like
   "just one cobweb and some orange text" rather than a genuinely
   re-themed site. */
.theme-halloween .btn-primary:hover{background:var(--blue-bright);transform:translateY(-2px);box-shadow:0 8px 24px rgba(179,65,12,.35);}
.theme-halloween header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(179,65,12,.5),transparent);}
.theme-halloween .ddos-hero-frame{position:relative;overflow:hidden;isolation:isolate;
  border-radius:28px;border:1px solid rgba(255,255,255,.08);
  background:var(--surface);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(179,65,12,.12);
  padding:64px 56px;}
.theme-halloween .ddos-hero-glow{position:absolute;inset:-25%;z-index:0;pointer-events:none;filter:blur(70px);
  background:radial-gradient(circle at 75% 30%, rgba(179,65,12,.24), transparent 50%);
  animation:heroGlowDrift 16s ease-in-out infinite alternate;}
.theme-halloween .attack-card:hover{border-color:rgba(255,159,77,.35);transform:translateY(-3px);}
.theme-halloween .attack-card-icon{width:38px;height:38px;border-radius:10px;background:rgba(179,65,12,.14);border:1px solid rgba(255,159,77,.25);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.theme-halloween .layer-card-icon{width:44px;height:44px;border-radius:12px;background:rgba(179,65,12,.14);border:1px solid rgba(255,159,77,.25);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.theme-halloween .hero-frame{position:relative;overflow:hidden;isolation:isolate;z-index:1;
  border-radius:28px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(179,65,12,.12);
  padding-top:104px;}
.theme-halloween .hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(2,2,3,.62) 0%, rgba(3,3,4,.85) 55%, var(--bg) 100%),
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(179,65,12,.08), transparent 60%);}
.theme-halloween .hero-glow{position:absolute;inset:-25%;z-index:1;pointer-events:none;filter:blur(70px);
  background:
    radial-gradient(circle at 22% 28%, rgba(179,65,12,.11), transparent 45%),
    radial-gradient(circle at 78% 66%, rgba(255,122,26,.07), transparent 50%);
  animation:heroGlowDrift 16s ease-in-out infinite alternate;}
.theme-halloween .hero-badge-accent{background:linear-gradient(135deg,#b3410c 0%,#8a3109 60%,#5e2206 100%);
  border-color:rgba(255,255,255,.14);color:#fff;font-weight:700;letter-spacing:.01em;
  box-shadow:0 10px 26px -8px rgba(94,30,6,.7), inset 0 1px 0 rgba(255,255,255,.14);}
.theme-halloween .hero-stats .stat-icon{width:20px;height:20px;color:var(--blue-bright);margin:0 auto 8px;display:block;filter:drop-shadow(0 0 6px rgba(255,159,77,.45));}
.theme-halloween .game-hero-frame{position:relative;overflow:hidden;isolation:isolate;
  border-radius:28px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(179,65,12,.12);
  min-height:720px;display:flex;align-items:flex-end;
  padding:64px 56px;}
.theme-halloween .game-hero-bg-contain{background:radial-gradient(ellipse at 65% 50%, rgba(179,65,12,.22), var(--surface) 68%);}
.theme-halloween .deep-north-panel{position:relative;overflow:hidden;isolation:isolate;
  border-radius:28px;border:1px solid rgba(165,232,255,.25);
  background:linear-gradient(160deg, rgba(255,122,26,.08), rgba(9,9,11,.4)), var(--surface);
  padding:56px 52px;}
.theme-halloween .error-hero-frame{position:relative;overflow:hidden;isolation:isolate;
  border-radius:28px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(179,65,12,.12);
  min-height:620px;display:flex;align-items:center;
  padding:64px 56px;}
.theme-halloween .step:hover{border-color:rgba(255,159,77,.35);transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(179,65,12,.45);}
.theme-halloween .steps-rich .step-num{font-family:var(--font-display);font-weight:900;font-size:30px;
  color:rgba(255,159,77,.3);margin-bottom:14px;line-height:1;}
.theme-halloween .dc-card:hover{border-color:rgba(179,65,12,.45);transform:translateY(-3px);box-shadow:0 24px 50px -22px rgba(0,0,0,.6);}
.theme-halloween .geo-blob-1{width:480px;height:420px;top:-12%;right:-6%;background:radial-gradient(circle, rgba(179,65,12,.6), transparent 70%);animation-delay:0s;}
.theme-halloween .geo-blob-2{width:420px;height:420px;bottom:-18%;left:2%;background:radial-gradient(circle, rgba(255,159,77,.4), transparent 70%);animation-delay:-6s;}
.theme-halloween .geo-blob-3{width:360px;height:320px;top:30%;left:38%;background:radial-gradient(circle, rgba(255,122,26,.3), transparent 70%);animation-delay:-11s;}
.theme-halloween .panel-showcase::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(3,3,4,.9) 0%, rgba(3,3,4,.65) 42%, rgba(3,3,4,.35) 72%, rgba(3,3,4,.15) 100%),
    radial-gradient(circle at 82% 45%, rgba(179,65,12,.22), transparent 55%);}
.theme-halloween .compare-us{background:linear-gradient(180deg, rgba(179,65,12,.16), rgba(179,65,12,.02) 60%);border:1px solid rgba(179,65,12,.4);box-shadow:0 30px 70px -32px rgba(179,65,12,.4), 0 0 0 1px rgba(179,65,12,.08);}
.theme-halloween .compare-us::before{content:"";position:absolute;top:-35%;right:-25%;width:340px;height:340px;background:radial-gradient(circle, rgba(179,65,12,.32), transparent 70%);pointer-events:none;}
.theme-halloween .compare-us .compare-card-tag{background:linear-gradient(135deg,#e8631f,#b3410c);box-shadow:0 8px 20px -6px rgba(179,65,12,.6);}
.theme-halloween .inline-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(179,65,12,.14), rgba(255,122,26,.05));
  border:1px solid rgba(255,122,26,.28);border-radius:var(--radius);
  padding:40px 44px;}
.theme-halloween .waitlist-card{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg, rgba(179,65,12,.14), rgba(255,122,26,.03)), var(--surface);
  border:1px solid rgba(255,159,77,.28);
  border-radius:var(--radius);
  padding:40px 44px;
  box-shadow:0 40px 90px -40px rgba(179,65,12,.45);
  transition:box-shadow .6s ease;}
.theme-halloween .waitlist-card::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;filter:blur(60px);
  background:radial-gradient(circle at 12% 30%, rgba(179,65,12,.28), transparent 55%);
  animation:heroGlowDrift 14s ease-in-out infinite alternate;}
.theme-halloween .waitlist-card-icon{width:46px;height:46px;border-radius:13px;margin-bottom:16px;
  background:linear-gradient(135deg,#e8631f,#b3410c);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(179,65,12,.65);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.theme-halloween .kb-card:hover{border-color:rgba(255,159,77,.35);transform:translateY(-3px);box-shadow:0 20px 44px -22px rgba(0,0,0,.55);}
.theme-halloween .kb-card-icon{width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:rgba(179,65,12,.14);border:1px solid rgba(255,159,77,.25);
  display:flex;align-items:center;justify-content:center;}
.theme-halloween .kb-card-btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--blue-bright);text-decoration:none;padding:10px 18px;
  border:1px solid rgba(255,159,77,.3);border-radius:var(--radius-pill);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  width:fit-content;}
.theme-halloween .ic-yes{width:22px;height:22px;flex-shrink:0;margin-top:1px;color:var(--blue-bright);filter:drop-shadow(0 0 6px rgba(255,159,77,.5));}
.theme-halloween .split-card::after{content:"";position:absolute;inset:auto -40% -60% auto;width:260px;height:260px;background:radial-gradient(circle,rgba(179,65,12,.22),transparent 70%);}
.theme-halloween .final-cta{text-align:center;background:radial-gradient(ellipse 700px 400px at 50% 0%, rgba(179,65,12,.26), transparent 65%),var(--bg-alt);border-top:1px solid var(--border);}
.theme-halloween .attack-card::after, .theme-halloween .layer-card::after, .theme-halloween .dn-item::after, .theme-halloween .launch-step-card::after, .theme-halloween .game-card::after, .theme-halloween .feature-item::after, .theme-halloween .step::after, .theme-halloween .compare-card::after{content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,122,26,.14), transparent 70%);}

/* Subtle warm-to-sickly-green vignette layered behind hero sections,
   reusing the same drift animation already used for the blue glow
   elsewhere, just re-timed and re-colored for a flicker-like feel. */
.theme-halloween .hero-glow,
.theme-halloween .ddos-hero-glow{
  background:radial-gradient(circle at 30% 20%, rgba(255,122,26,.16), transparent 55%),
             radial-gradient(circle at 75% 60%, rgba(122,58,181,.14), transparent 50%);
  animation:hwGlowFlicker 7s ease-in-out infinite alternate;
}
@keyframes hwGlowFlicker{
  0%{opacity:.85;}
  18%{opacity:.6;}
  32%{opacity:.95;}
  47%{opacity:.7;}
  100%{opacity:1;}
}

/* The witch — one signature motif, used deliberately in exactly two
   places, rather than several different disconnected icons. The hero
   instance starts almost immediately (it's above the fold, so there's no
   reason to make someone wait or hope they catch it) with a short enough
   loop that it comes back around reliably. The final-cta instance is
   gated by an IntersectionObserver in main.js, NOT a plain CSS loop —
   a looping animation on a below-the-fold element runs from page load
   regardless of scroll position, so whether someone actually sees it
   when they scroll down is pure chance. Starting the animation only once
   the section is actually in view is what makes it reliably visible
   instead of a coin flip. */
.hw-witch{
  position:absolute;top:10%;width:90px;height:54px;opacity:0;
  pointer-events:none;z-index:2;
}
.hw-witch svg{
  width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 7px rgba(255,142,45,.65)) drop-shadow(0 0 16px rgba(255,122,26,.3)) drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
.hw-witch-hero{
  animation:hwWitchDrift 15s ease-in-out infinite;
  animation-delay:.6s;
}
.hw-witch-final.is-active{
  animation:hwWitchDrift 11s ease-in-out 1;
}
@keyframes hwWitchDrift{
  0%{opacity:0;transform:translate(-12%,4%) rotate(-6deg) scale(.85);}
  12%{opacity:.75;}
  50%{transform:translate(50vw,-8%) rotate(3deg) scale(1);}
  88%{opacity:.7;}
  100%{opacity:0;transform:translate(112vw,5%) rotate(-5deg) scale(.9);}
}
@media (prefers-reduced-motion: reduce){
  .hw-witch{display:none;}
}

/* Corner cobweb — injected by JS only into the first hero section on a
   page (see initHalloweenTheme in main.js). Environmental set-dressing in
   the frame's own corner, not attached to any specific content, the way
   a cobweb collects in the corner of a room rather than being glued to a
   particular object in it. Hand-drawn radial spokes with slightly
   sagging connecting arcs, not a stock clipart web. */
.hw-cobweb{
  position:absolute;top:0;left:0;width:150px;height:150px;
  pointer-events:none;z-index:1;opacity:.16;color:#e8e6e1;
}
@media (max-width:700px){
  .hw-cobweb{width:100px;height:100px;}
}

/* The one "throughout the site" touch: every section on every page
   already leads with a small colored accent bar before its heading
   (".eyebrow .bar") — dozens of times across the whole site, structural
   rather than attached to any particular feature's content. Giving that
   existing marker a warm, slowly-breathing ember glow during Halloween
   reads as the site's own accent color coming alive for the season,
   rather than a new, unrelated icon dropped in next to unrelated text. */
.theme-halloween .eyebrow .bar{
  background:linear-gradient(90deg, #ff7a1a, #ffb347);
  box-shadow:0 0 7px 1px rgba(255,122,26,.55);
  animation:hwEmberPulse 2.6s ease-in-out infinite;
}
@keyframes hwEmberPulse{
  0%,100%{box-shadow:0 0 5px 1px rgba(255,122,26,.4);}
  50%{box-shadow:0 0 10px 2px rgba(255,159,77,.8);}
}
@media (prefers-reduced-motion: reduce){
  .theme-halloween .eyebrow .bar{animation:none;box-shadow:0 0 7px 1px rgba(255,122,26,.55);}
}

/* Logo easter-egg toast — see the click-5-times handler in main.js. */
.hw-toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:var(--surface);border:1px solid rgba(255,122,26,.4);border-radius:var(--radius-pill);
  padding:13px 22px;font-size:14px;font-weight:600;color:var(--text);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;
  z-index:300;white-space:nowrap;
}
.hw-toast.is-visible{opacity:1;transform:translate(-50%,0);}