/* =====================================================================
   AKIRA.MEDIA — glitch easter egg  (additive; controller: js/glitch-egg.js)
   Hold the pointer on the AKIRA.MEDIA logo (.title-link). Nothing happens for
   the first 15s; after that the glitch spreads outward from the logo, element
   by element, over ~30s until the whole page is going and a screen overlay
   kicks in. Leaves the existing title-hover glitch untouched.

   Colours come from the site's own 17-colour title palette. Each element is
   seeded with its OWN random colour pair, motion variant, speed and phase (the
   --eg-* custom properties). Media elements slowly re-tint via transition:filter.
   Rare scheduled events add bold ERROR swaps, italic/wide styling, and a
   duplication echo on random text. The EQ is recoloured in-canvas by mixes.js
   (via window.__egState) — bars only, background untouched.
   Fully disabled under prefers-reduced-motion (media query at the end).
   ===================================================================== */

.eg-glitch {
    --eg-amp: calc(1px * var(--eg-as, 1));
    animation-name: var(--eg-kf, egJitterA);
    animation-duration: var(--eg-base, 0.6s);
    animation-timing-function: steps(2, end);
    animation-delay: var(--eg-delay, 0s);
    animation-iteration-count: infinite;
    filter: drop-shadow(1px 0 var(--eg-c1, rgba(87,141,57,0.55)))
            drop-shadow(-1px 0 var(--eg-c2, rgba(225,33,32,0.55)))
            hue-rotate(var(--eg-h, 0deg)) saturate(var(--eg-s, 1))
            brightness(var(--eg-b, 1)) contrast(var(--eg-k, 1));
    /* Slow glide so the periodic image re-tint changes gradually. */
    transition: filter 2.8s ease, letter-spacing 1.2s ease;
}
.eg-glitch.eg-lvl2 {
    --eg-amp: calc(2px * var(--eg-as, 1));
    animation-duration: calc(var(--eg-base, 0.6s) * 0.7);
    filter: drop-shadow(2px 0 var(--eg-c1, rgba(87,141,57,0.55)))
            drop-shadow(-2px 0 var(--eg-c2, rgba(225,33,32,0.55)))
            hue-rotate(var(--eg-h, 0deg)) saturate(var(--eg-s, 1))
            brightness(var(--eg-b, 1)) contrast(var(--eg-k, 1));
}
.eg-glitch.eg-lvl3 {
    --eg-amp: calc(3px * var(--eg-as, 1));
    animation-duration: calc(var(--eg-base, 0.6s) * 0.5);
    filter: drop-shadow(3px 0 var(--eg-c1, rgba(87,141,57,0.55)))
            drop-shadow(-3px 0 var(--eg-c2, rgba(225,33,32,0.55)))
            hue-rotate(var(--eg-h, 0deg)) saturate(var(--eg-s, 1))
            brightness(var(--eg-b, 1)) contrast(var(--eg-k, 1));
}

/* Three motion variants — one is chosen per element at random. All scale off
   --eg-amp so the level classes still drive amplitude. */
@keyframes egJitterA {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(calc(var(--eg-amp, 1px) * -1), var(--eg-amp, 1px)); }
    50% { transform: translate(var(--eg-amp, 1px), calc(var(--eg-amp, 1px) * -1)); }
    75% { transform: translate(calc(var(--eg-amp, 1px) * -1), 0); }
}
@keyframes egJitterB {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(var(--eg-amp, 1px), var(--eg-amp, 1px)); }
    45% { transform: translate(calc(var(--eg-amp, 1px) * -1), 0); }
    70% { transform: translate(0, calc(var(--eg-amp, 1px) * -1)); }
    90% { transform: translate(var(--eg-amp, 1px), calc(var(--eg-amp, 1px) * -1)); }
}
@keyframes egJitterC {
    0%, 100% { transform: translate(0, 0); }
    30% { transform: translate(calc(var(--eg-amp, 1px) * -1), calc(var(--eg-amp, 1px) * -1)); }
    55% { transform: translate(var(--eg-amp, 1px), var(--eg-amp, 1px)); }
    80% { transform: translate(calc(var(--eg-amp, 1px) * -1), var(--eg-amp, 1px)); }
}

/* Text effects (applied to random text leaves by the controller). */
.eg-error  { font-weight: 700 !important; font-style: normal !important; letter-spacing: 0.05em; }
.eg-italic { font-style: italic; }
.eg-wide   { letter-spacing: 0.18em; }

/* Duplication echo — rare, brief event. Two offset ghost copies of the text
   (from data-egdup) in the element's own palette split colours. */
.eg-dup { position: relative; }
.eg-dup::before,
.eg-dup::after {
    content: attr(data-egdup);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0.75;
}
.eg-dup::before {
    color: var(--eg-c1, rgba(87,141,57,0.9));
    animation: egDupA 0.32s steps(2, end) infinite;
}
.eg-dup::after {
    color: var(--eg-c2, rgba(225,33,32,0.9));
    animation: egDupB 0.36s steps(2, end) infinite;
}
@keyframes egDupA {
    0%, 100% { transform: translate(-0.06em, -1px); }
    50%      { transform: translate(-0.12em, 1px); }
}
@keyframes egDupB {
    0%, 100% { transform: translate(0.06em, 1px); }
    50%      { transform: translate(0.12em, -1px); }
}

/* Full-page finale overlay, injected by the controller. Low-opacity scanlines
   + a palette-coloured RGB fringe (--eg-oc1/--eg-oc2 set by JS), screen-blended.
   pointer-events:none so it never blocks the UI. Slow fade so the wind-down is
   gradual. */
.eg-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 1.2s ease;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, var(--eg-oc1, rgba(225,33,32,0.12)), transparent 42%, transparent 58%, var(--eg-oc2, rgba(3,56,95,0.12)));
    animation: egOverlayShift 0.8s steps(2, end) infinite;
}
.eg-overlay.on { opacity: 1; }

@keyframes egOverlayShift {
    0%, 100% { background-position: 0 0, 0 0; }
    50%      { background-position: 0 2px, 2px 0; }
}

/* Gentle whole-viewport shudder for the finale (applied to a wrapper by JS). */
.eg-quake { animation: egQuake 0.30s steps(2, end) infinite; }
@keyframes egQuake {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(1px, -1px); }
}

@media (prefers-reduced-motion: reduce) {
    .eg-glitch, .eg-overlay, .eg-quake,
    .eg-dup::before, .eg-dup::after {
        animation: none !important;
        filter: none !important;
        transform: none !important;
    }
}