/* www/components.css — blocks layer.
 *
 * CUBE-CSS "Block" axis (Andy Bell): one block per component. Sister
 * file to brand.css (tokens), layouts.css (composition),
 * utilities.css, and pricing.css (exceptions). Every rule below sits
 * inside the `blocks` cascade layer declared in brand.css:
 *
 *   @layer tokens, composition, utilities, blocks, exceptions;
 *
 * Migrated from www/styles.css at F5.C1 — the visual surface is
 * unchanged; only the cascade-layer scaffolding moved. F5.C3 will
 * collapse the `.btn-*` variants into one `.btn` block + per-variant
 * `data-variant="…"` attribute selectors.
 *
 * Refactor history of the inner rules:
 *   - F4.C2.3 replaced literal hex with brand tokens.
 *   - F2.C2 migrated padding/margin/gap/font-size/line-height to
 *     var(--text-*) + var(--space-*) + var(--lh-*) tokens.
 *   - F3.C2 wrapped every transition / animation invocation in
 *     @media (prefers-reduced-motion: no-preference) — the gate-
 *     positive idiom (Decision 5 guardrail 1).
 */

@layer blocks {
    /* ---- Reset & Base ---- */
    /* Universal reset uses literal `0` because the 8pt-grid space scale
       does not model zero (Decision 3 guardrail 2 + BR2.1.3). Carved
       out from the drift tripwire (F5.C4) and the F2 migration check
       (check-f2-styles-migration.sh's `:[[:space:]]+0;` exemption). */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--brand-font-family);
        line-height: var(--lh-body);     /* was 1.6 → 1.5 (3-step line-height ladder, Decision 3 g3) */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background: var(--brand-bg-page);
    }

    /* ---- Header ---- */

    header {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 100;
        padding: var(--space-1-5) var(--space-2);
    }

    nav {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        font-size: var(--text-0);     /* was 1.125rem (top of --text-0 clamp range) */
        font-weight: 600;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        letter-spacing: -0.01em;
    }

    .nav-auth {
        display: flex;
        align-items: center;
        gap: var(--space-0-5);
    }

    .nav-logged-out,
    .nav-logged-in {
        display: flex;
        align-items: center;
        gap: var(--space-0-5);
    }

    .nav-user {
        color: rgba(255, 255, 255, 0.65);
        font-size: var(--text--1);    /* was 0.875rem → ~0.83-0.9rem; small-text collapse step */
        margin-right: var(--space-0-25);
    }

    /* ---- .btn block (F5.C3 — collapsed from .btn-*) ----
       One .btn block + per-variant data-variant attribute selectors.
       Decision 6 guardrail 2: "one block per component; variants ride
       on data-* attributes, never class permutations." Five variants
       live here:
         - nav-ghost      ← was .btn-nav-login
         - nav-secondary  ← was .btn-nav-signup
         - cta-primary    ← was .btn-cta-signup
         - cta-ghost      ← was .btn-cta-login
         - plan-primary   ← was .plan-cta (moved from pricing.css)
       The variant rule bodies are character-equal to the pre-F5.C3
       .btn-* rules they replaced, so the visual diff is zero. The
       shared `.btn` base holds only the properties every variant had
       in common (font-family inherit; text-decoration none; display
       inline-flex baseline-aligned). */
    .btn {
        font-family: inherit;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn[data-variant="nav-ghost"] {
        background: transparent;
        color: rgba(255, 255, 255, 0.75);
        border: none;
        padding: var(--space-0-5) var(--space-1);    /* was 0.5rem 0.875rem; 0.875 snaps to 1rem (8pt-grid) */
        font-size: var(--text--1);                   /* was 0.875rem */
        font-weight: 500;
        cursor: pointer;
        border-radius: 6px;
    }

    .btn[data-variant="nav-ghost"]:hover {
        color: rgba(255, 255, 255, 0.95);
    }

    .btn[data-variant="nav-secondary"] {
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.15);
        padding: var(--space-0-5) var(--space-1);
        font-size: var(--text--1);
        font-weight: 500;
        cursor: pointer;
        border-radius: 6px;
    }

    .btn[data-variant="nav-secondary"]:hover {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.25);
    }

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

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

    /* Stars */
    .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);
        /* animation moved to @media (prefers-reduced-motion: no-preference) block — F3.C2 */
    }

    /* Faint dawn glow at horizon */
    .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;
    }

    .hero-content {
        text-align: center;
        padding: var(--space-2);
        position: relative;
        z-index: 1;
    }

    .hero-content h1 {
        font-size: var(--text-5);     /* was clamp(2.5rem,5vw+1rem,4rem) — collapses to step +5 (2.49→3.43rem); large-display visibly slightly smaller at the max */
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
        letter-spacing: -0.03em;
        margin-bottom: var(--space-1);
        line-height: var(--lh-tight);  /* was 1.1 → 1.2 (3-step ladder) */
    }

    .hero-content p {
        font-size: var(--text-0);     /* was clamp(1rem,1.5vw+0.5rem,1.25rem) → --text-0 fluid (1→1.125rem); slight max trim */
        color: rgba(255, 255, 255, 0.5);
        max-width: 460px;
        margin: 0 auto;
        line-height: var(--lh-body);  /* was 1.6 → 1.5 */
    }

    /* Scroll indicator */
    .scroll-hint {
        position: absolute;
        bottom: 2.5rem;
        left: 50%;
        z-index: 1;
        /* animation moved to @media (prefers-reduced-motion: no-preference) block — F3.C2 */
    }

    .scroll-hint::before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        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);
    }

    /* ---- Features ---- */

    .features {
        background: linear-gradient(180deg, var(--brand-night-1) 0%, var(--brand-night-2) 100%);
        padding: var(--space-8) var(--space-2);
    }

    .features h2 {
        font-size: var(--text-3);     /* was clamp(1.5rem,3vw+0.5rem,2.25rem) → --text-3 (1.73→2.20rem); small max trim */
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        margin-bottom: var(--space-4);
        letter-spacing: -0.02em;
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-1-5);
    }

    .feature {
        padding: var(--space-2);
        border-radius: var(--brand-radius-card);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .feature:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    .feature h3 {
        font-size: var(--text-0);     /* was 1.125rem (top of --text-0 clamp) */
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: var(--space-0-75);
        letter-spacing: -0.01em;
    }

    .feature p {
        color: rgba(255, 255, 255, 0.5);
        font-size: var(--text--1);    /* was 0.95rem → small-text collapse */
        line-height: var(--lh-body);  /* was 1.65 → 1.5 */
    }

    /* ---- Mission ---- */

    .mission {
        background: linear-gradient(180deg, var(--brand-night-2) 0%, var(--brand-night-3) 50%, var(--brand-violet) 100%);
        padding: var(--space-8) var(--space-2);
        text-align: center;
    }

    .mission h2 {
        font-size: var(--text-3);     /* was clamp(1.5rem,3vw+0.5rem,2.25rem) */
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: var(--space-2);
        letter-spacing: -0.02em;
    }

    .mission p {
        font-size: var(--text-0);     /* was 1.1rem (lands inside --text-0 clamp 1→1.125rem) */
        color: rgba(255, 255, 255, 0.6);
        max-width: 540px;
        margin: 0 auto var(--space-1);
        line-height: var(--lh-relaxed);  /* was 1.7 */
    }

    .mission strong {
        color: rgba(255, 255, 255, 0.85);
    }

    /* ---- CTA ---- */

    .cta {
        background: linear-gradient(180deg, var(--brand-violet) 0%, var(--brand-rust) 100%);
        padding: var(--space-8) var(--space-2);
        text-align: center;
    }

    .cta h2 {
        font-size: var(--text-3);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        margin-bottom: var(--space-1);
        letter-spacing: -0.02em;
    }

    .cta p {
        color: rgba(255, 255, 255, 0.7);
        font-size: var(--text-0);     /* was 1.1rem */
        margin-bottom: var(--space-3);  /* was 2.5rem → snap up to 3 (8pt-grid; 2.5 is mid-step) */
    }

    .cta-buttons {
        display: flex;
        gap: var(--space-0-75);
        justify-content: center;
        flex-wrap: wrap;
    }

    .cta-welcome {
        color: rgba(255, 255, 255, 0.8);
        font-size: var(--text-0);     /* was 1.1rem */
    }

    .btn[data-variant="cta-primary"] {
        padding: var(--space-1) var(--space-2);   /* was 0.875rem 1.75rem; 0.875→1 (snap up), 1.75→2 (snap up) */
        background: rgba(255, 255, 255, 0.93);
        color: var(--brand-rust);
        border: none;
        border-radius: 8px;
        font-size: var(--text-0);     /* was 1rem */
        font-weight: 600;
        cursor: pointer;
    }

    .btn[data-variant="cta-primary"]:hover {
        transform: translateY(-1px);
        background: var(--brand-fg-on-warm);
    }

    .btn[data-variant="cta-primary"]:active {
        transform: translateY(0);
    }

    .btn[data-variant="cta-ghost"] {
        padding: var(--space-1) var(--space-2);   /* was 0.875rem 1.75rem — same snap as cta-primary */
        background: transparent;
        color: rgba(255, 255, 255, 0.85);
        border: 1.5px solid rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        font-size: var(--text-0);     /* was 1rem */
        font-weight: 500;
        cursor: pointer;
    }

    .btn[data-variant="cta-ghost"]:hover {
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.45);
    }

    .btn[data-variant="cta-ghost"]:active {
        transform: translateY(0);
    }

    /* plan-primary variant — historically lived in pricing.css as
       .plan-cta (an `<a class="plan-cta">`); moved to components.css at
       F5.C3 so all five button variants share one block (Decision 6
       guardrail 2). The `<a>` form takes text-decoration: none from
       the .btn base; `display: inline-flex` from the base keeps the
       horizontal centering that .plan-cta's text-align: center used
       to provide. Visual surface is character-equal. */
    .btn[data-variant="plan-primary"] {
        display: flex;
        padding: var(--space-1) var(--space-1-5);  /* was 0.875rem 1.5rem; 0.875→1 (snap up) */
        background: rgba(255, 255, 255, 0.93);
        color: var(--brand-rust);
        border-radius: 8px;
        font-size: var(--text-0);
        font-weight: 600;
    }

    .btn[data-variant="plan-primary"]:hover {
        transform: translateY(-1px);
        background: var(--brand-fg-on-warm);
    }

    .btn[data-variant="plan-primary"]:active {
        transform: translateY(0);
    }

    /* ---- Sunrise gradient ---- */

    .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 ---- */

    footer {
        background: var(--brand-accent);
        padding: var(--space-3) var(--space-2);    /* was 2.5rem 2rem; 2.5→3 (snap up) */
        text-align: center;
    }

    footer p {
        color: rgba(69, 26, 3, 0.45);
        font-size: var(--text--1);    /* was 0.875rem */
    }

    /* ---- Scroll reveal ---- */

    .fade-in {
        opacity: 0;
        transform: translateY(24px);
        /* transition moved to @media (prefers-reduced-motion: no-preference) block — F3.C2 */
    }

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

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

    .toast {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%) translateY(16px);
        background: rgba(0, 0, 0, 0.85);
        color: white;
        padding: var(--space-1) var(--space-1-5);  /* was 0.875rem 1.5rem; 0.875→1 (snap up) */
        border-radius: 8px;
        font-size: var(--text--1);    /* was 0.925rem → small-text collapse step */
        font-family: inherit;
        opacity: 0;
        /* transition moved to @media (prefers-reduced-motion: no-preference) block — F3.C2 */
        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 animation invocations — they live
   OUTSIDE both the cascade-layer block AND the prefers-reduced-motion
   gate. Wrapping @keyframes inside the gate would hide the registration
   when OS default = reduce, leaving the `animation:` property pointing
   to an undefined name (F3 retrospective spec-gap reference). */
