/* ---------- Card ---------- */
.card {
  width: 380px;
  padding: 36px 40px 30px;
  border-radius: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -40px rgb(11 22 9 / 0.45);
  text-align: center;
}

.card-eyebrow {
  margin: 0;
  color: var(--muted);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.greeting {
  margin: 12px 0 26px;
  font: 400 38px/1.05 var(--serif);
}

:root[data-theme="night"] [data-day],
:root:not([data-theme="night"]) [data-night] { display: none; }

.caption { margin: 22px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- The switch ---------- */
.toggle {
  --w: 300px;
  --h: 120px;
  --pad: 12px;
  --knob: calc(var(--h) - 2 * var(--pad));
  --travel: calc(var(--w) - var(--knob) - 2 * var(--pad));
  position: relative;
  display: block;
  width: var(--w);
  height: var(--h);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.toggle:focus-visible { outline: 3px solid var(--mantis); outline-offset: 6px; }

/* Day sky, with the night sky as a layer that fades in on top. */
.track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, #8ee07f, var(--mantis) 70%);
  box-shadow:
    inset 0 8px 16px rgb(11 22 9 / 0.22),
    inset 0 -6px 12px rgb(255 253 241 / 0.3),
    0 22px 44px -18px var(--mantis-deep);
  transition: box-shadow 0.6s ease;
}

.track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140px 90px at 30% 30%, rgb(89 199 73 / 0.18), transparent 70%),
    linear-gradient(180deg, #050c04, var(--forest-2));
  opacity: 0;
  transition: opacity 0.6s ease 0.1s;
}

/* Two rolling hills along the bottom edge. */
.hills {
  position: absolute;
  inset: auto -10% -46px -10%;
  height: 90px;
  background:
    radial-gradient(70% 100% at 25% 100%, var(--mantis-deep) 60%, transparent 61%),
    radial-gradient(60% 90% at 78% 100%, #2f8424 60%, transparent 61%);
  transition: filter 0.6s ease;
}

/* Clouds: three puffs made of overlapping circles (box-shadow copies of one circle). */
.clouds i {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--milky);
  box-shadow: 18px -8px 0 4px var(--milky), 38px 0 0 0 var(--milky), 18px 6px 0 2px var(--milky);
  transition: translate 0.55s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.4s ease;
}

.clouds i:nth-child(1) { left: 150px; top: 30px; transition-delay: 0.05s; }
.clouds i:nth-child(2) { left: 210px; top: 58px; scale: 0.8; transition-delay: 0.12s; }
.clouds i:nth-child(3) { left: 118px; top: 74px; scale: 0.6; opacity: 0.85; transition-delay: 0.18s; }

/* Fireflies: glowing mantis dots that drift and blink, only visible at night. */
.flies i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c8ff9f;
  box-shadow: 0 0 6px 2px var(--mantis), 0 0 16px 4px rgb(89 199 73 / 0.55);
  opacity: 0;
  scale: 0.2;
  transition: opacity 0.4s ease, scale 0.4s ease;
  animation: drift 3.6s ease-in-out infinite alternate, blink 1.9s ease-in-out infinite;
}

.flies i:nth-child(1) { left: 40px; top: 30px; animation-delay: 0s, 0.3s; }
.flies i:nth-child(2) { left: 74px; top: 62px; animation-delay: -1.2s, 0.9s; }
.flies i:nth-child(3) { left: 112px; top: 24px; animation-delay: -2s, 0.1s; }
.flies i:nth-child(4) { left: 138px; top: 70px; animation-delay: -0.6s, 1.4s; }
.flies i:nth-child(5) { left: 58px; top: 88px; animation-delay: -2.6s, 0.6s; }
.flies i:nth-child(6) { left: 160px; top: 40px; animation-delay: -1.7s, 1.1s; }
.flies i:nth-child(7) { left: 26px; top: 64px; animation-delay: -3.1s, 0.4s; }

@keyframes drift {
  from { translate: 0 0; }
  50% { translate: 6px -7px; }
  to { translate: -5px 4px; }
}

@keyframes blink {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.45); }
}

