/* =============================================================================
   sorting-quiz.css — page styles for /sorting/quiz
   The question cards themselves are .ds-quiz-card (design-system.css). This
   file owns the page chrome: nav, headline strip, slide animations,
   per-slide background colors, footer hint, and loading screen overlay.
   All values via DS tokens (--space-*, --color-*, --quiz-*, etc.).
   ============================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

body {
    font-family: var(--font-sans);
    background: var(--accent-primary);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Per-slide background — JS toggles body[data-slide=N] */
body.quiz-transitions-ready {
    transition: background-color var(--duration-slow) var(--ease-default);
}
body[data-slide="0"] { background: var(--accent-primary); }
body[data-slide="1"] { background: var(--highlight-yellow); }
body[data-slide="2"] { background: var(--highlight-blue); }
body[data-slide="3"] { background: var(--highlight-purple); }
body[data-slide="4"] { background: var(--accent-primary); }  /* loops back to neon green for closure */

/* ── Nav bar ──────────────────────────────────────────────── */
.quiz-nav {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.quiz-nav > * { pointer-events: auto; }

.quiz-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-full);
    color: var(--color-black);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background var(--duration-fast) var(--ease-default);
}
.quiz-nav__brand:hover { background: var(--color-white); }
.quiz-nav__brand svg { width: 18px; height: 18px; flex-shrink: 0; }

.quiz-nav__close {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default);
}
.quiz-nav__close:hover { background: var(--color-white); }
.quiz-nav__close svg { width: 18px; height: 18px; }

/* ── Page headline (above the card) ────────────────────────── */
.quiz-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--space-16) + var(--space-4)) var(--space-4) var(--space-12);
    gap: var(--space-8);
    width: 100%;
}

.quiz-headline {
    font-family: var(--quiz-headline-font);
    font-size: var(--quiz-headline-size);
    font-weight: var(--quiz-headline-weight);
    color: var(--quiz-headline-color);
    letter-spacing: var(--quiz-headline-tracking);
    text-align: center;
    line-height: var(--leading-snug);
    max-width: 720px;
}
.quiz-headline em { font-style: italic; font-weight: var(--font-normal); }
.quiz-headline strong { font-style: normal; font-weight: var(--font-bold); }

.quiz-steps {
    font-family: var(--font-mono);
    font-size: var(--quiz-steps-size);
    font-weight: var(--font-bold);
    color: var(--quiz-steps-color);
    letter-spacing: var(--quiz-steps-tracking);
    text-transform: uppercase;
    text-align: center;
    margin-top: calc(-1 * var(--space-4));
}
.quiz-steps__sep { opacity: 0.5; margin: 0 var(--space-2); }

/* ── Question slide stage (wraps .ds-quiz-card) ────────────── */
.question-container {
    position: relative;
    width: 100%;
    max-width: var(--quiz-card-max-width);
    min-height: 540px;
}
.question-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(40px);
    transition: opacity var(--duration-slow) var(--ease-default),
                transform var(--duration-slow) var(--ease-default);
}
.question-slide--active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.question-slide--exiting {
    opacity: 0;
    transform: translateX(-40px);
}

/* ── Below-card hint ───────────────────────────────────────── */
.quiz-foot-hint {
    font-family: var(--quiz-foot-hint-font);
    font-size: var(--quiz-foot-hint-size);
    font-weight: var(--font-bold);
    color: var(--quiz-foot-hint-color);
    letter-spacing: var(--quiz-foot-hint-tracking);
    text-transform: uppercase;
    text-align: center;
}
.quiz-foot-hint kbd {
    display: inline-block;
    padding: 2px var(--space-2);
    margin: 0 var(--space-1);
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm);
    font-family: inherit;
    color: var(--text-primary);
}
.quiz-foot-hint__sep { opacity: 0.5; margin: 0 var(--space-2); }

/* On dark slides (blue, purple, orange) flip to white */
body[data-slide="2"] .quiz-headline,
body[data-slide="3"] .quiz-headline { color: var(--color-white); }
body[data-slide="2"] .quiz-steps,
body[data-slide="3"] .quiz-steps { color: rgba(255, 255, 255, 0.85); }
body[data-slide="2"] .quiz-foot-hint,
body[data-slide="3"] .quiz-foot-hint { color: rgba(255, 255, 255, 0.7); }
body[data-slide="2"] .quiz-foot-hint kbd,
body[data-slide="3"] .quiz-foot-hint kbd {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
}