@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 lives INSIDE this
   no-preference branch. OS default = "reduce" → the block is
   skipped → no animation runs. This is the OPPOSITE of the previous
   (prefers-reduced-motion: reduce) suppression idiom (which left
   animation on by default and conditionally turned it off); the
   gate-positive form is the safer default for users on older
   browsers / testing environments where the preference is unknown.
   DEFERRED(P1) — see deferred-ledger.md DD-F3C2-P1: operator
   OS-toggle verification of BR3.2.3 (no animation runs with
   reduce-motion = on) is deferred until an operator can toggle the
   OS preference and reload www/index.html + www/pricing.html. */
@media (prefers-reduced-motion: no-preference) {
    @layer blocks {
        .btn[data-variant="nav-ghost"] {
            transition: color var(--motion-duration-fast) var(--motion-ease-standard);
        }

        .btn[data-variant="nav-secondary"] {
            transition: background var(--motion-duration-fast) var(--motion-ease-standard),
                        border-color var(--motion-duration-fast) var(--motion-ease-standard);
        }

        .btn[data-variant="cta-primary"] {
            transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
                        background var(--motion-duration-fast) var(--motion-ease-standard);
        }

        .btn[data-variant="cta-ghost"] {
            transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
                        border-color var(--motion-duration-fast) var(--motion-ease-standard);
        }

        .btn[data-variant="plan-primary"] {
            transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
                        background var(--motion-duration-fast) var(--motion-ease-standard);
        }

        .feature {
            transition: background 0.2s; /* TODO(design-R2): motion token — 200ms not in R1.5 vocabulary (Decision 5 guardrail 2) */
        }

        .hero::before {
            animation: twinkle 4s ease-in-out infinite alternate; /* TODO(design-R2): motion token — 4s + ease-in-out not in R1.5 vocabulary */
        }

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

        /* Scroll-reveal: the gate-positive flip moves the initial
           opacity:0 / transform offset INTO the no-preference branch.
           Default (reduce or unknown) leaves elements at full opacity
           and natural position — they show immediately, with or
           without the JS .visible toggle. */
        .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 R1.5 vocabulary */
        }

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

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

        .feature.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 R1.5 vocabulary */
        }
    }
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    @layer blocks {
        header {
            padding: var(--space-1-5) var(--space-1-5);   /* was 1.25rem 1.5rem; 1.25→1.5 (snap up) */
        }

        /* Responsive transition-delay overrides moved into the gate-positive
           no-preference branch below — they only apply when the motion-bearing
           initial state is active in the first place (F3.C2). */

        .features,
        .mission,
        .cta {
            padding: var(--space-6) var(--space-1-5);    /* was 5rem 1.5rem; 5→6 (snap up) */
        }
    }
}

