/* Draw the geometry quickly, then reveal the question without a loading pause. */
/* Site navigation begins on revealed results, after the assessment entry flow. */
body.assessment-entry .liquid-site-header { display: none; }
.quiz-mobile-progress { display:none; }
.choice-guidance-mobile { display:none; }
body.quiz-active .liquid-site-header,
body.quiz-active .skip-link,
body.quiz-active footer.site-footer,
body.quiz-active .site-footer-reveal-trigger { display: none; }
body.quiz-active .quiz-section { padding-top: clamp(28px, 5vw, 64px); }
.intro-passage #intro-title:focus { outline: none; }
.experience.is-quiz-mode .quiz-section {
  transition: opacity 200ms ease, transform 300ms ease, visibility 0s;
}
.quiz-section .quiz-entry-reveal,
.quiz-section.is-introducing .quiz-entry-reveal,
.quiz-section.is-ready .quiz-entry-reveal {
  transition: opacity 200ms ease, visibility 0s;
}
.quiz-section .quiz-entry-reveal::before { transition: opacity 200ms ease; }
.quiz-section.is-introducing .quiz-entry-fan {
  animation: quizFanSweep 700ms cubic-bezier(.16,.72,.2,1) both;
}
.quiz-section .quiz-shell {
  transition: opacity 260ms ease, transform 300ms cubic-bezier(.2,.78,.2,1);
}
.quiz-section:not(.is-ready) .quiz-shell { opacity: 0; }
.experience.is-quiz-mode .intro-copy { transition-duration: 150ms; }
.quiz-section .quiz-card {
  transition: opacity 150ms ease, transform 150ms cubic-bezier(.2,.8,.2,1);
}
.quiz-section .quiz-card.is-entering { animation-duration: 240ms; }
.quiz-section .quiz-entry-reveal {
  bottom: auto;
  height: max(100%, var(--quiz-art-height, 100%));
}
html[data-quiz-art="construction"] .quiz-section .quiz-construction {
  mask-image: none;
  -webkit-mask-image: none;
}

.quiz-section .question-content h2 {
  font-size: clamp(34px, calc(4.5vw - 2px), 62px);
}
.quiz-section .question-content h2.is-long-question {
  font-size: clamp(32px, calc(4.5vw - 4px), 60px);
}
.quiz-section .question-content h2.has-context { margin-bottom: 16px; }
.quiz-section .question-context {
  margin: 0 0 36px;
  color: var(--body-copy);
  font: 300 18px/1.55 var(--body-font);
  max-width: 48em;
}
.quiz-section .completion-status { color: var(--body-copy); margin: 24px 0 16px; font: 300 18px/1.55 var(--body-font); }
.quiz-section .completion-link { display: inline-flex; text-decoration: none; }
.quiz-section .completion-link[hidden] { display: none; }
@media (max-width: 700px) {
  .quiz-section .question-content h2 {
    font-size: clamp(32px, calc(10vw - 2px), 46px);
  }
  .quiz-section .question-content h2.is-long-question {
    font-size: clamp(30px, calc(10vw - 4px), 44px);
  }
  .quiz-section .question-context { font-size: 17px; margin-bottom: 28px; }
}

