/* styles/style.css */

/*
    CDN Test Server #2
    Retro terminal / diagnostics style
*/

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    padding: 24px;

    font-family: Consolas, Monaco, "Courier New", monospace;
    color: #d7ffd7;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background:
        linear-gradient(rgba(0, 255, 90, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 90, 0.035) 1px, transparent 1px),
        #061006;
    background-size: 18px 18px;

    overflow: hidden;
}

/* CRT-затемнение по краям */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.68) 100%),
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.035) 0,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px,
            transparent 4px
        );
}

/* Основной блок */
body::after {
    content: "SERVER-02 :: CDN EDGE CHECK :: HTTP 200 OK";
    position: fixed;
    top: 24px;
    left: 24px;

    padding: 10px 14px;
    border: 1px solid rgba(80, 255, 120, 0.45);
    background: rgba(0, 30, 0, 0.7);

    font-size: 13px;
    letter-spacing: 0.08em;
    color: #7dff9a;

    box-shadow: 0 0 18px rgba(0, 255, 90, 0.25);
}

h1 {
    margin: 0 0 28px;
    max-width: 900px;

    font-size: clamp(28px, 6vw, 72px);
    line-height: 1.1;
    text-align: left;
    letter-spacing: -0.04em;

    color: #b8ffbf;
    text-shadow:
        0 0 5px rgba(90, 255, 120, 0.9),
        0 0 18px rgba(90, 255, 120, 0.35);

    animation: terminal-flicker 3s infinite;
}

h1::before {
    content: "> ";
    color: #42ff6b;
}

h1::after {
    content: "_";
    display: inline-block;
    margin-left: 8px;
    color: #42ff6b;
    animation: cursor-blink 1s steps(1) infinite;
}

img {
    display: block;
    width: min(220px, 62vw);
    height: auto;

    padding: 18px;
    margin-top: 12px;

    background: #071807;
    border: 2px solid #42ff6b;
    border-radius: 4px;

    filter:
        grayscale(1)
        contrast(1.35)
        brightness(1.15)
        drop-shadow(0 0 18px rgba(66, 255, 107, 0.6));

    image-rendering: auto;

    transform: rotate(-1deg);
}

img:hover {
    filter:
        grayscale(0)
        contrast(1.15)
        brightness(1.2)
        drop-shadow(0 0 28px rgba(66, 255, 107, 0.85));

    transform: rotate(1deg) scale(1.04);
}

/* Нижняя диагностическая строка */
@media (min-width: 720px) {
    h1 {
        position: relative;
    }

    h1::selection,
    img::selection {
        background: #42ff6b;
        color: #041004;
    }

    body {
        cursor: crosshair;
    }
}

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

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

@keyframes terminal-flicker {
    0%, 100% {
        opacity: 1;
    }

    92% {
        opacity: 0.96;
    }

    94% {
        opacity: 0.82;
    }

    96% {
        opacity: 1;
    }
}