/* =========================================================
   ANOMALIA NETWORK
   Interface Effects
   Version: 1.0
   ========================================================= */


/* =========================================================
   Effect Variables
   ========================================================= */

:root {
    --effect-fade-duration: 700ms;
    --effect-slide-distance: 14px;
    --effect-stagger-step: 120ms;
    --effect-cursor-speed: 850ms;
    --effect-pulse-speed: 2200ms;
}


/* =========================================================
   Application Visibility
   ========================================================= */

#application {
    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--effect-fade-duration) ease,
        visibility 0s linear var(--effect-fade-duration);
}

#application.application-visible {
    opacity: 1;
    visibility: visible;

    transition-delay: 0s;
}


/* =========================================================
   Boot Screen Visibility
   ========================================================= */

#boot-screen {
    opacity: 1;
    visibility: visible;

    transition:
        opacity 500ms ease,
        visibility 0s linear 500ms;
}

#boot-screen.boot-screen-hidden {
    opacity: 0;
    visibility: hidden;
}


/* =========================================================
   Reveal Animation
   ========================================================= */

.effect-reveal {
    opacity: 0;

    transform: translateY(var(--effect-slide-distance));

    transition:
        opacity var(--effect-fade-duration) ease,
        transform var(--effect-fade-duration) ease;
}

.effect-reveal.effect-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   Stagger Delays
   ========================================================= */

.effect-delay-1 {
    transition-delay: calc(var(--effect-stagger-step) * 1);
}

.effect-delay-2 {
    transition-delay: calc(var(--effect-stagger-step) * 2);
}

.effect-delay-3 {
    transition-delay: calc(var(--effect-stagger-step) * 3);
}

.effect-delay-4 {
    transition-delay: calc(var(--effect-stagger-step) * 4);
}

.effect-delay-5 {
    transition-delay: calc(var(--effect-stagger-step) * 5);
}

.effect-delay-6 {
    transition-delay: calc(var(--effect-stagger-step) * 6);
}


/* =========================================================
   Blinking Cursor
   ========================================================= */

.terminal-cursor::after {
    display: inline-block;

    width: 0.65em;
    height: 1.1em;
    margin-left: var(--spacing-1);

    vertical-align: -0.16em;

    background-color: var(--color-accent);

    box-shadow: 0 0 6px rgba(91, 255, 110, 0.55);

    content: "";

    animation: terminal-cursor-blink var(--effect-cursor-speed) steps(1) infinite;
}


/* =========================================================
   Typing Target
   ========================================================= */

.typing-text {
    white-space: pre-wrap;
}

.typing-text.is-typing::after {
    display: inline-block;

    width: 0.6em;
    height: 1em;
    margin-left: var(--spacing-1);

    vertical-align: -0.12em;

    background-color: currentColor;

    content: "";

    animation: terminal-cursor-blink var(--effect-cursor-speed) steps(1) infinite;
}


/* =========================================================
   Status Pulse
   ========================================================= */

.status-online,
.status-indicator.status-online::before,
.terminal-header span:first-child::before {
    animation: status-online-pulse var(--effect-pulse-speed) ease-in-out infinite;
}

.status-warning,
.status-indicator.status-warning::before {
    animation: status-warning-pulse 1800ms ease-in-out infinite;
}

.status-danger,
.status-indicator.status-danger::before {
    animation: status-danger-pulse 1100ms ease-in-out infinite;
}


/* =========================================================
   Radiation Icon Pulse
   ========================================================= */

.terminal-header h1 i {
    animation: radiation-pulse 3200ms ease-in-out infinite;
}


/* =========================================================
   Button Activation Effect
   ========================================================= */

.btn-terminal {
    isolation: isolate;
}

.btn-terminal::after {
    position: absolute;
    inset: 0;

    z-index: -1;

    background-color: rgba(91, 255, 110, 0.08);

    opacity: 0;

    content: "";

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.btn-terminal:active::after {
    opacity: 1;

    transform: scaleX(1);
}

.btn-terminal.is-success {
    color: var(--color-background);

    background-color: var(--color-accent);
    border-color: var(--color-accent);

    box-shadow: 0 0 16px rgba(91, 255, 110, 0.24);
}

.btn-terminal.is-error {
    color: var(--color-danger);

    border-color: var(--color-danger);

    box-shadow: 0 0 14px rgba(255, 92, 92, 0.16);
}


/* =========================================================
   Module Activity Effect
   ========================================================= */

.status-module.module-active {
    border-color: rgba(91, 255, 110, 0.75);

    box-shadow:
        inset 0 0 20px rgba(91, 255, 110, 0.025),
        0 0 18px rgba(91, 255, 110, 0.08);

    animation: module-activity-pulse 2800ms ease-in-out infinite;
}


/* =========================================================
   Console Line Entry
   ========================================================= */

.console-line {
    opacity: 0;

    transform: translateX(-8px);

    animation: console-line-entry 320ms ease forwards;
}

.console-line.console-warning {
    color: var(--color-warning) !important;
}

.console-line.console-danger {
    color: var(--color-danger) !important;
}

.console-line.console-success {
    color: var(--color-accent) !important;
}

.console-line.console-info {
    color: var(--color-info) !important;
}


/* =========================================================
   Glitch Effect
   ========================================================= */

.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    position: absolute;
    inset: 0;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    content: attr(data-text);
}