/* The knob: a sun with rays by day, a crescent moon with craters by night. */
.knob {
  position: absolute;
  left: var(--pad);
  top: var(--pad);
  width: var(--knob);
  height: var(--knob);
  transition: translate 0.75s cubic-bezier(0.68, -0.35, 0.3, 1.35);
}

.disc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--milky) 55%, #f3edc8);
  box-shadow: 0 0 0 7px rgb(255 253 241 / 0.28), 0 0 34px 6px rgb(255 253 241 / 0.65), 0 8px 16px rgb(11 22 9 / 0.25);
  transition: box-shadow 0.6s ease;
}

.rays i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 14px;
  margin: -7px 0 0 -3px;
  border-radius: 3px;
  background: var(--milky);
  rotate: calc(var(--i) * 45deg);
  translate: 0 0;
  transform: translateY(-60px);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  transition-delay: calc(0.35s + var(--i) * 0.03s);
}

.rays i:nth-child(1) { --i: 0; }
.rays i:nth-child(2) { --i: 1; }
.rays i:nth-child(3) { --i: 2; }
.rays i:nth-child(4) { --i: 3; }
.rays i:nth-child(5) { --i: 4; }
.rays i:nth-child(6) { --i: 5; }
.rays i:nth-child(7) { --i: 6; }
.rays i:nth-child(8) { --i: 7; }

.bite {
  position: absolute;
  left: 100%;
  top: -30%;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background: var(--forest-2);
  transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, top 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.craters i {
  position: absolute;
  border-radius: 50%;
  background: rgb(27 50 22 / 0.13);
  box-shadow: inset 2px 2px 3px rgb(27 50 22 / 0.18);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.35s ease 0.45s, scale 0.35s ease 0.45s;
}

.craters i:nth-child(1) { width: 20px; height: 20px; left: 18px; top: 46px; }
.craters i:nth-child(2) { width: 12px; height: 12px; left: 40px; top: 26px; }
.craters i:nth-child(3) { width: 9px; height: 9px; left: 34px; top: 70px; }

/* ---------- Night ---------- */
.toggle[aria-checked="true"] .track::before { opacity: 1; }
.toggle[aria-checked="true"] .track { box-shadow: inset 0 8px 18px rgb(0 0 0 / 0.55), inset 0 -6px 12px rgb(89 199 73 / 0.12), 0 22px 44px -18px rgb(0 0 0 / 0.7); }
.toggle[aria-checked="true"] .hills { filter: brightness(0.28) saturate(0.6); }
.toggle[aria-checked="true"] .clouds i { translate: 40px 70px; opacity: 0; transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0), ease; }
.toggle[aria-checked="true"] .flies i { opacity: 1; scale: 1; transition-delay: calc(0.35s + var(--d, 0s)); }
.toggle[aria-checked="true"] .flies i:nth-child(2n) { --d: 0.12s; }
.toggle[aria-checked="true"] .flies i:nth-child(3n) { --d: 0.24s; }
.toggle[aria-checked="true"] .knob { translate: var(--travel) 0; }
.toggle[aria-checked="true"] .disc { box-shadow: 0 0 0 7px rgb(255 253 241 / 0.08), 0 0 28px 4px rgb(255 253 241 / 0.25), 0 8px 16px rgb(0 0 0 / 0.45); }
.toggle[aria-checked="true"] .rays i { transform: translateY(-40px) scaleY(0); opacity: 0; transition-delay: calc(var(--i) * 0.02s); }
.toggle[aria-checked="true"] .bite { left: 30%; top: -14%; }
.toggle[aria-checked="true"] .craters i { opacity: 1; scale: 1; }

/* Going back to day: clouds float in from the right, the bite slides away first. */
.toggle[aria-checked="false"] .clouds i { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease; transition-duration: 0.7s, 0.5s; }
.toggle[aria-checked="false"] .bite { transition-delay: 0s; }
.toggle[aria-checked="false"] .craters i { transition-delay: 0s; }

/* ---------- Circular page reveal (View Transitions API) ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) { z-index: 2; }

@media (max-width: 420px) {
  .card { width: calc(100vw - 32px); padding: 30px 20px 26px; }
  .toggle { --w: 240px; --h: 96px; --pad: 10px; }
  .toggle .clouds, .toggle .flies { scale: 0.8; transform-origin: left top; }
}