/* Soon.css: the one Coming soon page of hydrogenie.tech, over the animated network of Background.js and the colours of Background.css
   (both copied from Public/, with Theme.js). Dark by default; light only if this browser kept that choice from the full site.
   Same faces, colours and valve symbol as the site in Public/, so the change to the full site is not a change of look. */

@font-face {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-display: swap;
    src: url("Fonts/SpaceGrotesk-700.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 400;
    font-display: swap;
    src: url("Fonts/IbmPlexSans-400.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 500;
    font-display: swap;
    src: url("Fonts/IbmPlexSans-500.woff2") format("woff2");
}

:root {
    --Ink: #EEF4F5;
    --Soft: #B4C6CE;
    --Accent: #2EC4D6;
    --On-Accent: #0B1F33;
    --Warn: #F2A541;
    --Metal: #1B415E;
    --Metal-Edge: #4C7692;
    --Font-Head: "Space Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --Font-Text: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="light"] {
    --Ink: #0B1F33;
    --Soft: #3F5566;
    --Accent: #0E7C8C;
    --On-Accent: #FFFFFF;
    --Warn: #B35F00;
    --Metal: #DCE7E9;
    --Metal-Edge: #6F8894;
}

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    color: var(--Ink);
    font: 400 18px/1.6 var(--Font-Text);
    background: var(--Paper);
}

/* The network of Background.js fills the window behind the text and stays still when the page scrolls. */
.Background {
    position: fixed;
    inset: 0;
    z-index: 0;
}

body > main,
body > footer {
    position: relative;
    z-index: 1;
    background: none;
}

main {
    align-self: center;
    inline-size: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-block: 56px;
    padding-inline: 24px;
}

p {
    margin: 0;
}

.Mark {
    font: 700 18px var(--Font-Head);
    color: var(--Accent);
}

h1 {
    font: 700 clamp(32px, 5.2vw, 56px)/1.12 var(--Font-Head);
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin-block: 28px 0;
}

.Drawing {
    display: block;
    inline-size: 100%;
    max-width: 440px;
    block-size: auto;
    margin-block: 44px;
}

.D-Process {
    fill: none;
    stroke: var(--Metal-Edge);
    stroke-width: 7;
}

.D-Flow {
    fill: none;
    stroke: var(--Accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 12 14;
    animation: Flow 1.8s linear infinite;
}

.D-Valve {
    fill: var(--Metal);
    stroke: var(--Ink);
    stroke-width: 2;
    stroke-linejoin: round;
}

.D-Line {
    fill: none;
    stroke: var(--Metal-Edge);
    stroke-width: 1.5;
}

@keyframes Flow {
    to { stroke-dashoffset: -26; }
}

.Soon {
    font: 700 clamp(22px, 2.6vw, 28px)/1.3 var(--Font-Head);
    color: var(--Warn);
}

.Lead {
    color: var(--Soft);
    max-width: 34em;
    margin-block: 12px 32px;
}

a:focus-visible {
    outline: 2px solid var(--Accent);
    outline-offset: 2px;
}

.Button {
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    color: var(--On-Accent);
    background: var(--Accent);
    border-radius: 6px;
    padding-block: 11px;
    padding-inline: 20px;
}

.Button:hover {
    filter: brightness(1.08);
}

footer {
    font-size: 13px;
    color: var(--Soft);
    padding-block: 16px;
    padding-inline: 24px;
    max-width: 880px;
    inline-size: 100%;
    margin-inline: auto;
}

@media screen and (max-width: 640px) {
    main {
        padding-block: 40px;
        padding-inline: 16px;
    }

    footer {
        padding-inline: 16px;
    }

    .Drawing {
        margin-block: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .D-Flow {
        animation: none;
    }
}