@media (max-width: 480px) {
    @layer blocks {
        .cta-buttons {
            flex-direction: column;
            align-items: center;
        }

        .btn[data-variant="cta-primary"],
        .btn[data-variant="cta-ghost"] {
            width: 100%;
            max-width: 280px;
        }

        .nav-auth {
            gap: var(--space-0-25);
        }

        .btn[data-variant="nav-ghost"] {
            padding: var(--space-0-5) var(--space-0-5);   /* was 0.4rem 0.5rem; 0.4→0.5 (snap up) */
            font-size: var(--text--2);                    /* was 0.8rem → small-text collapse to smallest */
        }

        .btn[data-variant="nav-secondary"] {
            padding: var(--space-0-5) var(--space-0-75);  /* was 0.4rem 0.75rem; 0.4→0.5 (snap up) */
            font-size: var(--text--2);                    /* was 0.8rem */
        }
    }
}

/* Responsive override for the gate-positive scroll-reveal: on narrow
   viewports, drop the cascaded transition-delay so all three feature
   cards animate in together. Lives inside (no-preference) because the
   transition-delay itself only exists in that branch (F3.C2). */
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
    @layer blocks {
        .feature.fade-in:nth-child(2),
        .feature.fade-in:nth-child(3) {
            transition-delay: 0s;
        }
    }
}