/* ---------- Tokens ---------- */
:root {
  /* Page */
  --page-day: radial-gradient(ellipse at 60% 35%, #fbfbfb 0%, #ededed 55%, #e2e2e2 100%);
  --page-night: radial-gradient(ellipse at 60% 35%, #2a2c35 0%, #1c1d24 60%, #141519 100%);
  --bezel-day: #f6f6f6;
  --bezel-night: #2c2e37;

  /* Sky base = the outermost band. Bands closer to the knob are lighter. */
  --sky-day: #3a77b6;
  --sky-night: #1c1e27;

  /* Sun + moon */
  --sun: #f3c22f;
  --moon-hi: #e4e5e8;
  --moon-lo: #a9abb2;
  --crater: #8e96ac;

  /* Clouds: back → middle → front */
  --cloud-1: #a9c8e7;
  --cloud-2: #d2e4f5;
  --cloud-3: #f1f7fc;

  --star: #ffffff;

  /* Physical springs (damped-spring formula sampled into CSS linear()) */
  --spring-soft: linear(0, 0.0454, 0.1554, 0.2976, 0.4484, 0.592, 0.7189, 0.8242, 0.9067, 0.9677, 1.0096, 1.0358, 1.0495, 1.0542, 1.0526, 1.0471, 1.0396, 1.0314, 1.0235, 1.0164, 1.0105, 1.0058, 1.0023, 0.9998, 0.9983, 0.9974, 0.9971, 0.9971, 0.9974, 0.9978, 0.9982, 0.9986, 0.999, 0.9994, 0.9996, 0.9998, 1, 1.0001, 1.0001, 1.0002, 1);
  --spring-bouncy: linear(0, 0.0563, 0.1961, 0.3793, 0.5734, 0.7545, 0.9073, 1.024, 1.1031, 1.1475, 1.1628, 1.1562, 1.135, 1.1058, 1.0742, 1.0441, 1.0184, 0.9985, 0.9847, 0.9767, 0.9736, 0.9742, 0.9774, 0.982, 0.9872, 0.9921, 0.9964, 0.9998, 1.0022, 1.0037, 1.0043, 1.0043, 1.0038, 1.0031, 1.0022, 1.0014, 1.0007, 1.0001, 0.9997, 0.9994, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--page-day);
  background-color: #ededed;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Full-screen stage pinned to the viewport: the toggle is always in the exact center,
   whatever the browser or page height. */
.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* ---------- Footer ---------- */
.credits {
  --text: #9a9aa0;
  --strong: #55555c;
  position: fixed;
  left: 0; right: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  padding: 0 16px;
  font-size: 12px;
  letter-spacing: .01em;
  line-height: 1.4;
  color: var(--text);
  transition: color 900ms var(--ease-out);
}
.is-night .credits { --text: #6b6e78; --strong: #a9acb6; }
.credits a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity 200ms;
}
.credits a:hover { opacity: .7; }
.credits a:focus-visible { outline: 2px solid #4c8af5; outline-offset: 3px; }
.credits strong { color: var(--strong); font-weight: 500; transition: color 900ms var(--ease-out); }
.credits svg { width: 13px; height: 13px; fill: var(--strong); transition: fill 900ms var(--ease-out); }
.credits .star-icon { fill: #d9a03a; }
.credits .dot { opacity: .5; }
.credits [hidden] { display: none; }
@media (max-width: 420px) {
  .credits { font-size: 11px; gap: 4px 14px; }
  .credits .dot { display: none; }
  .credits svg { width: 12px; height: 12px; }
}
/* Gradients can't transition, so the night page fades in as an overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--page-night);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  pointer-events: none;
}
body.is-night::before { opacity: 1; }

/* ---------- Toggle ---------- */
/* The button is only the size container + focus target. Everything visual lives in .pill,
   so cqw units (1cqw = 1% of the button width) resolve against the button. */
.toggle {
  --size: 530px;                     /* ← change this one value to resize the whole toggle */
  position: relative;
  width: min(var(--size), 80vw);
  aspect-ratio: 530 / 243;
  container-type: inline-size;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  outline: none;
  transition: transform 350ms var(--spring-soft);
}
.toggle:hover  { transform: translateY(-2px); }
.toggle:active { transform: scale(.975); transition-duration: 120ms; }
.toggle:focus-visible { outline: 3px solid #4c8af5; outline-offset: calc(min(var(--size), 80vw) * .035); }

.pill {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  background: var(--sky-day);
  /* Raised bezel ring around a recessed slot */
  box-shadow:
    0 0 0 2.2cqw var(--bezel-day),
    0 0 0 2.5cqw rgba(0, 0, 0, .05),
    0 -.8cqw 2cqw 2cqw rgba(255, 255, 255, .9),
    0 1.6cqw 3.5cqw 2cqw rgba(0, 0, 0, .14);
  transition: box-shadow 900ms var(--ease-out);
}
.is-night .pill {
  box-shadow:
    0 0 0 2.2cqw var(--bezel-night),
    0 0 0 2.5cqw rgba(0, 0, 0, .35),
    0 -.8cqw 2cqw 2cqw rgba(255, 255, 255, .04),
    0 1.6cqw 3.5cqw 2cqw rgba(0, 0, 0, .45);
}

/* Inner shadow on top of every layer: makes the slot look pressed into the bezel */
.pill::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1.6cqw 2.4cqw rgba(0, 0, 0, .32),
    inset 0 .3cqw .5cqw rgba(0, 0, 0, .25),
    inset 0 -.6cqw 1.2cqw rgba(255, 255, 255, .25);
  pointer-events: none;
  z-index: 10;
}

.layer { position: absolute; inset: 0; display: block; pointer-events: none; }

.sky-night {
  background: var(--sky-night);
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.is-night .sky-night { opacity: 1; }

/* ---------- Stars ---------- */
.stars { width: 100%; height: 100%; }
.star {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: translateY(-6px) scale(.2) rotate(-90deg);
  transition: transform 450ms var(--ease-in), opacity 300ms var(--ease-in);
  transition-delay: calc(var(--i) * 15ms);
}
.is-night .star {
  opacity: 1;
  transform: none;
  transition: transform 1000ms var(--spring-bouncy), opacity 500ms var(--ease-out);
  transition-delay: calc(250ms + var(--i) * 45ms);
}
.star > * {
  fill: var(--star);
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle var(--t, 3s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.37s);
}
@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.55) rotate(45deg); }
}

.shooting {
  position: absolute;
  left: 8cqw; top: 8cqw;
  width: 12cqw; height: .4cqw;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  opacity: 0;
  pointer-events: none;
}
.is-night .shooting { animation: shoot 7s 1.1s linear infinite; }
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(16deg) translateX(-8cqw) scaleX(.3); }
  2%   { opacity: 1; }
  9%   { opacity: 0; transform: rotate(16deg) translateX(28cqw) scaleX(1); }
  100% { opacity: 0; transform: rotate(16deg) translateX(28cqw) scaleX(1); }
}

/* ---------- Knob (sun / moon) ---------- */
.knob-track {
  position: absolute;
  top: 4.18cqw; left: 4.18cqw;
  width: 37.5cqw; height: 37.5cqw;
  transition: transform 900ms var(--spring-soft);
  z-index: 2;
}
.is-night .knob-track { transform: translateX(54.14cqw); }

/* Concentric light bands that travel with the knob.
   Each ring adds 7% white, so the bands step lighter toward the sun/moon. */
.halo {
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 7cqw  rgba(255, 255, 255, .075),
    0 0 0 15cqw rgba(255, 255, 255, .075),
    0 0 0 24cqw rgba(255, 255, 255, .075),
    0 0 0 34cqw rgba(255, 255, 255, .075);
  transition: transform 1000ms var(--spring-bouncy);
}
/* Rings ripple outward as the knob lands */
.is-night .halo { animation: ripple 1100ms var(--ease-out) 150ms; }
.is-day   .halo { animation: ripple2 1100ms var(--ease-out) 150ms; }
@keyframes ripple  { 0% { transform: scale(.75); } 100% { transform: scale(1); } }
@keyframes ripple2 { 0% { transform: scale(.75); } 100% { transform: scale(1); } }

.knob {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    .8cqw 1.4cqw 2.2cqw rgba(0, 0, 0, .35),
    .2cqw .4cqw .5cqw rgba(0, 0, 0, .2);
}

.sun, .moon { position: absolute; inset: 0; border-radius: 50%; }

.sun {
  background: var(--sun);
  box-shadow:
    inset 0 0 0 .35cqw rgba(190, 120, 0, .22),
    inset 0 1cqw 1.2cqw rgba(255, 240, 170, .55),
    inset -.6cqw -1.4cqw 1.8cqw rgba(210, 130, 0, .35);
  transition: transform 900ms var(--spring-soft);
}
/* Once the moon fully covers it, hide the sun so no yellow edge peeks out */
.is-night .sun { transform: rotate(120deg); opacity: 0; transition: transform 900ms var(--spring-soft), opacity 0s 1000ms; }

/* The moon slides across the sun like an eclipse */
.moon {
  background: radial-gradient(circle at 35% 30%, var(--moon-hi) 0%, #c7c9ce 55%, var(--moon-lo) 100%);
  box-shadow:
    inset 0 0 0 .35cqw rgba(0, 0, 0, .12),
    inset 0 1cqw 1.2cqw rgba(255, 255, 255, .5),
    inset -.6cqw -1.4cqw 1.8cqw rgba(60, 65, 80, .3);
  transform: translateX(105%) rotate(90deg);
  transition: transform 700ms var(--ease-in);
}
.is-night .moon {
  transform: none;
  transition: transform 1000ms var(--spring-soft) 80ms;
}

.crater {
  position: absolute;
  border-radius: 50%;
  background: var(--crater);
  box-shadow:
    inset .5cqw .7cqw .9cqw rgba(40, 50, 80, .45),
    0 .2cqw .2cqw rgba(255, 255, 255, .5);
}
.c1 { left: 42%; top: 15%; width: 17%; height: 17%; }
.c2 { left: 20%; top: 52%; width: 34%; height: 34%; }
.c3 { left: 64%; top: 52%; width: 25%; height: 25%; }

/* ---------- Clouds (3 layers) ---------- */
.cloud {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.cloud-1 { z-index: 3; transition: transform 1100ms var(--spring-bouncy) 180ms; }
.cloud-2 { z-index: 4; transition: transform 1100ms var(--spring-bouncy) 110ms; }
.cloud-3 { z-index: 5; transition: transform 1100ms var(--spring-bouncy) 40ms; }

/* Night: each layer sinks away, front first */
.is-night .cloud-3 { transform: translate(6cqw, 50cqw);  transition: transform 600ms var(--ease-in) 0ms; }
.is-night .cloud-2 { transform: translate(10cqw, 54cqw); transition: transform 650ms var(--ease-in) 60ms; }
.is-night .cloud-1 { transform: translate(14cqw, 60cqw); transition: transform 700ms var(--ease-in) 120ms; }

.cloud g {
  transform-box: view-box;
  animation: drift 8s ease-in-out infinite;
}
.cloud-1 g { animation-duration: 11s; animation-delay: -4s; }
.cloud-2 g { animation-duration: 9s;  animation-delay: -2s; animation-direction: reverse; }
@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-7px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 200ms !important;
    transition-delay: 0ms !important;
    transition-timing-function: ease !important;
  }
}

.preload *, .preload *::before, .preload *::after, .preload::before { transition: none !important; animation: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}