/* ── Loading screen overlay ────────────────────────────────── */
.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--quiz-loading-bg);
    z-index: var(--z-spectacle);
    display: flex;
    flex-direction: column;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal) ease, visibility 0s var(--duration-normal);
}
.loading-screen--active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-normal) ease, visibility 0s;
}
.loading-screen__quotes {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.loading-screen__quote {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-8);
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
}
.loading-screen__quote--active { opacity: 1; }
.loading-screen__quote-mark {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    color: var(--color-teal-500, var(--accent-primary));
    opacity: 0.35;
    margin-bottom: calc(-1 * var(--space-2));
}
.loading-screen__quote-text {
    font-family: var(--quiz-loading-quote-font);
    font-size: var(--quiz-loading-quote-size);
    font-weight: var(--quiz-loading-quote-weight);
    color: var(--quiz-loading-quote-color);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-5);
    max-width: 720px;
}
.loading-screen__quote-attr {
    font-size: var(--quiz-loading-attr-size);
    color: var(--quiz-loading-attr-color);
}
.loading-screen__progress {
    flex-shrink: 0;
    padding: 0 var(--space-6) max(var(--space-16), 12vh);
}
.loading-screen__progress-label {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-white);
    opacity: 0.55;
    padding-bottom: var(--space-3);
}
.loading-screen__progress-track {
    position: relative;
    width: 100%;
    height: var(--quiz-loading-progress-height);
    background: var(--quiz-loading-progress-bg);
    border-radius: 4px;
    overflow: visible;
}
/* Segment dividers — overlay above both track and fill, 10% slices */
.loading-screen__progress-track::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(10% - 2px),
        rgba(0, 0, 0, 0.35) calc(10% - 2px),
        rgba(0, 0, 0, 0.35) 10%
    );
}
.loading-screen__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--quiz-loading-progress-gradient);
    border-radius: 4px 0 0 4px;
    position: relative;
    transition: width 0.3s var(--ease-default);
}

/* ── Walking stickman riding the progress bar ─────────────── */
.loading-screen__walker {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    z-index: 2;
}
.loading-screen__walker svg { width: 32px; height: 32px; }

.walker-body {
    animation: walker-body-bob 0.3s ease-in-out infinite;
}
@keyframes walker-body-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1px); }
}

.walker-leg-left  { animation: walker-leg-left  0.6s ease-in-out infinite; transform-origin: 16px 28px; }
.walker-leg-right { animation: walker-leg-right 0.6s ease-in-out infinite; transform-origin: 16px 28px; }
@keyframes walker-leg-left  { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate( 15deg); } }
@keyframes walker-leg-right { 0%, 100% { transform: rotate( 15deg); } 50% { transform: rotate(-15deg); } }

.walker-arm-left  { animation: walker-arm-left  0.6s ease-in-out infinite; transform-origin: 16px 16px; }
.walker-arm-right { animation: walker-arm-right 0.6s ease-in-out infinite; transform-origin: 16px 16px; }
@keyframes walker-arm-left  { 0%, 100% { transform: rotate(  8deg); } 50% { transform: rotate( -8deg); } }
@keyframes walker-arm-right { 0%, 100% { transform: rotate( -8deg); } 50% { transform: rotate(  8deg); } }
.loading-screen__error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) ease;
}
.loading-screen__error--visible { opacity: 1; pointer-events: auto; }
.loading-screen__error-text {
    font-size: var(--text-lg);
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}
.loading-screen__retry-btn {
    background: var(--accent-primary);
    color: var(--color-black);
    border: 0;
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-8);
    font-weight: var(--font-medium);
    cursor: pointer;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .quiz-nav { top: var(--space-3); left: var(--space-3); right: var(--space-3); }
    .quiz-stage { padding-top: calc(var(--space-16) + var(--space-2)); padding-bottom: var(--space-8); gap: var(--space-6); }
    .quiz-headline { font-size: clamp(22px, 6vw, 32px); padding: 0 var(--space-2); }
    .quiz-steps { font-size: var(--text-xs); }
    .question-container { min-height: 580px; }
}