/* ORB — CSS panel */

:root { color-scheme: dark; }

* { margin: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #05060a;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* one full-window canvas renders the main orb AND every preset thumbnail
   (each into its own scissor region). It sits underneath the chrome and takes
   the pointer for drag / poke interaction. */
#orb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- brand */
.brand {
  position: fixed;
  left: 24px;
  top: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  user-select: none;
}

.brand__mark {
  width: 32px;
  height: 32px;
  flex: none;
  filter: drop-shadow(0 0 10px rgba(120, 150, 255, 0.35));
}

/* the logo gradient follows the active preset's glow colours */
.brand__mark .stop-a { stop-color: var(--brand-a, #33B5FF); transition: stop-color .5s; }
.brand__mark .stop-b { stop-color: var(--brand-b, #E24DD0); transition: stop-color .5s; }

.brand__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.36em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  transition: color .25s;
}

.brand__tag {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(200, 206, 228, 0.5);
  transition: color .25s;
}

/* -------------------------------------------------------------- caption */
.caption {
  position: fixed;
  left: 50%;
  bottom: clamp(24px, 9vh, 72px);
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.loading {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(200, 206, 228, 0.7);
  animation: loading-pulse 2.6s ease-in-out infinite;
  transition: color .25s;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.hint {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 206, 228, 0.38);
  transition: opacity .8s, transform .8s, color .25s;
}

.hint.is-hidden {
  opacity: 0;
  transform: translateY(4px);
}

/* --------------------------------------------------------------- credit */
.credit {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(200, 206, 228, 0.42);
  pointer-events: none;
  user-select: none;
  transition: color .25s;
}

.credit strong {
  font-weight: 600;
  color: rgba(220, 226, 245, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .loading { animation: none; }
}

/* ------------------------------------------------------------- presets */
/* preset switcher — left column of live, animated orb thumbnails */
#presets {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.preset {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.preset:focus-visible .preset__thumb {
  outline: 2px solid rgba(185, 205, 255, 0.9);
  outline-offset: 3px;
}

/* transparent window — the canvas draws this preset's orb behind it.
   the outset box-shadow paints the page background over the square corners,
   so the orb is visually clipped to the rounded border. */
.preset__thumb {
  width: clamp(46px, 8vh, 64px);
  height: clamp(46px, 8vh, 64px);
  border-radius: 14px;
  border: 1px solid rgba(150, 160, 190, 0.3);
  background: transparent;
  box-shadow: 0 0 0 7px var(--page-bg, #05060a);
  transition: border-color .25s, transform .25s;
}

.preset:hover .preset__thumb {
  border-color: rgba(185, 205, 255, 0.65);
  transform: translateY(-2px);
}

.preset.is-active .preset__thumb {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 7px var(--page-bg, #05060a);
}

.preset__name {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 206, 228, 0.55);
  transition: color .25s;
}

.preset:hover .preset__name,
.preset.is-active .preset__name { color: #fff; }

/* keep the dat.gui panel above the canvas */
.dg.main { z-index: 10; }

/* ------------------------------------------------- light-background mode */
/* light-background presets: flip the chrome to dark ink so it stays readable */
body.light-bg .loading { color: rgba(20, 24, 40, 0.7); }
body.light-bg .hint { color: rgba(20, 24, 40, 0.45); }
body.light-bg .brand__name { color: rgba(10, 14, 30, 0.92); }
body.light-bg .brand__tag { color: rgba(20, 24, 40, 0.55); }
body.light-bg .brand__mark { filter: drop-shadow(0 2px 8px rgba(60, 80, 160, 0.25)); }
body.light-bg .credit { color: rgba(20, 24, 40, 0.5); }
body.light-bg .credit strong { color: rgba(10, 14, 30, 0.85); }
body.light-bg .preset__name { color: rgba(20, 24, 40, 0.5); }
body.light-bg .preset:hover .preset__name,
body.light-bg .preset.is-active .preset__name { color: #000; }
body.light-bg .preset__thumb { border-color: rgba(40, 50, 80, 0.3); }
body.light-bg .preset.is-active .preset__thumb {
  border-color: #000;
  box-shadow: inset 0 0 0 2px #000, 0 0 0 7px var(--page-bg, #eef2f8);
}

/* ------------------------------------------------------------ responsive */
/* on shorter screens the preset column reaches the top corner: park the brand beside it */
@media (max-height: 820px) {
  .brand { left: 104px; }
}

@media (max-height: 640px) {
  .preset__name {
    display: none;
  }
}

@media (max-width: 640px) {
  .brand { left: 16px; top: 16px; gap: 10px; }
  .brand__mark { width: 26px; height: 26px; }
  .brand__tag { display: none; }
  .credit { display: none; }
}

/* ------------------------------------------------ social-preview capture */
/* `?og` — clean frame for the 1200×630 share image */
body.og #presets,
body.og .caption,
body.og .credit,
body.og .dg { display: none !important; }

body.og .brand {
  left: 56px;
  top: 48px;
  gap: 18px;
  transform: scale(1.45);
  transform-origin: top left;
}