/* Keep the phone's visual stage covered as browser toolbars change height. */
@media (max-width:760px) {
  body.assessment-entry .choice-guidance-desktop { display:none; }
  body.assessment-entry .question-content .choice-guidance-mobile { display:block;width:100%;max-width:none;margin:24px 0 0;text-align:left; }
  body.assessment-entry .choice-guidance-mobile summary { display:flex;width:100%;min-height:56px;padding:14px 16px;gap:8px;font:400 16px/1.4 Satoshi,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--paper); }
  body.assessment-entry .choice-guidance-mobile summary::after { margin-left:auto;font-size:22px; }
  body.assessment-entry .choice-guidance-mobile p { font:400 20px/1.55 Satoshi,Arial,sans-serif;color:var(--paper); }
  body.assessment-entry { --mobile-progress-height:calc(72px + env(safe-area-inset-top,0px)); }
  body.quiz-active .quiz-mobile-progress {
    display:block;position:fixed;inset:0 0 auto;z-index:20;
    height:var(--mobile-progress-height);
    padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;
    background:linear-gradient(135deg,#3d2a23ed,#111111f5);
    border-bottom:1px solid #dba98b30;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .quiz-mobile-progress .quiz-meta { line-height:1.25; }
  .quiz-mobile-progress .progress-track { height:2px;margin:14px 0 0; }
  .quiz-mobile-progress .progress-track span { height:2px;width:5%; }
  .quiz-mobile-progress .progress-track span::after { top:-2px;width:6px;height:6px; }
  body.quiz-active .quiz-section {
    padding-top:calc(var(--mobile-progress-height) + 18px);
    scroll-padding-top:calc(var(--mobile-progress-height) + 18px);
  }
  body.assessment-entry .quiz-card>.quiz-meta,
  body.assessment-entry .quiz-card>.progress-track { display:none; }
  html.assessment-page,body.assessment-entry { overscroll-behavior-y:none; }
  html.assessment-quiz-active,body.quiz-active { overflow:hidden; }
  body.assessment-entry .quiz-section,
  body.assessment-entry .experience.is-quiz-mode .quiz-section {
    position:fixed;inset:0;height:100dvh;
    transform:none;
    overscroll-behavior-y:none;
    transition:opacity 450ms ease,visibility 0s;
  }
  body.assessment-entry .quiz-section .quiz-entry-reveal {
    position:fixed;inset:0;height:100dvh;
    transition:opacity 450ms ease,visibility 0s;
  }
  body.assessment-entry .quiz-section .quiz-construction { bottom:auto;height:100svh; }
  /* Reuse the header's broad liquid gradient, recoloured in the title's copper. */
  body.assessment-entry .quiz-section .quiz-entry-reveal { display:none; }
  body.assessment-entry .quiz-section .quiz-liquid-sheen {
    position:fixed;inset:0;z-index:0;opacity:.86;
    background:radial-gradient(ellipse at 28% 35%,#71432f,transparent 72%),
      radial-gradient(ellipse at 85% 78%,#c778554d,transparent 70%),#111;
  }
  body.assessment-entry .quiz-section::after {
    position:fixed;z-index:1;
    background:linear-gradient(180deg,#11111118,#11111140);
  }
  body.assessment-entry .quiz-section .quiz-card {
    background:linear-gradient(135deg,#f0e1ce0b,#1111117a 50%,#11111152);
  }
  body.assessment-entry .quiz-section .answer-text,
  body.assessment-entry .quiz-section .question-context {
    font-family:Satoshi,Arial,sans-serif;font-weight:400;font-size:20px;
    line-height:1.55;color:var(--paper);
  }
  body.assessment-entry .quiz-section .question-content h2 {
    font-size:clamp(28px,8.2vw,34px);line-height:1.18;
  }
  body.assessment-entry .quiz-section .question-content h2.is-long-question {
    font-size:clamp(27px,7.7vw,32px);
  }
  .quiz-section.is-ready .quiz-entry-reveal::before { opacity:1; }
  body.assessment-entry .quiz-section .quiz-shell {
    transition:opacity 460ms ease,transform 460ms cubic-bezier(.2,.75,.2,1);
  }
  body.assessment-entry .quiz-section.is-introducing .quiz-shell { transform:translateY(8px); }
  body.assessment-entry .quiz-section .quiz-card {
    transition:opacity 220ms ease,transform 220ms ease;
  }
  body.assessment-entry .quiz-card.is-leaving { transform:translateY(-4px); }
  body.assessment-entry .quiz-section .quiz-card.is-entering {
    animation:mobile-question-enter 420ms ease both;
  }
  @keyframes mobile-question-enter {
    from { opacity:0;transform:translateY(6px); }
    to { opacity:1;transform:none; }
  }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  body.assessment-entry .intro-stage {
    position:fixed;inset:0;height:100dvh;min-height:0;overflow:clip;
  }
  body.assessment-entry .intro-passage { transition:opacity 180ms ease,transform 180ms ease; }
  body.assessment-entry .experience.is-quiz-mode .gradient-field,
  body.assessment-entry .experience.is-quiz-mode .intro-atmosphere {
    filter:none;transform:none;transition:opacity 500ms ease;
  }
  body.assessment-entry .experience.is-quiz-mode .intro-copy {
    filter:none;transform:translateY(-3svh);transition:opacity 350ms ease;
  }
  body.assessment-entry footer.site-footer,
  body.assessment-entry .site-footer-reveal-trigger { display:none; }
}