/* ═══════════════════════════════════════════════════════════
   ADDITIONAL EFFECTS
   State overrides and conditional styles for interactive modes.
   Loaded last so cascades over style.css cleanly.
   ═══════════════════════════════════════════════════════════ */


/* ── zap flash ───────────────────────────────────────────── */

.zap-fx {
   position: absolute;
   inset: 0;
   z-index: 31;
   pointer-events: none;
   opacity: 0;
   background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
         rgba(152, 252, 126, .58),
         rgba(0, 234, 255, .3) 30%,
         rgba(255, 0, 238, .15) 54%,
         transparent 72%);
}

@keyframes zapflash {
   0% {
      opacity: 0;
      transform: scale(1);
   }

   7% {
      opacity: 1;
      transform: scale(1.03) skewX(3deg);
   }

   16% {
      opacity: .55;
      transform: scale(.985) skewX(-3deg);
   }

   30% {
      opacity: .85;
      transform: scale(1.012) skewX(1.5deg);
   }

   46% {
      opacity: .5;
      transform: scale(.996) skewX(-1deg);
   }

   100% {
      opacity: 0;
      transform: scale(1);
   }
}

.picture.zap .wm-word {
   font-family: var(--font-glitch);
   -webkit-text-fill-color: var(--matsoft-light-text);
   -webkit-text-stroke: 0;
   text-shadow:
      2px 0 var(--matsoft-red),
      -2px 0 var(--matsoft-miami-blue),
      0 0 18px var(--matsoft-green);
   animation: surge-flow .05s infinite;
}

.picture.zap .fl-m,
.picture.zap .fl-ch {
   animation: none;
   opacity: 1;
   filter: none;
}

.armed {
   cursor: crosshair;
}


/* ── matcha mode wash ────────────────────────────────────── */

body.matcha-mode .sc-sub,
body.matcha-mode .sc-cup,
body.matcha-mode .sc-desc,
body.matcha-mode .foot,
body.matcha-mode .egg-hint,
body.matcha-mode .credit-counter,
body.matcha-mode .boot-log {
   color: var(--matsoft-green);
   text-shadow: 0 0 8px var(--matsoft-green-glow);
}

body.matcha-mode.sign-off .sc-sub,
body.matcha-mode.sign-off .sc-cup,
body.matcha-mode.sign-off .sc-desc,
body.matcha-mode.sign-off .foot,
body.matcha-mode.sign-off .egg-hint,
body.matcha-mode.sign-off .credit-counter,
body.matcha-mode.sign-off .boot-log {
   color: unset;
   text-shadow: none;
}


/* ── sign failing (S×5) ──────────────────────────────────── */

body.sign-failing:not(.sign-off) .wm-word {
   text-shadow:
      0 0 4px #fff,
      0 0 10px var(--matsoft-red),
      0 0 20px var(--matsoft-red),
      0 0 38px var(--matsoft-red);
}

body.sign-failing:not(.sign-off) .softmark {
   content: url("../public/assets/soft-script-angular-inverted.svg");
   filter:
      drop-shadow(0 0 12px var(--matsoft-green-glow)) drop-shadow(0 0 4px var(--matsoft-green));
}

body.sign-failing:not(.sign-off) .hero-mark {
   filter:
      drop-shadow(0 0 12px var(--matsoft-red)) drop-shadow(0 0 4px var(--matsoft-red));
}

body.sign-failing:not(.sign-off) .fl-m,
body.sign-failing:not(.sign-off) .fl-ch {
   animation: none;
   opacity: 1;
}

body.sign-failing:not(.sign-off) .wm-word:hover .fl-m,
body.sign-failing:not(.sign-off) .wm-word:hover .fl-ch {
   animation: none;
   opacity: 1;
   filter: none;
}

body.sign-failing.sign-failing-steady:not(.sign-off):not(.sign-flickering-on):not(.sign-flickering-off) .wm-word {
   animation: sign-fail-steady-flicker 6.5s linear infinite;
}

