/* =========================================================================
   FB3D landing page. Loaded only by fb3d templates (via {% block extra_head %}),
   so main.css stays the shared site theme. The page still extends base.html
   (sidebar, mobile bars), but its content area takes over the whole column and
   has its own look: golden-hour city, chunky bevels, hazard stripes, Bungee
   for display type. Colours follow docs/ART_DIRECTION.md of the game repo.
   Motion is transform / opacity only and is switched off for reduced motion.
   ========================================================================= */

/* ---------- Take the content area out of the site's padded column ---------- */

.content-inner.fb3d-page {
    max-width: none;
    padding: 0;
    overflow-x: clip;
}

/* main.css pads .content-inner on phones so it clears the fixed top bar and
   bottom tab bar. Keep that clearance, drop the side padding. */
@media (max-width: 767.98px) {
    .content-inner.fb3d-page {
        padding: 0;
        padding-top: calc(54px + env(safe-area-inset-top));
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

.fb3d-page {
    --gl-bg: #120d09;
    --gl-ink: #1b1108;
    --gl-orange: #ff8a1f;
    --gl-yellow: #ffd23f;
    --gl-teal: #2ec4b6;
    --gl-cream: #fff3dc;
    --gl-dim: #c9b8a3;
    --gl-line: #3d2f22;
    --gl-display: "Bungee", "Impact", "Arial Black", sans-serif;
    --gl-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

    color: var(--gl-cream);
    font-family: var(--gl-body);
    font-size: 1.05rem;
    line-height: 1.55;
}

.fb3d-page *,
.fb3d-page *::before,
.fb3d-page *::after {
    box-sizing: border-box;
}

.fb3d-page .messages { margin: 1rem; }

.fb3d-page a { color: var(--gl-orange); }
.fb3d-page a:hover { color: var(--gl-yellow); }

.gl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.gl-wrap {
    width: min(1120px, calc(100% - 2.5rem));
    margin-inline: auto;
}

/* =========================================================================
   HERO
   ========================================================================= */

.gl-hero {
    --road-h: clamp(84px, 14vh, 130px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    text-align: center;
    background: #17100c;
}

@media (max-width: 767.98px) {
    .gl-hero {
        min-height: calc(100vh - 54px - 64px);
        min-height: calc(100svh - 54px - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
}

/* readability veil behind the text */
.gl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(6, 36, 48, 0.32), transparent 70%);
}

.gl-sky {
    position: absolute;
    inset: 0;
    z-index: -6;
    background: linear-gradient(
        180deg,
        #0e5870 0%,
        #2c97a8 26%,
        #86d3c3 50%,
        #ffd88a 74%,
        #ff9a3c 100%
    );
}

.gl-clouds {
    position: absolute;
    inset: 0;
    z-index: -5;
    pointer-events: none;
}
.gl-clouds span {
    position: absolute;
    width: 340px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 243, 220, 0.5), rgba(255, 243, 220, 0) 70%);
    animation: gl-cloud 90s linear infinite;
}
.gl-clouds span:nth-child(1) { top: 14%; left: -20%; }
.gl-clouds span:nth-child(2) { top: 26%; left: -45%; width: 460px; animation-duration: 130s; animation-delay: -40s; opacity: 0.8; }
.gl-clouds span:nth-child(3) { top: 8%;  left: -70%; width: 280px; animation-duration: 110s; animation-delay: -75s; opacity: 0.6; }

.gl-sun {
    position: absolute;
    z-index: -4;
    left: 50%;
    bottom: calc(var(--road-h) + 90px - min(30vw, 290px));   /* centre sits behind the skyline */
    width: min(60vw, 580px);
    aspect-ratio: 1;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #fffbe4 0 26%,
        #ffd23f 40%,
        rgba(255, 138, 31, 0.6) 60%,
        rgba(255, 138, 31, 0) 72%
    );
    animation: gl-pulse 6s ease-in-out infinite;
}

/* ----- parallax city: three seamless, slowly drifting skylines ----- */

.gl-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--road-h);
    overflow: hidden;
    pointer-events: none;
}
.gl-layer svg {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
}
.gl-layer--far  { z-index: -3; height: clamp(260px, 42vh, 440px); }
.gl-layer--mid  { z-index: -2; height: clamp(250px, 36vh, 380px); }
.gl-layer--near { z-index: -1; height: clamp(240px, 30vh, 330px); }

