/* Public landing page ("/") - splash + 18+ gate. Uses general.css tokens only. */

body {
    align-items: center;
    justify-content: center;
    position: relative;
}

/* --- Artwork backdrop --- */
.landing-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: var(--color-dark-bg);
}

/* Diagonal wall of vertical tracks sliding in alternating directions. */
.landing-wall {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 145vw;
    height: 200vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    transform: translate(-50%, -50%) rotate(-14deg);
    /* Blurred by default. Only the .age-ok class ever removes it. */
    filter: blur(15px) saturate(1.15) brightness(0.72);
    transition: filter 700ms ease;
}

html.age-ok .landing-wall {
    filter: blur(0) saturate(1.05) brightness(1);
}

.landing-track {
    flex: 0 0 clamp(130px, 15vw, 230px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: landing-track-scroll 60s linear infinite;
    will-change: transform;
}

.landing-tile {
    width: 100%;
    aspect-ratio: 180 / 255;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    display: block;
    transition: opacity 550ms ease;
}

/* Hidden until decoded, so no empty frames flash. Only applied when JS can
   flip them back on, otherwise the wall would stay blank. */
html.js .landing-tile {
    opacity: 0;
}

html.js .landing-tile.is-loaded {
    opacity: 1;
}

/* -50% minus half a gap keeps the duplicated half aligned on loop */
@keyframes landing-track-scroll {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(calc(-50% - 7px));
    }
}

.landing-track:nth-child(even) {
    animation-direction: reverse;
}

.landing-track:nth-child(1) { animation-duration: 58s; animation-delay: -12s; }
.landing-track:nth-child(2) { animation-duration: 72s; animation-delay: -40s; }
.landing-track:nth-child(3) { animation-duration: 64s; animation-delay: -5s; }
.landing-track:nth-child(4) { animation-duration: 80s; animation-delay: -55s; }
.landing-track:nth-child(5) { animation-duration: 54s; animation-delay: -22s; }
.landing-track:nth-child(6) { animation-duration: 76s; animation-delay: -33s; }
.landing-track:nth-child(7) { animation-duration: 62s; animation-delay: -48s; }
.landing-track:nth-child(8) { animation-duration: 84s; animation-delay: -18s; }
.landing-track:nth-child(9) { animation-duration: 68s; animation-delay: -60s; }

/* Wider tiles on large screens: covers more width and makes each track half
   taller, so the duplicated half stays off screen. */
@media (min-width: 1800px) {
    .landing-track {
        flex-basis: 300px;
    }
}

.landing-wall-fallback {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(116, 195, 255, 0.18), transparent 55%),
        radial-gradient(circle at 80% 85%, rgba(216, 137, 238, 0.16), transparent 55%);
    background-color: var(--color-dark-bg);
}

.landing-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--color-dark-bg) 10%, transparent) 0%, color-mix(in srgb, var(--color-dark-bg) 16%, transparent) 42%, color-mix(in srgb, var(--color-dark-bg) 62%, transparent) 74%, color-mix(in srgb, var(--color-dark-bg) 92%, transparent) 100%),
        linear-gradient(to bottom, color-mix(in srgb, var(--color-dark-bg) 16%, transparent), color-mix(in srgb, var(--color-dark-bg) 38%, transparent));
}

/* --- Splash --- */
.landing-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    padding-top: calc(20px + var(--safe-top));
    padding-bottom: calc(20px + var(--safe-bottom));
    padding-left: calc(20px + var(--safe-left));
    padding-right: calc(20px + var(--safe-right));
    max-height: 100dvh;
    overflow: auto;
}

.landing-card {
    background-color: color-mix(in srgb, var(--color-card-bg) 95%, transparent);
    backdrop-filter: blur(10px);
    border-color: var(--color-border-bright);
    padding: 28px 32px;
    width: min(420px, 100%);
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#landing_mascot {
    width: 130px;
    height: auto;
    border-radius: var(--border-radius-md);
    user-select: none;
    -webkit-user-drag: none;
}

.landing-title {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

.landing-tagline {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-scrollbar-thumb);
    max-width: 32ch;
}

.landing-cta {
    margin: 4px auto 0 auto;
    padding: 10px 18px;
    font-size: 16px;
    justify-content: center;
    box-shadow: var(--shadow-lift);
}

.landing-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-text-secondary);
    transition: color 0.2s;
}

.landing-secondary:hover {
    color: var(--color-text-secondary-hover);
}

.landing-secondary .material-symbols-outlined {
    font-size: 16px;
}

.landing-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    width: 100%;
}

.landing-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background-color: var(--color-card-bg-secondary);
    transition: border-color 0.2s, transform 0.2s;
}

.landing-socials a:hover {
    border-color: var(--color-border-bright);
    transform: translateY(-2px);
}

.landing-socials img {
    border-radius: 4px;
}

.landing-footnote {
    margin: 0;
    font-size: 11px;
    color: var(--color-scrollbar-thumb);
    text-align: center;
}

/* The 18+ gate lives in ageGate.css, shared with /welcome. */

/* --- Mobile --- */
@media (max-width: 768px) {
    .landing-card {
        padding: 22px 20px;
    }

    #landing_mascot {
        width: 100px;
    }

    .landing-title {
        font-size: 28px;
    }

    /* 4 tracks already overflow a phone viewport once rotated */
    .landing-track:nth-child(n+5) {
        display: none;
    }
}

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

    .landing-track {
        animation: none;
    }

    .landing-wall,
    .landing-tile,
    .landing-socials a {
        transition: none;
    }
}