body.sign-failing.sign-failing-steady:not(.sign-off):not(.sign-flickering-on):not(.sign-flickering-off) .softmark {
   animation: sign-fail-steady-flicker-softmark 6s linear infinite;
}

body.sign-failing.sign-failing-steady:not(.sign-off):not(.sign-flickering-on):not(.sign-flickering-off) .hero-mark {
   animation: sign-fail-steady-flicker-heromark 3.6s ease-in-out infinite;
}

body.sign-failing.sign-failing-steady:not(.sign-off):not(.sign-flickering-on):not(.sign-flickering-off) .fl-m {
   animation: flick-m 5.1s linear infinite;
   opacity: 1;
}

body.sign-failing.sign-failing-steady:not(.sign-off):not(.sign-flickering-on):not(.sign-flickering-off) .fl-ch {
   animation: flick-ch 3.8s linear infinite;
   opacity: 1;
}

@keyframes sign-fail-steady-flicker {

   0%,
   6%,
   9%,
   54%,
   58%,
   88%,
   92%,
   100% {
      opacity: 1;
   }

   7.5% {
      opacity: .62;
   }

   55.5% {
      opacity: .72;
   }

   90% {
      opacity: .66;
   }
}

@keyframes sign-fail-steady-flicker-softmark {

   0%,
   13%,
   17%,
   48%,
   52%,
   82%,
   87%,
   100% {
      opacity: 1;
   }

   14% {
      opacity: .32;
   }

   15.5% {
      opacity: .9;
   }

   49.5% {
      opacity: .26;
   }

   51% {
      opacity: .92;
   }

   84% {
      opacity: .5;
   }

   85.5% {
      opacity: .95;
   }
}

@keyframes sign-fail-steady-flicker-heromark {

   0%,
   100% {
      opacity: .92;
   }

   50% {
      opacity: 1;
   }
}

body.sign-failing:not(.sign-off) .wm-word:hover {
   font-family: var(--font-glitch);
   -webkit-text-fill-color: var(--matsoft-light-text);
   -webkit-text-stroke: 0;
   text-shadow:
      2px 0 var(--matsoft-red),
      -2px 0 var(--matsoft-red),
      0 0 18px var(--matsoft-red);
   animation: surge-flow 0.08s infinite;
}


/* ── wordmark unlock flourish (credit ≥ 5) ───────────────── */

body.sig-unlocked .wm-word {
   animation: wordmark-unlock-flourish 4.5s ease-out;
}

body.sig-unlocked .softmark {
   animation: softmark-unlock-flourish 4.5s ease-out;
}

@keyframes wordmark-unlock-flourish {
   0% {
      filter: brightness(1) saturate(1);
      transform: scale(1);
   }

   8% {
      filter: brightness(1.6) saturate(1.5);
      transform: scale(1.03);
   }

   18% {
      filter: brightness(1.15) saturate(1.2);
      transform: scale(1);
   }

   30% {
      filter: brightness(1.9) saturate(1.6);
      transform: scale(1.05);
   }

   42% {
      filter: brightness(1.1) saturate(1.15);
      transform: scale(1);
   }

   58% {
      filter: brightness(1.45) saturate(1.35);
      transform: scale(1.02);
   }

   72% {
      filter: brightness(1.1) saturate(1.1);
      transform: scale(1);
   }

   100% {
      filter: brightness(1) saturate(1);
      transform: scale(1);
   }
}

@keyframes softmark-unlock-flourish {
   0% {
      filter: drop-shadow(0 0 12px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 4px var(--matsoft-red)) brightness(1) saturate(1);
      transform: scale(1);
   }

   8% {
      filter: drop-shadow(0 0 22px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 10px var(--matsoft-red)) brightness(1.5) saturate(1.4);
      transform: scale(1.03);
   }

   18% {
      filter: drop-shadow(0 0 14px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 6px var(--matsoft-red)) brightness(1.1);
      transform: scale(1);
   }

   30% {
      filter: drop-shadow(0 0 28px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 12px var(--matsoft-red)) brightness(1.7) saturate(1.5);
      transform: scale(1.05);
   }

   42% {
      filter: drop-shadow(0 0 14px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 6px var(--matsoft-red)) brightness(1.05);
      transform: scale(1);
   }

   58% {
      filter: drop-shadow(0 0 20px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 8px var(--matsoft-red)) brightness(1.3) saturate(1.2);
      transform: scale(1.02);
   }

   72% {
      filter: drop-shadow(0 0 14px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 6px var(--matsoft-red)) brightness(1.1);
      transform: scale(1);
   }

   100% {
      filter: drop-shadow(0 0 12px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 4px var(--matsoft-red)) brightness(1) saturate(1);
      transform: scale(1);
   }
}

