/*
    The colors are not chosen here: they are taken.

    Every value below is one of the color stops of Meridian, the app's first
    scene, copied from its source. Same rule as the icon and the store cards:
    the site's color and the product's color are the same number.
*/
:root {
    --night: #050a19;
    --deep: #0a1230;
    --slate: #17214c;
    --dusk: #251f4c;
    --rose: #8e4668;
    --amber: #f0b389;
    --sky-blue: #79b4e4;
    --cream: #faeac4;
    --sand: #e9d2a8;

    --ground: #070b16;
    --text: #ece8e0;
    --muted: #8f9db4;
    --on-sky: rgba(255, 255, 255, 0.76);
    --rule: rgba(155, 175, 194, 0.16);

    --measure: 34rem;
    --page: 46rem;
    --wide: 58rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: Manrope, "Segoe UI", system-ui, sans-serif;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

/* ------------------------------------------------------------------ sky */

.hero {
    position: relative;
    isolation: isolate;
    padding-bottom: 4rem;
}

/*
    The sky at the current hour.

    day.js paints the real gradient from day.json; this is the fallback for
    when scripts do not run - a still day rather than a black rectangle.
*/
.sky {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(
        to bottom,
        #3477c1 0%,
        var(--sky-blue) 30%,
        var(--cream) 62%,
        var(--sand) 72%,
        #8a93ad 100%
    );
}

/*
    The veil, the same idea the app calls Ink.

    Without it, at noon a white heading would land on the cream horizon band
    and disappear. It is not uniform: heavier at the top where the text is,
    nearly opaque at the bottom where the sky dissolves into the page.
*/
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgba(7, 11, 22, 0.52) 0%,
        rgba(7, 11, 22, 0.38) 34%,
        rgba(7, 11, 22, 0.62) 64%,
        rgba(7, 11, 22, 0.94) 88%,
        rgb(7, 11, 22) 100%
    );
}

/* --------------------------------------------------------------- header */

.masthead {
    padding: 5.5rem 0 0;
}

.wordmark {
    font-size: clamp(3rem, 11vw, 5.25rem);
    font-weight: 200;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}

.wordmark .glow {
    color: var(--sand);
}

.tagline {
    font-size: clamp(1.25rem, 3.4vw, 1.75rem);
    font-weight: 200;
    line-height: 1.3;
    margin: 1.75rem 0 0;
}

.standfirst {
    color: var(--on-sky);
    max-width: var(--measure);
    margin: 1.25rem 0 0;
}

/* ------------------------------------------------------------ the strip */

.day {
    margin: 3.5rem 0 0;
}

/*
    Twenty-four columns, one per hour, each holding that hour's vertical
    gradient: the same thing the app shows under its title.

    The background declared here is the no-JavaScript fallback, covered by the
    columns as soon as they arrive.
*/
.ribbon {
    position: relative;
    display: flex;
    height: 5.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: linear-gradient(
        to right,
        #17214c 0%,
        #5b4276 21%,
        #f0b389 33%,
        #faeac4 54%,
        #f0b47e 75%,
        #8e4668 88%,
        #17214c 100%
    );
}

.ribbon.live {
    cursor: ew-resize;
    touch-action: none;
}

.ribbon .col {
    flex: 1 1 0;
}

.ribbon .mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
    transition: left 0.18s ease-out;
}

.ribbon:focus-visible {
    outline: 2px solid var(--sand);
    outline-offset: 3px;
}

.day-labels {
    display: flex;
    justify-content: space-between;
    margin: 0.625rem 0 0;
    color: var(--on-sky);
    font-size: 0.875rem;
}

.day-hint {
    margin: 1.5rem 0 0;
    color: var(--on-sky);
    font-size: 0.9375rem;
}

/*
    L'invito a vedere l'app.

    Un bordo e non una sottolineatura: dentro un paragrafo il link si legge
    come una nota, qui deve leggersi come una porta. Tondo e sottile perche'
    sta sopra il cielo, e un rettangolo pieno li' sarebbe un francobollo
    appiccicato sul gradiente.
*/
.guarda {
    margin: 2.25rem 0 0;
}

