/* Splash + binnenkomst — versie Youri (js/splash-youri.js). Alleen actief met html.is-splash. */

.splash { display: none; }
html.is-splash { overflow: hidden; }
html.is-splash .splash { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: #161616; transition: background-color .7s cubic-bezier(.6, 0, .2, 1); }
html.is-splash .splash.is-out { background-color: rgba(22, 22, 22, 0); pointer-events: none; }
.splash canvas { display: block; height: 40px; width: calc(40px * 953 / 269); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.splash.is-out canvas { opacity: 0; transform: scale(.97); }

/* tot de site opent: alles wacht */
html.is-splash .hdr__logo,
html.is-splash .hall__eyebrow,
html.is-splash .hall__title,
html.is-splash .hall__sub,
html.is-splash .hall__row,
html.is-splash .hdr__nav a,
html.is-splash .hdr__right > *,
html.is-splash .cue { opacity: 0; transform: translateY(14px); }
html.is-splash .hall__poster { opacity: 0; }

/* de site opent: na elkaar binnen */
html.is-splash.is-in .hall__poster { opacity: 1; transition: opacity 1.4s ease .2s; }
html.is-splash.is-in .hdr__logo,
html.is-splash.is-in .hall__eyebrow,
html.is-splash.is-in .hall__title,
html.is-splash.is-in .hall__sub,
html.is-splash.is-in .hall__row,
html.is-splash.is-in .hdr__nav a,
html.is-splash.is-in .hdr__right > *,
html.is-splash.is-in .cue { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
html.is-splash.is-in .hall__eyebrow { transition-delay: .25s; }
html.is-splash.is-in .hall__title { transition-delay: .35s; }
html.is-splash.is-in .hall__sub { transition-delay: .6s; }
html.is-splash.is-in .hdr__logo { transition-delay: .75s; }
html.is-splash.is-in .hdr__nav a:nth-child(1) { transition-delay: .8s; }
html.is-splash.is-in .hdr__nav a:nth-child(2) { transition-delay: .86s; }
html.is-splash.is-in .hdr__nav a:nth-child(3) { transition-delay: .92s; }
html.is-splash.is-in .hdr__nav a:nth-child(4) { transition-delay: .98s; }
html.is-splash.is-in .hdr__nav a:nth-child(5) { transition-delay: 1.04s; }
html.is-splash.is-in .hdr__right > * { transition-delay: 1.15s; }
html.is-splash.is-in .hdr__right > :nth-child(2) { transition-delay: 1.22s; }
html.is-splash.is-in .hdr__right > :nth-child(3) { transition-delay: 1.29s; }
html.is-splash.is-in .cue { transition-delay: 1.4s; }

@media (max-width: 720px) { .splash canvas { height: 34px; width: calc(34px * 953 / 269); } }
@media (prefers-reduced-motion: reduce) {
  html.is-splash.is-in .hall__title, html.is-splash.is-in .hall__sub, html.is-splash.is-in .hdr__nav a,
  html.is-splash.is-in .hdr__right > *, html.is-splash.is-in .cue { transition: opacity .3s; transition-delay: 0s; transform: none; }
}
html.is-splash .hall__proof { opacity: 0; transform: translateY(14px); }
html.is-splash.is-in .hall__proof { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2, .8, .2, 1) .5s, transform .9s cubic-bezier(.2, .8, .2, 1) .5s; }