/* Sweep away the website navigation and content while preserving the grid canvas. */
body { overflow-x: clip; }
#main { transition: transform 850ms cubic-bezier(.22,.75,.16,1), opacity 600ms ease; }
#main::before { transition: opacity 750ms ease; }
.quiz-shell { position: fixed; z-index: 15; inset: 0; background: #0e0e10; opacity: 0; transform: translateY(18px); transition: opacity 700ms ease 250ms, transform 800ms cubic-bezier(.22,.75,.16,1) 250ms; }
.quiz-shell[hidden] { display: none; }
.quiz-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 350ms ease; color-scheme: dark; }
.quiz-shell.is-loaded iframe { opacity: 1; }
.quiz-shell-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #aaa; font-size: 16px; }
.quiz-shell.is-loaded .quiz-shell-loading { display: none; }
body::after { content: ''; position: fixed; inset: 0; background: #0e0e10; z-index: 14; pointer-events: none; opacity: 0; transition: opacity 900ms ease; }
body.quiz-open { overflow: hidden; }
body.quiz-open::after { opacity: 1; }
body.quiz-open #main { transform: translateX(-35vw); opacity: 0; pointer-events: none; }
body.quiz-open #main::before { opacity: 0; }
body.quiz-open .quiz-shell { opacity: 1; transform: none; }
body .topbar { transition: transform 850ms cubic-bezier(.22,.75,.16,1), opacity 450ms ease; }
body.quiz-open .topbar { opacity: 0; transform: translateX(-35vw); pointer-events: none; }
body.quiz-open .skip { display: none; }
body.quiz-open .marker-trail { display: none; }
.topbar .test-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
@media(prefers-reduced-motion: reduce) {
  #main, #main::before, body::after, .topbar, .quiz-shell, .quiz-shell iframe { transition: none; transform: none; }
  body.quiz-open #main { transform: none; }
}

/* Grid-background experiment: the canvas stays while the content sweeps away. */
body { background: #242424 url('/assets/charcoal-grid-background.png') center top / 100% auto repeat-y fixed; }
#main::before { display: none; }
body::after { background: transparent; }
.quiz-shell { background: transparent; }