/* Detour Live's title sequence (intro.js): the departure board on its own
   dark, filling the window. On <html>: mf-intro-on while it plays (the page
   waits underneath), mf-intro-dawn as the page comes up; on #mf-intro:
   is-page / is-sting / is-stage, is-fast on a skip, is-dawn / is-out at the
   end, is-still under reduced motion. Same hooks as static/css/intro.css. */
html.mf-intro-on { background: #0b0c0e; transition: background .55s ease; }
html.mf-intro-dawn { background: var(--dl-paper, #ecedef); }
/* The start page and the solo menu are the night board (tokens.css): the
   intro dawns into the dark, not the concourse's grey. */
html.mf-intro-dawn:has(> body > .st-choices),
html.mf-intro-dawn:has(> body.solo-menu) { background: #0b0c0e; }
html.mf-intro-on body { background: transparent; }
html.mf-intro-on body > :not(#mf-intro) { opacity: 0; transition: opacity .7s ease .2s; }
html.mf-intro-dawn body > :not(#mf-intro) { opacity: 1; }

#mf-intro {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: #0b0c0e;
    overflow: hidden;
    cursor: default;
    transition: opacity .45s ease, background .5s ease;
}
#mf-intro.is-sting { transition-duration: .7s; }
#mf-intro.is-out { opacity: 0; }
#mf-intro.is-page.is-dawn { background: transparent; }

.dli-board, .dli-board > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dli-board > svg { display: block; }
#mf-intro.is-page.is-dawn .dli-board { opacity: 0; transform: scale(1.04); transition: opacity .4s ease, transform .5s ease; }
/* The board's letters in the app's own Archivo (the brand page imports it). */
#mf-intro .sf-intro .ch { font-family: 'Archivo', 'Arial Narrow', sans-serif; }
/* A skip: every animation jumps to its end (one iteration, fill both). */
#mf-intro.is-fast .sf-intro .a { animation-delay: -6.49s !important; }
/* On the big screen the scenario's title takes the tagline's place. */
#mf-intro.is-sting .sf-intro .tg2 { display: none; }
.dli-tag {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 74%;
    text-align: center;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 3.2vw, 44px);
    letter-spacing: .04em;
    color: #9a9da5;
    opacity: 0;
}
#mf-intro.is-sting .dli-tag { animation: dli-tag-in .5s ease 5.3s forwards; }
#mf-intro.is-sting.is-fast .dli-tag { animation: none; opacity: 1; }
.dli-tag:empty { display: none; }
@keyframes dli-tag-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.dli-skip {
    position: absolute;
    right: 22px;
    bottom: 18px;
    padding: 8px 14px;
    border: 1px solid rgba(242, 240, 234, .22);
    border-radius: 6px;
    background: transparent;
    color: #9a9da5;
    font: 700 12px/1 'Archivo', system-ui, sans-serif;
    letter-spacing: .16em;
    cursor: pointer;
    opacity: 0;
    animation: dli-tag-in .4s ease 1.2s forwards;
}
.dli-skip:hover, .dli-skip:focus-visible { color: #f2f0ea; border-color: #ffc21a; outline: none; }
#mf-intro.is-stage .dli-skip, #mf-intro.is-dawn .dli-skip { display: none; }

/* Reduced motion: the board wordmark, still, then the page (the mark and the
   name where a page carries no wordmark). The flaps lift off the dark. */
.dli-still {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    animation: dli-fade .5s ease both;
}
.dli-still img { width: min(22vw, 200px); height: auto; }
#mf-intro .dli-still .ed-wordmark { display: block; width: min(40vw, 760px); height: auto; margin: 0;
    --k-tile: #2b2c32; --k-tile-ink: #f5f3ec; --k-spark: #ffc21a; --k-bg: #0b0c0e; }
.dli-word { font: 800 clamp(28px, 5vw, 64px)/1 'Archivo', system-ui, sans-serif; letter-spacing: .14em; color: #f2f0ea; }
@keyframes dli-fade { from { opacity: 0; } to { opacity: 1; } }