.guarda a {
    display: inline-block;
    padding: 0.7rem 1.2rem;
    border: 1px solid rgba(240, 179, 137, 0.35);
    border-radius: 999px;
    color: var(--amber);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.guarda a:hover {
    border-color: var(--amber);
    background: rgba(240, 179, 137, 0.08);
}

/* -------------------------------------------------------------- sections */

section {
    padding: 4.5rem 0 0;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.125rem);
    font-weight: 200;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 1.25rem;
}

p {
    max-width: var(--measure);
}

/*
    Card and text side by side, and the card changes side.

    The cards step outside the text column because inside it their headline
    would be unreadable, and a card you cannot read may as well be a
    screenshot. Alternating the side gives the page a rhythm.

    They are the very same images that go on the Play Store, drawn by the app
    from its own components.
*/
.feature {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--wide), calc(100vw - 3.5rem));
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    padding-top: 5.5rem;
}

/*
    Flipping is not only reordering.

    The columns are narrow-wide; sending the card last with `order` put it in
    the wide one and it came out twice the size of the others. The measures
    have to swap with it.
*/
.feature.flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
}

.feature.flip .card {
    order: 2;
}

.card {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.875rem;
    border: 1px solid var(--rule);
}

.plain {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: var(--measure);
}

.plain li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
}

.plain li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.4em;
    width: 0.5rem;
    height: 1px;
    background: var(--sand);
}

/* ------------------------------------------------------------- timeline */

/*
    The roadmap is drawn as a day, because the product is.

    The first version was a hairline rule with round dots, solid above and
    dashed below. It said the right thing and it said it in a language the app
    does not speak: nowhere in Driftglow is there a dashed border.

    So the rule became a gradient, and the dots became hours of it. Each
    shipped item takes its color from where it sits - deep blue, sky, cream,
    sand, rose - which is a day from before dawn to after sunset, and is
    exactly how a scene is written: a handful of key colors at a handful of key
    hours. Five things that exist, five hours of light.

    Then the light runs out. What is not built yet gets no color and no glow,
    only a faint ring on a rule that has faded to almost nothing - the part of
    the day that has not happened. Nobody has to be told which half is which.
*/
.eyebrow {
    margin: 3.5rem 0 1.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: var(--measure);
}

/*
    One rule for the whole list, not a segment per item.

    A gradient only reads as a gradient if it runs across the whole thing;
    cut into five pieces, each piece is a flat color and the day is gone.
*/
.timeline::before {
    content: "";
    position: absolute;
    left: 0.28125rem;
    top: 1rem;
    bottom: 1.75rem;
    width: 1px;
    background: linear-gradient(
        to bottom,
        var(--slate) 0%,
        var(--sky-blue) 22%,
        var(--cream) 46%,
        var(--sand) 66%,
        var(--amber) 82%,
        var(--rose) 96%,
        transparent 100%
    );
}

.timeline li {
    position: relative;
    padding: 0 0 2.25rem 2.25rem;
}

/*
    The dot is a light, not a bullet.

    A flat disc on a dark ground reads as punctuation. The halo is what makes
    it read as something lit, and it is the same trick the scenes use: a small
    core and a wide, very faint surround.
*/
.timeline li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--sand);
    box-shadow: 0 0 0.75rem 0.0625rem currentColor;
    color: var(--sand);
}

.timeline li:nth-child(1)::after { background: var(--sky-blue); color: rgba(121, 180, 228, 0.55); }
.timeline li:nth-child(2)::after { background: var(--cream);    color: rgba(250, 234, 196, 0.5); }
.timeline li:nth-child(3)::after { background: var(--sand);     color: rgba(233, 210, 168, 0.5); }
.timeline li:nth-child(4)::after { background: var(--amber);    color: rgba(240, 179, 137, 0.55); }
.timeline li:nth-child(5)::after { background: var(--rose);     color: rgba(142, 70, 104, 0.75); }

