/* ============================================================
   THE DREAM STATE — Case Studies
   Results observatory + the interactive "Drag to Rebuild" console.
   ============================================================ */

/* ---------- Background: results observatory ---------- */
.cs-aura{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52vw 52vw at 84% 6%, rgba(87,21,110,.42), transparent 60%),
    radial-gradient(48vw 48vw at 10% 94%, rgba(39,0,48,.7), transparent 62%),
    radial-gradient(40vw 40vw at 60% 50%, rgba(212,175,55,.05), transparent 60%); }
.cs-ledger{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(212,175,55,.04) 0 1px, transparent 1px 88px); }
.cs-graph{ position:fixed; left:0; right:0; bottom:0; height:60vh; z-index:0; pointer-events:none; opacity:.6; }
.cs-graph svg{ width:100%; height:100%; }
.cs-graph .ln{ stroke:rgba(212,175,55,.28); stroke-width:2; fill:none;
  stroke-dasharray:2600; stroke-dashoffset:2600; animation:csDraw 7s ease forwards; }
.cs-graph .fillarea{ fill:url(#csFill); opacity:0; animation:csFade 7s ease forwards; }
@keyframes csDraw{ to{ stroke-dashoffset:0; } }
@keyframes csFade{ 60%{opacity:0} 100%{opacity:.5} }

/* ---------- Hero ---------- */
.cs-hero{ position:relative; padding:8rem 0 2rem; }
.cs-hero .eyebrow{ color:var(--gold); }
.cs-hero h1{ font-size:clamp(2.7rem,7vw,5.6rem); }

/* ---------- Live results board ---------- */
.results-board{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
@media(min-width:820px){ .results-board{ grid-template-columns:repeat(4,1fr); } }
.rb-stat{ position:relative; border:1px solid var(--line-2); border-radius:16px; padding:1.4rem 1.4rem 1.2rem;
  background:linear-gradient(165deg,var(--card),var(--ink-2)); overflow:hidden; }
.rb-stat::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background:linear-gradient(160deg,rgba(212,175,55,.3),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; }
.rb-stat .lbl{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); }
.rb-stat .big{ font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.8rem); color:#fff; line-height:1; margin:.5rem 0 .2rem; }
.rb-stat .sub{ font-size:.8rem; color:var(--mist-2); }
.rb-stat .spark{ position:absolute; right:12px; bottom:10px; width:54px; height:22px; opacity:.7; }

/* ---------- THE REBUILD CONSOLE ---------- */
.rebuild{ position:relative; border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:linear-gradient(165deg, #160f1f, #0a070e);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.85);
  transition:box-shadow .6s, border-color .6s; }
.rebuild.done{ border-color:var(--gold); box-shadow:0 50px 120px -40px rgba(212,175,55,.45); }
.rebuild .rb-top{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; border-bottom:1px solid var(--line-2); font-family:var(--mono);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-2); }
.rebuild .rb-top .live{ display:flex; align-items:center; gap:.5em; color:var(--gold-2); }
.rebuild .rb-top .live .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); animation:pulse 1.6s infinite; }
.rb-body{ display:grid; gap:0; }
@media(min-width:900px){ .rb-body{ grid-template-columns:1.5fr 1fr; } }
.rb-stage{ position:relative; padding:18px; min-height:300px; }
.rb-stage svg{ width:100%; height:auto; display:block; }
.rb-side{ padding:24px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; justify-content:center; }
@media(min-width:900px){ .rb-side{ border-top:0; border-left:1px solid var(--line-2); } }
.rb-counter{ font-family:var(--display); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--gold-3);
  letter-spacing:-.02em; }
.rb-counter .cur{ color:var(--gold); }
.rb-state{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist-2); margin-top:.7rem; display:flex; align-items:center; gap:.6em; }
.rb-state .pip{ width:8px; height:8px; border-radius:50%; background:#c0392b; box-shadow:0 0 8px rgba(192,57,43,.7); transition:.4s; }
.rebuild.done .rb-state .pip{ background:var(--gold); box-shadow:0 0 10px var(--gold); }
.rb-gauge{ margin-top:1.4rem; }
.rb-gauge .gl{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; color:var(--mist-2); text-transform:uppercase; margin-bottom:.5rem; }
.rb-gauge .bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; }
.rb-gauge .bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#c0392b,var(--gold-2) 60%,var(--gold-3)); border-radius:6px; }

