/* public/hero.css
 *
 * The signed-out hero, used by #logged-out-view in index.html. Mobile first: the
 * portrait artwork fills the top of the screen and the sign-in panel rises over
 * its lower edge. From 700px up the same media becomes a tall framed panel beside
 * the text. A 9:16 asset fits a tall column and a tall phone viewport natively, so
 * the composition is never cropped away.
 *
 * Colours and the font come from style.css tokens (--accent, --ink, --font-sans).
 */

body.hero-mode {
    /* Override the app's centred flex body, which exists to centre the app card.
       The wallpaper is left alone: the hero sits on the same doodle as the app so
       the two views read as one product. */
    display: block;
    color: var(--ink);
}

.hero {
    /* Not the app's white card. */
    background: none;
    background-image: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    width: auto;
    max-width: none;
    margin: 0;
    text-align: left;

    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* ---------------------------------------------------------------- media ---- */

.hero-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 54dvh;
    overflow: hidden;
    /* The still is a centred 9:16 crop matched to the video's framing, painted as a
       background rather than set as the video's poster attribute: a background
       image inside a display:none subtree is never fetched, so a signed-in visitor
       (who never sees this view) downloads none of it. The colour behind it matches
       the artwork's night sky, so any letterboxing is invisible. */
    background: #10162a url(/public/hero/hero.jpg) center / cover no-repeat;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* cover, not contain: the composition is dense, so cropping the edges reads
       better than a letterboxed frame. */
    object-fit: cover;
    display: block;
}

/* Softens the artwork right above the panel edge so the join reads as intended
   rather than as a cut. Kept light: the artwork is already detailed. */
.hero-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 32%;
    background: linear-gradient(to bottom, rgba(16, 22, 42, 0) 0%, rgba(16, 22, 42, 0.5) 100%);
    pointer-events: none;
}

/* ---------------------------------------------------------------- panel ---- */

.hero-panel {
    position: relative;
    margin-top: -30px;
    padding: 30px 22px calc(30px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    background: var(--surface);
    box-shadow: 0 -20px 44px -26px rgba(28, 39, 64, 0.55);
    text-align: center;
}

.hero-eyebrow {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--accent);
}

.hero-panel h1 {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 6vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink);
}

.hero-tagline {
    margin: 0 auto 22px;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Three short, scannable reasons. They also give the column enough mass to
   stand beside a tall portrait image. The original text block was ~230px tall
   against a ~700px image, which is what made the layout look unbalanced. */
.hero-points {
    list-style: none;
    margin: 0 auto 26px;
    padding: 0;
    max-width: 42ch;
    text-align: left;
    display: grid;
    gap: 12px;
}

.hero-points li {
    position: relative;
    /* Stops a lone word (e.g. "stuck.") landing on its own line. Progressive
       enhancement: unsupported browsers just wrap as usual. */
    text-wrap: pretty;
    padding-left: 26px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.hero-points strong {
    color: var(--ink);
    font-weight: 700;
}

.hero-points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Google's own blue is kept (their brand guidelines ask for it); only the shape
   is brought in line with the design language. */
.hero-panel .google-signin-button {
    margin-top: 0;
    border-radius: var(--radius-control);
    font-weight: 700;
    box-shadow: 0 8px 20px -8px rgba(66, 133, 244, 0.6);
}

.hero-fineprint {
    margin: 16px 0 0;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

/* The privacy and AI links. Quiet, because a first-time visitor should meet the
   product and not a wall of policies, but present: Google's OAuth branding rules
   want a privacy policy linked from the home page, and the AI transparency duty
   wants the AI nature of the answers disclosed before a child reads one. */
.hero-legal {
    margin: 12px 0 0;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.hero-legal a {
    color: var(--ink-soft);
}

.hero-legal a:hover {
    color: var(--accent-strong);
}

/* --------------------------------------------------------------- desktop ---- */

@media (min-width: 700px) {
    .hero {
        /* One source of truth for the artwork's height, shared with the text
           column so the two are exactly the same height and their edges line up. */
        --media-h: clamp(430px, 68vh, 560px);
        flex-direction: row;
        /* center, NOT stretch: in a row, `stretch` sizes items to the CONTAINER's
           height (min-height: 100dvh here), which made the text column
           viewport-tall and pushed the button to the bottom of the screen.
           With both items given the same explicit height, centring aligns them. */
        align-items: center;
        justify-content: center;
        gap: clamp(32px, 5vw, 64px);
        padding: 48px 40px;
    }

    /* The height cap is the point. At 9:16 an unconstrained panel grew to ~710px
       of image against ~230px of text, so the copy looked lost. Capping the
       height also caps the width, keeping the two columns in proportion. */
    .hero-media {
        flex: 0 0 auto;
        height: var(--media-h);
        width: auto;
        aspect-ratio: 9 / 16;
        min-height: 0;
        border-radius: 24px;
        border: 1px solid var(--panel-border);
        box-shadow: 0 40px 80px -40px rgba(28, 39, 64, 0.65);
    }

    /* No scrim needed: on desktop the panel is beside the artwork, not over it. */
    .hero-media::after {
        display: none;
    }

    .hero-panel {
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        text-align: left;
        /* Wider than the old 420px: the column now carries a list and needs to
           breathe, and matching the two masses is what removes the awkwardness.
           560px also clears the wrap boundary the bullets were sitting on. */
        max-width: 560px;
        /* Match the artwork's height so the ends line up. min-height, not height:
           if the copy ever grows past the artwork the column simply grows instead
           of overflowing. */
        min-height: var(--media-h);
        /* Column layout so the action block can be pushed to the bottom. */
        display: flex;
        flex-direction: column;
    }

    /* margin-top: auto absorbs the leftover height, so on desktop the button and
       fine print sit at the artwork's bottom edge while the eyebrow sits at its
       top. If the copy ever grows taller than the artwork, the auto margin simply
       collapses and padding-top keeps a sane minimum gap. */
    .hero-actions {
        margin-top: auto;
        padding-top: 28px;
    }

    .hero-tagline {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        font-size: 1.05rem;
    }

    .hero-points {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }

    .hero-panel h1 {
        font-size: clamp(2rem, 3.2vw, 2.9rem);
    }

    .hero-fineprint {
        margin-top: 12px;
    }
}