/* The quiz at /quiz (server/site.js, server/visuals.js, public/quiz.js). Loaded after home.css.
   Every picture's normal style is its finished state; the animations only say where things start from.
   Pictures play when a parent gets .play: public/quiz.js adds it to a question when it is answered,
   public/explore.js to an article's scene when it scrolls into view. */

.quiz { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 40rem; margin: 0 auto; padding: 104px var(--pad-r) 64px var(--pad); display: flex; flex-direction: column; }
.qz-bar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; background: rgba(246, 239, 226, .1); display: none; }
.qz-js .qz-bar { display: block; }
.qz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--glow), var(--glow-2)); border-radius: 0 4px 4px 0; transition: width .6s cubic-bezier(.3, 1.3, .5, 1); }

.qz-screen { padding: 0 0 40px; }
.qz-screen[hidden] { display: none; }
.qz-screen h2 { outline: none; }
.qz-q {
  margin: 0 0 26px; font-family: var(--disp); font-weight: 400; font-size: clamp(38px, 8vw, 60px); line-height: 1.02;
  letter-spacing: -.01em; text-wrap: balance;
}
.qz-js .qz-step.on .qz-q { animation: qz-rise .55s cubic-bezier(.2, .8, .2, 1) both; }

.qz-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.qz-opts.two { grid-template-columns: 1fr 1fr; }
.qz-js .qz-step.on .qz-opts li { animation: qz-pop .5s cubic-bezier(.3, 1.5, .5, 1) calc(.15s + var(--k) * .07s) both; }
.qz-opt {
  width: 100%; height: 100%; min-height: 62px; padding: 14px 20px; cursor: pointer;
  font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--on-dark);
  background: rgba(246, 239, 226, .06); border: 2px solid var(--line-dark); border-radius: 18px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, opacity .3s ease;
}
.qz-opt:hover { border-color: var(--glow); background: rgba(233, 196, 106, .12); transform: translateY(-2px); }
.qz-opt:active { transform: scale(.97); }
.answered .qz-opt { opacity: .45; }
.answered .qz-opt:hover { opacity: .8; }
.qz-opt.picked, .answered .qz-opt.picked { opacity: 1; border-color: var(--glow); background: var(--glow); color: var(--ink); animation: qz-pick .4s cubic-bezier(.3, 1.6, .5, 1); }

.qz-js .qz-after { display: none; }
.qz-js .answered .qz-after { display: block; }
.qz-after { margin-top: 26px; scroll-margin-top: 14px; }
.qz-words { margin: 22px 0 26px; }
.answered .qz-words, .answered .qz-after > .go { animation: qz-rise .6s ease var(--cap) both; }
.qz-say { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(19px, 2.6vw, 21px); line-height: 1.55; }
.qz-take {
  margin: 0 0 22px; padding: 14px 18px; border-radius: 16px; background: rgba(233, 196, 106, .12);
  font-family: var(--disp); font-size: clamp(23px, 3.8vw, 28px); line-height: 1.2; color: var(--glow-2);
}
.qz-verse { margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--glow); }
.qz-verse p { margin: 0 0 6px; font-family: var(--disp); font-style: italic; font-size: clamp(20px, 3.2vw, 24px); line-height: 1.3; color: var(--glow-2); }
.qz-verse footer { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); }

