/* The landing of www. (templates/public/home.html.twig). Colors from tokens.css only. */

.landing-eyebrow,
.landing-mono {
    margin: 0;
    color: var(--ink-muted);
    font: 400 13px/20px var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.landing-eyebrow {
    margin-bottom: var(--space-3);
}

/* display-xl (44/48) from md, display-lg (32/40) below, so the title fits a phone */
.landing-title {
    max-width: 16ch;
    margin-bottom: var(--space-4);
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.005em;
    text-wrap: balance;

    @media (min-width: 768px) {
        font-size: 44px;
        line-height: 48px;
        letter-spacing: -0.01em;
    }
}

.landing-h2 {
    margin: 0;
    font-size: 28px;
    line-height: 36px;
    text-wrap: balance;

    @media (min-width: 768px) {
        font-size: 32px;
        line-height: 40px;
    }
}

.landing-h3 {
    display: block;
    margin: 0;
    font: 600 20px/28px var(--font-display);
    text-wrap: balance;
}

.landing-lead {
    max-width: 62ch;
    margin: 0;
    color: var(--ink-muted);
    font-size: 17px;
    line-height: 28px;
    text-wrap: pretty;
}

/*
 * The story: the hero, the pains and the five steps run in the left column, beside the stage, which sticks while they
 * scroll. Below 992px the flow lends its sections to the grid, so the stage comes after the hero, then sticks at the top
 * of the screen, at a third of its height, while the pains and the steps scroll under it.
 */
.landing-story {
    display: grid;
    align-items: start;

    @media (min-width: 992px) {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: var(--space-7);
    }
}

.landing-story__flow {
    min-width: 0;

    @media (max-width: 991.98px) {
        display: contents;

        & > :not(.landing-hero) {
            order: 2;
        }
    }
}

.landing-story__stage {
    position: sticky;
    top: var(--cb-env-banner-height, 0px);
    z-index: 2;
    order: 1;
    margin-inline: calc(var(--tblr-gutter-x, 1.5rem) * -0.5);
    border-bottom: 1px solid var(--line);
    background: var(--surface);

    @media (min-width: 992px) {
        position: relative;
        top: auto;
        z-index: auto;
        order: 0;
        grid-row: 1;
        grid-column: 2;
        align-self: stretch;
        margin-inline: 0;
        border-bottom: 0;
        background: none;
    }
}

.landing-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: clamp(200px, 34svh, 320px);
    padding: var(--space-3) calc(var(--tblr-gutter-x, 1.5rem) * 0.5);

    /* A card about as tall as it is wide, centred in the height of the window */
    @media (min-width: 992px) {
        --landing-stage-room: calc(100svh - var(--cb-env-banner-height, 0px));

        position: sticky;
        top: calc(var(--cb-env-banner-height, 0px) + (var(--landing-stage-room) - min(var(--landing-stage-room) - 2 * var(--space-5), 680px)) / 2);
        gap: var(--space-4);
        height: min(calc(var(--landing-stage-room) - 2 * var(--space-5)), 680px);
        margin-block: var(--space-7);
        padding: var(--space-5);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface-sunken);
    }
}

