/* ============================================================
   CodebyCarter — playground.css
   Style Lab extras (Typography/Corners/Density/Surprise),
   global vibe toggle in nav, click sparks, hover-glitch titles,
   scroll-to-top rocket, triple-click logo wow, rainbow mode.
   ============================================================ */

/* ---------- Lab extras toolbar ---------- */
.lab-extras{
  margin-top:18px;display:flex;flex-direction:column;gap:14px;
  padding:20px 22px;border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.lab-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lab-row-k{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#9090A0;min-width:80px;
}
.lab-pills{display:flex;gap:6px;flex-wrap:wrap}
.lab-pill{
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  color:#F5F5F7;font-size:13px;font-weight:500;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  cursor:none;
}
.lab-pill:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.lab-pill.is-active{
  background:#F5F5F7;color:#0A0A0F;border-color:transparent;
  box-shadow:0 8px 22px rgba(236,72,153,.22);
}
.lab-surprise{
  margin-top:6px;align-self:flex-start;
  padding:13px 22px;border-radius:999px;
  background:linear-gradient(135deg,#A855F7,#EC4899 35%,#FB923C 65%,#06B6D4);
  background-size:200% 200%;animation:hue 6s linear infinite;
  color:#0A0A0F;font-weight:700;font-size:14px;letter-spacing:-.005em;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 14px 36px rgba(168,85,247,.40);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  cursor:none;
}
.lab-surprise:hover{transform:translateY(-2px) scale(1.04)}
.lab-surprise svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.lab-surprise:hover svg{transform:rotate(180deg)}

/* ---------- Lab mock: font variants ---------- */
.lab-mock[data-font="sans"]{font-family:'Space Grotesk',system-ui,sans-serif}
.lab-mock[data-font="sans"] .lab-mock-h{font-weight:600;letter-spacing:-.03em;text-transform:none}
.lab-mock[data-font="serif"]{font-family:'Instrument Serif',serif}
.lab-mock[data-font="serif"] .lab-mock-h{font-weight:400;letter-spacing:-.01em;text-transform:none}
.lab-mock[data-font="mono"]{font-family:'JetBrains Mono',monospace}
.lab-mock[data-font="mono"] .lab-mock-h{font-weight:500;letter-spacing:0;text-transform:uppercase}
.lab-mock[data-font="display"]{font-family:'Space Grotesk',sans-serif}
.lab-mock[data-font="display"] .lab-mock-h{font-weight:700;letter-spacing:-.04em;text-transform:uppercase;line-height:.9}

/* ---------- Lab mock: corner variants ---------- */
.lab-mock[data-radius="sharp"]{border-radius:0}
.lab-mock[data-radius="sharp"] .lab-mock-btn{border-radius:0}
.lab-mock[data-radius="sharp"] .lab-mock-grid > span{border-radius:0}
.lab-mock[data-radius="soft"]{border-radius:14px}
.lab-mock[data-radius="soft"] .lab-mock-btn{border-radius:10px}
.lab-mock[data-radius="soft"] .lab-mock-grid > span{border-radius:8px}
.lab-mock[data-radius="round"]{border-radius:32px}
.lab-mock[data-radius="round"] .lab-mock-btn{border-radius:24px}
.lab-mock[data-radius="round"] .lab-mock-grid > span{border-radius:20px}
.lab-mock[data-radius="pill"]{border-radius:64px}
.lab-mock[data-radius="pill"] .lab-mock-btn{border-radius:999px}
.lab-mock[data-radius="pill"] .lab-mock-grid > span{border-radius:48px}

/* ---------- Lab mock: density variants ---------- */
.lab-mock[data-density="tight"] .lab-mock-body{padding:20px}
.lab-mock[data-density="tight"] .lab-mock-h{font-size:clamp(20px,3vw,32px);margin-bottom:14px}
.lab-mock[data-density="tight"] .lab-mock-row{margin-bottom:14px;gap:10px}
.lab-mock[data-density="tight"] .lab-mock-grid{gap:5px}
.lab-mock[data-density="tight"] .lab-mock-grid > span{height:38px}
.lab-mock[data-density="tight"] .lab-mock-tag{margin-bottom:12px}

.lab-mock[data-density="comfy"] .lab-mock-body{padding:32px}
.lab-mock[data-density="comfy"] .lab-mock-h{font-size:clamp(28px,4vw,46px);margin-bottom:22px;line-height:1}
.lab-mock[data-density="comfy"] .lab-mock-grid > span{height:56px}

.lab-mock[data-density="airy"] .lab-mock-body{padding:48px}
.lab-mock[data-density="airy"] .lab-mock-h{font-size:clamp(34px,5vw,58px);margin-bottom:34px;line-height:1.05}
.lab-mock[data-density="airy"] .lab-mock-row{margin-bottom:34px;gap:18px}
.lab-mock[data-density="airy"] .lab-mock-grid{gap:14px}
.lab-mock[data-density="airy"] .lab-mock-grid > span{height:80px}
.lab-mock[data-density="airy"] .lab-mock-tag{margin-bottom:26px}

/* ---------- Vibe button (in nav) ---------- */
.vibe-btn{
  width:40px;height:40px;border-radius:999px;
  border:1px solid rgba(10,10,15,.08);
  background:rgba(255,255,255,.7);
  display:grid;place-items:center;margin-right:6px;
  cursor:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background .35s ease,border-color .35s ease;
}
.vibe-btn:hover{transform:rotate(60deg) scale(1.08);background:rgba(255,255,255,.95)}
.vibe-btn .vibe-dots{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
.vibe-btn .vibe-dots i{display:block;width:7px;height:7px;border-radius:50%;transition:background .5s ease}
.vibe-btn .vibe-dots i:nth-child(1){background:var(--c1)}
.vibe-btn .vibe-dots i:nth-child(2){background:var(--c2)}
.vibe-btn .vibe-dots i:nth-child(3){background:var(--c3)}
.vibe-btn .vibe-dots i:nth-child(4){background:var(--c4)}
body[data-stage="slate"] .vibe-btn,
body[data-stage="midnight"] .vibe-btn,
body[data-stage="neon"] .vibe-btn,
body[data-stage="chaos"] .vibe-btn,
body[data-stage="signature"] .vibe-btn{background:rgba(15,15,20,.6);border-color:rgba(255,255,255,.10)}
body[data-stage="slate"] .vibe-btn:hover,
body[data-stage="midnight"] .vibe-btn:hover,
body[data-stage="neon"] .vibe-btn:hover,
body[data-stage="chaos"] .vibe-btn:hover,
body[data-stage="signature"] .vibe-btn:hover{background:rgba(20,20,30,.85)}
@media (max-width:820px){.vibe-btn{margin-right:0}}

/* ---------- Global vibe overrides (site-wide) ---------- */
body[data-vibe="hot"]{
  --c1:#F43F5E;--c2:#FB923C;--c3:#FACC15;--c4:#EC4899;
  --grad:linear-gradient(135deg,var(--c1) 0%, var(--c2) 35%, var(--c3) 65%, var(--c4) 100%);
}
body[data-vibe="cool"]{
  --c1:#06B6D4;--c2:#3B82F6;--c3:#8B5CF6;--c4:#14B8A6;
  --grad:linear-gradient(135deg,var(--c1) 0%, var(--c2) 35%, var(--c3) 65%, var(--c4) 100%);
}
body[data-vibe="acid"]{
  --c1:#A3E635;--c2:#22D3EE;--c3:#FDE047;--c4:#EC4899;
  --grad:linear-gradient(135deg,var(--c1) 0%, var(--c2) 35%, var(--c3) 65%, var(--c4) 100%);
}
body[data-vibe="mono"]{
  --c1:#0A0A0F;--c2:#3A3A45;--c3:#8B8B95;--c4:#F5F5F7;
  --grad:linear-gradient(135deg,var(--c1) 0%, var(--c2) 35%, var(--c3) 65%, var(--c4) 100%);
}

/* ---------- Click sparks (page-wide) ---------- */
.click-spark{
  position:fixed;border-radius:50%;pointer-events:none;
  z-index:1000;width:8px;height:8px;
  transform:translate(-50%,-50%);
  box-shadow:0 0 16px currentColor;
  animation:clickSparkFly .75s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes clickSparkFly{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  12%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.2);opacity:0}
}

/* ---------- Hover glitch on section titles ---------- */
@keyframes titleGlitch{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2px,1px) skewX(.6deg)}
  40%{transform:translate(2px,-1px) skewX(-.6deg)}
  60%{transform:translate(-1px,2px)}
  80%{transform:translate(1px,-2px)}
}
.section-title{display:inline-block;cursor:default}
.section-title:hover{animation:titleGlitch .6s ease-out}

