/* ==========================================================
   Station Saint-Canard game page
   ========================================================== */

.station-page {
    --station-blue: #145c9e;
    --station-blue-deep: #08345f;
    --station-tile: #fff1d6;
    --station-tile-soft: #f4dfbb;
    --station-yellow: #f7c744;
    --station-steel: #182534;
    --station-concrete: #6d7680;
    --station-ink: #142031;
    --station-muted: #52606c;
    --station-red: #d94b3d;
    --station-green: #2f9468;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgb(20 92 158 / 5%) 1px, transparent 1px),
        linear-gradient(rgb(20 92 158 / 5%) 1px, transparent 1px),
        var(--station-tile);
    background-size: 5.5rem 5.5rem;
    color: var(--station-ink);
}

.station-page img {
    max-width: 100%;
}

.station-track {
    position: fixed;
    z-index: 1;
    left: clamp(1rem, 3vw, 2.5rem);
    top: 20vh;
    bottom: 14vh;
    width: 2px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgb(20 92 158 / 36%) 12%, rgb(20 92 158 / 36%) 88%, transparent);
}

.station-stop {
    position: absolute;
    left: 50%;
    width: .7rem;
    height: .7rem;
    border: 2px solid var(--station-blue);
    border-radius: 50%;
    background: var(--station-tile);
    transform: translateX(-50%);
}

.station-stop:nth-child(1) { top: 0; }
.station-stop:nth-child(2) { top: 25%; }
.station-stop:nth-child(3) { top: 50%; }
.station-stop:nth-child(4) { top: 75%; }
.station-stop:nth-child(5) { top: 100%; }

.station-place {
    position: relative;
    z-index: 2;
    isolation: isolate;
}

.station-place + .station-place {
    margin-top: -1px;
}

.station-scene {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    background: var(--station-steel);
}

.station-scene__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.station-scene::after,
.station-entrance::after,
.station-platform::after,
.station-next-stop::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
}

.station-scene::after {
    z-index: 1;
}