body.lunar .picture {
   filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
}

body.lunar .wall-glow {
   background: radial-gradient(closest-side,
         rgba(152, 252, 126, .05),
         rgba(0, 234, 255, .08) 55%,
         transparent 78%);
}

@keyframes lunar-flicker {
   0% {
      filter: hue-rotate(var(--picture-hue));
   }

   10% {
      filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
   }

   22% {
      filter: hue-rotate(var(--picture-hue));
   }

   32% {
      filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
   }

   42% {
      filter: hue-rotate(var(--picture-hue));
   }

   50% {
      filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
   }

   57% {
      filter: hue-rotate(var(--picture-hue));
   }

   63% {
      filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
   }

   69% {
      filter: hue-rotate(var(--picture-hue));
   }

   74% {
      filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
   }

   79% {
      filter: hue-rotate(var(--picture-hue));
   }

   83% {
      filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
   }

   87% {
      filter: hue-rotate(var(--picture-hue));
   }

   91% {
      filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
   }

   95% {
      filter: hue-rotate(var(--picture-hue));
   }

   100% {
      filter: hue-rotate(var(--picture-hue)) grayscale(0.85) contrast(1.1) brightness(0.9);
   }
}

body.lunar-flickering .picture {
   animation: lunar-flicker 1.2s step-end forwards;
}

@media (prefers-reduced-motion: reduce) {
   body.lunar-flickering .picture {
      animation: none;
   }
}


/* ── screensaver ─────────────────────────────────────────── */

body.screensaver .sc-sub,
body.screensaver .sc-desc,
body.screensaver .sc-cup,
body.screensaver .email-form-root,
body.screensaver .foot,
body.screensaver .credit-counter,
body.screensaver .egg-hint,
body.screensaver .boot-log,
body.screensaver .boot-skip {
   opacity: 0;
   animation: none;
   pointer-events: none;
}

body.screensaver .picture {
   background: #000;
}

.screensaver-fx {
   position: absolute;
   inset: 0;
   z-index: 25;
   pointer-events: none;
   overflow: hidden;
}

.screensaver-fx__lockup {
   position: absolute;
   left: 0;
   top: 0;
   transform: scale(0.926);
   transform-origin: top left;
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 12px 20px;
   filter: hue-rotate(var(--lockup-hue, 0deg));
   will-change: left, top;
}

.screensaver-fx__cup {
   display: block;
   width: clamp(38px, 6.2vw, 68px);
   height: auto;
   flex: none;
   filter:
      drop-shadow(0 0 6px var(--matsoft-green)) drop-shadow(0 0 14px var(--matsoft-green-glow));
}

