/* =====================================================================
   HermitMonster - synthwave.css   (Monster atmosphere, loads last)
   80s synthwave / VHS / Stranger Things energy. Only active in Monster mode.
   Layers: scanlines, TV static, gradient skies, chroma headings, neon grid.
   De-containerizes the layout so it reads like a CRT broadcast, not cards.
   Readability preserved: text stays opaque + high-contrast above the FX.
   ===================================================================== */

/* dark room at night: near-black walls, neon city glow through the window */
:root[data-mode="monster"] body {
  background:
    radial-gradient(70% 42% at 90% 0%, rgba(242,95,216,.12) 0%, rgba(142,45,226,.07) 40%, transparent 64%),
    radial-gradient(60% 38% at 50% 118%, rgba(46,197,224,.07) 0%, transparent 64%),
    linear-gradient(180deg,#040712 0%,#060a18 50%,#0a1024 100%);
  background-size: 100% 120%; animation: sw-sky 30s ease-in-out infinite alternate;
}
@keyframes sw-sky { from{background-position:0 0} to{background-position:0 100%} }

/* fixed VHS scanlines + faint static across the viewport */
:root[data-mode="monster"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 9996; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(196,108,255,.05) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay; animation: vhs-roll 9s linear infinite;
}
@keyframes vhs-roll { to { background-position: 0 120px, 0 -90px; } }
:root[data-mode="monster"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 9995; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.09; animation: vhs-static .6s steps(2) infinite;
}
@keyframes vhs-static { 0%{transform:translate(0,0)} 50%{transform:translate(-3px,2px)} 100%{transform:translate(2px,-1px)} }

/* chroma-split headings: that gritty VHS double-image */
:root[data-mode="monster"] .hero__title, :root[data-mode="monster"] .section-head h2 {
  text-shadow: -2px 0 rgba(255,79,166,.5), 2px 0 rgba(95,176,255,.5);
}

/* de-containerize: sections bleed, dividers are neon scanrules not boxes */
:root[data-mode="monster"] .section--tint { background: transparent; }
:root[data-mode="monster"] .section + .section { border-top: 1px solid rgba(196,108,255,.22); }
:root[data-mode="monster"] .cap { background: rgba(8,14,32,.72) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(46,197,224,.28); }

/* dark room: kill the bright aurora floor, dim the hero particles */
:root[data-mode="monster"] .aurora { background-color:#050912; opacity:.3; }
:root[data-mode="monster"] .hero__canvas { opacity:.28; }
:root[data-mode="monster"] .work-card, :root[data-mode="monster"] .tile { background: linear-gradient(160deg, rgba(124,108,255,.12), rgba(196,108,255,.05)); }

/* synthwave horizon grid: scrolls toward the viewer */
:root[data-mode="monster"] .hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(95,176,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,79,200,.45) 1px, transparent 1px);
  background-size: 50px 50px; transform: perspective(320px) rotateX(64deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000);
  animation: sw-grid 1.5s linear infinite;
}
@keyframes sw-grid { to { background-position: 0 50px, 50px 0; } }

/* Monster atmosphere is intentional persona FX: stays animated always. */

/* retro enrichments: chrome heading, neon flicker, sun bars, CTA frame */
:root[data-mode="monster"] .hero__title .text-grad { background-image: linear-gradient(180deg,#fff,#ffd9f5 30%,#c46cff 62%,#5fb0ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
:root[data-mode="monster"] .eyebrow, :root[data-mode="monster"] .hud-label { animation: neon-flicker 4s infinite; }
@keyframes neon-flicker { 0%,19%,21%,80%,100%{opacity:1} 20%{opacity:.55} 82%{opacity:.72} }
:root[data-mode="monster"] .synth-sun::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(transparent 0 6px, rgba(8,7,26,.7) 6px 11px); border-radius:50%; }
:root[data-mode="monster"] .synth-sun { filter: drop-shadow(0 0 42px rgba(255,79,166,.6)); }
:root[data-mode="monster"] .cta { box-shadow: 0 0 0 1px var(--accent), 0 0 26px -6px var(--accent-2), inset 0 0 40px -12px rgba(196,108,255,.4); }
:root[data-mode="monster"] .btn--primary { box-shadow:0 0 0 1px var(--accent),0 0 26px -6px var(--accent),0 0 50px -16px var(--accent-2); }

/* periodic GLITCH on hero + section headings (chroma jump) */
:root[data-mode="monster"] .hero__title, :root[data-mode="monster"] .section-head h2 { animation: sw-glitch 7s steps(1) infinite; }
@keyframes sw-glitch { 0%,90%,100%{transform:none;text-shadow:-2px 0 rgba(255,79,200,.55),2px 0 rgba(95,176,255,.55)} 91%{transform:translate(-2px,1px);text-shadow:3px 0 #ff6cf0,-3px 0 #5fb0ff} 93%{transform:translate(2px,-1px);text-shadow:-4px 0 #ff6cf0,4px 0 #5fb0ff} 95%{transform:none} }
/* film grain (heavier, animated) over whole page */
:root[data-mode="monster"] .aurora::before { content:""; position:fixed; inset:0; z-index:9994; pointer-events:none; opacity:.08; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); animation: sw-grain 1s steps(4) infinite; }
@keyframes sw-grain { 0%{transform:translate(0,0)} 25%{transform:translate(-4px,3px)} 50%{transform:translate(3px,-2px)} 75%{transform:translate(-2px,-3px)} 100%{transform:translate(4px,2px)} }

/* (atmosphere always animates in Monster, by design) */