/* =====================================================================
   HermitMonster - glitch.css   (MONSTER glitch maxed, loads last)
   cssscript-style glitch: clip-path slice jitter, RGB chroma bursts, scan
   tears, brand corruption, card hover RGB, periodic full-screen sweep.
   Monster-only. Body copy stays untouched (legible). reduced-motion = still.
   ===================================================================== */

/* hero title: aggressive slice jitter + constant chroma drift */
:root[data-mode="monster"] .hero__title { position: relative; will-change: transform; animation: g-hero 7s steps(1) infinite; }
@keyframes g-hero { 0%,88%,100%{transform:none;text-shadow:-3px 0 #f25fd8,3px 0 #2ec5e0} 89%{transform:translate(-9px,2px);text-shadow:9px 0 #f25fd8,-9px 0 #2ec5e0;clip-path:inset(6% 0 56% 0)} 92%{transform:translate(9px,-2px);clip-path:inset(48% 0 10% 0)} 95%{transform:none;clip-path:none} }
:root[data-mode="monster"] .section-head h2 { animation: g-chroma 8s steps(1) infinite; }
@keyframes g-chroma { 0%,90%,100%{text-shadow:-2px 0 #f25fd8,2px 0 #2ec5e0} 92%{transform:translate(-4px)} 95%{transform:translate(4px)} 97%{transform:none} }

/* brand wordmark: occasional jitter + chroma */
:root[data-mode="monster"] .brand { animation: g-jit 9s steps(2) infinite; }
@keyframes g-jit { 0%,94%,100%{transform:none;filter:none} 95%{transform:translate(3px,-2px);filter:drop-shadow(3px 0 #f25fd8) drop-shadow(-3px 0 #2ec5e0)} 98%{transform:translate(-3px,2px)} }

/* full-screen tear/glitch sweep, periodic */
:root[data-mode="monster"] .aurora { position: fixed; inset: 0; pointer-events: none; }
:root[data-mode="monster"] .aurora::after {
  content:""; position:fixed; left:0; right:0; height:14px; z-index:9993; pointer-events:none;
  background: rgba(95,176,255,.18); mix-blend-mode:screen; opacity:0; animation: g-tear 2.8s steps(1) infinite;
}
@keyframes g-tear { 0%,40%,100%{opacity:0;top:10%} 42%{opacity:.9;top:22%} 43%{opacity:0} 70%{opacity:.85;top:50%} 71%{opacity:0} }

/* cards: RGB-shadow jolt on hover */
:root[data-mode="monster"] .cap:hover, :root[data-mode="monster"] .tile:hover, :root[data-mode="monster"] .work-card:hover { animation: g-card .3s steps(2) 2; }
@keyframes g-card { 0%{box-shadow:3px 0 #f25fd8,-3px 0 #2ec5e0} 50%{box-shadow:-3px 0 #f25fd8,3px 0 #2ec5e0} 100%{box-shadow:0 0 0 1px var(--accent)} }

/* HUD labels jitter */
:root[data-mode="monster"] .hud-label { animation: g-jit 8s steps(2) infinite; }

/* synth sun: occasional flicker + chroma displace */
:root[data-mode="monster"] .synth-sun { will-change: transform; animation: g-sun 9s steps(1) infinite; }
@keyframes g-sun { 0%,90%,100%{transform:none;filter:drop-shadow(0 0 42px rgba(242,95,216,.6))} 92%{transform:translate(-7px,2px)} 95%{transform:translate(6px,-2px)} 97%{transform:none} }

/* hero emblem (the cyclops): occasional chroma displace */
:root[data-mode="monster"] .hero__emblem { will-change: transform; animation: g-emblem 8.5s steps(1) infinite; }
@keyframes g-emblem { 0%,90%,100%{transform:none;filter:none} 92%{transform:translate(-8px,2px) skewX(-3deg)} 95%{transform:translate(6px,-3px)} 97%{transform:none} }

/* pixel avatar glitch (about portrait); CTA mascot stays retired to avoid button overlap */
:root[data-mode="monster"] .about__avatar { animation: g-emblem 9s steps(1) infinite; }

/* ---- LIVING EYE (monster): liquid float + human dilation + glitch ----- */
/* inner circles transform around their own centre, never the JS-tracked group */
:root[data-mode="monster"] .eye-ball, :root[data-mode="monster"] .eye-pupil, :root[data-mode="monster"] .eye-shine { transform-box: fill-box; transform-origin: center; will-change: transform; }
/* wet iris: gentle continuous liquid float + micro saccades */
:root[data-mode="monster"] .eye-ball { animation: eye-float 6.5s ease-in-out infinite; }
@keyframes eye-float { 0%{transform:translate(0,0)} 22%{transform:translate(1.4px,-1px)} 38%{transform:translate(-1.2px,1.2px)} 50%{transform:translate(.6px,1.4px) scale(1.03)} 64%{transform:translate(-1px,-.6px)} 82%{transform:translate(1px,.4px)} 100%{transform:translate(0,0)} }
/* pupil: human-like dilation breathing + sharp glitch jump */
:root[data-mode="monster"] .eye-pupil { animation: eye-dilate 5s ease-in-out infinite, eye-glitch 7s steps(1) infinite; }
@keyframes eye-dilate { 0%,100%{transform:scale(1)} 40%{transform:scale(1.22)} 55%{transform:scale(.86)} 70%{transform:scale(1.1)} }
@keyframes eye-glitch { 0%,90%,100%{transform:none;filter:none} 91%{transform:translate(-3px,1px);filter:drop-shadow(3px 0 #f25fd8) drop-shadow(-3px 0 #2ec5e0)} 94%{transform:translate(3px,-1px)} 97%{transform:translate(-1px,0)} }
/* highlight floats opposite for a liquid, alive feel + occasional flicker */
:root[data-mode="monster"] .eye-shine { animation: eye-shine 6.5s ease-in-out infinite; }
@keyframes eye-shine { 0%,88%,100%{transform:translate(0,0);opacity:1} 30%{transform:translate(-1.6px,1.2px)} 60%{transform:translate(1.2px,-1px)} 90%{opacity:.4} }
/* whole iris group: rare chroma burst, GPU-cheap */
:root[data-mode="monster"] .eye-iris { animation: eye-chroma 8s steps(1) infinite; }
@keyframes eye-chroma { 0%,92%,100%{filter:none} 93%{filter:drop-shadow(4px 0 #f25fd8) drop-shadow(-4px 0 #2ec5e0)} 96%{filter:drop-shadow(-4px 0 #f25fd8) drop-shadow(4px 0 #2ec5e0)} }

/* CTA card: occasional chroma shimmer on its neon frame */
:root[data-mode="monster"] .cta { animation: g-cta 11s steps(1) infinite; }
@keyframes g-cta { 0%,82%,100%{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)} 84%{box-shadow:6px 0 0 1px #f25fd8,-6px 0 0 1px #2ec5e0,0 0 30px -4px var(--accent-2)} 88%{box-shadow:-6px 0 0 1px #f25fd8,6px 0 0 1px #2ec5e0} }

/* media/images: VHS chroma + scan-shift on hover, scanlines overlay always */
:root[data-mode="monster"] .work-card img, :root[data-mode="monster"] .tile img, :root[data-mode="monster"] .art-figure img { filter: saturate(1.2) hue-rotate(-6deg); }
:root[data-mode="monster"] .work-card:hover img, :root[data-mode="monster"] .tile:hover img, :root[data-mode="monster"] .art-figure:hover img { animation: g-img .35s steps(2) 3; }
@keyframes g-img { 0%{filter:drop-shadow(4px 0 #f25fd8) drop-shadow(-4px 0 #2ec5e0);transform:translate(0)} 50%{filter:drop-shadow(-5px 0 #f25fd8) drop-shadow(5px 0 #2ec5e0);transform:translate(2px,-1px)} 100%{filter:none;transform:none} }
:root[data-mode="monster"] .work-card__visual::after, :root[data-mode="monster"] .art-figure::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 4px); mix-blend-mode:multiply; }

/* Monster glitch is mostly idle; honor reduced-motion so it goes still. */
@media (prefers-reduced-motion: reduce) {
  :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"] .aurora::after, :root[data-mode="monster"] .synth-sun,
  :root[data-mode="monster"] .hero__emblem, :root[data-mode="monster"] .about__avatar,
  :root[data-mode="monster"] .eye-ball, :root[data-mode="monster"] .eye-pupil,
  :root[data-mode="monster"] .eye-shine, :root[data-mode="monster"] .eye-iris,
  :root[data-mode="monster"] .cta { animation: none !important; }
}