/* ============================================================
   BrainO — THREE WORLDS FOR ONE LIFE
   One theme engine, three worlds. Switch via html[data-world].
   Default (no attribute) = Goldfields, identical to the live look,
   so this file is safe to load everywhere with zero regression.
   ============================================================ */

/* ---------- shared cross-world tokens ---------- */
:root{
  --w-ease:cubic-bezier(.2,.7,.2,1);
}

/* ============ WORLD 1 — GOLDFIELDS NOCTURNE (default) ============ */
html[data-world="goldfields"]{
  --gold:#f2b544; --gold-hi:#f9d27a; --gold-lo:#b9821f;
  --ink:#2a0708; --text:#f4e6cf; --muted:#c39a86;
  --border:rgba(242,181,68,.24); --border-soft:rgba(242,181,68,.14);
  --line:rgba(242,181,68,.24); --line-soft:rgba(242,181,68,.14);
  --box-bg:rgba(0,0,0,.22); --box-bg-soft:rgba(0,0,0,.14); --card-bg:rgba(30,6,7,.72);
  --field-bg:rgba(0,0,0,.30); --nav-bg:rgba(42,7,8,.9); --panel-bg:rgba(30,6,7,.97);
  --accent:#e2571f; --secondary:#e2a13f; --good:#6fcf97; --warn:#e2571f; --info:#d9b45a;
}
html[data-world="goldfields"] body{
  background:
    radial-gradient(ellipse 950px 560px at 50% -8%, #8a1a1e 0%, rgba(138,26,30,0) 60%),
    radial-gradient(ellipse 700px 500px at 88% 12%, #6d1216 0%, rgba(109,18,22,0) 55%),
    linear-gradient(180deg, #430b0e 0%, #360a0c 55%, #2c080a 100%);
  background-attachment:fixed;
}

/* ============ WORLD 2 — WORKSHOP BLUEPRINT ============ */
html[data-world="blueprint"]{
  --gold:#ffb23e; --gold-hi:#ffc76e; --gold-lo:#b97d1f;
  --ink:#10161c; --text:#d7e2ec; --muted:#8298a8;
  --border:rgba(127,151,171,.34); --border-soft:rgba(127,151,171,.16);
  --line:rgba(127,151,171,.34); --line-soft:rgba(127,151,171,.16);
  --box-bg:#131b23; --box-bg-soft:#0f161d; --card-bg:#131b23;
  --field-bg:#0d141a; --nav-bg:rgba(16,22,28,.94); --panel-bg:#131b23;
  --accent:#ff7a1a; --secondary:#7f97ab; --good:#5fcf8a; --warn:#ff7a1a; --info:#7f97ab;
}
html[data-world="blueprint"] body{
  background:
    linear-gradient(rgba(120,170,200,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,200,.06) 1px,transparent 1px),
    linear-gradient(180deg,#0e141a 0%,#0b1015 100%);
  background-size:26px 26px,26px 26px,100% 100%;
  background-attachment:fixed;
}
/* machined controls */
html[data-world="blueprint"] .button,
html[data-world="blueprint"] .btn.p,
html[data-world="blueprint"] .addmore{
  border-radius:4px;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
html[data-world="blueprint"] .topbar,
html[data-world="blueprint"] .dash-sidebar{ backdrop-filter:none; }
html[data-world="blueprint"] .card,
html[data-world="blueprint"] .dash-card,
html[data-world="blueprint"] .product-card,
html[data-world="blueprint"] .panel,
html[data-world="blueprint"] .pick,
html[data-world="blueprint"] .m-card{
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%);
  background-image:
    linear-gradient(rgba(120,170,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,200,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
html[data-world="blueprint"] h1,
html[data-world="blueprint"] h2,
html[data-world="blueprint"] .hero h1,
html[data-world="blueprint"] .m-h{ letter-spacing:.005em; }
/* recolour the inline-page gradient buttons for this world */
html[data-world="blueprint"] .btn.p,
html[data-world="blueprint"] .addmore{ background:var(--gold); color:var(--ink); }

/* ============ WORLD 3 — JACK'S DREAM ============ */
html[data-world="dream"]{
  --gold:#f4c95d; --gold-hi:#ffe08a; --gold-lo:#c99a2e;
  --ink:#2a0f2a; --text:#efe8ff; --muted:#b6a9d8;
  --border:rgba(55,224,196,.34); --border-soft:rgba(55,224,196,.16);
  --line:rgba(55,224,196,.34); --line-soft:rgba(55,224,196,.16);
  --box-bg:rgba(32,19,64,.58); --box-bg-soft:rgba(32,19,64,.4); --card-bg:rgba(30,18,58,.66);
  --field-bg:rgba(10,6,26,.5); --nav-bg:rgba(24,15,50,.9); --panel-bg:rgba(26,15,52,.97);
  --accent:#ff5da2; --secondary:#37e0c4; --good:#5fe6cf; --warn:#ff5da2; --info:#37e0c4;
}
html[data-world="dream"] body{
  background:
    radial-gradient(1.4px 1.4px at 18% 22%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.2px 1.2px at 68% 14%,rgba(199,245,236,.8),transparent),
    radial-gradient(1.5px 1.5px at 42% 52%,rgba(255,240,180,.7),transparent),
    radial-gradient(1.2px 1.2px at 85% 44%,rgba(255,182,224,.7),transparent),
    radial-gradient(1.3px 1.3px at 30% 78%,rgba(255,255,255,.7),transparent),
    radial-gradient(900px 500px at 20% -6%,#3a1a5e 0%,rgba(58,26,94,0) 58%),
    radial-gradient(700px 460px at 90% 10%,#123f52 0%,rgba(18,63,82,0) 55%),
    linear-gradient(180deg,#180f33 0%,#140c2b 60%,#0f0922 100%);
  background-attachment:fixed;
}
html[data-world="dream"] .button,
html[data-world="dream"] .btn.p,
html[data-world="dream"] .addmore{
  border-radius:999px;
  box-shadow:0 0 24px rgba(255,93,162,.4),0 8px 20px rgba(0,0,0,.3);
}
html[data-world="dream"] .card,
html[data-world="dream"] .dash-card,
html[data-world="dream"] .product-card,
html[data-world="dream"] .panel,
html[data-world="dream"] .pick,
html[data-world="dream"] .m-card{
  border-radius:20px 20px 22px 18px;
  box-shadow:0 0 30px rgba(90,50,160,.22);
}
html[data-world="dream"] .hero h1,
html[data-world="dream"] .m-h{ text-shadow:0 0 24px rgba(244,201,93,.28); }
html[data-world="dream"] .btn.p,
html[data-world="dream"] .addmore{ background:linear-gradient(120deg,var(--gold),var(--accent)); color:var(--ink); }

/* ============================================================
   RULE OF 3 — Truth · Terms · Proof  (network-standard trust band)
   ============================================================ */
.rule3{
  --r3-gap:14px;
  margin:34px auto; max-width:1000px; padding:0 20px;
}
.rule3 .r3-head{ text-align:center; margin-bottom:16px; }
.rule3 .r3-kicker{ font:800 .7rem/1 ui-monospace,"SFMono-Regular",monospace; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.rule3 .r3-title{ font-size:clamp(1.3rem,3vw,1.8rem); margin:8px 0 0; color:var(--text); }
.rule3 .r3-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--r3-gap); }
@media(max-width:680px){ .rule3 .r3-grid{ grid-template-columns:1fr; } }
.rule3 .r3-cell{
  position:relative; padding:20px 18px; border-radius:14px;
  background:var(--box-bg); border:1px solid var(--border);
  overflow:hidden;
}
.rule3 .r3-cell::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.8; }
.rule3 .r3-no{ font:800 .72rem/1 ui-monospace,monospace; letter-spacing:.2em; color:var(--gold-lo); }
.rule3 .r3-word{ font-size:1.25rem; font-weight:800; margin:8px 0 4px; color:var(--gold); letter-spacing:.01em; }
.rule3 .r3-cell p{ font-size:.9rem; color:var(--muted); margin:0; line-height:1.5; }
html[data-world="blueprint"] .rule3 .r3-cell{ clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%); }
html[data-world="dream"] .rule3 .r3-cell{ border-radius:18px 18px 20px 16px; box-shadow:0 0 24px rgba(90,50,160,.2); }

/* ============================================================
   THREE WORLDS band — on-page world picker (home page)
   ============================================================ */
.worlds3{ max-width:1000px; margin:34px auto; padding:0 20px; }
.worlds3 .w3-head{ text-align:center; margin-bottom:14px; }
.worlds3 .w3-kicker{ font:800 .7rem/1 ui-monospace,monospace; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.worlds3 .w3-title{ font-size:clamp(1.5rem,3.4vw,2.1rem); margin:8px 0 6px; color:var(--text); }
.worlds3 .w3-sub{ color:var(--muted); max-width:54ch; margin:0 auto; font-size:.95rem; }
.worlds3 .w3-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
@media(max-width:680px){ .worlds3 .w3-grid{ grid-template-columns:1fr; } }
.worlds3 .w3-card{ cursor:pointer; text-align:left; padding:0; border-radius:16px; overflow:hidden; font:inherit;
  border:1px solid var(--border); background:var(--box-bg); color:var(--text);
  transition:transform .15s var(--w-ease),box-shadow .2s,border-color .2s; }
.worlds3 .w3-card:hover{ transform:translateY(-3px); }
.worlds3 .w3-card.active{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset; }
.worlds3 .w3-prev{ height:84px; }
.worlds3 .w3-prev.gold{ background:radial-gradient(120px 80px at 28% 18%,#8a1a1e,transparent),linear-gradient(135deg,#2c080a,#f2b544); }
.worlds3 .w3-prev.blue{ background:linear-gradient(rgba(120,170,200,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,200,.28) 1px,transparent 1px),linear-gradient(135deg,#0e141a,#ffb23e); background-size:12px 12px,12px 12px,100% 100%; }
.worlds3 .w3-prev.drm{ background:radial-gradient(1px 1px at 30% 40%,#fff,transparent),radial-gradient(1px 1px at 72% 28%,#c7f5ec,transparent),linear-gradient(135deg,#180f33,#37e0c4 55%,#ff5da2); }
.worlds3 .w3-meta{ padding:12px 14px; }
.worlds3 .w3-name{ font-weight:800; font-size:1rem; }
.worlds3 .w3-note{ color:var(--muted); font-size:.82rem; margin-top:2px; }
.worlds3 .w3-pick{ display:inline-block; margin-top:9px; font:800 .72rem/1 ui-sans-serif; letter-spacing:.02em; color:var(--gold); }
.worlds3 .w3-card.active .w3-pick::after{ content:" ✓ showing now"; color:var(--good); }

/* ============================================================
   POP-OUTS — scroll reveal + attention pulse (motion-safe)
   ============================================================ */
[data-pop]{ opacity:0; transform:translateY(18px) scale(.985); transition:opacity .6s var(--w-ease),transform .6s var(--w-ease); will-change:opacity,transform; }
[data-pop].pop-in{ opacity:1; transform:none; }
[data-pop="left"]{ transform:translateX(-22px); }
[data-pop="right"]{ transform:translateX(22px); }
[data-pop="zoom"]{ transform:scale(.9); }

.pop-badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  font:800 .82rem/1 ui-sans-serif; color:var(--ink); background:var(--gold);
  box-shadow:0 0 0 0 rgba(242,181,68,.5); animation:popPulse 2.6s var(--w-ease) infinite; }
html[data-world="dream"] .pop-badge{ background:linear-gradient(120deg,var(--gold),var(--accent)); color:#2a0f2a; }
@keyframes popPulse{ 0%{box-shadow:0 0 0 0 rgba(242,181,68,.45)} 70%{box-shadow:0 0 0 12px rgba(242,181,68,0)} 100%{box-shadow:0 0 0 0 rgba(242,181,68,0)} }

@media (prefers-reduced-motion:reduce){
  [data-pop]{ opacity:1 !important; transform:none !important; transition:none; }
  .pop-badge{ animation:none; }
}

/* ============================================================
   WORLD SWITCHER — floating control (built by world.js)
   ============================================================ */
.worldsw{ position:fixed; right:16px; bottom:16px; z-index:9000; font-family:ui-sans-serif,system-ui,sans-serif; }
.worldsw-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 15px; border-radius:999px; border:1px solid var(--border);
  background:var(--panel-bg); color:var(--text); font:800 .82rem/1 inherit;
  box-shadow:0 10px 30px rgba(0,0,0,.4); backdrop-filter:blur(8px); }
.worldsw-toggle .dot{ width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.worldsw-menu{ position:absolute; right:0; bottom:calc(100% + 10px); width:230px;
  background:var(--panel-bg); border:1px solid var(--border); border-radius:16px; padding:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.55); display:none; }
.worldsw.open .worldsw-menu{ display:block; }
.worldsw-menu .wh{ font:800 .64rem/1 ui-monospace,monospace; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); padding:8px 10px 6px; }
.worldsw-opt{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  padding:10px; border-radius:11px; border:1px solid transparent; background:transparent; color:var(--text); font:700 .88rem/1.2 inherit; }
.worldsw-opt:hover{ background:var(--box-bg); }
.worldsw-opt.active{ border-color:var(--border); background:var(--box-bg); }
.worldsw-opt .sw{ width:26px; height:26px; border-radius:8px; flex-shrink:0; border:1px solid rgba(255,255,255,.2); }
.worldsw-opt small{ display:block; color:var(--muted); font-weight:600; font-size:.74rem; margin-top:2px; }
.worldsw-opt .sw.gold{ background:linear-gradient(135deg,#4a1114,#f2b544); }
.worldsw-opt .sw.blue{ background:linear-gradient(135deg,#0e141a,#ffb23e); }
.worldsw-opt .sw.drm{ background:linear-gradient(135deg,#180f33,#37e0c4 60%,#ff5da2); }