.qz-then[hidden] { display: none; }
.qz-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qz-next li { animation: qz-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.answered .qz-next li:nth-child(1) { animation-delay: calc(var(--cap) + .1s); }
.answered .qz-next li:nth-child(2) { animation-delay: calc(var(--cap) + .22s); }
.answered .qz-next li:nth-child(3) { animation-delay: calc(var(--cap) + .34s); }
.nx {
  position: relative; display: grid; grid-template-columns: 52px 1fr auto; column-gap: 14px; align-items: center;
  padding: 18px 20px; border-radius: 20px; border: 2px solid var(--line-dark); background: rgba(246, 239, 226, .05);
  text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
a.nx:hover { border-color: var(--glow); background: rgba(233, 196, 106, .1); transform: translateY(-2px); }
.nx-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(233, 196, 106, .16); color: var(--glow); }
.nx-ic svg { width: 30px; height: 30px; }
.nx b { font-family: var(--disp); font-weight: 400; font-size: 26px; line-height: 1.1; }
.nx span { grid-column: 2; font-size: 15px; line-height: 1.4; color: var(--on-dark-soft); }
.nx em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-size: 22px; color: var(--glow); transition: transform .2s ease; }
a.nx:hover em { transform: translateX(4px); }
.nx-form { border-color: rgba(233, 196, 106, .5); }
.nx-row { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 14px; }
.nx-row input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--line-dark);
  background: rgba(0, 0, 0, .25); color: var(--on-dark); font: inherit; font-size: 17px;
}
.nx-row input::placeholder { color: rgba(246, 239, 226, .4); }
.nx-row input:focus { outline: none; border-color: var(--glow); }
.nx-row button {
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--glow); color: var(--ink); font-weight: 700; font-size: 17px;
}
.nx-row button:disabled { opacity: .6; cursor: wait; }
.nx-msg { grid-column: 1 / -1; margin: 10px 0 0; font-size: 15px; color: #ffb3a7; }
.nx-msg:empty { display: none; }
.nx-form.sent .nx-msg { color: var(--glow-2); font-family: var(--disp); font-size: 22px; animation: qz-rise .5s ease both; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qz-again {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px;
  border: 2px solid var(--line-dark); text-decoration: none; font-weight: 600;
}
.qz-again:hover { border-color: var(--glow); }
.answered .qz-then { animation: qz-rise .6s ease var(--cap) both; }
.quick .qz-then, .quick .qz-next li { animation-delay: 0s !important; }
.quiz:not(.qz-js) .qz-then + .qz-then { margin-top: 16px; }

@keyframes qz-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes qz-pop { from { opacity: 0; transform: translateY(16px) scale(.92); } }
@keyframes qz-pick { 40% { transform: scale(1.05); } }

/* no script: everything is on the page in order */
.quiz:not(.qz-js) .qz-opt { cursor: default; }
.quiz:not(.qz-js) [data-next] { display: none; }
.quiz:not(.qz-js) .qz-screen { border-bottom: 1px solid var(--line-dark); margin-bottom: 48px; }

/* ---------- the pictures ---------- */
.viz {
  position: relative; margin: 0; overflow: hidden; border-radius: 24px;
  background: radial-gradient(120% 100% at 50% 0%, #262a66 0%, #13142c 72%);
  border: 1px solid var(--line-dark); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.viz svg { display: block; width: 100%; height: auto; }
.viz text { font-family: var(--ui); }
.viz .t-big, .n-q { font-family: var(--disp); }
.n-q { font-style: italic; }
.play .viz { animation: qz-pop .5s cubic-bezier(.2, 1.2, .4, 1) both; }

/* 1. the beginning */
.b-star, .b-seed, .b-flash, .b-ring, .b-after { transform-box: fill-box; transform-origin: center; }
.b-seed, .b-flash, .b-ring { opacity: 0; }
.play .b-seed { animation: b-seed .75s ease-in both; }
.play .b-flash { animation: b-flash 1.3s ease-out .55s both; }
.play .b-ring { animation: b-ring 1.4s cubic-bezier(.1, .7, .3, 1) .6s both; }
.play .b-after { animation: b-fade 1.6s ease .7s both; }
.play .b-star { animation: b-fly 1.4s cubic-bezier(.12, .75, .25, 1) calc(.6s + var(--d)) both, b-tw 3.4s ease-in-out calc(2.4s + var(--t)) infinite; }
.play .b-gal { animation: b-fly 1.6s cubic-bezier(.12, .75, .25, 1) calc(.6s + var(--d)) both; }
.play .b-line path { stroke-dasharray: 1; animation: draw 1s ease 1.5s both; }
.play .b-line circle, .play .b-line text { animation: b-fade .6s ease 2s both; }
@keyframes b-seed { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(3); } }
@keyframes b-flash { 0% { opacity: 0; transform: scale(.05); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@keyframes b-ring { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(10); } }
@keyframes b-fly { from { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } 25% { opacity: 1; } }
@keyframes b-tw { 50% { opacity: .3; } }
@keyframes b-fade { from { opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 2. life: dials settle into thin bands, then the planet lights up */
.l-knob, .l-spark, .l-halo { transform-box: fill-box; transform-origin: center; }
.l-dark { opacity: 0; }
.play .l-knob { animation: l-slide 2.2s cubic-bezier(.45, 0, .3, 1) calc(.2s + var(--i) * .12s) both; }
.play .l-band { animation: l-lit .5s ease calc(2.3s + var(--i) * .12s) both; }
.play .l-dark { animation: l-dark 3.5s ease both; }
.play .l-halo { animation: l-halo .9s cubic-bezier(.3, 1.5, .5, 1) 3s both, l-breathe 3s ease-in-out 4s infinite; }
.play .l-spark { animation: qz-pop .5s cubic-bezier(.3, 1.8, .5, 1) calc(3.2s + var(--i) * .1s) both, l-tw 2.4s ease-in-out calc(3.8s + var(--i) * .5s) infinite; }
@keyframes l-slide { 0% { transform: translateX(var(--a)); } 28% { transform: translateX(var(--b)); } 55% { transform: translateX(var(--c)); } 78% { transform: translateX(var(--d)); } 100% { transform: none; } }
@keyframes l-lit { from { opacity: .2; } 60% { opacity: 1; filter: drop-shadow(0 0 6px #f4d58d); } }
@keyframes l-dark { 0%, 84% { opacity: .92; } 100% { opacity: 0; } }
@keyframes l-halo { from { opacity: 0; transform: scale(.6); } }
@keyframes l-breathe { 50% { transform: scale(1.08); } }
@keyframes l-tw { 50% { opacity: .25; transform: scale(.6) rotate(45deg); } }

/* 3. feelings: neurons fire, a scanner sweeps, a question is left over */
.n-node, .n-q, .n-scan { transform-box: fill-box; transform-origin: center; }
.n-pulse, .n-scan { opacity: 0; }
.n-pulse { stroke-dasharray: .2 .8; }
.play .n-head { stroke-dasharray: 1; animation: draw 1.1s ease both; }
.play .n-node { animation: qz-pop .4s ease calc(.7s + var(--d) * .2) both, n-fire 1.8s ease-in-out calc(1.2s + var(--d)) infinite; }
.play .n-pulse { animation: n-run 1.4s linear calc(1.1s + var(--d)) infinite; }
.play .n-scan { animation: n-scan 1.3s ease-in-out .9s 2 both; }
.play .n-q { animation: n-q .7s cubic-bezier(.3, 1.7, .5, 1) 3.3s both, n-bob 2.6s ease-in-out 4s infinite; }
@keyframes n-fire { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes n-run { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: -.2; } }
@keyframes n-scan { 0% { opacity: 0; transform: translateY(0); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(176px); } }
@keyframes n-q { from { opacity: 0; transform: scale(.2) rotate(-30deg); } }
@keyframes n-bob { 50% { transform: translateY(-6px) rotate(6deg); } }

/* 4. opposite claims crash into each other */
.cl { display: grid; gap: 14px; padding: 22px 16px; }
.cl-row { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; }
.cl-c {
  display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; text-align: center;
  font-size: clamp(14px, 3.6vw, 17px); font-weight: 600; line-height: 1.2;
}
.cl-c small { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.cl-l { background: rgba(233, 196, 106, .16); border: 1.5px solid rgba(233, 196, 106, .6); color: var(--glow-2); }
.cl-r { background: rgba(143, 211, 255, .1); border: 1.5px solid rgba(143, 211, 255, .45); color: #cdeaff; }
.cl-x { text-align: center; font-size: 30px; line-height: 1; color: #ff8a7a; }
.play .cl-l { animation: cl-in-l .9s cubic-bezier(.5, 0, .3, 1) calc(.2s + var(--i) * .55s) both; }
.play .cl-r { animation: cl-in-r .9s cubic-bezier(.5, 0, .3, 1) calc(.2s + var(--i) * .55s) both; }
.play .cl-x { animation: cl-bang .6s cubic-bezier(.3, 1.8, .5, 1) calc(.75s + var(--i) * .55s) both; }
@keyframes cl-in-l { 0% { opacity: 0; transform: translateX(-80%); } 55% { opacity: 1; transform: translateX(26px); } 72% { transform: translateX(-6px); } 86% { transform: translateX(2px); } 100% { transform: none; } }
@keyframes cl-in-r { 0% { opacity: 0; transform: translateX(80%); } 55% { opacity: 1; transform: translateX(-26px); } 72% { transform: translateX(6px); } 86% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes cl-bang { 0% { opacity: 0; transform: scale(3) rotate(-30deg); } 100% { opacity: 1; transform: none; } }

/* 5. a lens checks three claims */
.ck { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 64px 14px 18px; }
.ck-card {
  display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 8px 12px; border-radius: 16px; text-align: center;
  background: rgba(246, 239, 226, .05); border: 1.5px solid var(--line-dark);
  font-size: clamp(12px, 3vw, 14px); line-height: 1.3; color: var(--on-dark-soft);
}
.ck-ic { display: block; width: 40px; height: 40px; color: var(--on-dark-soft); }
.ck-ic svg { width: 100%; height: 100%; }
.ck-st {
  margin-top: 4px; padding: 3px 8px; border: 2px solid currentColor; border-radius: 6px; transform: rotate(-6deg);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #ff8a7a;
}
.ck-card.ok { border-color: var(--glow); background: rgba(233, 196, 106, .14); color: var(--on-dark); }
.ck-card.ok .ck-ic, .ck-card.ok .ck-st { color: var(--glow); }
.ck-lens { position: absolute; top: 4px; left: calc(83.33% - 30px); width: 60px; height: 60px; }
.ck-lens svg { width: 100%; height: 100%; }
.play .ck-lens { animation: ck-lens 3s cubic-bezier(.5, 0, .3, 1) .2s both; }
.play .ck-st { animation: ck-stamp .45s cubic-bezier(.3, 1.6, .5, 1) calc(.9s + var(--i) * .95s) both; }
.play .ck-card { animation: ck-card .5s ease calc(.9s + var(--i) * .95s) both; }
@keyframes ck-lens {
  0% { opacity: 0; left: calc(16.66% - 30px); transform: translateY(-10px); }
  10% { opacity: 1; transform: none; }
  25% { left: calc(16.66% - 30px); } 42%, 57% { left: calc(50% - 30px); } 75%, 100% { left: calc(83.33% - 30px); }
}
@keyframes ck-stamp { from { opacity: 0; transform: scale(2.4) rotate(-20deg); } }
@keyframes ck-card { from { border-color: var(--line-dark); background: rgba(246, 239, 226, .05); } }

/* 6. the timeline */
.t-pin, .t-glow { transform-box: fill-box; transform-origin: center; }
.play .t-axis { stroke-dasharray: 1; animation: draw .9s ease both; }
.play .t-tick { animation: b-fade .5s ease .5s both; }
.play .t-pin { animation: t-drop .65s cubic-bezier(.3, 1.6, .5, 1) calc(.8s + var(--i) * .4s) both; }
.play .t-glow { animation: b-fade .4s ease 1s both, l-breathe 2.2s ease-in-out 1.4s infinite; }
@keyframes t-drop { from { opacity: 0; transform: translateY(-36px); } }

/* 7. the cross and the seals */
.c-seal { transform-box: fill-box; transform-origin: center; }
.play .c-cross { stroke-dasharray: 1; animation: draw 1.2s cubic-bezier(.6, 0, .3, 1) .1s both; }
.play .c-glow { animation: b-fade 1.2s ease .8s both; }
.play .c-seal { animation: c-stamp .5s cubic-bezier(.3, 1.4, .5, 1) calc(1.4s + var(--i) * .32s) both; }
@keyframes c-stamp { 0% { opacity: 0; transform: scale(2.2); } 70% { opacity: 1; transform: scale(.94); } 100% { transform: none; } }

/* 8. the stone rolls away, then 500 dots */
.r-stone, .r-rays { transform-box: fill-box; }
.r-stone { transform-origin: center; }
.r-rays { transform-origin: 50% 100%; }
.r-inner { opacity: 0; }
.play .r-stone { animation: r-roll 1.3s cubic-bezier(.5, 0, .25, 1) .3s both; }
.play .r-inner { animation: r-inner 1.6s ease both; }
.play .r-rays { animation: b-fade 1s ease 1.1s both, r-sway 6s ease-in-out 2s infinite; }
.play .r-row { animation: b-fade .25s ease calc(1.7s + var(--i) * .07s) both; }
@keyframes r-roll { from { transform: translateX(-58px) rotate(-200deg); } }
@keyframes r-inner { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes r-sway { 50% { transform: rotate(4deg); opacity: .75; } }

/* 9. the gap and the cross */
.s-blk, .s-light { transform-box: fill-box; transform-origin: center; }
.s-blk { opacity: 0; }
.play .s-blk { animation: s-fall 1.2s cubic-bezier(.5, 0, .9, .6) calc(.2s + var(--i) * .4s) both; }
.play .s-cross { animation: s-drop .8s cubic-bezier(.5, 0, .3, 1) 2s both; }
.play .s-walk { animation: s-walk 1.6s ease-in-out 3s both; }
.play .s-bob { animation: s-bob .32s ease-in-out 3s 5; }
.play .s-light { animation: s-glow 1s ease 4.4s both; }
@keyframes s-fall { 0% { opacity: 0; transform: translateY(-90px); } 15% { opacity: 1; } 45% { transform: translateY(0); opacity: 1; } 100% { opacity: 0; transform: translateY(150px) rotate(25deg); } }
@keyframes s-drop { 0% { transform: translateY(-260px); } 70% { transform: translateY(6px); } 85% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes s-walk { from { transform: translateX(-228px); } }
@keyframes s-bob { 50% { transform: translateY(-3px); } }
@keyframes s-glow { 50% { transform: scale(1.3); } }

/* 10. a knock, and the door opens */
.d-door { transform-box: fill-box; transform-origin: left center; transform: scaleX(.14); }
.d-tap { opacity: 0; }
.play .d-knock { animation: d-knock .9s ease .1s both; }
.play .d-tap { animation: d-tap .35s ease-out calc(.15s + var(--i) * .3s) both; }
.play .d-door { animation: d-open 1.1s cubic-bezier(.3, .7, .2, 1) 1.15s both; }
.play .d-rays, .play .d-floor { animation: b-fade 1s ease 1.5s both; }
@keyframes d-knock { 0%, 33%, 66%, 100% { transform: none; } 8%, 41%, 74% { transform: translateX(2px); } }
@keyframes d-tap { 0% { opacity: 0; transform: translateX(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(6px); } }
@keyframes d-open { from { transform: scaleX(1); } }

@media (max-width: 420px) {
  .qz-opts.two { grid-template-columns: 1fr; }
  .ck { gap: 6px; padding-inline: 8px; }
  .cl { padding-inline: 10px; }
  .cl-row { grid-template-columns: 1fr 26px 1fr; }
}