/*
 * DeBarrage brand: fonts, colours and the logo intro. Layout and components
 * live in the Barrage base theme (user/themes/barrage/css/base.css), which
 * reads everything below through custom properties.
 */

@font-face {
    font-family: 'Arvo';
    src: url('../fonts/arvo-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arvo';
    src: url('../fonts/arvo-latin-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Arvo';
    src: url('../fonts/arvo-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-wght-italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-title: 'Arvo', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* The house style is a hairline Inter for running text; labels, facts
       and anything set over a photo use the sturdier ui weight. */
    --weight-body: 200;
    --weight-ui: 500;
    --weight-title: 700;

    --accent: #28afb0;        /* teal */
    --highlight: #f7ff8b;     /* yellow */
    --highlight-ink: #222222;
    --warn: #ee964b;          /* orange */
    --blue: #19647e;

    /* The footer keeps these in both colour schemes. */
    --bar-bg: #222222;
    --bar-ink: #f7f5f0;

    --radius: .5rem;

    /* Dark is the default: everything that is not explicitly light. */
    --canvas: #121212;
    --ink: #f3f1ea;
    --surface: #1c1c1c;
}

:root[data-theme="light"] {
    --canvas: #f7f5f0;
    --ink: #222222;
    --surface: #ffffff;
    /* Teal and yellow need more weight to read on the light canvas. */
    --accent: #19647e;
}

/* Yellow is a highlight on dark; on the light canvas dates use the blue. */
:root[data-theme="light"] .feature__date { color: var(--blue); }

/* ---------------------------------------------------------------------
   Home intro (templates/partials/intro.html.twig).

   A full first screen: the mark, one sentence, a short paragraph. The
   first time in a browser session it assembles itself: the bar is already
   in place, the waves slide out of it to the left, the word mark slides
   out of it to the right, then the words rise. The clip paths on the
   animated mark keep both halves hidden behind the bar until they have
   travelled past it. SVG transforms in px are viewBox units.
   --------------------------------------------------------------------- */

.intro {
    display: grid;
    align-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: clamp(3rem, 10vh, 6rem);
}

.intro__title { margin: 0; }
.intro__mark { display: block; width: min(100%, 52rem); height: auto; color: var(--ink); overflow: visible; }

.intro__lead {
    max-width: 22ch;
    margin: clamp(2rem, 6vh, 3.5rem) 0 0;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 4.2vw, 3rem);
    line-height: 1.15;
    text-wrap: balance;
}

.intro__text {
    max-width: 38rem;
    margin: 1.5rem 0 0;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-dim);
}
.intro__text p:last-child { margin-bottom: 0; }

.intro__cue { margin-top: clamp(2rem, 6vh, 3rem); }

html[data-intro-motion] .intro__mark .logo-mark__wave {
    animation: intro-wave-in .8s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(.25s + var(--wave-index, 0) * .09s);
}
html[data-intro-motion] .intro__mark .logo-mark__title { animation: intro-title-in .9s cubic-bezier(.22, 1, .36, 1) .3s both; }
html[data-intro-motion] .intro__lead { animation: intro-rise .6s ease-out 1.05s both; }
html[data-intro-motion] .intro__text { animation: intro-rise .6s ease-out 1.2s both; }
html[data-intro-motion] .intro__cue { animation: intro-rise .6s ease-out 1.35s both; }

@keyframes intro-wave-in {
    from { transform: translateX(314px); }
    to { transform: translateX(0); }
}

@keyframes intro-title-in {
    from { transform: translateX(-520px); }
    to { transform: translateX(0); }
}

@keyframes intro-rise {
    from { opacity: 0; transform: translateY(.75rem); }
    to { opacity: 1; transform: none; }
}