/*
 * Landing page — hero plus a bento grid of principles.
 *
 * The hero keeps two columns: the argument on the left, a quiet decorative scene on the right.
 * The principles below sit in a three-column bento grid; ideas that need room take two columns
 * (`--wide`), short ones take one, so no tile dangles in empty space. Each tile carries its own
 * accent colour through two custom properties, the same way the token file intends accents to
 * travel: one name, one place to change.
 *
 * The scroll reveal is progressive enhancement: the hiding rule only applies under `.has-reveal`,
 * a class the landing script adds after it has confirmed the reader allows motion. Without the
 * script — or with reduced motion — the page is simply there.
 */

/* ---- Landing container ---------------------------------------------------------------------- */

.landing {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

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

.landing__hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-8) 0;
    min-height: 60vh;
}

.landing__hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.landing__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--colour-primary-surface);
    color: var(--colour-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    width: fit-content;
}

.landing__heading {
    font-size: clamp(2.25rem, 4.5vw, 2.5rem);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--colour-ink);
    margin: 0;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.landing__intro {
    font-size: var(--text-lg);
    line-height: var(--leading-body);
    color: var(--colour-ink-quiet);
    margin: 0;
    max-width: 540px;
}

.landing__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---- Hero visual (decorative cards) --------------------------------------------------------- */

.landing__hero-visual {
    position: relative;
    height: 400px;
}

.landing__hero-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: float 6s ease-in-out infinite;
}

.landing__hero-card--1 {
    top: 0;
    right: 10%;
    width: 280px;
    animation-delay: 0s;
}

.landing__hero-card--2 {
    top: 40%;
    right: 30%;
    width: 240px;
    animation-delay: -2s;
}

.landing__hero-card--3 {
    bottom: 0;
    right: 5%;
    width: 260px;
    animation-delay: -4s;
}

.landing__hero-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--colour-primary), var(--colour-primary-hover));
    flex-shrink: 0;
}

.landing__hero-card--2 .landing__hero-avatar {
    background: linear-gradient(135deg, var(--colour-success), #059669);
}

.landing__hero-card--3 .landing__hero-avatar {
    background: linear-gradient(135deg, var(--colour-warning), #b45309);
}

.landing__hero-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.landing__hero-lines span {
    display: block;
    height: 12px;
    background: var(--colour-surface-sunken);
    border-radius: var(--radius-sm);
}

.landing__hero-lines span:first-child {
    width: 80%;
}

.landing__hero-lines span:nth-child(2) {
    width: 60%;
}

.landing__hero-lines span:nth-child(3) {
    width: 40%;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* ---- Principles: bento grid ----------------------------------------------------------------- */

.landing__features {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--colour-border);
}

.landing__features-header {
    margin-bottom: var(--space-6);
}

.landing__features-heading {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--colour-ink);
    margin: 0;
}

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

.landing__tile {
    --tile-accent: var(--colour-primary);
    --tile-accent-surface: var(--colour-primary-surface);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-5);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--easing),
                box-shadow var(--duration-base) var(--easing);
}

.landing__tile:hover {
    border-color: var(--tile-accent);
    box-shadow: var(--shadow-md);
}

.landing__tile--wide {
    grid-column: span 2;
}

.landing__tile--success {
    --tile-accent: var(--colour-success);
    --tile-accent-surface: var(--colour-success-surface);
}

.landing__tile--info {
    --tile-accent: var(--colour-info);
    --tile-accent-surface: var(--colour-info-surface);
}

.landing__tile--warning {
    --tile-accent: var(--colour-warning);
    --tile-accent-surface: var(--colour-warning-surface);
}

.landing__tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
    background: var(--tile-accent-surface);
    color: var(--tile-accent);
    border-radius: var(--radius-md);
}

.landing__tile-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--colour-ink);
    margin: 0 0 var(--space-2);
}

.landing__tile-text {
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
    line-height: var(--leading-body);
    margin: 0;
}

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

.landing__cta {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--colour-border);
}

.landing__cta-inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.landing__cta-heading {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--colour-ink);
    margin: 0;
}

.landing__cta-text {
    font-size: var(--text-base);
    color: var(--colour-ink-quiet);
    line-height: var(--leading-body);
    margin: 0;
}

/* ---- Scroll reveal (only active once the script has opted in) ------------------------------- */

.has-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 500ms var(--easing), transform 500ms var(--easing);
}

.has-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* A light stagger inside the grid, so tiles arrive in reading order rather than all at once. */
.has-reveal .landing__bento [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.has-reveal .landing__bento [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.has-reveal .landing__bento [data-reveal]:nth-child(4) { transition-delay: 80ms; }
.has-reveal .landing__bento [data-reveal]:nth-child(5) { transition-delay: 160ms; }
.has-reveal .landing__bento [data-reveal]:nth-child(6) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
    .has-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

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

@media (max-width: 960px) {
    .landing__hero {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        min-height: auto;
        padding: var(--space-6) 0;
    }

    .landing__hero-visual {
        display: none;
    }

    .landing__heading {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .landing__bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .landing__bento {
        grid-template-columns: 1fr;
    }

    .landing__tile--wide {
        grid-column: span 1;
    }

    .landing__actions {
        flex-direction: column;
    }

    .landing__actions .btn {
        width: 100%;
    }
}