.gl-drift { animation: gl-drift var(--dur, 120s) linear infinite; will-change: transform; }
.gl-layer--far  { --dur: 220s; }
.gl-layer--mid  { --dur: 120s; }
.gl-layer--near { --dur: 55s; }

.gl-b-far  { fill: #3d8a9b; }
.gl-b-mid  { fill: #5b3b4c; }
.gl-b-near { fill: #1d1310; }
.gl-win    { fill: #ffd36a; }
.gl-flick  { animation: gl-flick 5s steps(1) infinite; }

/* ----- road, kerb, speed lines, bike ----- */

.gl-road {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--road-h);
    overflow: hidden;
    background: linear-gradient(180deg, #2c211b, #140d0a);
}
.gl-road::before {                      /* yellow / black kerb */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 72px);
    height: 10px;
    background: repeating-linear-gradient(90deg, var(--gl-yellow) 0 36px, var(--gl-ink) 36px 72px);
    animation: gl-kerb 0.9s linear infinite;
}
.gl-road-line {
    position: absolute;
    left: 0;
    top: 58%;
    width: calc(100% + 140px);
    height: 7px;
    background: repeating-linear-gradient(90deg, var(--gl-cream) 0 70px, transparent 70px 140px);
    opacity: 0.85;
    animation: gl-kerb 0.7s linear infinite;
    --kerb-shift: -140px;
}

.gl-speed { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.gl-speed span {
    position: absolute;
    left: 30%;
    height: 3px;
    width: 140px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 243, 220, 0), rgba(255, 243, 220, 0.75));
    opacity: 0;
    animation: gl-speed 1.4s linear infinite;
}
.gl-speed span:nth-child(1) { bottom: calc(var(--road-h) + 62px); animation-delay: 0s; }
.gl-speed span:nth-child(2) { bottom: calc(var(--road-h) + 34px); animation-delay: 0.45s; width: 200px; }
.gl-speed span:nth-child(3) { bottom: calc(var(--road-h) + 12px); animation-delay: 0.9s; }
.gl-speed span:nth-child(4) { bottom: calc(var(--road-h) * 0.4); animation-delay: 0.2s; width: 110px; }

.gl-bike {
    position: absolute;
    z-index: 2;
    left: clamp(5%, 12vw, 22%);
    bottom: calc(var(--road-h) * 0.5 - 20px);
    width: clamp(150px, 20vw, 300px);
    pointer-events: none;
}
.gl-bike-bob { animation: gl-bob 0.55s ease-in-out infinite alternate; }
.gl-bike svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.35)); }

.gl-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: gl-spin 0.5s linear infinite;
}
.w-ink   { fill: none; stroke: var(--gl-ink); stroke-width: 11; }
.w-tire  { fill: none; stroke: var(--gl-cream); stroke-width: 5; }
.w-spoke { fill: none; stroke: var(--gl-cream); stroke-width: 1.6; opacity: 0.8; }
.w-valve { fill: var(--gl-orange); }
.b-ink   { stroke: var(--gl-ink); stroke-width: 11; }
.b-frame { stroke: var(--gl-orange); stroke-width: 5.5; }
.b-seat  { fill: var(--gl-ink); }
.r-ink   { stroke: var(--gl-ink); stroke-width: 16; }
.r-body  { stroke: var(--gl-teal); stroke-width: 10; }
.r-head  { fill: #ffcf9f; stroke: var(--gl-ink); stroke-width: 4; }
.r-helmet { fill: var(--gl-yellow); stroke: var(--gl-ink); stroke-width: 3; }

/* ----- hero text ----- */

.gl-hero-content {
    position: relative;
    z-index: 5;
    width: min(960px, 100%);
    padding: 3rem 1.25rem calc(var(--road-h) + 11rem);
}

.gl-eyebrow {
    display: inline-block;
    margin: 0;
    padding: 0.3rem 1rem;
    background: var(--gl-yellow);
    color: var(--gl-ink);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transform: skewX(-10deg);
    box-shadow: 4px 4px 0 var(--gl-ink);
}

.gl-title {
    position: relative;
    display: inline-block;
    margin: 0.12em 0 0.04em;
    font-family: var(--gl-display);
    font-weight: 400;
    font-size: clamp(5rem, 19vw, 12.5rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    animation: gl-slam 0.75s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.gl-title > span[aria-hidden] {
    display: block;
    color: var(--gl-orange);
    -webkit-text-stroke: 0.05em var(--gl-ink);
    paint-order: stroke fill;
    text-shadow:
        0 0.05em 0 #b8470a,
        0 0.1em 0 #6b2405,
        0 0.17em 0.12em rgba(0, 0, 0, 0.5);
}
.gl-title::before {                     /* bright upper half of the bevel */
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: 1;
    color: var(--gl-yellow);
    clip-path: inset(0 0 56% 0);
    pointer-events: none;
}

.gl-tagline {
    margin: 0 0 0.35rem;
    font-weight: 700;
    font-size: clamp(1.15rem, 2.6vw, 1.7rem);
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 0, 0, 0.35);
    animation: gl-rise 0.6s 0.25s ease both;
}
.gl-sub {
    max-width: 38rem;
    margin: 0 auto 1.75rem;
    font-size: clamp(1rem, 1.9vw, 1.2rem);
    color: var(--gl-cream);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 0, 0, 0.35);
    animation: gl-rise 0.6s 0.35s ease both;
}
.gl-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    animation: gl-rise 0.6s 0.45s ease both;
}

