/* ─────────────────────────────────────────────
   Shared chrome: light theme + controls pill
   ───────────────────────────────────────────── */

/* Light theme overrides — applied when html[data-theme="light"] */
html[data-theme="light"]{
  --bg:        oklch(0.972 0.008 78);
  --bg-2:      oklch(0.948 0.010 78);
  --bg-3:      oklch(0.918 0.012 78);
  --line:      oklch(0.78  0.014 78);
  --line-soft: oklch(0.88  0.010 78);
  --fg:        oklch(0.18  0.012 70);
  --fg-2:      oklch(0.38  0.012 75);
  --muted:     oklch(0.54  0.012 75);
  --accent:    oklch(0.68  0.16  62);   /* deeper amber for contrast on white */
  --accent-2:  oklch(0.62  0.14  165);
  --accent-3:  oklch(0.60  0.20  22);
  --accent-4:  oklch(0.56  0.20  280);
  --accent-5:  oklch(0.58  0.18  240);
}
/* light theme: reduce noise/grain & change ambient halos */
html[data-theme="light"] body::before{
  background-image:
    radial-gradient(1200px 800px at 20% -10%, oklch(0.80 0.14 70 / 0.20), transparent 60%),
    radial-gradient(1000px 700px at 110% 30%, oklch(0.78 0.14 165 / 0.10), transparent 60%);
}
html[data-theme="light"] body::after{ opacity: .035; mix-blend-mode: multiply; }

/* hero h1 gradient flip in light mode */
html[data-theme="light"] .hero h1{
  background: linear-gradient(180deg,
    oklch(0.18 0.012 70),
    oklch(0.28 0.04 65) 60%,
    oklch(0.50 0.16 60));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* clay scene spotlight is too punchy in light mode; soften it */
html[data-theme="light"] .scene-wrap::before{
  background:
    radial-gradient(ellipse at 50% 50%,
      oklch(0.80 0.12 60 / 0.22) 0%,
      oklch(0.70 0.10 50 / 0.10) 30%,
      transparent 60%);
}
html[data-theme="light"] .scene-wrap::after{
  background: radial-gradient(ellipse at 50% 50%, oklch(0.55 0.18 320 / 0.14), transparent 60%);
}

/* glass surfaces: lighter rims in light mode */
html[data-theme="light"] .nav,
html[data-theme="light"] .brand,
html[data-theme="light"] .controls{
  background:
    linear-gradient(180deg,
      color-mix(in oklch, white 50%, transparent),
      color-mix(in oklch, white 18%, transparent)),
    color-mix(in oklch, var(--bg) 40%, transparent);
  border: 1px solid color-mix(in oklch, black 8%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 60%, transparent),
    inset 0 -1px 0 color-mix(in oklch, black 5%, transparent),
    0 8px 24px -10px rgba(0,0,0,0.18),
    0 0 0 1px color-mix(in oklch, black 4%, transparent);
}
html[data-theme="light"] .nav a.active{
  background:
    linear-gradient(180deg,
      color-mix(in oklch, white 80%, transparent),
      color-mix(in oklch, white 40%, transparent)),
    color-mix(in oklch, var(--bg) 60%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 90%, transparent),
    inset 0 -1px 0 color-mix(in oklch, black 10%, transparent),
    0 4px 12px -4px rgba(0,0,0,0.15);
}

/* light mode: footer / link-row borders */
html[data-theme="light"] footer .dot{ box-shadow: 0 0 8px var(--accent-2); }

/* ──────────────────────────────────────────
   Blokello CTA — always readable, both themes
   ────────────────────────────────────────── */
.nav a.cta{
  /* override the previous accent-gold gradient */
  color: #fff !important;
  background:
    linear-gradient(180deg,
      oklch(0.70 0.20 50),
      oklch(0.54 0.22 38)) !important;
  box-shadow:
    inset 0 1px 0 oklch(0.92 0.10 60 / 0.55),
    inset 0 -1px 0 oklch(0.30 0.16 30 / 0.55),
    0 6px 20px -6px oklch(0.54 0.20 38 / 0.55) !important;
  font-weight: 500;
}
.nav a.cta:hover{ color: #fff !important; filter: brightness(1.06); }

/* same look in blokello.html when used as "back home" link/button if any */

/* ─────────────────────────────────────────────
   Controls pill (top-right): theme + language
   ───────────────────────────────────────────── */
.controls{
  position: fixed;
  top: 16px; right: clamp(20px, 4vw, 40px);
  z-index: 51;
  display: flex; align-items: center;
  padding: 4px;
  border-radius: 999px;
  font-family: var(--mono);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, white 6%, transparent),
      color-mix(in oklch, white 0%, transparent)),
    color-mix(in oklch, var(--bg) 35%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid color-mix(in oklch, white 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    inset 0 -1px 0 color-mix(in oklch, black 30%, transparent),
    0 12px 40px -10px rgba(0,0,0,0.5);
}

.controls .ctl{
  appearance: none;
  background: transparent; border: 0;
  color: var(--fg-2);
  padding: 7px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  transition: color .25s ease, background .25s ease, transform .15s ease;
}
.controls .ctl:hover{ color: var(--fg); }
.controls .ctl:active{ transform: scale(0.96); }
.controls .ctl.active{
  color: var(--fg);
  background:
    linear-gradient(180deg,
      color-mix(in oklch, white 14%, transparent),
      color-mix(in oklch, white 2%, transparent)),
    color-mix(in oklch, var(--bg-3) 80%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
    inset 0 -1px 0 color-mix(in oklch, black 25%, transparent),
    0 3px 8px -2px rgba(0,0,0,0.3);
}
html[data-theme="light"] .controls .ctl.active{
  background:
    linear-gradient(180deg,
      color-mix(in oklch, white 80%, transparent),
      color-mix(in oklch, white 40%, transparent)),
    color-mix(in oklch, var(--bg) 60%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 90%, transparent),
    inset 0 -1px 0 color-mix(in oklch, black 10%, transparent),
    0 3px 8px -2px rgba(0,0,0,0.15);
}

.controls .ctl-theme{
  width: 30px; height: 30px;
  padding: 0;
}
.controls .ctl-theme svg{
  width: 16px; height: 16px;
  display: block;
  transition: transform .35s cubic-bezier(.5,.2,.2,1.2);
}
.controls .ctl-theme:hover svg{ transform: rotate(20deg); }

/* show sun in dark mode (clickable to go light), moon in light mode (clickable to go dark) */
.controls .ctl-theme .icon-sun{ display: none; }
.controls .ctl-theme .icon-moon{ display: block; }
html[data-theme="light"] .controls .ctl-theme .icon-sun{ display: block; }
html[data-theme="light"] .controls .ctl-theme .icon-moon{ display: none; }

.controls .divider{
  width: 1px; height: 16px;
  background: color-mix(in oklch, var(--fg-2) 25%, transparent);
  margin: 0 4px;
}

.controls .lang-group{ display: flex; align-items: center; }
.controls .ctl-lang{
  min-width: 30px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Push the centered nav up a bit on tiny screens so the controls pill doesn't overlap */
@media (max-width: 540px){
  .controls{
    top: auto; bottom: 14px;
    right: 50%; transform: translateX(50%);
  }
  .controls .ctl{ padding: 7px 9px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce){
  .controls .ctl-theme svg{ transition: none; }
}