.station-eyebrow {
    color: var(--station-yellow);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.station-sign {
    display: inline-grid;
    gap: var(--space-3);
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 3px solid var(--station-blue);
    border-radius: .35rem;
    background: rgb(255 241 214 / 92%);
    box-shadow: 0 .75rem 2rem rgb(8 52 95 / 20%);
}

.station-sign--dark {
    border-color: rgb(247 199 68 / 70%);
    background: rgb(14 25 38 / 86%);
    color: var(--color-text);
}

.station-sign__label {
    color: var(--station-blue);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.station-sign--dark .station-sign__label {
    color: var(--station-yellow);
}

.station-sign__title {
    color: inherit;
    font-size: clamp(2.6rem, 7vw, 6.6rem);
    letter-spacing: -.055em;
    line-height: .95;
    text-wrap: balance;
}

.station-hall .station-sign__title,
.station-poster-stop .station-sign__title,
.station-train .station-sign__title,
.station-control .station-sign__title,
.station-terminus .station-sign__title {
    font-size: clamp(2rem, 4.5vw, 4.4rem);
}

.station-copy {
    max-width: 38rem;
    color: var(--station-muted);
    font-size: var(--font-size-lg);
    line-height: 1.65;
    text-wrap: pretty;
}

.station-sign--dark .station-copy,
.station-tunnel .station-copy {
    color: rgb(242 238 229 / 78%);
}

.station-entrance {
    min-height: 100svh;
    display: grid;
    align-items: end;
    padding-block: calc(var(--header-height) + 4rem) clamp(5rem, 10vw, 9rem);
    color: var(--color-text);
}

.station-entrance .station-scene__image {
    object-position: 50% center;
    filter: saturate(1.08) contrast(1.02) brightness(.82);
}

.station-entrance::after {
    background:
        linear-gradient(to bottom, rgb(8 14 22 / 34%), transparent 34%, rgb(8 14 22 / 82%) 100%),
        linear-gradient(90deg, rgb(8 14 22 / 72%), transparent 68%);
}

.station-entrance__panel {
    width: min(100%, 44rem);
}

.station-entrance .station-sign {
    background: rgb(12 29 48 / 84%);
    border-color: var(--station-yellow);
    color: var(--color-text);
}

.station-entrance .station-sign__label {
    color: var(--station-yellow);
}

.station-scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    color: rgb(242 238 229 / 75%);
    font-size: var(--font-size-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.station-scroll-cue::after {
    content: "";
    width: 3.5rem;
    height: 1px;
    background: currentColor;
}

.station-hall,
.station-train,
.station-control,
.station-terminus {
    padding-block: clamp(5rem, 10vw, 9rem);
}

.station-hall {
    background:
        linear-gradient(to bottom, rgb(255 241 214 / 96%), rgb(244 223 187 / 94%)),
        linear-gradient(90deg, rgb(20 92 158 / 9%) 1px, transparent 1px),
        linear-gradient(rgb(20 92 158 / 9%) 1px, transparent 1px);
    background-size: auto, 4rem 4rem, 4rem 4rem;
}

.station-hall__grid,
.station-train__grid,
.station-control__grid,
.station-terminus__grid {
    display: grid;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.station-map {
    padding: var(--space-4);
    border: 1px solid rgb(20 32 49 / 16%);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 42%);
    box-shadow: 0 1.5rem 3rem rgb(8 52 95 / 12%);
}

.station-map img,
.station-poster img,
.station-app img {
    display: block;
    border-radius: var(--radius-md);
}

.station-pass {
    min-height: clamp(300px, 46vw, 520px);
    display: grid;
    place-items: center;
    padding: clamp(5rem, 11vw, 8rem) var(--space-4);
    text-align: center;
    color: var(--color-text);
}

.station-pass .station-scene__image,
.station-tunnel .station-scene__image {
    object-position: center;
    filter: saturate(.95) contrast(1.08) brightness(.68);
}

.station-pass .station-scene::after,
.station-tunnel .station-scene::after {
    background: linear-gradient(to bottom, rgb(8 14 22 / 82%), rgb(8 14 22 / 28%) 48%, rgb(8 14 22 / 86%));
}

.station-pass__line {
    max-width: 24ch;
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: clamp(2rem, 5vw, 4.8rem);
    font-style: italic;
    line-height: 1.05;
    text-wrap: balance;
}

.station-platform,
.station-next-stop {
    min-height: clamp(760px, 88vw, 1020px);
    display: grid;
    align-items: start;
    padding-block: clamp(6rem, 11vw, 10rem);
    color: var(--color-text);
}

.station-platform .station-scene__image,
.station-next-stop .station-scene__image {
    object-position: center bottom;
    filter: saturate(1.06) contrast(1.03) brightness(.8);
}

.station-platform::after,
.station-next-stop::after {
    background:
        linear-gradient(to bottom, rgb(8 14 22 / 18%), transparent 42%, rgb(8 14 22 / 76%)),
        linear-gradient(90deg, rgb(8 14 22 / 66%), transparent 54%, rgb(8 14 22 / 30%));
}

.station-platform__stage,
.station-next-stop__stage {
    position: absolute;
    inset: auto clamp(1rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem);
    z-index: -1;
    height: clamp(19rem, 35vw, 30rem);
    pointer-events: none;
}

.station-platform__commuter,
.station-next-stop__commuter {
    position: absolute;
    bottom: 0;
    width: clamp(6.7rem, 10.5vw, 8.8rem);
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1rem 1.25rem rgb(8 14 22 / 42%));
}

.station-platform__commuter--georgette {
    left: 49%;
    transform: translateX(-50%) translateY(.15rem);
}

.station-platform__commuter--yanis {
    left: 64%;
    transform: translateX(-50%) translateY(.4rem);
}

.station-platform__commuter--chloe {
    left: 79%;
    transform: translateX(-50%) translateY(-.1rem);
}

.station-platform__commuter--nicolas {
    left: 93%;
    transform: translateX(-50%) translateY(.25rem);
}

.station-next-stop__commuter--chloe {
    left: 39%;
    transform: translateX(-50%) translateY(.05rem);
}

.station-next-stop__commuter--herve {
    left: 55%;
    transform: translateX(-50%) translateY(-.45rem) rotate(-2deg);
}

.station-next-stop__commuter--georgette {
    left: 70%;
    transform: translateX(-50%) translateY(.2rem);
}

.station-next-stop__commuter--yanis {
    left: 83%;
    transform: translateX(-50%) translateY(.45rem);
}

.station-next-stop__commuter--nicolas {
    left: 95%;
    transform: translateX(-50%) translateY(.2rem);
}

.station-platform__content,
.station-next-stop__content {
    width: min(100%, 36rem);
    margin-top: clamp(3rem, 7vw, 5rem);
}

.station-poster-stop {
    padding-block: clamp(5rem, 10vw, 8rem);
    background: linear-gradient(to bottom, var(--station-tile-soft), var(--station-tile));
}

.station-poster-stop__grid {
    display: grid;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.station-poster {
    justify-self: center;
    width: min(100%, 22rem);
    padding: var(--space-4);
    border: .75rem solid var(--station-blue);
    border-radius: var(--radius-md);
    background: #f7edd8;
    box-shadow: 0 1.5rem 3rem rgb(20 32 49 / 16%);
    transform: rotate(-1deg);
}

.station-doors {
    min-height: clamp(720px, 82vw, 980px);
    display: grid;
    align-items: center;
    padding-block: clamp(6rem, 11vw, 10rem);
    color: var(--color-text);
}

.station-doors .station-scene__image {
    object-position: center bottom;
    filter: saturate(1.05) contrast(1.05) brightness(.64);
}

.station-doors .station-scene::after {
    background:
        linear-gradient(90deg, rgb(8 14 22 / 78%), rgb(8 14 22 / 30%) 48%, rgb(8 14 22 / 76%)),
        linear-gradient(to bottom, rgb(8 14 22 / 20%), transparent 45%, rgb(8 14 22 / 88%));
}

.station-doors__grid {
    display: grid;
    align-items: end;
    gap: clamp(2rem, 6vw, 5rem);
}

.station-runner {
    justify-self: center;
    width: min(70vw, 17rem);
    filter: drop-shadow(0 1rem 1.4rem rgb(8 14 22 / 46%));
}

.station-actions {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.station-actions li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: .45rem;
    border-bottom: 1px solid rgb(247 199 68 / 24%);
}

.station-actions span {
    color: var(--station-yellow);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: .18em;
}

.station-train {
    background:
        linear-gradient(90deg, transparent, rgb(247 199 68 / 10%) 48%, transparent 52%),
        linear-gradient(to bottom, #142031, #1b2b3c 48%, #101925);
    color: var(--color-text);
}

.station-train__riders {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: clamp(.35rem, 1.6vw, 1rem);
    padding: clamp(1rem, 3vw, 2rem);
    border-top: .35rem solid var(--station-yellow);
    border-bottom: .35rem solid var(--station-yellow);
    background: linear-gradient(90deg, rgb(255 241 214 / 8%), rgb(255 241 214 / 15%), rgb(255 241 214 / 8%));
}

.station-train__riders .station-commuter {
    position: static;
    width: clamp(5.8rem, 10vw, 8.2rem);
}

.station-tunnel {
    min-height: clamp(420px, 54vw, 640px);
    display: grid;
    place-items: center;
    padding: clamp(6rem, 12vw, 10rem) var(--space-4);
    text-align: center;
    color: var(--color-text);
}

.station-control {
    background: linear-gradient(to bottom, var(--station-tile), #f7e9cb);
}

.station-panel {
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 3px solid var(--station-blue);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 50%);
    box-shadow: 0 1.2rem 2.5rem rgb(20 32 49 / 12%);
}

.station-panel__list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.station-panel__list li {
    padding-left: 1.5rem;
    border-left: .35rem solid var(--station-yellow);
    color: var(--station-muted);
}

.station-terminus {
    background:
        linear-gradient(to bottom, #f7e9cb, rgb(13 24 36 / 96%)),
        var(--station-steel);
    color: var(--color-text);
}

.station-app {
    justify-self: center;
    width: min(100%, 13rem);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: rgb(255 241 214 / 12%);
}

.station-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.station-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--station-yellow);
    color: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.station-link::after {
    content: "→";
}

@media (min-width: 780px) {
    .station-hall__grid,
    .station-poster-stop__grid,
    .station-train__grid,
    .station-control__grid,
    .station-terminus__grid {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    }

    .station-doors__grid {
        grid-template-columns: minmax(12rem, .7fr) minmax(0, 1fr);
    }

    .station-platform__content,
    .station-next-stop__content {
        margin-bottom: clamp(20rem, 31vw, 27rem);
        margin-left: clamp(1rem, 8vw, 7rem);
    }
}

@media (max-width: 760px) {
    .station-track {
        display: none;
    }

    .station-entrance {
        min-height: 92svh;
    }

    .station-entrance .station-scene__image {
        object-position: 55% center;
    }

    .station-sign__title {
        font-size: clamp(2.4rem, 14vw, 4.5rem);
    }

    .station-platform,
    .station-next-stop {
        min-height: clamp(680px, 130vw, 860px);
    }

    .station-platform__stage,
    .station-next-stop__stage {
        inset-inline: 0;
        height: clamp(15rem, 68vw, 24rem);
        opacity: .9;
    }

    .station-platform__content,
    .station-next-stop__content {
        margin-top: var(--space-7);
    }

    .station-platform__commuter,
    .station-next-stop__commuter {
        width: clamp(5rem, 22vw, 7.2rem);
    }

    .station-platform__commuter--georgette { left: 19%; }
    .station-platform__commuter--yanis { left: 44%; }
    .station-platform__commuter--chloe { left: 69%; }
    .station-platform__commuter--nicolas { display: none; }

    .station-next-stop__commuter--chloe { left: 22%; }
    .station-next-stop__commuter--herve { left: 48%; }
    .station-next-stop__commuter--georgette { left: 74%; }
    .station-next-stop__commuter--yanis,
    .station-next-stop__commuter--nicolas {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .station-pass .station-scene__image,
    .station-tunnel .station-scene__image {
        animation: station-drift 18s ease-in-out infinite alternate;
    }
}

@keyframes station-drift {
    from { transform: scale(1.02) translateX(-1%); }
    to { transform: scale(1.06) translateX(1%); }
}