/* ---------- buttons ---------- */

.gl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.7rem;
    overflow: hidden;
    font-family: var(--gl-display);
    font-size: 1rem;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gl-ink);
    background: linear-gradient(180deg, #ffe46e, #ffb21e);
    border: 3px solid var(--gl-ink);
    border-radius: 12px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        0 6px 0 #8a4b00,
        0 12px 24px rgba(0, 0, 0, 0.45);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gl-btn::after {                        /* shine sweep */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: skewX(-20deg);
    transition: transform 0.5s ease;
}
.fb3d-page a.gl-btn:hover,
.fb3d-page a.gl-btn:focus-visible {
    color: var(--gl-ink);
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        0 9px 0 #8a4b00,
        0 16px 28px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(255, 210, 63, 0.6);
}
.fb3d-page a.gl-btn:hover::after { transform: translateX(520%) skewX(-20deg); }
.gl-btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 0 #8a4b00; }
.fb3d-page a.gl-btn:focus-visible,
.fb3d-page a.gl-panel:focus-visible { outline: 3px solid var(--gl-teal); outline-offset: 4px; }

.gl-btn--ghost {
    color: var(--gl-cream);
    background: rgba(18, 13, 9, 0.62);
    border-color: var(--gl-teal);
    box-shadow: 0 6px 0 #14756b, 0 12px 24px rgba(0, 0, 0, 0.45);
}
.fb3d-page a.gl-btn--ghost:hover,
.fb3d-page a.gl-btn--ghost:focus-visible {
    color: #fff;
    box-shadow: 0 9px 0 #14756b, 0 16px 28px rgba(0, 0, 0, 0.5), 0 0 28px rgba(46, 196, 182, 0.55);
}
.gl-btn.is-off {                       /* locked: hazard-striped, clearly intentional */
    gap: 0.6rem;
    cursor: not-allowed;
    color: var(--gl-cream);
    background: repeating-linear-gradient(-45deg, #3b2d22 0 12px, #2a2019 12px 24px);
    border-color: var(--gl-yellow);
    border-style: dashed;
    box-shadow: 0 6px 0 #6b5316, 0 12px 24px rgba(0, 0, 0, 0.45);
}
.gl-btn.is-off::after { display: none; }
.gl-btn-lock { flex: none; color: var(--gl-yellow); }

/* =========================================================================
   TICKER
   ========================================================================= */

.gl-ticker {
    position: relative;
    overflow: hidden;
    padding: 1.15rem 0;
    background: var(--gl-yellow);
    color: var(--gl-ink);
}
.gl-ticker::before,
.gl-ticker::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 7px;
    background: repeating-linear-gradient(-45deg, var(--gl-ink) 0 10px, var(--gl-yellow) 10px 20px);
}
.gl-ticker::before { top: 0; }
.gl-ticker::after  { bottom: 0; }

.gl-ticker-track {
    display: flex;
    width: max-content;
    animation: gl-marquee 40s linear infinite;
}
.gl-ticker-track span {
    flex: none;
    font-family: var(--gl-display);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gl-ticker-track span::after {
    content: "\25C6";
    margin-inline: 1.6rem;
    color: #c2410c;
}

/* =========================================================================
   SECTIONS
   ========================================================================= */

.gl-section {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 44px,
        var(--gl-bg);
}
.gl-section--alt {
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 44px,
        linear-gradient(180deg, #21170f, #120d09);
}

.gl-kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gl-orange);
}
.gl-kicker::before {
    content: "";
    width: 38px;
    height: 10px;
    background: repeating-linear-gradient(-45deg, var(--gl-yellow) 0 5px, var(--gl-ink) 5px 10px);
    border-radius: 2px;
}
.gl-h2 {
    margin: 0;
    font-family: var(--gl-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    line-height: 1.05;
    color: var(--gl-cream);
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}

/* ----- the run in five steps ----- */

.gl-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.1rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}
.gl-step {
    position: relative;
    padding: 1.5rem 1.25rem 1.5rem;
    background: linear-gradient(160deg, #2c2118, #1c140f);
    border: 2px solid var(--gl-line);
    border-radius: 14px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.07), inset 0 -4px 0 rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gl-step:hover {
    transform: translateY(-6px);
    border-color: var(--gl-orange);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.07), inset 0 -4px 0 rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 138, 31, 0.28);
}
.gl-step-num {
    position: absolute;
    top: 0.2rem;
    right: 0.85rem;
    font-family: var(--gl-display);
    font-size: 3.6rem;
    line-height: 1;
    color: rgba(255, 210, 63, 0.13);
}
.gl-step-icon { display: block; margin-bottom: 0.9rem; color: var(--gl-teal); }
.gl-step h3 {
    margin: 0 0 0.45rem;
    font-family: var(--gl-display);
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--gl-cream);
}
.gl-step p { margin: 0; font-size: 0.98rem; color: var(--gl-dim); }

