/*
 * Slaughterfest brand: one typeface, black, white and pink, and the horse
 * intro. Layout and components live in the Barrage base theme
 * (user/themes/barrage/css/base.css), which reads everything below through
 * custom properties.
 *
 * ITC American Typewriter comes from the Slaughterfest Adobe Fonts kit,
 * linked in templates/partials/brand-head.html.twig (the face may not be
 * self-hosted); Apple devices have it built in as "American Typewriter",
 * which is the first fallback.
 */

:root {
    --font-title: 'itc-american-typewriter', 'American Typewriter', 'Courier New', serif;
    --font-body: 'itc-american-typewriter', 'American Typewriter', 'Courier New', serif;

    /* The kit carries light, medium and bold. */
    --weight-body: 300;
    --weight-ui: 500;
    --weight-title: 700;

    --accent: #ed1b58;        /* pink */
    --highlight: #ed1b58;
    --highlight-ink: #ffffff;

    --bar-bg: #18181b;
    --bar-ink: #ffffff;

    --radius: 0;

    /* Black, always: this theme has no light scheme. */
    --canvas: #000000;
    --ink: #ffffff;
    --surface: #18181b;
}

/* The word mark's box runs below its baseline; keep it optically in line. */
.masthead__mark { height: 2.5rem; }
.footer-about__mark { height: 2.75rem; margin-bottom: .75rem; }

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

   A full first screen, centred: the word mark, the horse, the coming
   edition under it, then who we are, over the festival's cover picture
   faded into the black. The first time in a browser session it assembles
   itself: the horse rides up out of an invisible line and the date drops
   out from under it, then the words rise. Both halves stay hidden until
   they have passed that line because their windows (.intro__rise,
   .intro__drop) clip them.
   --------------------------------------------------------------------- */

:root {
    /* How much of the cover picture shows through the black: .2 is 80% transparent. */
    --intro-cover-opacity: .2;
}

.intro {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: clamp(2.5rem, 8vh, 5rem);
    overflow: hidden;
}

.intro__cover {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--intro-cover-opacity);
    /* Fades out at the bottom, into the line-up below. */
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
    pointer-events: none;
}

.intro__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.intro__title { margin: 0 0 clamp(.5rem, 2vh, 1.25rem); width: 100%; }
.intro__mark { display: block; width: min(72%, 24rem); height: auto; margin-inline: auto; color: var(--ink); }

.intro__stage { width: min(100%, 34rem); }
.intro__rise, .intro__drop { overflow: hidden; }

/* horse.svg sits on a square canvas with a lot of air around the animal.
   The frame crops to the artwork (x 51, y 80.2, 322.5 x 265.4 of the 425.2
   viewBox), so the hooves stand right on the line. */
.intro__horse {
    position: relative;
    width: min(88%, 26rem);
    aspect-ratio: 322.5 / 265.4;
    margin-inline: auto;
    overflow: hidden;
}
.intro__horse img {
    position: absolute;
    left: -15.81%;      /* 51 / 322.5 */
    top: -30.22%;       /* 80.2 / 265.4 */
    width: 131.85%;     /* 425.2 / 322.5 */
    height: 160.21%;    /* 425.2 / 265.4 */
    max-width: none;
}

.intro__edition { margin: 0; padding-top: clamp(.75rem, 2.5vh, 1.25rem); }
.intro__edition a { display: inline-block; text-decoration: none; }
.intro__date {
    display: block;
    font-weight: var(--weight-title);
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    line-height: 1.1;
}
.intro__edition a:hover .intro__date { color: var(--accent); }
.intro__place {
    display: block;
    margin-top: .4rem;
    font-size: .8rem;
    font-weight: var(--weight-ui);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
}

.intro__lead {
    max-width: 24ch;
    margin: clamp(1.5rem, 5vh, 2.75rem) auto 0;
    font-weight: var(--weight-title);
    font-size: clamp(1.5rem, 3.6vw, 2.5rem);
    line-height: 1.15;
    text-wrap: balance;
}

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

.intro__cue { margin-top: clamp(1.5rem, 5vh, 2.5rem); }

html[data-intro-motion] .intro__title { animation: intro-rise .7s cubic-bezier(.22, 1, .36, 1) .1s both; }
html[data-intro-motion] .intro__cover { animation: intro-fade .9s ease-out both; }
html[data-intro-motion] .intro__horse { animation: intro-horse-in .9s cubic-bezier(.22, 1, .36, 1) .35s both; }
html[data-intro-motion] .intro__edition { animation: intro-drop-in .8s cubic-bezier(.22, 1, .36, 1) .6s both; }
html[data-intro-motion] .intro__lead { animation: intro-rise .6s ease-out 1.15s both; }
html[data-intro-motion] .intro__text { animation: intro-rise .6s ease-out 1.3s both; }
html[data-intro-motion] .intro__cue { animation: intro-rise .6s ease-out 1.45s both; }

@keyframes intro-fade {
    from { opacity: 0; }
    to { opacity: var(--intro-cover-opacity); }
}

@keyframes intro-horse-in {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes intro-drop-in {
    from { transform: translateY(-100%); }
    to { transform: none; }
}

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

/* ---------------------------------------------------------------------
   Home programme. Slaughterfest has one festival, and the intro already
   names it (date and venue, linking to its page), so under the intro the
   programme is only the line-up: no "Binnenkort" head, no feature head,
   no rules.
   --------------------------------------------------------------------- */

.is-home #programma .section__head,
.is-home #programma .feature__head { display: none; }
.is-home #programma .feature { padding-top: 0; border-bottom: 0; }