/* site.css — the www identity pieces that Vanilla does not have.
 *
 * Design R2 / R5-H2: Vanilla Framework carries the layout, typography,
 * navigation, cards, buttons and forms. What is left here is the part
 * of the brand identity that makes this site recognizable — the
 * night-sky hero, the sunrise band, the amber footer, the scroll
 * reveal, the toast — plus
 * the legal-document rhythm.
 *
 * Rules of the house, all tripwired:
 *   - UN-LAYERED. Vanilla ships un-layered, so anything meant to win
 *     over it must be too (design R2 decision 20.7). brand.css keeps
 *     its @layer wrapper because it declares custom properties only.
 *   - Tokens, never literals, for space / size / colour
 *     (check-css-drift.sh, check-brand-assets.sh F4.C2.1).
 *   - Nothing here overrides with a bang; it already loads last
 *     (check-vanilla-markup.sh).
 *   - Every transition and animation INVOCATION lives inside the
 *     gate-positive @media (prefers-reduced-motion: no-preference)
 *     block; @keyframes registrations stay outside it, or the
 *     animation name would be undefined when the OS default is reduce
 *     (F3.C2 / Decision 5 guardrail 1).
 *
 * Load order: vanilla.css -> theme.css -> brand.css -> site.css.
 */

/* ---- Navigation -------------------------------------------------- */

/* Vanilla sets `.p-navigation__item { display: flex }` at the same
 * specificity as its own `[hidden] { display: none }`, so a hidden nav
 * item needs an explicit rule to stay hidden. script.js toggles
 * #nav-logged-out / #nav-logged-in with the `hidden` property. */
.p-navigation__item[hidden] {
    display: none;
}

/* ---- Hero -------------------------------------------------------- */

.sd-hero {
    min-height: 100vh;
    background: var(--brand-bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Stars. */
.sd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 28% 68%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 45% 12%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 62% 38%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 78% 55%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 8% 82%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(1px 1px at 35% 48%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1px 1px at 55% 78%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 88% 18%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1px 1px at 92% 72%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 18% 42%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 72% 85%, rgba(255, 255, 255, 0.2), transparent);
}

/* Faint dawn glow at the horizon. */
.sd-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(30, 16, 64, 0.4), transparent);
    pointer-events: none;
}