/* ---------- Scroll-to-top (onyx + champagne · luxury) ---------- */
.to-top{
  position:fixed;bottom:24px;left:24px;
  width:48px;height:48px;border-radius:50%;
  background:rgba(10,10,8,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#F5EFE0;display:grid;place-items:center;
  box-shadow:0 14px 32px -10px rgba(0,0,0,.55);
  opacity:0;transform:translateY(20px) scale(.85);pointer-events:none;
  transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease,box-shadow .25s ease;
  z-index:155;border:1px solid rgba(200,169,81,.30);
  cursor:none;
}
.to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.to-top:hover{
  transform:translateY(-4px) scale(1.06);
  background:linear-gradient(135deg, #FFE8A0 0%, #D4A437 100%);
  color:#0A0A08;border-color:transparent;
  box-shadow:0 22px 50px -14px rgba(212,164,55,.50);
}
.to-top svg{transition:transform .25s ease}
.to-top:hover svg{transform:translateY(-2px)}
.to-top.launching{animation:rocketLaunch .9s cubic-bezier(.65,0,.35,1) forwards}
/* On mobile the chapter rail moves to bottom — hide to-top (chrail "Hello" does the job) */
@media (max-width:900px){
  .to-top{display:none !important}
}
@keyframes rocketLaunch{
  0%{transform:translateY(0) scale(1)}
  18%{transform:translateY(8px) scale(1.1)}
  100%{transform:translateY(-110vh) scale(.4);opacity:0}
}

/* ---------- Triple-click logo: celebration ---------- */
.brand.is-celebrating{animation:logoWow .85s cubic-bezier(.16,1,.3,1)}
@keyframes logoWow{
  0%{transform:scale(1) rotate(0)}
  25%{transform:scale(1.35) rotate(-14deg)}
  55%{transform:scale(1.18) rotate(10deg)}
  100%{transform:scale(1) rotate(0)}
}
.brand .mark.is-celebrating{animation:markBurst .85s cubic-bezier(.16,1,.3,1)}
@keyframes markBurst{
  0%{box-shadow:0 6px 20px rgba(168,85,247,.35),inset 0 0 0 1px rgba(255,255,255,.2)}
  45%{box-shadow:0 0 60px 18px rgba(236,72,153,.7),0 0 120px 40px rgba(168,85,247,.4),inset 0 0 0 1px rgba(255,255,255,.5)}
  100%{box-shadow:0 6px 20px rgba(168,85,247,.35),inset 0 0 0 1px rgba(255,255,255,.2)}
}

/* ---------- Rainbow easter egg mode ---------- */
body.rainbow-mode{animation:rainbow 6s linear infinite}
@keyframes rainbow{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}