.gl-loop {
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 6px solid var(--gl-yellow);
    background: rgba(255, 210, 63, 0.07);
    color: var(--gl-cream);
}
.gl-loop strong { color: var(--gl-yellow); }

/* ----- feature cards ----- */

.gl-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.gl-feature {
    position: relative;
    padding: 1.9rem 1.5rem 1.5rem;
    overflow: hidden;
    background: #1c140f;
    border: 2px solid var(--gl-line);
    border-radius: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gl-feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    background: var(--c);
}
.gl-feature:hover {
    transform: translateY(-5px);
    border-color: var(--c);
    box-shadow: 0 0 24px color-mix(in srgb, var(--c) 35%, transparent);
}
.gl-feature h3 {
    margin: 0 0 0.5rem;
    font-family: var(--gl-display);
    font-weight: 400;
    font-size: 1.12rem;
    color: var(--c);
}
.gl-feature p { margin: 0; color: var(--gl-dim); }

/* ----- alpha band ----- */

.gl-alpha {
    position: relative;
    padding: 4rem 0;
    background: var(--gl-yellow);
    color: var(--gl-ink);
    text-align: center;
}
.gl-alpha::before,
.gl-alpha::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    background: repeating-linear-gradient(-45deg, var(--gl-ink) 0 16px, var(--gl-yellow) 16px 32px);
}
.gl-alpha::before { top: 0; }
.gl-alpha::after  { bottom: 0; }
.gl-alpha h2 {
    margin: 0 0 0.6rem;
    font-family: var(--gl-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
}
.gl-alpha p {
    max-width: 40rem;
    margin: 0 auto;
    font-weight: 700;
    font-size: 1.15rem;
}

/* ----- section panels (Info / Feedback / Download) ----- */

.gl-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.gl-panel {
    display: flex;
    flex-direction: column;
    padding: 1.8rem 1.5rem;
    color: var(--gl-cream);
    text-decoration: none;
    background: linear-gradient(160deg, #2c2118, #1b130e);
    border: 3px solid var(--gl-ink);
    border-radius: 16px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.12),
        inset 0 -5px 0 rgba(0, 0, 0, 0.45),
        0 12px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.fb3d-page a.gl-panel:hover,
.fb3d-page a.gl-panel:focus-visible {
    color: var(--gl-cream);
    text-decoration: none;
    transform: translateY(-6px);
    border-color: var(--gl-teal);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.12),
        inset 0 -5px 0 rgba(0, 0, 0, 0.45),
        0 16px 34px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(46, 196, 182, 0.35);
}
.gl-panel.is-soon { opacity: 0.75; border-style: dashed; border-color: var(--gl-line); cursor: default; }
.gl-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    color: var(--gl-teal);
    background: #120d09;
    border: 2px solid var(--gl-line);
    border-radius: 12px;
}
.gl-panel h3 {
    margin: 0 0 0.5rem;
    font-family: var(--gl-display);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--gl-cream);
}
.gl-panel p { flex-grow: 1; margin: 0 0 1.1rem; color: var(--gl-dim); }
.gl-panel-cta { font-weight: 700; color: var(--gl-yellow); }
.gl-soon {
    align-self: flex-start;
    padding: 0.2rem 0.7rem;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gl-dim);
    background: #120d09;
    border: 1px dashed var(--gl-line);
    border-radius: 4px;
}

