/* Eclipse Toggle — step 1: the page in two themes, and a switch that flips them at once */
:root { --sans: 'Geist', -apple-system, system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; }

/* ---- 1. the theme tokens: every colour on the page comes from here ----
   <html data-theme="light" | "dark"> picks one of the two sets. */

/* night: near-black with living aurora */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: radial-gradient(120% 60% at 50% 0%, #140A2A 0%, #05030A 62%);
  --base: #05030A;
  --ink: #F6F1FF; --ink-2: rgba(226, 214, 255, .62);
  --em: linear-gradient(90deg, #00F0C8, #9C7BFF 55%, #FF2BD6);
  --good: linear-gradient(180deg, #FFFFFF, #FFFFFF);
  --word: linear-gradient(180deg, #F2FFFC 8%, #9EF7E6 34%, #A58BFF 62%, #FF4FDF 96%);
  --word-fx: drop-shadow(0 0 18px rgba(123, 47, 255, .55));
  --chip: #00F0C8; --chip-ink: #05030A;
  --floor: rgba(123, 47, 255, .55);
}
/* day: a luminous dawn */
[data-theme="light"] {
  color-scheme: light;
  --bg: linear-gradient(180deg, #FFC39B 0%, #FFA88C 30%, #FF8E8E 52%, #E59ACB 76%, #C3A3FF 100%);
  --base: #FFB38A;
  --ink: #2A0A2C; --ink-2: rgba(42, 10, 44, .64);
  --em: linear-gradient(90deg, #B0125F, #7A1FA8);
  --good: linear-gradient(180deg, #2A0A2C, #2A0A2C);
  --word: linear-gradient(180deg, #6A18A8 6%, #C4126C 52%, #FF4A1C 98%);
  --word-fx: drop-shadow(0 10px 22px rgba(255, 240, 210, .55));
  --chip: #2A0A2C; --chip-ink: #FFD6B8;
  --floor: rgba(255, 244, 214, .85);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--base);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; overflow: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 2. the stage and the frame ---- */
.stage { position: relative; height: 100dvh; display: grid; place-items: center; overflow: hidden; color: var(--ink); background: var(--bg), var(--base); }
.frame { position: relative; width: 432px; height: 768px; flex: none; transform: scale(var(--k, 1)); }

/* ---- 3. the words: the series title, then the site's giant greeting ---- */
.title { position: absolute; top: 38px; left: 0; right: 0; text-align: center; }
.series {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2);
}
.series b { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: var(--chip-ink); background: var(--chip); }
.title h1 { margin: 0; font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.title h1 em {
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.12em; letter-spacing: -.02em; padding: 0 .08em;
  background: var(--em); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hint { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }

.hero { position: absolute; inset: 0; }
.greeting { position: absolute; top: 150px; left: 0; right: 0; margin: 0; text-align: center; font-weight: 700; }
.good {
  display: block; font-size: 70px; line-height: 1; letter-spacing: -.06em; padding: 0 .1em;
  background: var(--good); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* the changing word: for now two words, and the theme shows one of them */
.word {
  display: block; height: 108px; margin-top: -8px; white-space: nowrap;
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 102px; line-height: 108px; letter-spacing: -.01em;
  filter: var(--word-fx);
}
.word span { padding: .08em .16em .24em; background: var(--word); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { position: absolute; top: 330px; left: 0; right: 0; margin: 0; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); }
/* the line for the other theme is hidden. Through a token, so the nearest [data-theme] wins: the new-theme copy that
   the reveal lays over the page shows its own line, not neither */
[data-theme="light"] { --show-day: inline; --show-night: none; }
[data-theme="dark"] { --show-day: none; --show-night: inline; }
.for-day { display: var(--show-day); } .for-night { display: var(--show-night); }

/* ---- 4. THE COMPONENT: the eclipse switch, 240 × 120, the hero of the page ---- */
.switch-wrap { position: absolute; left: 96px; top: 382px; width: 240px; height: 120px; }
.floor { position: absolute; left: -90px; right: -90px; top: 40px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, var(--floor), transparent); pointer-events: none; }
.eclipse {
  position: absolute; inset: 0; width: 240px; height: 120px; padding: 0; border: 0; border-radius: 60px;
  background: none; cursor: pointer; touch-action: manipulation; color: inherit;
}
.track { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; }
.track > span { position: absolute; inset: 0; border-radius: inherit; }
.rim { position: absolute; inset: 0; border-radius: 60px; pointer-events: none; }

/* the knob: 100 × 100, 10 px in from the track's edge; everything in it is centred on its centre */
.knob { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; }
.knob > span { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.lens, .gloss { width: 100px; height: 100px; }
.disc { width: 56px; height: 56px; overflow: hidden; }
.moon { position: absolute; inset: -1px; border-radius: 50%; }

/* for now the theme draws the switch: the night parts show at night, the day parts by day */
[data-theme="light"] .n-in, [data-theme="dark"] .n-out { opacity: 0; }
[data-theme="dark"] .knob { transform: translateX(120px); }        /* the knob's travel: 240 − 2 × 10 − 100 */
.moon { transform: translateX(62px); }                            /* off the sun by day … */
[data-theme="dark"] .moon { transform: none; }                     /* … right over it at night */

/* ---- 4a. the parts: dawn sky / black glass with a neon rim, a white-hot sun, a dark moon ---- */
.sky-day {                                     /* a dawn sky in the track: lilac above, fire at the horizon */
  background: linear-gradient(180deg, #6D35D8 0%, #B53FB8 38%, #F2517E 68%, #FF9A5C 100%);
  box-shadow: inset 0 4px 12px rgba(60, 0, 80, .5), inset 0 -2px 0 rgba(255, 220, 180, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .45), 0 18px 40px -12px rgba(150, 30, 90, .55);
}
.sky-night {
  background: linear-gradient(180deg, #07040F 0%, #110828 60%, #1B0D3E 100%);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(160, 130, 255, .25);
}
.haze { background: radial-gradient(120px 100px at 60px 70px, rgba(255, 250, 225, .95), rgba(255, 200, 120, .55) 40%, rgba(255, 120, 90, .2) 70%, transparent); }
.ribbon {
  background:
    radial-gradient(80px 22px at 70px 44px, rgba(0, 240, 200, .75), transparent),
    radial-gradient(90px 26px at 40px 78px, rgba(123, 47, 255, .8), transparent),
    radial-gradient(60px 18px at 110px 88px, rgba(255, 43, 214, .55), transparent);
}
.rim { box-shadow: 0 0 0 1.5px rgba(120, 255, 230, .9), 0 0 16px 2px rgba(0, 240, 200, .55), 0 0 44px 8px rgba(123, 47, 255, .6), 0 0 90px 20px rgba(255, 43, 214, .28); }
.lens-day {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .4) 55%, rgba(255, 240, 230, .28));
  box-shadow: 0 0 34px 6px rgba(255, 214, 140, .75), 0 10px 24px -4px rgba(160, 40, 70, .45), inset 0 2px 0 rgba(255, 255, 255, .95), inset 0 -4px 10px rgba(255, 140, 120, .35);
}
.lens-night {
  background: radial-gradient(circle at 36% 28%, rgba(200, 180, 255, .2), rgba(40, 18, 90, .45) 60%, rgba(8, 4, 20, .75));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(0, 240, 200, .55), inset 4px 6px 12px rgba(0, 240, 200, .25), inset -6px -8px 16px rgba(255, 43, 214, .35);
}
.disc { background: radial-gradient(circle at 42% 38%, #FFFFFF 0 16%, #FFF3D0 32%, #FFC764 60%, #FF7A59 100%); }
.moon { background: radial-gradient(circle at 60% 40%, #1C1238, #0A0616 72%); }
.gloss { background: radial-gradient(60% 34% at 42% 16%, rgba(255, 255, 255, .55), transparent 70%); }