/* sky.css — Herosite's reusable "sky" page look (the Trust pages keep the TV
   "screen" frame; this is the lighter, full-bleed style used everywhere else).
   Opt in with bodyClass="sky".

   The sky lives on the body and drifts slowly across the top; the page content
   sits in a 1440-wide column matched to the nav, with a 50px gap under the nav so
   more sky shows. The mascot is fixed in the bottom-left corner and a tall charcoal
   footer gives him somewhere to "stand" once you scroll to the bottom. */

/* ---------- Drifting sky (on the body) ----------
   White underneath, the seamless panorama tiled across the top, drifting one full
   tile-width every 120s so it loops without a seam. beautiful-sky.jpg is 2580px
   wide and made to tile against itself. */
.sky {
    /* Top band reserved above the content. --clouds-clear is where the sky stays
       clean down to (open space below the 120px nav for a planned animation); the
       content then dissolves in by --content-top, where the card rests. Bump both
       together to enlarge the open band. */
    --clouds-clear: 170px;
    --content-top: 210px;

    margin: 0;
    padding: var(--content-top) 0 0;     /* padding (not margin) so it can't collapse through the body */
    background-color: #fff;
    background-image: url('/images/layers/beautiful-sky.jpg');
    background-repeat: repeat-x;
    background-position: 0 0;
    background-attachment: fixed;        /* sky stays put while the page scrolls */
    animation: sky-drift 120s linear infinite;
}

@keyframes sky-drift {
    from { background-position: 0 0; }
    to   { background-position: -2580px 0; }   /* one tile width = a seamless loop */
}

@media (prefers-reduced-motion: reduce) {
    .sky,
    .sky-veil { animation: none; }
}

/* A fixed strip of the SAME drifting sky, just under the nav. Content scrolling
   up passes behind it and dissolves into the clouds. It paints the identical
   viewport-fixed sky (same image, attachment, position and animation), so it
   lines up pixel-for-pixel with the body sky and is invisible except where it
   covers content. Masked to fade out along its bottom edge. */
.sky-veil {
    position: fixed;
    top: 0;                              /* covers the whole top, including the nav band */
    left: 0;
    width: 100%;
    height: var(--content-top);          /* matches the content's top offset */
    z-index: 45;                         /* above content, below the nav */
    pointer-events: none;
    background-image: url('/images/layers/beautiful-sky.jpg');
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: 0 0;
    animation: sky-drift 120s linear infinite;
    /* clean sky down to --clouds-clear, then fade to clear by --content-top: the
       open band stays crisp, and content scrolling up dissolves into the clouds */
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--clouds-clear), transparent var(--content-top));
            mask-image: linear-gradient(to bottom, #000 var(--clouds-clear), transparent var(--content-top));
}

/* The flying mascot — soars across the sky band above the content. Positioned
   entirely by hero-fly.js (transform); it stays hidden between passes. Layered
   above the cloud veil but below the nav. */
.hero-fly {
    position: fixed;
    top: 0;
    left: 0;
    width: 144px;                        /* ~20% smaller than the 180px native-ish size */
    height: auto;
    z-index: 47;                         /* above the scroll scrim (46), veil (45) + content */
    pointer-events: none;
    visibility: hidden;
    will-change: transform;
}

/* White nav backdrop, faded in only once the page is scrolled (topnav.js toggles
   .nav-scrolled on the body). At the top the clouds + flying hero stay clean; on
   scroll the logo gets a full-width white band that dissolves into the content below.
   Sits above the cloud veil (45) + content (2), below the flying hero (47) + nav (50). */
.sky::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 46;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    background: linear-gradient(to bottom, #fff 60%, rgba(255, 255, 255, 0));
}
.sky.nav-scrolled::before { opacity: 1; }

/* ---------- Content column ----------
   Same width as the nav and the Trust TV (min of 1440 and the viewport less 20px
   each side). 120px clears the fixed nav, +50px lets the sky breathe underneath. */
.page {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: min(1440px, 100vw - 40px);
    margin: 0 auto 12rem;
    background: #fff;
    border: 2px solid #000;
    border-radius: 18px;
    box-shadow: 5px 5px 0 #000;         /* comic offset along the right + bottom */
    padding: clamp(1.75rem, 4vw, 3.5rem);
}

.page__title {
    color: #00f;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1;
    margin: 0;
    text-shadow: 0 2px 0 #fff, 0 0 22px rgba(255, 247, 224, .95);   /* cream glow on the sky */
}
.page__sub {
    font-family: 'Bangers', system-ui, cursive;
    font-size: clamp(1.3rem, 3vw, 2.2rem);
    letter-spacing: .5px;
    color: #15243a;
    margin: .35rem 0 2.25rem;
}

.page h2 {
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    color: #00f;
    margin: 2.4rem 0 .6rem;
}
.page p,
.page li {
    font-size: 1.6rem;
    line-height: 1.7;
    color: #1a2230;
}
.page p { margin: 0 0 1.15rem; }
.page strong { color: #111; }

.page a {
    color: #00f;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page a:hover { color: #0030d0; }

/* The wondering-aloud line, set off as a quote. */
.page__aside {
    margin: 1.5rem 0;
    font-size: 1.35rem;
    font-style: italic;
    color: #00339a;
    border-left: 5px solid #ff0;
    padding-left: 1.1rem;
}

.page__cta {
    font-family: 'Bangers', system-ui, cursive;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    color: #00f;
    margin: 2.2rem 0 0;
}

/* ---------- The mascot, fixed bottom-left ----------
   Half size (the source art is 972px wide). Pointer-events off so he never blocks
   a click; he sits above the page but below the nav and the legal bar. */
.hero-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 486px;
    height: auto;
    z-index: 40;
    pointer-events: none;
}
@media (max-width: 640px) {
    .hero-fixed { width: 240px; }
}

/* ---------- Charcoal footer (empty for now) ----------
   Tall enough that scrolling to the bottom parks the mascot in here instead of
   over the copy. Real footer content comes in a later pass. */
.ground {
    position: relative;
    z-index: 1;
    height: 275px;
    background: #2e2f33;
}
/* Phone: the mascot is smaller, so shrink the charcoal to keep its top at his neck. */
@media (max-width: 640px) {
    .ground { height: 140px; }
}

/* Prefooter CTA badges — comic buttons that sit beside the mascot once you reach
   the bottom on a phone. Hidden on wider screens for now (desktop placement TBD).
   Links point at pages still to be built. */
.ground__cta { display: none; }

.cta-badge {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
    padding: 12px 16px;
    border: 2.5px solid #000;
    border-radius: 16px;
    box-shadow: 4px 4px 0 #000;             /* comic offset */
    transition: transform .12s ease, box-shadow .12s ease;
}
.cta-badge--logo { background: #ff0; color: #000; }   /* yellow */
.cta-badge--site { background: #0000ff; color: #fff; }   /* royal blue */
.cta-badge:hover,
.cta-badge:focus-visible {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0 #000;
}

@media (max-width: 640px) {
    .ground__cta {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 12px;
        position: absolute;
        right: 12px;
        bottom: 100%;                       /* lift above the charcoal, beside his head */
        margin-bottom: 12px;
    }
}