.gl-note { max-width: 40rem; margin: 2.5rem 0 0; font-size: 0.95rem; color: var(--gl-dim); }

/* =========================================================================
   MOTION
   ========================================================================= */

@keyframes gl-drift   { to { transform: translateX(-50%); } }
@keyframes gl-cloud   { to { transform: translateX(260vw); } }
@keyframes gl-pulse   { 50% { transform: scale(1.06); opacity: 0.92; } }
@keyframes gl-flick   { 0%, 100% { opacity: 1; } 40% { opacity: 0.15; } 55% { opacity: 1; } }
@keyframes gl-kerb    { to { transform: translateX(var(--kerb-shift, -72px)); } }
@keyframes gl-speed   { 0% { transform: translateX(40px); opacity: 0; } 25% { opacity: 0.9; } 100% { transform: translateX(-260px); opacity: 0; } }
@keyframes gl-bob     { to { transform: translateY(-4px); } }
@keyframes gl-spin    { to { transform: rotate(360deg); } }
@keyframes gl-slam    { from { opacity: 0; transform: scale(1.45); } to { opacity: 1; transform: scale(1); } }
@keyframes gl-rise    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes gl-marquee { to { transform: translateX(-50%); } }
@keyframes gl-reveal  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Scroll-in for sections (hidden only when JS can reveal them again).
   An animation with fill-mode "backwards" leaves hover transforms working. */
@media (prefers-reduced-motion: no-preference) {
    .js .gl-reveal { opacity: 0; }
    .js .gl-reveal.is-in {
        opacity: 1;
        animation: gl-reveal 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) backwards;
    }
}

/* Scroll-driven parallax where the browser supports it (progressive). */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .gl-layer, .gl-sun, .gl-clouds {
            animation: gl-par linear both;
            animation-timeline: scroll(root);
            animation-range: 0 100vh;
        }
        .gl-layer--far  { --py: 42vh; }
        .gl-layer--mid  { --py: 26vh; }
        .gl-layer--near { --py: 10vh; }
        .gl-clouds      { --py: 20vh; }
        .gl-sun {
            --py: 46vh;
            animation: gl-par-sun linear both, gl-pulse 6s ease-in-out infinite;
            animation-timeline: scroll(root), auto;
            animation-range: 0 100vh, normal;
        }
        @keyframes gl-par     { to { translate: 0 var(--py); } }
        @keyframes gl-par-sun { to { translate: -50% var(--py); } }
    }
}

@media (prefers-reduced-motion: reduce) {
    .fb3d-page *,
    .fb3d-page *::before,
    .fb3d-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- small screens ---------- */

@media (max-width: 575.98px) {
    .gl-hero-content { padding-bottom: calc(var(--road-h) + 8.5rem); }
    .gl-bike { left: 4%; width: 150px; }
    .gl-btn { width: 100%; max-width: 20rem; }
    .gl-eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; }
    .gl-ticker-track span { font-size: 0.85rem; }
}


/* =========================================================================
   INFO: article list and article page (roadmap W2.2).
   Appended to fb3d.css. Plain, working layout; the finished look, parallax
   and scroll animations come with W2.4 and W2.5.
   ========================================================================= */

.gl-wrap--narrow { width: min(760px, calc(100% - 2.5rem)); }
.gl-wrap--wide   { width: min(1000px, calc(100% - 2.5rem)); }
.gl-h1 { font-size: clamp(2rem, 6vw, 3.6rem); }