/* track + handle */
.rb-control{ padding:8px 20px 24px; }
.rb-track{ position:relative; height:62px; border-radius:16px; cursor:grab;
  background:linear-gradient(90deg, rgba(192,57,43,.16), rgba(212,175,55,.16));
  border:1px solid var(--line-2); overflow:hidden; touch-action:none; user-select:none; }
.rb-track:active{ cursor:grabbing; }
.rb-track .rb-fill{ position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(212,175,55,.28), rgba(212,175,55,.12)); border-right:1px solid var(--gold); }
.rb-track .rb-tk{ position:absolute; top:50%; transform:translateY(-50%); font-family:var(--mono);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); pointer-events:none; }
.rb-track .rb-tk.l{ left:16px; } .rb-track .rb-tk.r{ right:16px; }
.rb-handle{ position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:46px; height:46px;
  border-radius:13px; background:linear-gradient(135deg,var(--gold-3),var(--gold-deep));
  border:1px solid var(--gold-3); box-shadow:0 8px 24px -6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; color:#1c0024; font-size:1.1rem; cursor:grab; z-index:3; }
.rb-handle:active{ cursor:grabbing; }
.rb-handle::after{ content:"⇆"; }
.rb-hint{ text-align:center; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2); margin-top:1rem; animation:hintPulse 2.4s ease-in-out infinite; }
.rebuild.touched .rb-hint{ animation:none; opacity:.4; }
@keyframes hintPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }
.rb-stamp{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-9deg) scale(.8);
  font-family:var(--display); font-style:italic; font-size:clamp(1.6rem,4vw,2.6rem); color:var(--gold-3);
  border:2px solid var(--gold-3); border-radius:12px; padding:.2em .6em; opacity:0; pointer-events:none;
  letter-spacing:.02em; transition:opacity .5s, transform .5s; text-transform:uppercase; }
.rebuild.done .rb-stamp{ opacity:.92; transform:translate(-50%,-50%) rotate(-9deg) scale(1); }

/* ---------- Secondary result tiles ---------- */
.case-tile{ border:1px solid var(--line-2); border-radius:18px; padding:var(--s-4); position:relative; overflow:hidden;
  background:linear-gradient(165deg,var(--card),var(--ink-2)); transition:transform .4s var(--ease),border-color .4s; }
.case-tile:hover{ transform:translateY(-6px); border-color:var(--line); }
.case-tile .cat{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.case-tile h4{ margin:.5rem 0 1rem; }
.case-tile .metric{ font-family:var(--display); font-size:2rem; color:var(--gold-2); line-height:1; }
.case-tile .metric small{ font-size:.9rem; color:var(--mist-2); font-family:var(--mono); }
.case-tile .ba{ margin-top:1.1rem; }
.case-tile .ba .row{ display:flex; align-items:center; gap:10px; margin-bottom:.5rem; }
.case-tile .ba .row .t{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--mist-2); width:46px; }
.case-tile .ba .bar{ flex:1; height:7px; border-radius:6px; background:rgba(255,255,255,.05); overflow:hidden; }
.case-tile .ba .bar i{ display:block; height:100%; width:0; border-radius:6px; transition:width 1.3s var(--ease); }
.case-tile .ba .before i{ background:#7a3d3a; }
.case-tile .ba .after i{ background:linear-gradient(90deg,var(--gold),var(--gold-2)); }
.case-tile.in .ba .before i{ width:var(--bw,30%); }
.case-tile.in .ba .after i{ width:var(--aw,82%); }

/* reveal */
.csr{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.csr.in{ opacity:1; transform:none; }
.csr.d1{ transition-delay:.1s } .csr.d2{ transition-delay:.2s } .csr.d3{ transition-delay:.3s }

@media (prefers-reduced-motion: reduce){
  .cs-graph .ln,.cs-graph .fillarea{ animation:none; stroke-dashoffset:0; opacity:.4; }
  .csr{ opacity:1; transform:none; }
}