.landing-stage__desk {
    position: relative;
    flex: 1;
    min-height: 0;

    & canvas {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}

/* Without WebGL, or until three.js draws, the poster of the sample project stands on the desk */
.landing-stage__fallback {
    display: grid;
    place-items: center;
    height: 100%;

    & .landing-poster {
        width: min(100%, 360px);
    }

    .is-drawn > & {
        display: none;
    }
}

/* The current step fills its half bar as it takes the turn */
.landing-stage .cb-steps__step--current .cb-steps__bar::before {
    transition: width 250ms ease-out;

    @starting-style {
        width: 0;
    }
}

/* Hero: not full screen, the text and its two actions */
.landing-hero {
    padding-block: var(--space-7) var(--space-8);

    @media (min-width: 992px) {
        padding-block-start: var(--space-8);
    }

    & .landing-lead {
        margin-bottom: var(--space-5);
    }
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.landing-link {
    font-weight: 600;

    &,
    &:hover,
    &:focus,
    &:active {
        text-decoration: none;
    }

    &:hover {
        color: var(--brand-hover);
    }
}

.landing-note {
    margin: var(--space-5) 0 0;
    color: var(--ink-muted);
    font: 400 13px/20px var(--font-mono);
}

/* The page opens in four beats: the eyebrow, the title, the lead, the actions */
@media (prefers-reduced-motion: no-preference) {
    .landing-hero > * {
        animation: landing-rise 250ms ease-out both;
    }

    .landing-hero > :nth-child(2) {
        animation-delay: 60ms;
    }

    .landing-hero > :nth-child(3) {
        animation-delay: 120ms;
    }

    .landing-hero > :nth-child(n + 4) {
        animation-delay: 180ms;
    }
}

@keyframes landing-rise {
    from {
        opacity: 0;
        transform: translateY(var(--space-3));
    }
}

/* The pains: a sheet of three lines, a hairline between them, the label and the title beside the text from 576px */
.landing-pains {
    padding-block: var(--space-8);
    border-top: 1px solid var(--line);
}

.landing-pains__list {
    display: grid;
    margin: var(--space-6) 0 0;
}

.landing-pain {
    display: grid;
    gap: var(--space-2) var(--space-5);
    padding-block: var(--space-5);
    border-top: 1px solid var(--line);

    @media (min-width: 576px) {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    & dt {
        display: grid;
        gap: var(--space-1);
        font-weight: 400;
    }

    & dd {
        margin: 0;
        text-wrap: pretty;
    }
}

/* The cycle: one article per step, on a hairline, its number, its name and whose turn it is in mono */
.landing-cycle {
    padding-block: var(--space-8) 0;
    border-top: 1px solid var(--line);
}

.landing-head {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.landing-step {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-7);
    border-top: 1px solid var(--line);

    & > p {
        max-width: 62ch;
        margin: 0;
        text-wrap: pretty;
    }

    & > .landing-window {
        margin-top: var(--space-3);
    }

    @media (min-width: 992px) {
        padding-block: var(--space-8);
    }
}

.landing-tag {
    margin: 0;
    color: var(--ink-muted);
    font: 400 13px/20px var(--font-mono);

    & > :first-child {
        color: var(--ink);
        font-weight: 500;
    }
}

/* A screen climbs into place as it enters the viewport, where the browser ties animations to scrolling */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .landing-step > .landing-window {
            animation: landing-climb linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
    }
}

@keyframes landing-climb {
    from {
        opacity: 0.3;
        transform: translateY(var(--space-7));
    }
}

/* Sections after the story, and bands */
.landing-section {
    padding-block: var(--space-8);
}

.landing-band {
    background: var(--surface-sunken);
}

/* The memory band carries data-bs-theme="dark": the dark tokens apply inside it, in both page themes */
.landing-band--dark {
    background: var(--surface-sunken);
    color: var(--ink);
}

.landing-cols {
    display: grid;
    gap: var(--space-5);

    @media (min-width: 768px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.landing-tile {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-2);
    padding: var(--space-5);

    & p {
        margin: 0;
    }
}

/* The two libraries side by side from 992px: the client's, the agency's; then the memories under both */
.landing-libraries {
    display: grid;
    gap: var(--space-7) var(--space-6);

    @media (min-width: 992px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.landing-library {
    display: grid;
    align-content: start;
    gap: var(--space-3);

    & > p {
        max-width: 62ch;
        margin: 0;
        text-wrap: pretty;
    }

    & > .landing-window {
        margin-top: var(--space-2);
    }
}

.landing-memories {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-8);

    & dl {
        margin: 0;
    }

    & dd {
        margin: 0;
        text-wrap: pretty;
    }
}

/* A product screen: an inert card, built with the classes of the app */
.landing-window {
    overflow: hidden;

    & .card-title {
        margin: 0;
    }

}

.landing-window__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.landing-window__body {
    display: grid;
    gap: var(--space-3);

    & p {
        margin: 0;
    }
}

.landing-window__foot {
    display: flex;
    justify-content: flex-end;
}

/* The brief and the files the AI prepared: two cards, one under the other */
.landing-pair {
    display: grid;
    gap: var(--space-3);
}

/* The brief as the app renders its Markdown: a heading, then the text */
.landing-brief {
    display: grid;
    gap: var(--space-1);
    font-size: 14px;
    line-height: 22px;

    & p {
        margin: 0;
    }
}

.landing-brief__heading {
    font: 600 15px/22px var(--font-display);
}

/* The client's request, as its field shows it once typed */
.landing-field {
    padding: var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    font-size: 14px;
    line-height: 22px;
}

/* Files in lines: the tile of the extension, the name, the size */
.landing-files {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-width: 0;
        font-size: 14px;
        line-height: 20px;
    }

    & li > :nth-child(2) {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* The page of a file: the files of the project on the sunken ground, the open file beside them from 576px */
.landing-bench {
    display: grid;

    @media (min-width: 576px) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

.landing-bench__nav {
    display: grid;
    align-content: start;
    gap: 2px;
    background: var(--surface-sunken);

    & > .card-title {
        margin-bottom: var(--space-2);
    }
}

.landing-bench__work {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-4);
}

.landing-bench__preview {
    border-radius: var(--radius-md);
}

/* The client's poster: a sheet on a sunken backdrop, a title, a date and a logo square */
.landing-poster {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    overflow: hidden;
}

.landing-poster__sheet {
    position: absolute;
    inset: 10% 26%;
    padding: 9% 8%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

/* The second version keeps the interface's typeface; the validated one takes the serif of the wine list, as the memory asks */
.landing-poster__title {
    margin: 0;
    font: 600 clamp(15px, 2vw, 24px) / 1.05 var(--font-display);
}

.landing-poster__title--serif {
    font: 400 clamp(15px, 2vw, 24px) / 1.05 Georgia, "Times New Roman", serif;
}

.landing-poster__date {
    margin: var(--space-1) 0 0;
    font: 400 11px/16px var(--font-mono);
}

.landing-poster__logo {
    position: absolute;
    right: 9%;
    bottom: 7%;
    width: 16%;
    aspect-ratio: 1;
    background: var(--brand);
}

/* The client's annotations: the poster beside the comment thread from 576px */
.landing-annotate {
    display: grid;
    gap: var(--space-4);

    @media (min-width: 576px) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.landing-comments {
    display: grid;
    gap: var(--space-2);
}

.landing-comment {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 13px;
    line-height: 20px;

    & p {
        margin: 0;
    }
}

.landing-comment__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

/* An answer under a comment: the AI's question, then the client's reply */
.landing-comment__reply {
    display: grid;
    gap: var(--space-1);
    padding-inline-start: var(--space-3);
    border-inline-start: 2px solid var(--line);
}

/* The AI's check of the next version: apart from the client's words */
.landing-comment--check {
    margin-top: var(--space-2);
    border-style: dashed;
}

.landing-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;

    & li {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
}

/* A memory of the library: its author, the sentence, where it comes from */
.landing-memory {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);

    & > div {
        display: grid;
        min-width: 0;
        font-size: 13px;
        line-height: 20px;
    }

    & strong {
        font-size: 14px;
        font-weight: 600;
    }

    & span {
        color: var(--ink-muted);
    }

    & > .cb-author {
        flex: none;
    }
}

.landing-trust {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 2px solid var(--ink);

    & p {
        margin: 0;
    }

    & dt {
        font-weight: 600;
    }
}

.landing-faq {
    max-width: 760px;

    & details {
        padding-block: var(--space-4);
        border-top: 1px solid var(--line);

        &:last-child {
            border-bottom: 1px solid var(--line);
        }
    }

    & summary {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        font: 600 17px/24px var(--font-display);
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }

        &::after {
            content: "+";
            color: var(--ink-muted);
            font-family: var(--font-mono);
        }
    }

    & details[open] summary::after {
        content: "\2212";
    }

    & p {
        margin: var(--space-3) 0 0;
    }
}

.landing-final {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-5);
    text-align: center;
}