.gl-info-head,
.gl-article-head {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.8rem, 4vw, 2.8rem);
    background:
        linear-gradient(180deg, rgba(14, 88, 112, 0.55), rgba(18, 13, 9, 0) 90%),
        var(--gl-bg);
    border-bottom: 7px solid transparent;
    border-image: repeating-linear-gradient(-45deg, var(--gl-yellow) 0 10px, var(--gl-ink) 10px 20px) 1;
}
.gl-info-lead,
.gl-article-lead {
    max-width: 40rem;
    margin: 0.8rem 0 0;
    font-size: 1.2rem;
    color: var(--gl-cream);
}
.gl-kicker a { color: inherit; text-decoration: none; }
.gl-kicker a:hover { color: var(--gl-yellow); }

.gl-section--list { padding-top: clamp(2rem, 5vw, 3.5rem); }

.gl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
}
.gl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(160deg, #2c2118, #1b130e);
    border: 3px solid var(--gl-ink);
    border-radius: 16px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        inset 0 -5px 0 rgba(0, 0, 0, 0.45),
        0 12px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gl-card:hover,
.gl-card:focus-within {
    transform: translateY(-6px);
    border-color: var(--gl-teal);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        inset 0 -5px 0 rgba(0, 0, 0, 0.45),
        0 16px 34px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(46, 196, 182, 0.3);
}
.gl-card.is-pinned { border-color: var(--gl-yellow); }

.gl-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #120d09;
    border-bottom: 3px solid var(--gl-ink);
}
.gl-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-card-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--gl-display);
    font-size: 2.6rem;
    color: rgba(255, 210, 63, 0.25);
    background: repeating-linear-gradient(-45deg, #2a2019 0 14px, #21170f 14px 28px);
}
.gl-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.2rem 0.7rem;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gl-ink);
    background: var(--gl-yellow);
    border: 2px solid var(--gl-ink);
    border-radius: 4px;
    transform: skewX(-8deg);
}

.gl-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.2rem 1.3rem 1.4rem; }
.gl-meta { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--gl-dim); }
.gl-card-title { margin: 0 0 0.5rem; font-family: var(--gl-display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; }
.gl-card-title a { color: var(--gl-cream); text-decoration: none; }
.gl-card-title a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.fb3d-page .gl-card-title a:hover { color: var(--gl-yellow); }
.fb3d-page .gl-card-title a:focus-visible { outline: 3px solid var(--gl-teal); outline-offset: -3px; }
.gl-card-summary { margin: 0; color: var(--gl-dim); }

.gl-empty { padding: 2rem 1.25rem; text-align: center; color: var(--gl-dim); border: 2px dashed var(--gl-line); border-radius: 14px; }

/* ----- article page ----- */

.gl-preview-banner {
    margin: 0;
    padding: 0.7rem 1.25rem;
    text-align: center;
    font-weight: 700;
    color: var(--gl-ink);
    background: repeating-linear-gradient(-45deg, var(--gl-yellow) 0 18px, #ffe46e 18px 36px);
    border-bottom: 3px solid var(--gl-ink);
}
.gl-article-cover { margin: 2rem auto 0; }
.gl-article-cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid var(--gl-ink);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.gl-prose { padding: 2rem 0 clamp(3rem, 8vw, 5rem); font-size: 1.12rem; line-height: 1.7; }
.gl-prose > :first-child { margin-top: 0; }
.gl-prose h2, .gl-prose h3, .gl-prose h4 { margin: 2.2rem 0 0.7rem; font-family: var(--gl-display); font-weight: 400; line-height: 1.15; color: var(--gl-cream); }
.gl-prose h2 { font-size: 1.7rem; }
.gl-prose h3 { font-size: 1.35rem; color: var(--gl-yellow); }
.gl-prose h4 { font-size: 1.1rem; color: var(--gl-teal); }
.gl-prose p, .gl-prose ul, .gl-prose ol { margin: 0 0 1.1rem; }
.gl-prose li { margin-bottom: 0.35rem; }
.gl-prose img, .gl-prose video { display: block; max-width: 100%; height: auto; margin: 1.5rem 0; border: 3px solid var(--gl-ink); border-radius: 12px; }
.gl-prose blockquote { margin: 1.5rem 0; padding: 0.8rem 1.2rem; border-left: 6px solid var(--gl-yellow); background: rgba(255, 210, 63, 0.07); }
.gl-prose code, .gl-prose pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.95em; background: #1c140f; border: 1px solid var(--gl-line); border-radius: 6px; }
.gl-prose code { padding: 0.1em 0.35em; }
.gl-prose pre { padding: 0.9rem 1rem; overflow-x: auto; }
.gl-prose pre code { padding: 0; background: none; border: 0; }
.gl-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.5rem 0; }
.gl-prose th, .gl-prose td { padding: 0.5rem 0.8rem; border: 1px solid var(--gl-line); text-align: left; }
.gl-prose th { background: #2a2019; color: var(--gl-yellow); }


/* =========================================================================
   W2.4 to W2.6: sticky bar, article extras, scroll animations, quality.
   Appended to fb3d.css.
   ========================================================================= */

/* Smooth anchor scrolling (the table of contents), unless the visitor asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.fb3d-page) { scroll-behavior: smooth; }
}

/* Visible keyboard focus everywhere on the FB3D pages. */
.fb3d-page :focus-visible { outline: 3px solid var(--gl-teal); outline-offset: 3px; }

/* ---------- sticky bar ---------- */

.fb3d-page .gl-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(18, 13, 9, 0.94);
    border-bottom: 3px solid var(--gl-ink);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
@supports (backdrop-filter: blur(8px)) {
    .fb3d-page .gl-bar { background: rgba(18, 13, 9, 0.78); backdrop-filter: blur(8px); }
}
/* On phones the site's fixed top bar is 54 px tall: stick right under it. */
@media (max-width: 767.98px) {
    .fb3d-page .gl-bar { top: calc(54px + env(safe-area-inset-top)); }
}
.gl-bar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 52px;
}
.fb3d-page .gl-bar-brand {
    font-family: var(--gl-display);
    font-size: 1.2rem;
    color: var(--gl-orange);
    text-decoration: none;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.gl-bar-nav { display: flex; gap: 0.2rem; margin-left: auto; }
.fb3d-page .gl-bar-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.8rem;
    font-weight: 700;
    color: var(--gl-cream);
    text-decoration: none;
    border-radius: 8px;
}
.fb3d-page .gl-bar-nav a:hover { color: var(--gl-yellow); background: rgba(255, 255, 255, 0.07); }
.fb3d-page .gl-bar-nav a[aria-current="page"] { color: var(--gl-ink); background: var(--gl-yellow); }

/* reading progress: a strip on the bar's lower edge, filled by fb3d.js */
.gl-progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; }
.gl-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gl-teal), var(--gl-yellow), var(--gl-orange));
    transform: scaleX(0);
    transform-origin: left;
}

