/* ============================================================
   BrainKong — Home refresh (v2.0.1)
   Additive, cascade-last, scoped to .home-page only.
   Retains all existing structure, copy, and game logic;
   this file only elevates the first-visit hero + proof card.
   ============================================================ */

.home-page{
  --bk-ink:#11241b;
  --bk-spark:#dc9a1f;        /* amber accent — "see it / fix it" */
  --bk-brand-2:#2e7c5c;      /* lighter brand for gradients */
  --bk-card-shadow:0 2px 4px rgba(18,40,29,.05), 0 34px 64px -30px rgba(18,40,29,.32);
}

/* ---- page atmosphere (soft brand aura instead of flat grey) ---- */
body.home-page{
  background:
    radial-gradient(1150px 640px at 50% -12%, #dcefe4 0%, rgba(220,239,228,0) 62%),
    radial-gradient(820px 520px at 90% 2%, #f8edd5 0%, rgba(248,237,213,0) 55%),
    var(--bg);
  background-attachment:fixed;
}

/* ---- header: light glass, only on home ---- */
.home-page .site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(247,248,246,.82);
  backdrop-filter:saturate(1.4) blur(13px);
  -webkit-backdrop-filter:saturate(1.4) blur(13px);
  border-bottom:1px solid rgba(38,102,79,.09);
}
.home-page .brand-mark{
  background:linear-gradient(150deg,var(--bk-brand-2),var(--brand-dark));
  box-shadow:0 6px 14px -6px rgba(38,102,79,.55);
}
.home-page .itl-music-toggle{
  border-radius:11px;font-weight:800;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.home-page .itl-music-toggle:hover{transform:translateY(-1px)}

/* ---- hero ---- */
.home-page .brainkong-first-brandline{
  display:inline-block;margin-bottom:2px;padding:6px 14px;border-radius:999px;
  background:rgba(38,102,79,.10);color:var(--brand);
  font-weight:900;letter-spacing:.14em;
}
.home-page .brainkong-first-copy h1{
  color:var(--bk-ink);letter-spacing:-.055em;text-wrap:balance;
}
.home-page .brainkong-first-tagline{
  position:relative;display:inline-block;
  background:linear-gradient(180deg,var(--bk-brand-2),var(--brand-dark));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* hand-drawn underline flourish beneath "Prove it." */
.home-page .brainkong-first-tagline::after{
  content:"";position:absolute;left:2%;right:2%;bottom:-.14em;height:.14em;border-radius:99px;
  background:linear-gradient(90deg,var(--bk-spark),rgba(220,154,31,.35));
  transform:scaleX(0);transform-origin:left;animation:bkUnderline .7s .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.home-page .brainkong-first-sub{color:#48594f}

/* ---- proof card ---- */
.home-page .brainkong-proof-card{
  position:relative;
  border:1px solid #e3eae5;border-radius:24px;
  background:linear-gradient(180deg,#ffffff 0%,#fcfefc 100%);
  box-shadow:var(--bk-card-shadow);
  animation:bkRise .6s .08s cubic-bezier(.2,.7,.2,1) both;
}
/* gradient accent rail across the top */
.home-page .brainkong-proof-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:24px 24px 0 0;
  background:linear-gradient(90deg,var(--brand),var(--bk-spark) 55%,var(--brand));
}
.home-page .brainkong-first-copy{animation:bkRise .6s cubic-bezier(.2,.7,.2,1) both}

.home-page .brainkong-proof-icon{
  background:linear-gradient(150deg,var(--bk-brand-2),var(--brand-dark));
  box-shadow:0 8px 18px -8px rgba(38,102,79,.5);border-radius:15px;
}
.home-page .brainkong-proof-head .eyebrow{color:var(--brand)}
.home-page .brainkong-proof-head strong{letter-spacing:-.01em;color:var(--bk-ink)}

/* the sentence-to-fix reads as raw text waiting to be corrected */
.home-page .brainkong-proof-sentence{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-weight:600;letter-spacing:0;color:#233026;
  background:#f4f7f5;border:1px solid #e4ece7;border-left:4px solid var(--bk-spark);
  border-radius:14px;
}
.home-page .brainkong-proof-sentence::after{
  content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.16em;
  background:var(--bk-spark);animation:bkCaret 1.05s steps(1) infinite;
}

.home-page .brainkong-proof-choice-label{color:var(--brand);letter-spacing:.12em}

/* answer choices — more depth + a result glyph */
.home-page .brainkong-proof-choice{
  position:relative;padding:11px 36px 11px 12px;
  border:1.5px solid #dbe4df;border-radius:14px;background:#fff;font-weight:600;
  box-shadow:0 1px 2px rgba(18,40,29,.04);
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.home-page .brainkong-proof-choice:hover:not(:disabled),
.home-page .brainkong-proof-choice:focus-visible:not(:disabled){
  transform:translateY(-2px);border-color:var(--brand);background:#f7fbf9;
  box-shadow:0 12px 22px -13px rgba(38,102,79,.4);
  outline:3px solid rgba(38,102,79,.10);outline-offset:1px;
}
.home-page .brainkong-proof-choice:active:not(:disabled){transform:translateY(0)}
.home-page .brainkong-choice-marker{
  flex:0 0 30px;width:30px;height:30px;border-radius:9px;
  background:#eef4f0;color:var(--brand);font-weight:950;
  box-shadow:inset 0 0 0 1px rgba(38,102,79,.07);
}
.home-page .brainkong-proof-choice.is-correct{
  border-color:#4f9877;background:#edf8f2;color:#164d38;
  box-shadow:0 8px 20px -12px rgba(38,114,85,.5);
}
.home-page .brainkong-proof-choice.is-correct .brainkong-choice-marker{background:#267255;color:#fff}
.home-page .brainkong-proof-choice.is-correct::after{
  content:"✓";position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:#267255;font-weight:900;font-size:15px;
}
.home-page .brainkong-proof-choice.is-wrong{border-color:#c97979;background:#fff3f3;color:#7f2929}
.home-page .brainkong-proof-choice.is-wrong .brainkong-choice-marker{background:#a84444;color:#fff}
.home-page .brainkong-proof-choice.is-wrong::after{
  content:"✕";position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:#a84444;font-weight:900;font-size:15px;
}

.home-page .brainkong-proof-feedback{font-weight:800}
.home-page .brainkong-proof-feedback.good{color:#166b4a}
.home-page .brainkong-proof-feedback.bad{color:#9a4a26}

/* verdict / result */
.home-page .brainkong-proof-result{
  border:1.5px solid #c2e0d3;border-radius:18px;
  background:linear-gradient(180deg,#f4fbf7 0%,#ffffff 70%);
  box-shadow:0 14px 34px -22px rgba(38,102,79,.55);
}
.home-page .brainkong-proof-verdict strong{color:var(--bk-ink)}
.home-page .brainkong-proof-next{
  background:#eaf6f1;border:1px solid #bcdccd;border-radius:14px;
}
.home-page .brainkong-proof-next:hover,
.home-page .brainkong-proof-next:focus-visible{
  border-color:var(--brand);background:#e3f2eb;transform:translateY(-1px);
}

/* buttons (home-scoped) */
.home-page .btn-primary{
  background:linear-gradient(160deg,var(--bk-brand-2),var(--brand-dark));border:none;
  box-shadow:0 10px 22px -11px rgba(38,102,79,.65);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.home-page .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 16px 28px -12px rgba(38,102,79,.6)}
.home-page .btn-secondary{
  background:#fff;border:1px solid #d7e0db;box-shadow:0 1px 2px rgba(18,40,29,.05);
  transition:transform .14s ease, border-color .14s ease, color .14s ease;
}
.home-page .btn-secondary:hover{transform:translateY(-1px);border-color:var(--brand);color:var(--brand)}

/* ---- motion ---- */
@keyframes bkRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bkUnderline{to{transform:scaleX(1)}}
@keyframes bkCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .home-page .brainkong-first-copy,
  .home-page .brainkong-proof-card{animation:none}
  .home-page .brainkong-first-tagline::after{animation:none;transform:scaleX(1)}
  .home-page .brainkong-proof-sentence::after{animation:none;opacity:1}
}