/* =====================================================================
   HermitMonster - calm.css   (monster FX tone-down, loads LAST)
   The maxed monster FX stacked 100+ concurrent animations (SVG-turbulence
   static, chroma drop-shadows, blend-mode layers, constant glitch jitter) =
   severe jank on real devices. This dials the persona back to a tasteful,
   performant level: keeps the palette, gradients, gentle scanlines and the
   living eye; stops the expensive always-on churn. Monster-only.
   ===================================================================== */

/* 1. KILL the most expensive always-on layers (SVG turbulence + grain). */
:root[data-mode="monster"] body::after,          /* vhs static (feTurbulence) */
:root[data-mode="monster"] .aurora::before {     /* film grain (feTurbulence) */
  display: none !important;
}

/* 2. CALM the constant glitch jitter on text: keep a soft static chroma edge,
      but stop the per-frame vibrate that made headings look broken. */
:root[data-mode="monster"] .hero__title,
:root[data-mode="monster"] .section-head h2,
:root[data-mode="monster"] .brand,
:root[data-mode="monster"] .hud-label,
:root[data-mode="monster"] .eyebrow,
:root[data-mode="monster"] .synth-sun,
:root[data-mode="monster"] .hero__emblem,
:root[data-mode="monster"] .about__avatar,
:root[data-mode="monster"] .cta {
  animation: none !important;
}
/* a gentle, STATIC chroma shadow keeps the cyberpunk flavour without motion */
:root[data-mode="monster"] .hero__title,
:root[data-mode="monster"] .section-head h2 {
  text-shadow: -1.5px 0 var(--fx-neon, #f25fd8), 1.5px 0 var(--fx-cy, #2ec5e0);
}

/* 3. THIN OUT the stacked atmosphere: drop the heaviest full-screen layers,
      soften what remains so the GPU isn't compositing a dozen sheets. */
:root[data-mode="monster"] .monster-veil__embers,   /* 12 rising motes */
:root[data-mode="monster"] .monster-sprites,        /* 7 floating glyphs */
:root[data-mode="monster"] .fx-grain,
:root[data-mode="monster"] .synth-scan { display: none !important; }
:root[data-mode="monster"] .monster-veil__fog { animation: none !important; opacity: .32 !important; }

/* 4. STILL the scanline roll + tear (decorative, costly). The grid floor and
      sky gradient stay (cheap, set the mood). */
:root[data-mode="monster"] .aurora::after { display: none !important; }

/* 4b. Quiet the remaining decorative infinite loops (twinkles, holo dividers,
       wordmark sheen, idle floats, spins). These add up to dozens of constant
       repaints for little payoff. The slow sky/grid drift stays. */
:root[data-mode="monster"] .spark,
:root[data-mode="monster"] .spark-dot,
:root[data-mode="monster"] .constellation .node,
:root[data-mode="monster"] .glyph-divider::after,
:root[data-mode="monster"] .brand .wordmark,
:root[data-mode="monster"] .anim-float,
:root[data-mode="monster"] .anim-float-slow,
:root[data-mode="monster"] .anim-drift,
:root[data-mode="monster"] .anim-spin-slow,
:root[data-mode="monster"] .anim-spin-rev { animation: none !important; }

/* 5. Drop the always-on neon-flicker on labels (kept readable + steady). */
@keyframes neon-flicker { from { opacity: 1; } to { opacity: 1; } }

/* =====================================================================
   REBALANCE: impactful but lightweight.
   The rules above removed the jank. These add cheap, GPU-composited
   impact back and remove the single biggest remaining device cost:
   stacked backdrop-blur. Net result = bold monster, smooth on mobile.
   ===================================================================== */

/* A. FROSTED GLASS (consistent across personas): Monster keeps the SAME
      frosted-glass material as Hermit, in its own palette. content-visibility
      (responsive.css) means only IN-VIEW cards composite their blur, so this
      is far cheaper than the old always-on stack. Dark translucent tint keeps
      text readable over the busy neon backdrop. */
:root[data-mode="monster"] .cap,
:root[data-mode="monster"] .work-card,
:root[data-mode="monster"] .tile,
:root[data-mode="monster"] .archive-card,
:root[data-mode="monster"] .about__card,
:root[data-mode="monster"] .quote-card,
:root[data-mode="monster"] .signal-card,
:root[data-mode="monster"] .glow-card,
:root[data-mode="monster"] .embed-frame,
:root[data-mode="monster"] .migrate-panel,
:root[data-mode="monster"] .embed-bar,
:root[data-mode="monster"] .case-nav a,
:root[data-mode="monster"] .stat {
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  background: rgba(10, 15, 34, .62) !important;
  border: 1px solid rgba(46, 197, 224, .20);
}
:root[data-mode="monster"] .site-header {
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  background: rgba(8, 12, 28, .66) !important;
}
/* small chrome (chips, icon buttons, ghost btns) get a light frost too so the
   material is consistent everywhere; cheap because they're small. */
:root[data-mode="monster"] .chip,
:root[data-mode="monster"] .icon-btn,
:root[data-mode="monster"] .btn--ghost {
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
}

/* B. IMPACT (cheap): static neon edge-glow makes cards pop off the dark
      room. box-shadow paints once - no per-frame cost. Hover lifts it. */
:root[data-mode="monster"] .cap,
:root[data-mode="monster"] .work-card,
:root[data-mode="monster"] .tile,
:root[data-mode="monster"] .archive-card,
:root[data-mode="monster"] .quote-card {
  box-shadow: inset 0 0 0 1px rgba(46,197,224,.18), 0 18px 50px -30px rgba(242,95,216,.55);
}
:root[data-mode="monster"] .cap:hover,
:root[data-mode="monster"] .work-card:hover,
:root[data-mode="monster"] .tile:hover {
  box-shadow: inset 0 0 0 1px var(--fx-cy, #2ec5e0), 0 0 26px -8px var(--fx-neon, #f25fd8), 0 26px 60px -32px var(--fx-neon, #f25fd8);
}
/* primary CTA keeps a bold STATIC neon glow (no animation) */
:root[data-mode="monster"] .btn--primary {
  box-shadow: 0 0 0 1px var(--fx-neon, #f25fd8), 0 0 30px -8px var(--fx-neon, #f25fd8) !important;
}

/* C. IMPACT (one signature motion, ~free): a single neon scanline band
      slowly sweeps the viewport. ONE element, transform-only = GPU
      composited, no layout/paint. This is the monster's "alive" tell. */
:root[data-mode="monster"] .monster-vignette::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 30vh;
  pointer-events: none; z-index: 91; mix-blend-mode: screen;
  background: linear-gradient(transparent, rgba(46,197,224,.05) 55%, rgba(242,95,216,.08));
  will-change: transform; animation: hm-sweep 8s linear infinite;
}
@keyframes hm-sweep { from { transform: translateY(-32vh); } to { transform: translateY(132vh); } }

/* D. IMPACT (cheap): keep STATIC fine scanlines for CRT texture, but drop
      the costly blend-mode + roll animation that were the expensive bits. */
:root[data-mode="monster"] body::before {
  opacity: .1 !important; mix-blend-mode: normal !important; animation: none !important;
}

/* The living eye stays (cheap, on-brand). Palette + bold gradients do the
   heavy lifting for "impact"; motion is reserved for a few cheap accents. */

/* Reduced-motion users already get a still site; keep the sweep off too. */
@media (prefers-reduced-motion: reduce) {
  :root[data-mode="monster"] .hero__title,
  :root[data-mode="monster"] .section-head h2 { text-shadow: none; }
  :root[data-mode="monster"] .monster-vignette::after { animation: none !important; display: none !important; }
}