.screensaver-fx__wm-col {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.screensaver-fx__wm-row {
   display: flex;
   align-items: baseline;
   gap: 4px;
   white-space: nowrap;
}

.screensaver-fx__wm-word {
   display: inline-block;
   font-family: var(--font-display);
   font-weight: 900;
   font-variation-settings: "wght"900;
   font-size: clamp(1.2rem, 3.6vw, 2.25rem);
   line-height: 1;
   letter-spacing: .05em;
   color: #2a0b52;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 1.5px rgba(243, 236, 236, .95);
   text-shadow:
      0 0 4px #fff,
      0 0 10px var(--matsoft-green),
      0 0 20px var(--matsoft-green),
      0 0 38px var(--matsoft-green-glow),
      0 0 62px var(--matsoft-logo-pink-glow);
}

.screensaver-fx__wm-badge {
   display: inline-block;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 0.7rem;
   line-height: 1;
   color: var(--matsoft-light-text);
   opacity: 0.85;
   letter-spacing: 0.05em;
}

.screensaver-fx__softmark {
   display: block;
   width: auto;
   height: clamp(32px, 5.2vw, 56px);
   margin-top: clamp(-13px, -1.1vw, -7px);
   filter:
      drop-shadow(0 0 12px var(--matsoft-logo-pink-glow)) drop-shadow(0 0 4px var(--matsoft-red));
}

.hero-mark.is-celebrating {
   animation: cup-wiggle 0.6s step-end infinite;
}

.hero-mark-wrap {
   position: relative;
   display: inline-block;
   line-height: 0;
}

.hero-mark-particles {
   position: absolute;
   inset: -8px;
   pointer-events: none;
   z-index: 3;
   overflow: visible;
}

.hero-mark-particle {
   position: absolute;
   left: 50%;
   bottom: 50%;
   width: var(--size, 5px);
   height: var(--size, 5px);
   border-radius: 50%;
   background: var(--particle-color, var(--matsoft-green));
   box-shadow:
      0 0 2px var(--particle-color, var(--matsoft-green)),
      0 0 10px var(--particle-glow, var(--matsoft-green-glow));
   filter: blur(1px);
   pointer-events: none;
   opacity: 0;
   transform: translate(calc(-50% + var(--px-start, 0px)), 0);
   animation: hero-mark-drift var(--dur, 2s) ease-out forwards;
}

@keyframes hero-mark-drift {
   0% {
      opacity: 0;
      transform: translate(calc(-50% + var(--px-start, 0px)), 0) scale(0.6) rotate(0deg);
   }

   15% {
      opacity: 1;
      transform: translate(calc(-50% + var(--px-start, 0px)), -8px) scale(1) rotate(calc(var(--rot, 0deg) * 0.5));
   }

   60% {
      opacity: 0.8;
   }

   100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--px-start, 0px) + var(--px-drift, 0px)), -180px) scale(0.9) rotate(calc(var(--rot, 0deg) * 4));
   }
}

@keyframes sign-flicker {
   0% {
      opacity: 0.35;
   }

   15% {
      opacity: 1;
   }

   22% {
      opacity: 0.35;
   }

   32% {
      opacity: 1;
   }

   38% {
      opacity: 0.35;
   }

   46% {
      opacity: 1;
   }

   50% {
      opacity: 0.35;
   }

   57% {
      opacity: 1;
   }

   60% {
      opacity: 0.35;
   }

   66% {
      opacity: 1;
   }

   69% {
      opacity: 0.35;
   }

   74% {
      opacity: 1;
   }

   76% {
      opacity: 0.35;
   }

   80% {
      opacity: 1;
   }

   82% {
      opacity: 0.35;
   }

   85% {
      opacity: 1;
   }

   87% {
      opacity: 0.35;
   }

   90% {
      opacity: 1;
   }

   92% {
      opacity: 0.35;
   }

   94% {
      opacity: 1;
   }

   96% {
      opacity: 0.35;
   }

   98% {
      opacity: 1;
   }

   100% {
      opacity: 1;
   }
}

body.sign-flickering-on .wm-word,
body.sign-flickering-on .softmark,
body.sign-flickering-on .hero-mark {
   animation: sign-flicker 1.5s step-end forwards;
}

body.sign-flickering-off .wm-word,
body.sign-flickering-off .softmark,
body.sign-flickering-off .hero-mark {
   animation: sign-flicker 1.5s step-end reverse forwards;
}

@media (prefers-reduced-motion: reduce) {

   body.sign-flickering-on .wm-word,
   body.sign-flickering-on .softmark,
   body.sign-flickering-on .hero-mark,
   body.sign-flickering-off .wm-word,
   body.sign-flickering-off .softmark,
   body.sign-flickering-off .hero-mark {
      animation: none;
   }

   .picture.zap .wm-word {
      animation: none !important;
   }
}