/* =========================================================================
   Rooky Inc. — site stylesheet
   Dark-first "Operator" aesthetic · Signal palette · light/dark via [data-theme]
   ========================================================================= */

/* ---------- tokens ---------- */
:root{
  --sans:'Geist','SF Pro Text',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --disp:'Space Grotesk',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --blue:#60A5FA;
  --blue-deep:#3B82F6;
  --cyan:#22D3EE;
  --violet:#8B5CF6;
  --up:#10B981;
  --up-soft:rgba(16,185,129,0.14);
  --down:#F4717F;
  --down-soft:rgba(244,113,127,0.14);
  --warn:#F5B544;

  --radius:18px;
  --radius-sm:11px;
  --maxw:1200px;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

/* ---------- dark (default) ---------- */
:root,[data-theme="dark"]{
  --bg:#0B0F14;
  --bg-2:#0E131A;
  --panel:rgba(255,255,255,0.04);
  --panel-2:rgba(255,255,255,0.025);
  --panel-solid:#121821;
  --hair:rgba(255,255,255,0.10);
  --hair-soft:rgba(255,255,255,0.06);
  --ink:#EAEEF5;
  --ink-2:#AEB7C6;
  --ink-3:#7A8496;
  --ink-4:#576070;
  --glow-1:rgba(96,165,250,0.16);
  --glow-2:rgba(139,92,246,0.15);
  --grid-line:rgba(255,255,255,0.035);
  --btn-ink:#0B0F14;
  --btn-bg:#EAEEF5;
  --shadow-card:0 30px 80px -50px rgba(0,0,0,0.9);
  --code-bg:rgba(0,0,0,0.32);
}

/* ---------- light ---------- */
[data-theme="light"]{
  --bg:#FAFAF8;
  --bg-2:#F2F2EF;
  --panel:#FFFFFF;
  --panel-2:#FBFBF9;
  --panel-solid:#FFFFFF;
  --hair:rgba(15,20,30,0.10);
  --hair-soft:rgba(15,20,30,0.06);
  --ink:#13161B;
  --ink-2:#494E58;
  --ink-3:#6C727E;
  --ink-4:#9aa0ab;
  --blue:#2D6BF0;
  --blue-deep:#2D6BF0;
  --cyan:#0E9BB8;
  --violet:#7C4DE0;
  --up:#0F9D63;
  --up-soft:rgba(15,157,99,0.12);
  --down:#D6485A;
  --down-soft:rgba(214,72,90,0.10);
  --glow-1:rgba(45,107,240,0.08);
  --glow-2:rgba(124,77,224,0.07);
  --grid-line:rgba(15,20,30,0.045);
  --btn-ink:#FAFAF8;
  --btn-bg:#13161B;
  --shadow-card:0 30px 70px -45px rgba(20,30,60,0.28);
  --code-bg:rgba(15,20,30,0.04);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
::selection{background:rgba(96,165,250,0.28);color:var(--ink)}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px}
@media(max-width:680px){.wrap{padding:0 22px}}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-3);display:inline-flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.5}
.eyebrow.center{justify-content:center}
.eyebrow.accent{color:var(--cyan)}

h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-0.03em;line-height:1.04}
.sec-title{font-size:clamp(30px,4.2vw,46px);letter-spacing:-0.035em}
.sec-lede{font-size:clamp(16px,2vw,18.5px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- section rhythm ---------- */
.section{padding:clamp(70px,10vw,128px) 0;position:relative}
.section-head{margin-bottom:clamp(36px,5vw,60px)}
.section-head .sec-title{margin:16px 0 18px;max-width:18ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:600;
  padding:14px 22px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));color:#fff;
  box-shadow:0 10px 30px -10px rgba(59,130,246,0.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(59,130,246,0.7)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.btn-solid{background:var(--btn-bg);color:var(--btn-ink)}
.btn-solid:hover{transform:translateY(-2px)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- glass panel primitive ---------- */
.panel{
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--radius);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow-card);
}
[data-theme="light"] .panel{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---------- reveal-on-scroll ----------
   Entrance is transform-only so content is ALWAYS opacity 1 (never blank,
   even if an environment suppresses/freezes animations). Real browsers get
   the subtle slide-up; everything else just shows the resting state. */
.reveal{}
.js .reveal{opacity:1}
.js .reveal.in{animation:revealIn .6s var(--ease) both}
@keyframes revealIn{from{transform:translateY(18px)}to{transform:none}}
.js .reveal.d1{animation-delay:.06s}.js .reveal.d2{animation-delay:.12s}
.js .reveal.d3{animation-delay:.18s}.js .reveal.d4{animation-delay:.24s}.js .reveal.d5{animation-delay:.30s}
@media(prefers-reduced-motion:reduce){
  .js .reveal.in{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- background fields ---------- */
.field-glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 50% at 80% 6%,var(--glow-1),transparent 62%),
    radial-gradient(55% 55% at 8% 96%,var(--glow-2),transparent 60%);
}
.field-grid{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(130% 100% at 50% 0%,#000 38%,transparent 84%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000 38%,transparent 84%);
}