.glitch::before {
    color: rgba(255, 92, 92, 0.55);

    transform: translateX(-1px);
}

.glitch::after {
    color: rgba(108, 168, 255, 0.55);

    transform: translateX(1px);
}

.glitch.glitch-active::before {
    opacity: 0.65;

    animation: glitch-layer-left 180ms steps(2) 2;
}

.glitch.glitch-active::after {
    opacity: 0.55;

    animation: glitch-layer-right 180ms steps(2) 2;
}

.glitch.glitch-active {
    animation: glitch-main 180ms steps(2) 2;
}


/* =========================================================
   Signal Interference
   ========================================================= */

.signal-interference {
    position: relative;
}

.signal-interference::after {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background-color: rgba(184, 255, 184, 0.35);

    box-shadow:
        0 0 8px rgba(91, 255, 110, 0.45),
        0 0 18px rgba(91, 255, 110, 0.16);

    opacity: 0;

    pointer-events: none;

    content: "";
}

.signal-interference.signal-active::after {
    opacity: 1;

    animation: signal-interference-scan 650ms linear;
}


/* =========================================================
   Loading Dots
   ========================================================= */

.loading-dots::after {
    display: inline-block;

    width: 1.5em;

    overflow: hidden;

    vertical-align: bottom;

    content: "...";

    animation: loading-dots 1400ms steps(4, end) infinite;
}


/* =========================================================
   Data Update Flash
   ========================================================= */

.data-updated {
    animation: data-update-flash 650ms ease;
}


/* =========================================================
   Keyframes
   ========================================================= */

@keyframes terminal-cursor-blink {
    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}

@keyframes status-online-pulse {
    0%,
    100% {
        opacity: 0.72;

        text-shadow: 0 0 4px rgba(91, 255, 110, 0.2);
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 5px rgba(91, 255, 110, 0.35),
            0 0 12px rgba(91, 255, 110, 0.18);
    }
}

@keyframes status-warning-pulse {
    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;

        text-shadow: 0 0 10px rgba(255, 213, 79, 0.28);
    }
}

@keyframes status-danger-pulse {
    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;

        text-shadow:
            0 0 6px rgba(255, 92, 92, 0.36),
            0 0 14px rgba(255, 92, 92, 0.2);
    }
}

@keyframes radiation-pulse {
    0%,
    100% {
        opacity: 0.78;

        filter: drop-shadow(0 0 4px rgba(91, 255, 110, 0.28));
    }

    50% {
        opacity: 1;

        filter:
            drop-shadow(0 0 5px rgba(91, 255, 110, 0.5))
            drop-shadow(0 0 12px rgba(91, 255, 110, 0.16));
    }
}

@keyframes module-activity-pulse {
    0%,
    100% {
        box-shadow:
            inset 0 0 20px rgba(91, 255, 110, 0.02),
            0 0 12px rgba(91, 255, 110, 0.04);
    }

    50% {
        box-shadow:
            inset 0 0 24px rgba(91, 255, 110, 0.04),
            0 0 22px rgba(91, 255, 110, 0.1);
    }
}

@keyframes console-line-entry {
    from {
        opacity: 0;

        transform: translateX(-8px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }
}

@keyframes glitch-main {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(-1px, 0);
    }

    50% {
        transform: translate(1px, -0.5px);
    }

    75% {
        transform: translate(-0.5px, 0.5px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes glitch-layer-left {
    0% {
        clip-path: inset(10% 0 72% 0);
    }

    50% {
        clip-path: inset(64% 0 12% 0);
    }

    100% {
        clip-path: inset(36% 0 44% 0);
    }
}

@keyframes glitch-layer-right {
    0% {
        clip-path: inset(72% 0 8% 0);
    }

    50% {
        clip-path: inset(16% 0 63% 0);
    }

    100% {
        clip-path: inset(48% 0 28% 0);
    }
}

@keyframes signal-interference-scan {
    0% {
        top: 0;

        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.45;
    }

    100% {
        top: 100%;

        opacity: 0;
    }
}

@keyframes loading-dots {
    0% {
        width: 0;
    }

    100% {
        width: 1.5em;
    }
}

@keyframes data-update-flash {
    0% {
        color: var(--color-text-primary);
    }

    35% {
        color: var(--color-accent);

        text-shadow: 0 0 10px rgba(91, 255, 110, 0.35);
    }

    100% {
        color: inherit;

        text-shadow: inherit;
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    #application,
    #boot-screen,
    .effect-reveal {
        transition-duration: 0.01ms;
    }

    .terminal-cursor::after,
    .typing-text.is-typing::after,
    .status-online,
    .status-warning,
    .status-danger,
    .status-indicator::before,
    .terminal-header h1 i,
    .status-module.module-active,
    .loading-dots::after {
        animation: none !important;
    }

    .console-line {
        opacity: 1;

        transform: none;

        animation: none;
    }

    .glitch::before,
    .glitch::after {
        display: none;
    }
}