/* scanandfly — motion concept · every window is alive */

:root{
  --bg:#07090F;
  --panel:#0C1220;
  --panel-2:#111A2B;
  --line:rgba(151,170,204,.18);
  --line-strong:rgba(151,170,204,.3);
  --text:#EDE7DA;
  --text-2:#AEB4C0;
  --muted:#8E99AC;
  --faint:#5C6778;
  --yes:#53C983;
  --no:#DE6458;
  --amber:#EDAA43;
  --amber-line:rgba(237,170,67,.5);
  --disp:'Bricolage Grotesque',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --serif:'Source Serif 4',serif;
  --mx:50vw; --my:50vh;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--disp);overflow-x:hidden}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}

/* cursor spotlight */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(640px circle at var(--mx) var(--my),rgba(237,170,67,.055),transparent 60%)}

/* ---------- ticker ---------- */
.ticker{background:var(--panel);border-bottom:1px solid var(--line);overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:tick 36s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;height:44px;font:500 11px var(--mono);white-space:nowrap}
.ticker__set b{color:var(--amber);font-weight:700;letter-spacing:.18em;padding:0 22px;border-right:1px solid var(--line)}
.ticker__set>span{display:flex;gap:8px;align-items:center;padding:0 22px;border-right:1px solid rgba(151,170,204,.1)}
.ticker__set i{font-style:normal;color:var(--muted)}
.ticker__set em{font-style:normal;color:var(--yes);font-weight:700}
.ticker__set u{text-decoration:none;color:var(--faint)}
.ticker__set .note{color:var(--faint);letter-spacing:.1em}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- grid of windows ---------- */
.grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:16px;max-width:1600px;margin:0 auto}
.win{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:28px;
  transform-style:preserve-3d;will-change:transform;transition:border-color .3s}