/* ---------- article page ---------- */

/* the cover keeps its shape while it loads, so the page does not jump */
.gl-article-cover img { aspect-ratio: 16 / 9; object-fit: cover; }

.gl-prose h2, .gl-prose h3 { scroll-margin-top: 5.5rem; }
@media (max-width: 767.98px) {
    .gl-prose h2, .gl-prose h3 { scroll-margin-top: calc(5.5rem + 54px + env(safe-area-inset-top)); }
}

.gl-toc {
    margin: 2rem 0 0;
    padding: 0.9rem 1.2rem;
    background: linear-gradient(160deg, #2c2118, #1b130e);
    border: 3px solid var(--gl-ink);
    border-left: 8px solid var(--gl-yellow);
    border-radius: 12px;
}
.gl-toc summary {
    cursor: pointer;
    font-family: var(--gl-display);
    font-size: 1.05rem;
    color: var(--gl-yellow);
}
.gl-toc ol { margin: 0.7rem 0 0; padding-left: 1.4rem; }
.gl-toc li { margin-bottom: 0.3rem; }
.fb3d-page .gl-toc a { color: var(--gl-cream); text-decoration: none; }
.fb3d-page .gl-toc a:hover { color: var(--gl-yellow); text-decoration: underline; }

/* the lightbox <dialog> lives in <body>, outside .fb3d-page, so it uses plain colours */
.gl-zoomable { cursor: zoom-in; }
.gl-lightbox {
    padding: 0;
    background: transparent;
    border: 0;
    max-width: 96vw;
    max-height: 96vh;
    overflow: visible;
}
.gl-lightbox::backdrop { background: rgba(10, 6, 3, 0.88); }
.gl-lightbox img {
    display: block;
    max-width: 96vw;
    max-height: 92vh;
    border: 3px solid #1b1108;
    border-radius: 12px;
    cursor: zoom-out;
}

/* ---------- scroll animations without JavaScript (W2.5) ----------
   Where the browser supports scroll-driven animations the cards and sections rise as they
   scroll into view, driven by the scroll position itself. It animates only opacity and
   transform, and "backwards" fill keeps the hover transforms of the cards working.
   Other browsers use the IntersectionObserver in fb3d.js. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .js .gl-reveal,
        .js .gl-reveal.is-in {
            opacity: 1;
            animation: gl-reveal linear backwards;
            animation-timeline: view();
            animation-range: entry 0% entry 35%;
        }
    }
}


/* =========================================================================
   W3: what the article editor produces (images, full width, video, embed).
   ========================================================================= */

.gl-prose .gl-fig { margin: 1.5rem 0; }
.gl-prose .gl-fig img { margin: 0; width: 100%; }
.gl-prose .gl-img-s { max-width: 360px; }
.gl-prose .gl-img-m { max-width: 600px; }
.gl-prose .gl-img-l { max-width: 100%; }
.gl-prose .gl-align-center { margin-inline: auto; }
.gl-prose .gl-align-left,
.gl-prose .gl-align-right { max-width: min(100%, 360px); }
@media (min-width: 640px) {
    .gl-prose .gl-align-left  { float: left;  margin: 0.4rem 1.5rem 1rem 0; }
    .gl-prose .gl-align-right { float: right; margin: 0.4rem 0 1rem 1.5rem; }
}
.gl-prose h2, .gl-prose h3, .gl-prose .gl-full, .gl-prose table { clear: both; }

/* Full width block: wider than the text column where the window is wide enough. */
@media (min-width: 1320px) {
    .gl-prose .gl-full { margin-inline: -120px; max-width: none; }
    .gl-prose .gl-full.gl-fig { max-width: none; }
}

.gl-prose video { width: 100%; background: #000; }
.gl-embed { position: relative; margin: 1.5rem 0; aspect-ratio: 16 / 9; border: 3px solid var(--gl-ink); border-radius: 12px; overflow: hidden; background: #000; }
.gl-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* =========================================================================
   W4: feedback (list, form, detail).
   ========================================================================= */

.gl-fb-cats { display: grid; gap: 0.8rem; margin: 0 0 2rem; }
.gl-fb-cats > div { padding: 0.9rem 1.1rem; border: 2px solid var(--gl-line); border-radius: 12px; }
.gl-fb-cats dt { font-family: var(--gl-display); color: var(--gl-yellow); font-weight: 400; }
.gl-fb-cats dd { margin: 0.2rem 0 0; color: var(--gl-dim); }
@media (min-width: 720px) { .gl-fb-cats { grid-template-columns: repeat(3, 1fr); } }

.gl-fb-h { margin: 2rem 0 0.7rem; font-family: var(--gl-display); font-weight: 400; font-size: 1.3rem; color: var(--gl-yellow); }
.gl-fb-items { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.gl-fb-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--gl-line); }
.gl-fb-items a { font-weight: 700; }
.gl-fb-items .gl-meta { margin: 0; }

.gl-fb-status { display: inline-block; padding: 0.1rem 0.6rem; border: 2px solid var(--gl-line); border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--gl-dim); }
.gl-fb-status--planned { color: var(--gl-teal); border-color: var(--gl-teal); }
.gl-fb-status--fixed { color: var(--gl-yellow); border-color: var(--gl-yellow); }

.gl-fb-login { margin: 0 0 1.5rem; padding: 1.2rem; border: 2px dashed var(--gl-line); border-radius: 14px; }

.gl-fb-form { display: grid; gap: 1.1rem; }
.gl-fb-field { display: grid; gap: 0.3rem; }
.gl-fb-field[hidden] { display: none; }
.gl-fb-field label, .gl-fb-label { font-weight: 700; }
.gl-fb-field small { color: var(--gl-dim); }
.gl-fb-errors { color: #ff7b7f; font-weight: 700; }
.gl-fb-errors ul { margin: 0; padding-left: 1.1rem; }

.gl-fb-files { display: flex; flex-wrap: wrap; gap: 0.8rem; list-style: none; margin: 0; padding: 0; }
.gl-fb-files img, .gl-fb-files video { display: block; max-width: 100%; max-height: 220px; border: 3px solid var(--gl-ink); border-radius: 10px; background: #000; }
.gl-fb-form .gl-fb-files img, .gl-fb-form .gl-fb-files video { max-height: 100px; }

.gl-fb-text { font-size: 1.08rem; line-height: 1.65; }