/*
 * The foundation every public page needs regardless of whether it has the site chrome: the design
 * tokens, the element reset and the page-transition setup.
 *
 * Split out of public/layout.css so a page without a topbar and footer (templates/public/server.html,
 * which extends base.html directly) can still get the palette and the dark body. public/layout.css
 * loads on top of this and owns the shell alone.
 *
 * Tokens mirror portal/layout.css's palette so the public site and the portal read as one product,
 * without the two stylesheets depending on each other.
 */
:root {
    --void: #0A0A0A;
    --panel: #101010;
    --raise: #181818;
    --raise-2: #202020;
    --edge: #262625;
    --edge-2: #373735;
    --text: #ECEBE8;
    --text-dim: #94938E;
    --dim: #63625E;
    --bar-bg: #161616;
    --bar-border: rgb(54 54 54);
    --accent: rgb(210 28 22 / 0.96);
    --accent-solid: #D21C16;
    --accent-soft: rgba(210, 28, 22, 0.12);
    --good: #6E9E5E;
    --good-soft: rgba(110, 158, 94, 0.12);
    --flag: #E5484D;
    --r: 10px;
    --sans: "Inter Tight", system-ui, sans-serif;
    --display: "Liberation Sans", Arial, Helvetica, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;

    --font-size-large: 75px;
    --font-size-extra-large: 83px;
    --font-size-medium: 25px;
    --font-size-small: 20px;

    /* Distance from the topbar down to the opening title of a page -- see .page-title below. */
    --hero-top: 15vh;
}

/* 1. Cross-Document fallback for Chrome/Edge */
@view-transition {
    navigation: auto;
}

* {
    box-sizing: border-box;
}

/*
 * 2. Customize the transition animation duration & style.
 *
 * This targets the default root group rather than naming `main` its own view-transition-name.
 * A named group on `main` makes the browser interpolate its box (size + position) from the old
 * page's rect to the new page's rect, and public pages vary hugely in content height (a boarding
 * page vs. a long pricing page) -- so that box-morph could dwarf the intended fade, especially
 * on a cold load where a font-display: swap reflow (see assets/style/fonts.css) lands mid-transition
 * and reads as the page's text "flying" into place. Root crossfade has no box to morph.
 *
 * The fade itself is a plain opacity crossfade with no transform, matching the .fadeout/.fadein
 * transition intave.ac's live site uses for its own page navigation (150ms linear opacity, no
 * slide) -- that is what keeps it from ever looking like content is flying in.
 */
::view-transition-old(root) {
    animation: 0.15s linear both fade-out;
}

::view-transition-new(root) {
    animation: 0.15s linear both fade-in;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

html {
    height: 100%;
}

/* At least a screenful, so the footer of a short page sits at the bottom, but no fixed height: a
   body held to the viewport lets a longer page overflow out of it, and the sticky topbar, which can
   only stick inside its parent, was carried off the top once the reader scrolled past that box. */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    background: var(--void);
    color: var(--text);
}

a {
    color: inherit;
}

/*
 * The one big title that opens a public page: the home slogan, "You deploy once, we do the updates",
 * "Services", "AI Detection", "Affordable", ... Every one of them carries .page-title so the pages
 * share a single size, face and rhythm; only the alignment is left to the page.
 *
 * The distance to the topbar is not set here, because it belongs to the section the title opens:
 * every page gives that section a --hero-top top margin instead, so the titles all start on the
 * same line no matter what wraps them.
 */
.page-title {
    font-family: var(--display);
    font-size: var(--font-size-large);
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.slogan-title {
    font-family: var(--display);
    font-size: var(--font-size-extra-large);
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.slogan_highlight {
    /*
    background: linear-gradient(45deg, #67aa48, #00C3FF);
     */
    background: linear-gradient(45deg, #67aa48, #00C3FF);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
}

@media (max-width: 900px) {
    .page-title {
        font-size: 44px;
    }
}