.win:hover{border-color:var(--line-strong)}
.win--masthead{grid-column:1/6;display:flex;flex-direction:column;gap:22px;justify-content:space-between;min-height:340px}
.win--full{grid-column:1/13;position:relative;overflow:hidden;min-height:260px;flex-direction:row;align-items:flex-end}
.masthead__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px}
.win--theme{display:flex;flex-direction:column}
.w6{grid-column:span 6}
.w4{grid-column:span 4}
@media(max-width:1060px){.w6,.w4{grid-column:1/13}}
.win--board{grid-column:6/13;display:flex;flex-direction:column;gap:4px}
.win--hero{grid-column:1/8;display:flex;flex-direction:column;gap:20px;padding:36px}
.win--tool{grid-column:8/13;position:relative;overflow:hidden;background:var(--amber);border-color:var(--amber);color:#0C1220;display:flex;flex-direction:column;gap:14px}
.win--lane{grid-column:span 4;display:flex;flex-direction:column}
.win--archive{grid-column:1/13;display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--panel-2)}
.win--footer{grid-column:1/13;display:flex;justify-content:space-between;gap:32px;font:400 11px/1.7 var(--mono);color:var(--faint);border-style:dashed}
.win--footer p{margin:0}
.win--footer .legal{max-width:60ch;text-align:right}
@media(max-width:1060px){
  .win--masthead,.win--board,.win--hero,.win--tool{grid-column:1/13}
  .win--lane{grid-column:span 12}
}
@media(max-width:640px){
  .grid{gap:10px;padding:10px}
  .win{padding:18px}
  .win--footer{flex-direction:column;gap:8px}
  .win--footer .legal{text-align:left}
  .win--archive{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ---------- masthead ---------- */
.logo{margin:0;font:800 clamp(56px,6vw,92px)/0.88 var(--disp);letter-spacing:-.03em}
.logo b{color:var(--amber)}
.tagline{margin:0;font:500 11px/1.9 var(--mono);letter-spacing:.15em;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:10px}
.nav a{font:600 11px var(--mono);letter-spacing:.1em;white-space:nowrap;border:1px solid var(--line-strong);border-radius:999px;padding:9px 16px;transition:border-color .25s,transform .25s}
.nav a:hover{border-color:var(--amber);transform:translateY(-2px)}

/* ---------- shared bits ---------- */
.label{font:700 10px var(--mono);letter-spacing:.18em;color:var(--amber)}
.label--dark{color:#0C1220}
.stamp{display:inline-flex;white-space:nowrap;font:600 9.5px var(--mono);letter-spacing:.1em;color:var(--amber);border:1px solid var(--amber-line);border-radius:2px;padding:3px 7px;transform:rotate(-1.2deg)}
.stamp--dark{color:#0C1220;border-color:rgba(12,18,32,.5)}
.chip--brand{font:700 10px var(--mono);letter-spacing:.16em;color:var(--amber);border:1px solid var(--amber-line);border-radius:2px;padding:4px 9px}
.dim{font:500 10px var(--mono);letter-spacing:.12em;color:var(--faint)}
.kicker{display:flex;gap:12px;align-items:center}
.win__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}

/* YES/NO bar — CSS entrance fill (no JS gating) */
.bar{display:flex;gap:3px;height:8px;flex:none;width:130px}
.bar .yes{width:var(--w);background:var(--yes);border-radius:2px;transform-origin:left;animation:fill .9s cubic-bezier(.2,.7,.2,1) both}
.bar .no{flex:1;background:var(--no);opacity:.82;border-radius:2px;transform-origin:right;animation:fill .9s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar--lg{width:100%;height:18px}
.bar-labels{display:flex;justify-content:space-between;font:700 22px var(--mono)}
.yesc{color:var(--yes)}.noc{color:var(--no)}

/* ---------- board window ---------- */
.board-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 2px;border-bottom:1px solid rgba(151,170,204,.1)}
.board-row:last-child{border-bottom:none}
.board-row .q{font:500 13px var(--mono);color:var(--muted);transition:color .2s}
.board-row:hover .q{color:var(--text)}
.board-row__bar{display:flex;align-items:center;gap:12px;flex:none}
.board-row__bar em{font:700 12px var(--mono);font-style:normal;color:var(--yes);min-width:64px;text-align:right}
@media(max-width:640px){.board-row{flex-direction:column;align-items:flex-start;gap:8px}.board-row__bar em{text-align:left}}

/* ---------- today's bet (theme windows) ---------- */
.today{display:flex;flex-direction:column;gap:12px;padding:18px 2px;border-bottom:1px solid rgba(151,170,204,.1)}
.today__row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.today__title{font:800 clamp(22px,2vw,30px)/1.1 var(--disp);letter-spacing:-.015em;color:var(--text);text-wrap:balance}
.today:hover .today__title{color:var(--amber)}
.today .q{font:500 12px/1.5 var(--mono);color:var(--muted)}
.today__bar{display:flex;flex-direction:column;gap:8px}
.today__bar .bar-labels{font-size:17px}
.today__bar .bar--lg{height:14px}

/* ---------- hero ---------- */
.hero__title{margin:0;font:800 clamp(34px,3.6vw,54px)/1.02 var(--disp);letter-spacing:-.02em;text-wrap:balance}
.hero__dek{margin:0;font:400 18px/1.55 var(--serif);color:var(--text-2);max-width:56ch;text-wrap:pretty}
.hero__market{margin-top:auto;display:flex;flex-direction:column;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:20px}
.hero__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--faint);flex-wrap:wrap}
.bend{display:inline-block;color:var(--amber)}

/* ---------- tool window (amber) ---------- */
.win--tool a{color:#0C1220}
.tool__name{margin:6px 0 0;font:800 clamp(52px,5.4vw,84px)/0.9 var(--disp);letter-spacing:-.02em;position:relative;z-index:2}
.tool__verdict{margin:0;font:italic 500 18px/1.5 var(--serif);max-width:34ch;position:relative;z-index:2}
.btn-dark{position:relative;z-index:2;align-self:flex-start;margin-top:auto;font:700 12px var(--mono);letter-spacing:.1em;color:var(--amber);background:#0C1220;border-radius:4px;padding:14px 24px}
.btn-dark:hover{color:var(--amber)}

/* the blob: pure CSS, morphs + leans toward the cursor (JS sets --bx/--by) */
.blob{position:absolute;right:-40px;bottom:-60px;width:260px;height:260px;z-index:1;pointer-events:none;opacity:.9;
  background:conic-gradient(from 210deg,#53C983,#8FD0FF,#DE6458,#7B8CDE,#EDAA43,#53C983);
  border-radius:42% 58% 61% 39%/45% 48% 52% 55%;
  filter:blur(1px) saturate(1.5);
  box-shadow:inset -18px -24px 50px rgba(255,255,255,.55),inset 14px 18px 40px rgba(12,18,32,.35);
  animation:morph 9s ease-in-out infinite alternate,spin 26s linear infinite;
  transform:translate(var(--bx,0),var(--by,0))}
@keyframes morph{
  0%{border-radius:42% 58% 61% 39%/45% 48% 52% 55%}
  33%{border-radius:58% 42% 39% 61%/52% 60% 40% 48%}
  66%{border-radius:39% 61% 55% 45%/60% 38% 62% 40%}
  100%{border-radius:61% 39% 44% 56%/38% 55% 45% 62%}}
@keyframes spin{to{rotate:360deg}}

/* ---------- lanes ---------- */
.lane__head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--text);padding-bottom:12px;margin-bottom:6px}
.lane__head .num{font:700 12px var(--mono);color:var(--amber)}
.lane__head h3{margin:0;font:800 19px var(--disp);letter-spacing:.01em}
.lane__head a{margin-left:auto;font:600 10.5px var(--mono);letter-spacing:.1em;color:var(--muted)}
.story{display:flex;flex-direction:column;gap:8px;padding:16px 2px;border-bottom:1px solid rgba(151,170,204,.1);transition:transform .25s}
.story:last-child{border-bottom:none}
.story:hover{transform:translateX(6px)}
.story .q{font:500 10.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted)}
.story .t{font:700 17px/1.25 var(--disp);letter-spacing:-.01em;color:var(--text)}
.story:hover .t{color:var(--amber)}
.story .m{display:flex;align-items:center;gap:10px}
.story .m .bar{width:110px;height:6px}
.story .m em{font:700 10.5px var(--mono);font-style:normal;color:var(--yes)}
.story .m u{text-decoration:none;font:500 9.5px var(--mono);color:var(--faint);margin-left:auto}

/* ---------- archive + buttons ---------- */
.archive__title{margin:0;font:800 clamp(28px,3vw,44px)/1 var(--disp)}
.archive__sub{margin:10px 0 0;font:400 12px var(--mono);color:var(--faint)}
.btn{display:inline-block;white-space:nowrap;font:700 12px var(--mono);letter-spacing:.1em;border:1px solid var(--line-strong);border-radius:4px;padding:14px 24px}
.btn:hover{border-color:var(--amber)}
.magnet{transition:transform .2s ease-out;will-change:transform}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .blob{animation:none}
  .bar .yes,.bar .no{animation:none}
  .win,.magnet,.story,.nav a{transition:none!important;transform:none!important}
  body::before{display:none}
}