/* Home page: holographic sticker theme (taken from imgs/ctf_sticker.png) */
:root {
    --surface: #cdd6e1;
    --ink: #1b1a1f;
    --text: #e9edf3;
    --text-dim: #9aa3b4;
    --ice: #b9cfe6;
    --periwinkle: #8fa6dc;
    --pink: #e3a6c4;
    --mint: #9fd8b8;
    --lilac: #c8b6f0;
    --foil: linear-gradient(115deg,
        var(--ice) 0%, var(--periwinkle) 22%, var(--pink) 38%,
        var(--ice) 52%, var(--mint) 68%, var(--lilac) 84%, var(--ice) 100%);
    --cut: 28px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.home {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--surface);
    color: var(--text);
    font-family: 'Martian Mono', ui-monospace, monospace;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Sticker panel: foil edge, chamfered corners, notch on the top edge */
.sticker {
    --shape: polygon(
        0 0, 38% 0, calc(38% + 14px) 14px, calc(62% - 14px) 14px, 62% 0,
        calc(100% - var(--cut)) 0, 100% var(--cut),
        100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
    width: 100%;
    max-width: 960px;
    padding: 2px;
    background: var(--foil);
    background-size: 300% 100%;
    clip-path: var(--shape);
    animation: sheen 14s ease-in-out infinite alternate;
    filter: drop-shadow(0 24px 40px rgba(27, 26, 31, 0.28));
}

.sticker-inner {
    display: grid;
    grid-template-columns: minmax(160px, 260px) 1fr;
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 72px);
    background: var(--ink);
    clip-path: var(--shape);
}

/* Logo rendered as foil through the PNG's alpha */
.logo-container {
    aspect-ratio: 1;
    background: var(--foil);
    background-size: 300% 300%;
    -webkit-mask: url(imgs/c2.png) center / contain no-repeat;
    mask: url(imgs/c2.png) center / contain no-repeat;
    animation: sheen 14s ease-in-out infinite alternate;
}

.logo {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

@keyframes sheen {
    from { background-position: 0% 30%; }
    to { background-position: 100% 70%; }
}

.sticker-body {
    min-width: 0;
    container-type: inline-size;
}

/* Wordmark */
.glitch {
    font-family: 'Archivo', system-ui, sans-serif;
    font-stretch: 125%;
    font-weight: 900;
    font-size: clamp(1.75rem, 12cqi, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--text);
}

.glitch::after {
    content: '_';
    font-weight: 400;
    color: var(--pink);
    animation: cursor 1.1s steps(1) infinite;
}

@keyframes cursor {
    50% { opacity: 0; }
}

/* Server log readout */
.subtitle-container {
    margin-top: clamp(24px, 3.5vw, 36px);
    padding-top: 20px;
    border-top: 1px solid rgba(233, 237, 243, 0.14);
    font-stretch: 87.5%;
    font-size: clamp(0.72rem, 1.35vw, 0.86rem);
    line-height: 1.75;
}

.cryptic-subtitle,
.cryptic-subtitle-log {
    overflow-wrap: anywhere;
}

.cryptic-subtitle {
    color: var(--text-dim);
}

.cryptic-subtitle-log {
    margin-top: 0.6em;
    color: var(--pink);
    font-weight: 500;
}

/* Mobile: stack logo above the wordmark */
@media (max-width: 640px) {
    .sticker {
        --cut: 20px;
    }

    .sticker-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 48px 24px 40px;
    }

    .logo-container {
        width: 112px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticker,
    .logo-container,
    .glitch::after {
        animation: none;
    }
}