/* ------------------------------------------- the part of the day to come */

.timeline.ahead::before {
    background: linear-gradient(
        to bottom,
        rgba(155, 175, 194, 0.22) 0%,
        rgba(155, 175, 194, 0.10) 55%,
        transparent 100%
    );
}

.timeline.ahead li::after {
    background: transparent;
    border: 1px solid var(--muted);
    box-shadow: none;
    /* Il cerchio ha un bordo, quindi la scatola cresce: si toglie da dove sta. */
    left: -0.03125rem;
    top: 0.46875rem;
}

.timeline h3 {
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 0 0 0.375rem;
}

.timeline p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- invite */

/*
    L'invito al test chiuso. TEMPORANEO: si toglie insieme alla sezione.

    E' l'unico riquadro di tutta la pagina, e lo e' per una ragione e non per
    decorazione: tutto il resto qui descrive, questo chiede. Un bordo dice
    "questa e' un'altra cosa" senza bisogno di scriverlo.

    Il colore d'accento e' l'ambra, la stessa del quarto punto della linea del
    tempo - il pomeriggio. Non un rosso o un verde da avviso: la pagina non ha
    nessun altro colore che urla, e uno solo per un invito temporaneo sarebbe
    la cosa piu' vistosa del sito per la meno duratura.
*/
.invite {
    max-width: var(--measure);
    margin-top: 2rem;
    padding: 2rem 2rem 1.75rem;
    border: 1px solid rgba(240, 179, 137, 0.28);
    border-radius: 0.75rem;
    background: rgba(240, 179, 137, 0.045);
}

.invite h2 {
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    margin-bottom: 1rem;
}

.invite a {
    color: var(--amber);
}

/*
    Qui la numerazione dice qualcosa: e' una sequenza vera, e il secondo passo
    e' quello che tutti saltano - iscriversi al gruppo non fa niente finche'
    non si apre anche il collegamento di adesione. Numerarli e' l'unico modo di
    dire "in quest'ordine, e nessuno e' facoltativo".
*/
.steps {
    counter-reset: step;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.25rem 2.25rem;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid rgba(240, 179, 137, 0.4);
    color: var(--amber);
    font-size: 0.8125rem;
    line-height: 1.45rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.invite .fine {
    margin: 0.5rem 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- footer */

footer {
    margin: 6rem 0 0;
    padding: 2rem 0 4rem;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.9375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

a {
    color: var(--sand);
    text-decoration-color: rgba(233, 210, 168, 0.4);
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-color: var(--sand);
}

a:focus-visible {
    outline: 2px solid var(--sand);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --------------------------------------------------------- privacy page */

.doc {
    max-width: var(--measure);
    padding-top: 4rem;
}

.doc h1 {
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 200;
    letter-spacing: -0.015em;
    margin: 0;
}

.doc .updated {
    color: var(--muted);
    font-size: 0.9375rem;
    margin: 0.5rem 0 0;
}

.doc h2 {
    margin-top: 3rem;
    font-size: 1.375rem;
}

.doc strong {
    font-weight: 500;
    color: var(--text);
}

.doc code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
    color: var(--sky-blue);
}

.short {
    font-size: 1.375rem;
    font-weight: 200;
    line-height: 1.45;
    border-left: 2px solid var(--sand);
    padding-left: 1.25rem;
    margin: 1.5rem 0 0;
}

.back {
    display: inline-block;
    margin-top: 3rem;
}

@media (max-width: 46rem) {
    /* .flip va nominata: da sola .feature perde contro .feature.flip, e le
       sezioni girate restavano su due colonne anche sul telefono. */
    .feature,
    .feature.flip {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        max-width: 26rem;
    }

    .feature.flip .card {
        order: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ribbon .mark {
        transition: none;
    }
}