/* ─── Navixar Interactive Systems CSS ─── */

/* ════════ 1. QUIZ GATE ════════ */
#whynot .quiz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.quiz-opt {
  position: relative;
  text-align: left;
  padding: 26px 26px 30px;
  border-radius: 18px;
  border: 1px solid var(--border-glass, rgba(255,255,255,.1));
  background: rgba(255,255,255,.03);
  color: inherit;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
}
.quiz-opt:hover { transform: translateY(-3px); border-color: rgba(41,151,255,.45); background: rgba(41,151,255,.05); }
.qo-letter {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: var(--accent-blue, #0071e3);
  border: 1px solid rgba(41,151,255,.35);
  border-radius: 8px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.qo-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-white, #f5f5f7); }
.qo-desc { font-size: 13.5px; color: var(--text-grey, #86868b); }
.qo-verdict { font-size: 13px; line-height: 1.55; margin-top: 10px; display: block; min-height: 0; }

.quiz-opt.locked-in {
  border-color: rgba(48,209,88,.55);
  background: rgba(48,209,88,.07);
  box-shadow: 0 0 40px rgba(48,209,88,.12), inset 0 0 30px rgba(48,209,88,.04);
  cursor: default;
}
.quiz-opt.locked-in .qo-letter { border-color: rgba(48,209,88,.6); color: #30d158; }
.quiz-opt.locked-in .qo-verdict { color: #7be29a; }

.quiz-opt.wrong {
  border-color: rgba(255,69,58,.55);
  background: rgba(255,69,58,.06);
  animation: quiz-shake .45s ease;
}
.quiz-opt.wrong .qo-verdict { color: #ff8a80; }
@keyframes quiz-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

.quiz-status {
  margin-top: 28px;
  display: flex; align-items: center; gap: 16px;
  font-size: 15px; color: var(--text-silver, #d2d2d7);
  min-height: 24px;
}
.quiz-status strong { color: #30d158; }
.quiz-progress { display: inline-flex; gap: 8px; }
.qp-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  transition: all .4s ease;
}
.qp-dot.lit { background: #30d158; border-color: #30d158; box-shadow: 0 0 12px rgba(48,209,88,.7); }

.quiz-skip { margin-top: 14px; }
.quiz-skip button {
  background: none; border: none; cursor: pointer;
  color: var(--text-grey, #86868b);
  font-size: 13px; font-family: inherit;
  text-decoration: underline dotted;
  padding: 4px 0;
  transition: color .25s ease;
}
.quiz-skip button:hover { color: var(--text-silver, #d2d2d7); }
#whynot.solved .quiz-skip { visibility: hidden; }

/* burst particles */
.nvx-burst {
  position: fixed; z-index: 999;
  width: 7px; height: 7px; border-radius: 50%;
  pointer-events: none;
  animation: nvx-burst-fly 1.3s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes nvx-burst-fly {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(.2); }
}

/* ════════ GATED THESIS ════════ */
#thesis.gated { display: none; }
#thesis.unlocking { animation: thesis-in 1s ease both; }
@keyframes thesis-in { from { opacity: 0; } to { opacity: 1; } }

/* ════════ 2. PILLAR PARTICLE DUST ════════ */
.pillar-dust {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.pd-dot {
  position: absolute; left: 0; top: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: #2997ff;
  box-shadow: 0 0 8px rgba(41,151,255,.9);
}
.pd-dot:nth-child(4n) { background: #ff9933; box-shadow: 0 0 8px rgba(255,153,51,.9); }
.pd-dot:nth-child(7n) { background: #f5f5f7; box-shadow: 0 0 6px rgba(255,255,255,.8); }

/* ════════ 3. POINT-CLOUD COW ════════ */
#cow-cloud-wrap {
  position: relative;
  width: 100%;
  height: 230px;
  margin-top: 56px;
  pointer-events: none;
  overflow: hidden;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
#cowCanvas { display: block; width: 100%; height: 100%; }
#cow-label {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; gap: 3px;
  will-change: transform;
}
#cow-label .cl-tag {
  font-family: 'Space Grotesk', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: #2997ff;
}
#cow-label .cl-sub {
  font-size: 10.5px; color: var(--text-grey, #86868b);
  max-width: 280px; line-height: 1.5;
}

/* ════════ POKÉMON GO BOX + SPEED/COST ════════ */
.pokemon-box {
  margin-top: 36px;
  padding: 28px 32px;
  border-radius: 18px;
  border: 1px solid rgba(255,183,77,.25);
  background: linear-gradient(135deg, rgba(255,153,51,.06), rgba(255,215,0,.03));
  max-width: 860px;
}
.pokemon-box .pk-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: #ffb74d; margin-bottom: 10px;
}
.pokemon-box p { font-size: 15px; line-height: 1.7; color: var(--text-silver, #d2d2d7); margin: 0; }
.pokemon-box strong { color: var(--text-white, #f5f5f7); }

.speedcost { padding: 36px 40px; border-radius: 20px; }
.sc-row { margin-bottom: 22px; }
.sc-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.sc-label { font-size: 14px; font-weight: 600; color: var(--text-silver, #d2d2d7); }
.sc-label em { font-style: normal; color: var(--text-grey, #86868b); font-weight: 400; }
.sc-val { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: var(--text-grey, #86868b); }
.sc-us-label, .sc-us-val { color: #30d158 !important; }
.sc-track { height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.sc-fill { height: 100%; border-radius: 6px; width: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.sc-them { background: linear-gradient(90deg, #5a5a60, #86868b); }
.sc-us { background: linear-gradient(90deg, #30d158, #7be29a); box-shadow: 0 0 14px rgba(48,209,88,.5); }
.sc-note { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--text-grey, #86868b); }
.sc-note strong { color: #30d158; }
.js-reveal.revealed .sc-them { width: 100%; }
.js-reveal.revealed .sc-us { width: 5%; min-width: 46px; }

/* ════════ 4. ROADMAP GUESS GAME ════════ */
.rm-scorebar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 40px 0 8px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid var(--border-glass, rgba(255,255,255,.1));
  background: rgba(255,255,255,.03);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .5px;
  color: var(--text-silver, #d2d2d7);
}
.rm-scorebar button {
  background: none; border: 1px solid rgba(41,151,255,.4);
  color: #2997ff; border-radius: 999px;
  padding: 7px 16px; font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .25s ease;
}
.rm-scorebar button:hover { background: rgba(41,151,255,.12); }

.tl-date.td-revealed { color: #2997ff; text-shadow: 0 0 18px rgba(41,151,255,.5); animation: date-pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes date-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.tl-guess {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tg-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-grey, #86868b); margin-right: 4px; }
.tg-chips { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.tg-chip {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  color: var(--text-silver, #d2d2d7);
  cursor: pointer;
  transition: all .2s ease;
}
.tg-chip:hover:not(:disabled) { border-color: #2997ff; color: #2997ff; transform: translateY(-2px); }
.tg-chip:disabled { opacity: .35; cursor: default; }
.tg-chip.actual { opacity: 1; border-color: #30d158; color: #30d158; background: rgba(48,209,88,.1); box-shadow: 0 0 12px rgba(48,209,88,.25); }
.tg-chip.missed { opacity: 1; border-color: rgba(255,69,58,.5); color: #ff8a80; text-decoration: line-through; }
.tg-verdict { width: 100%; font-size: 13.5px; margin-top: 4px; }
.tg-verdict.hit { color: #30d158; }
.tg-verdict.fast { color: #2997ff; }
.tg-verdict.slow { color: #ffb74d; }

.rm-summary {
  margin-top: 40px;
  padding: 36px 40px;
  border-radius: 20px;
  display: none;
  border-color: rgba(41,151,255,.3) !important;
  background: linear-gradient(135deg, rgba(0,113,227,.08), rgba(41,151,255,.02)) !important;
}
.rm-summary.show { display: block; animation: thesis-in .8s ease both; }
.rms-big {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px, 4vw, 40px); font-weight: 700;
  color: var(--text-white, #f5f5f7);
  margin-bottom: 12px;
}
.rms-text { font-size: 15px; line-height: 1.7; color: var(--text-silver, #d2d2d7); max-width: 760px; }
.rms-text strong { color: #2997ff; }

/* ════════ 5. INTERACTIVE BUDGET ════════ */
.budget-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  margin-top: 56px;
  align-items: start;
}
.budget-rows { display: flex; flex-direction: column; gap: 22px; }
.brow-item {
  padding: 22px 26px;
  border-radius: 16px;
  border: 1px solid var(--border-glass, rgba(255,255,255,.1));
  background: rgba(255,255,255,.025);
}
.brow-item.buffer { border-style: dashed; border-color: rgba(255,183,77,.3); }
.bi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.bi-label { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-white, #f5f5f7); }
.bi-label em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--text-grey, #86868b); }
.bi-amt { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: #2997ff; white-space: nowrap; }
.brow-item.buffer .bi-amt { color: #ffb74d; }
.bi-track { height: 8px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; margin-bottom: 12px; }
.bi-fill { height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #0071e3, #2997ff); }
.brow-item.buffer .bi-fill { background: linear-gradient(90deg, #b8860b, #ffb74d); }
.bi-desc { font-size: 13.5px; line-height: 1.6; color: var(--text-grey, #86868b); }

.bi-toggle { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.bt-opt {
  flex: 1; min-width: 180px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px; font-weight: 600;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--text-grey, #86868b);
  cursor: pointer;
  transition: all .25s ease;
}
.bt-opt:hover:not(.on) { border-color: rgba(41,151,255,.4); color: var(--text-silver, #d2d2d7); }
.bt-opt.on {
  border-color: #2997ff;
  background: rgba(0,113,227,.14);
  color: #fff;
  box-shadow: 0 0 16px rgba(0,113,227,.25);
}

.budget-summary {
  position: sticky; top: 90px;
  padding: 30px 30px 26px;
  border-radius: 20px;
  border: 1px solid rgba(41,151,255,.3);
  background: linear-gradient(160deg, rgba(0,113,227,.09), rgba(10,10,14,.6));
  backdrop-filter: blur(12px);
}
.bs-label { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-grey, #86868b); }
.bs-total {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(38px, 4.5vw, 54px); font-weight: 700;
  color: var(--text-white, #f5f5f7);
  line-height: 1.1; margin: 6px 0 2px;
  display: inline-block;
}
.bs-inr { font-size: 14px; color: #2997ff; font-weight: 600; margin-bottom: 22px; }
.bs-inr em { font-style: normal; font-weight: 400; color: var(--text-grey, #86868b); font-size: 12px; }
.bs-runway { margin-bottom: 22px; }
.bs-rw-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-grey, #86868b); margin-bottom: 8px; }
.bs-rw-track { height: 8px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.bs-rw-fill { height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #30d158, #7be29a); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.bs-rw-val { font-size: 12px; color: var(--text-silver, #d2d2d7); margin-top: 8px; }
.bs-hits-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-grey, #86868b); margin-bottom: 10px; }
.bs-hit {
  font-size: 13px; line-height: 1.55;
  color: #ffb74d;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,183,77,.25);
  background: rgba(255,153,51,.05);
  margin-bottom: 8px;
}
.bs-hit.none { color: #30d158; border-color: rgba(48,209,88,.25); background: rgba(48,209,88,.05); }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 1024px) {
  .budget-wrap { grid-template-columns: 1fr; }
  .budget-summary { position: static; }
}
@media (max-width: 640px) {
  #whynot .quiz-grid { grid-template-columns: 1fr; }
  .rm-scorebar { flex-direction: column; align-items: flex-start; }
  #cow-cloud-wrap { height: 190px; }
  .speedcost { padding: 26px 22px; }
}

/* ════════════════════════════════════════════
   SCALE PASS — bigger type, full-width layout
════════════════════════════════════════════ */
.inner { max-width: 1520px; }
.sec { padding-left: clamp(24px, 4vw, 72px); padding-right: clamp(24px, 4vw, 72px); }
.headline { font-size: clamp(40px, 5.4vw, 84px); }
.sub { font-size: clamp(17px, 1.5vw, 24px); max-width: 1020px; line-height: 1.65; }
.hstmt { font-size: clamp(16px, 1.6vw, 23px); max-width: 860px; }
.chl, .minihead { font-size: 13px; }
.chn { font-size: 15px; }

.et { font-size: 26px; }
.ed { font-size: 16px; line-height: 1.7; }
.fit, .ext, .wt, .rt { font-size: 18px; }
.fid, .exd, .ccdesc, .rd { font-size: 15px; line-height: 1.65; }
.cb, .wd, .twd, .mcb, .tl-desc { font-size: 16px; line-height: 1.7; }
.twt { font-size: 21px; }
.tl-title { font-size: 22px; }
.msl { font-size: 16px; }
.mct { font-size: 13px; }
.insight-box { font-size: 16px; line-height: 1.7; }
.tw.glass-card, .ec.glass-card { padding-top: 34px; padding-bottom: 34px; }
.src { font-size: 12px; }
.etag, .twtag, .tl-tag { font-size: 11px; }
.eli10-card p, .eli10 p { font-size: 16px !important; line-height: 1.75 !important; }

/* interactive components scale */
.qo-title { font-size: 25px; }
.qo-desc { font-size: 15.5px; }
.qo-verdict { font-size: 14.5px; line-height: 1.6; }
.quiz-opt { padding: 32px 32px 36px; }
.quiz-status { font-size: 17px; }
.pokemon-box { max-width: 1120px; padding: 34px 40px; }
.pokemon-box p { font-size: 17px; line-height: 1.75; }
.pokemon-box .pk-tag { font-size: 13px; }
.sc-label, .sc-val { font-size: 15.5px; }
.sc-note { font-size: 15.5px; }
.tg-chip { font-size: 13.5px; padding: 9px 17px; }
.tg-label { font-size: 12.5px; }
.tg-verdict { font-size: 15px; }
.rm-scorebar { font-size: 15px; padding: 18px 26px; }
.rm-scorebar button { font-size: 14px; padding: 9px 20px; }
.rms-text { font-size: 17px; }
.bi-label { font-size: 17px; }
.bi-amt { font-size: 21px; }
.bi-desc { font-size: 15px; }
.bt-opt { font-size: 14px; padding: 13px 16px; }
.bs-hit { font-size: 14px; }
.bs-rw-val { font-size: 13px; }
#cow-label .cl-tag { font-size: 12px; }
#cow-label .cl-sub { font-size: 12.5px; max-width: 340px; }

/* ════════════════════════════════════════════
   ATTRACTION PASS — interactive things beg to be touched
════════════════════════════════════════════ */

/* "Try it" badge, injected by JS */
.try-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(41,151,255,.55);
  background: linear-gradient(120deg, rgba(0,113,227,.16), rgba(41,151,255,.06));
  color: #8ec8ff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  margin: 30px 0 6px;
  cursor: default;
  animation: try-pulse 2.2s ease-in-out infinite;
  position: relative; z-index: 3;
}
.try-badge .tb-hand { font-size: 17px; animation: hand-poke 1.6s ease-in-out infinite; display: inline-block; }
.try-badge .tb-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #2997ff; box-shadow: 0 0 10px #2997ff;
  animation: tb-blink 1.1s ease-in-out infinite;
}
@keyframes try-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41,151,255,.45); }
  50%      { box-shadow: 0 0 0 14px rgba(41,151,255,0); }
}
@keyframes tb-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes hand-poke { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(4px) rotate(-12deg); } }
.try-badge.done { animation: none; opacity: .4; }
.try-badge.done .tb-dot, .try-badge.done .tb-hand { animation: none; }

/* Quiz cards breathe until answered */
#whynot:not(.solved) .quiz-opt:not(.locked-in):not(.wrong) {
  animation: card-breathe 3.2s ease-in-out infinite;
}
#whynot .quiz-opt:nth-child(2) { animation-delay: .5s; }
#whynot .quiz-opt:nth-child(3) { animation-delay: 1s; }
#whynot .quiz-opt:nth-child(4) { animation-delay: 1.5s; }
@keyframes card-breathe {
  0%, 100% { border-color: rgba(255,255,255,.1); box-shadow: 0 0 0 rgba(41,151,255,0); }
  50%      { border-color: rgba(41,151,255,.55); box-shadow: 0 8px 40px rgba(0,113,227,.18), inset 0 0 24px rgba(41,151,255,.05); }
}
.quiz-opt:hover .qo-letter { transform: scale(1.15) rotate(-6deg); background: rgba(41,151,255,.15); }
.qo-letter { transition: transform .25s ease, background .25s ease; }

/* Timeline: the active unguessed card's chips shimmer */
.tl-item.lit:not(.guessed) .tl-guess {
  border-top-color: rgba(41,151,255,.35);
  animation: guess-nudge 2.4s ease-in-out infinite;
  border-radius: 0 0 10px 10px;
}
@keyframes guess-nudge {
  0%, 100% { background: transparent; }
  50%      { background: rgba(0,113,227,.06); }
}
.tl-item.lit:not(.guessed) .tg-chip {
  border-color: rgba(41,151,255,.45);
  color: #9fd0ff;
}
.tl-item.lit:not(.guessed) .tg-label { color: #2997ff; }

/* Budget toggles glow until touched */
.bi-toggle.untouched .bt-opt:not(.on) {
  animation: opt-glow 2.6s ease-in-out infinite;
}
@keyframes opt-glow {
  0%, 100% { border-color: rgba(255,255,255,.14); }
  50%      { border-color: rgba(41,151,255,.6); box-shadow: 0 0 18px rgba(0,113,227,.22); color: #cfe6ff; }
}
.bt-opt { position: relative; }
.bi-toggle.untouched::after {
  content: '⇄ flip me';
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #2997ff;
  align-self: center;
  animation: tb-blink 1.4s ease-in-out infinite;
}

/* Sensor + splat buttons get louder */
.toggle-bar .tbtn:not(.on), .sim-btn:not(.active):not(.action-btn) {
  animation: opt-glow 2.6s ease-in-out infinite;
}
.interacted .tbtn, .interacted .sim-btn { animation: none !important; }

/* Big cursor affordance on all interactive controls */
.quiz-opt, .tg-chip, .bt-opt, .tbtn, .sim-btn, .rm-scorebar button { cursor: pointer; }

@media (max-width: 640px) {
  .try-badge { font-size: 11.5px; padding: 9px 16px; letter-spacing: 1.8px; }
}