.sd-hero .u-fixed-width {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Vanilla's .p-heading--display default is font-weight: 100 — a
 * hairline on the night ground with no lower-weight class to reach
 * for instead. The retired stylesheet set 700 with tightened
 * tracking (design R2 punch list C1); restored here, scoped to the
 * hero so it doesn't touch every other display heading Vanilla
 * renders elsewhere. */
.sd-hero .p-heading--display {
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* Scroll indicator. */
.sd-scroll-hint {
    position: absolute;
    bottom: var(--space-3);
    left: 50%;
    /* Design R2 punch list C3 — the -50% correction used to live only
     * inside @keyframes bob, which the reduce-motion gate skips, so the
     * hint sat right of centre whenever motion was off. */
    transform: translateX(-50%);
    z-index: 1;
}

.sd-scroll-hint::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    border-right: 1.5px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
}

/* ---- Sunrise band ------------------------------------------------ */

.sd-sunrise {
    height: 30vh;
    min-height: 150px;
    max-height: 300px;
    background: linear-gradient(180deg,
        var(--brand-rust)   0%,
        var(--brand-dawn-1) 30%,
        var(--brand-dawn-2) 55%,
        var(--brand-dawn-3) 80%,
        var(--brand-accent) 100%);
}

/* ---- Footer ------------------------------------------------------ */

.sd-footer {
    background: var(--brand-accent);
    padding: var(--space-3) var(--space-2);
    text-align: center;
}

.sd-footer p {
    color: rgba(69, 26, 3, 0.45);
    font-size: var(--text--1);
    margin: 0;
}

.sd-footer a {
    color: rgba(69, 26, 3, 0.6);
}

/* ---- Pricing ----------------------------------------------------- */

.plan-price-amount {
    font-size: var(--text-4);
    font-weight: 700;
    color: var(--brand-accent);
    letter-spacing: -0.02em;
}

/* ---- Legal documents --------------------------------------------- */

.legal-doc {
    line-height: var(--lh-relaxed);
}

.legal-doc h2 {
    margin: var(--space-2) 0 var(--space-0-5);
    font-size: var(--text-1);
}

.legal-doc p {
    margin: 0 0 var(--space-1);
}

/* ---- Scroll reveal ----------------------------------------------- */
/* The gate-positive flip: the initial opacity:0 / offset lives INSIDE
 * the no-preference branch below, so with reduce (or an unknown
 * preference) elements render at full opacity in place, with or
 * without the JS .visible toggle. */

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Toast ------------------------------------------------------- */

.toast {
    position: fixed;
    bottom: var(--space-2);
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(0, 0, 0, 0.85);
    color: rgba(255, 255, 255, 0.95);
    padding: var(--space-1) var(--space-1-5);
    border-radius: 8px;
    font-size: var(--text--1);
    font-family: inherit;
    opacity: 0;
    z-index: 1000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- Animations --------------------------------------------------
 * @keyframes are registrations, not invocations — they live OUTSIDE
 * the prefers-reduced-motion gate. Wrapping them inside would hide the
 * registration when the OS default is reduce, leaving `animation:`
 * pointing at an undefined name. */

@keyframes twinkle {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

@keyframes bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ---- Motion (gate-positive — F3.C2 / Decision 5 guardrail 1) ------
 * Every transition: / animation: invocation is in here. OS default =
 * "reduce" -> the block is skipped -> nothing animates. This is the
 * opposite of the (prefers-reduced-motion: reduce) suppression idiom,
 * and the safer default where the preference is unknown.
 * deferred: the operator OS-toggle
 * verification of BR3.2.3 is still open. */
@media (prefers-reduced-motion: no-preference) {
    .sd-hero::before {
        animation: twinkle 4s ease-in-out infinite alternate; /* TODO(design-R2): motion token — 4s + ease-in-out not in the R1.5 vocabulary */
    }

    .sd-scroll-hint {
        animation: bob 2.5s ease-in-out infinite; /* TODO(design-R2): motion token — 2.5s + ease-in-out not in the R1.5 vocabulary */
    }

    .fade-in {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease; /* TODO(design-R2): motion token — 700ms reveal + ease keyword not in the R1.5 vocabulary */
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .p-card.fade-in:nth-child(2) {
        transition-delay: 0.1s; /* TODO(design-R2): motion token */
    }

    .p-card.fade-in:nth-child(3) {
        transition-delay: 0.2s; /* TODO(design-R2): motion token */
    }

    .toast {
        transition: opacity 0.3s, transform 0.3s; /* TODO(design-R2): motion token — 300ms not in the R1.5 vocabulary */
    }
}

/* ---- Design R2 punch list, 2026-09-07 ---------------------------- */

/* C2 — the hero subtitle lost its treatment when the retired sheet went
 * (it was rgba(255,255,255,0.5), max-width 460px, margin 0 auto). */
.sd-hero__subtitle {
    color: rgba(255, 255, 255, 0.5);
    margin-left: auto;
    margin-right: auto;
    max-width: 460px;
}

/* Row 2 + C4 — the auth controls sit in a second .p-navigation__items
 * list, so their buttons don't share the nav links' line box, and
 * Vanilla's default .p-button bottom margin pushes the row down. */
.p-navigation__items #nav-logged-out,
.p-navigation__items #nav-logged-in {
    align-items: center;
    display: flex;
    gap: var(--space-0-5);
}

#nav-logged-out button,
#nav-logged-in button {
    margin-bottom: 0;
}