/* Classics · classics.to coming-soon page.
 *
 * The visual world is the one already committed in prototype/styles.css — Switzer, #0C090D, and the
 * iridescence sampled off the real logo: the body is 72.7% near-black and the rim runs
 * cyan -> blue -> violet -> magenta. Those four are the site's Cred ladder, so the cube is not
 * decorated with brand colours, it is built out of them.
 *
 * The cube is CSS 3D, not WebGL: a few kilobytes, no GPU context, cannot fail to load, and works on
 * phones years old. On a page someone looks at for four seconds that trade is not close.
 */

:root{
  --bg:#0C090D;
  --surface-1:#171418;
  --surface-2:#201D22;
  --surface-3:#2F2B31;
  --text:#ECE9ED;
  --text-2:rgba(236,233,237,.72);
  --text-3:rgba(236,233,237,.52);
  --hair:rgba(236,233,237,.10);
  --hair-2:rgba(236,233,237,.18);
  --accent:#B48DF4;

  /* the rim, in order */
  --ir-1:#77CFD0;
  --ir-2:#92A7EE;
  --ir-3:#BA8EE4;
  --ir-4:#D97DD7;

  --ok:#7FD6A9;
  --bad:#F2918C;

  --font:'Switzer','Helvetica Neue',Arial,sans-serif;
  --r-cap:999px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* The planet is wider than the viewport on purpose: you are close to it, and what
     you see is a horizon rather than a ball. --horizon is how much of it is below the fold. */
  --planet:clamp(980px,210vw,2600px);
  --limb:calc(50% + 220px);   /* centre of the page + half the lockup, so the rim always clears the text */
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--surface-3) transparent;
  scrollbar-width:thin;
}

body{
  margin:0;
  min-height:100dvh;
  padding:max(28px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* A faint pool of light under everything, so the cube sits in a room rather than on a flat field. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% 34%, rgba(146,167,238,.10), transparent 70%),
    radial-gradient(42% 30% at 50% 30%, rgba(217,125,215,.07), transparent 72%);
}

::selection{background:rgba(180,141,244,.32);color:var(--text)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

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

/* ── the scene ───────────────────────────────────────────────────────────────
   Full bleed, behind everything. Three layers: stars drawn once into a canvas, a
   far wash of colour, and the planet.

   The planet is the logo's own physics at scale — a near-black body with a thin
   iridescent rim, which is what the wordmark already is. It sits mostly below
   the fold so you get the horizon rather than a ball on a poster. */

.sky{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}

.stars{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* The drift is one slow authored move, not a twinkle. Two minutes for a few pixels:
     you never catch it moving, you only notice it is not a flat image. */
  animation:drift 180s linear infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-14px,8px,0)}
}

/* Deep colour, well under the stars. The same four hues as the rim, at the
   opacity of a thing you half-see. */
.far{
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(119,207,208,.11), transparent 70%),
    radial-gradient(44% 34% at 80% 26%, rgba(186,142,228,.12), transparent 72%),
    radial-gradient(52% 40% at 52% 78%, rgba(146,167,238,.10), transparent 70%);
  filter:blur(18px);
}

.planet{
  position:absolute;
  left:50%;
  /* Anchored by its LIMB, not its base: --limb is where the horizon crosses the screen, so the
     curve stays put while the sphere runs off the bottom. Anchoring by the base made the planet's
     size and its position fight each other. */
  top:var(--limb);
  width:var(--planet);
  height:var(--planet);
  margin-left:calc(var(--planet) / -2);
  border-radius:50%;
  background:
    radial-gradient(90% 70% at 50% 6%, #0B0810 0%, #070509 38%, #040305 70%);
  box-shadow:inset 0 26px 90px rgba(6,4,6,.9);
}

/* The rim: a bright hairline along the top of the limb, running the ladder left to right.
   0deg is twelve o'clock, so the band is centred just right of the top. */
.planet .rim{
  position:absolute;
  inset:-1px;
  border-radius:50%;
  background:conic-gradient(from -74deg,
    transparent 0deg,
    var(--ir-1) 24deg,
    var(--ir-2) 54deg,
    var(--ir-3) 86deg,
    var(--ir-4) 116deg,
    transparent 146deg);
  -webkit-mask:radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px), #000 100%);
  mask:radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px), #000 100%);
  filter:drop-shadow(0 0 5px rgba(236,233,237,.5)) drop-shadow(0 0 14px rgba(146,167,238,.75)) drop-shadow(0 0 34px rgba(186,142,228,.45));
}

/* The atmosphere: the same light bleeding off the edge, wider and far softer. */
.planet .terminator{
  position:absolute;
  inset:-34px;
  border-radius:50%;
  background:conic-gradient(from -74deg,
    transparent 0deg,
    rgba(119,207,208,.34) 26deg,
    rgba(146,167,238,.38) 58deg,
    rgba(186,142,228,.32) 90deg,
    rgba(217,125,215,.24) 120deg,
    transparent 150deg);
  -webkit-mask:radial-gradient(circle closest-side at 50% 50%, transparent 86%, #000 97%, #000 100%);
  mask:radial-gradient(circle closest-side at 50% 50%, transparent 86%, #000 97%, #000 100%);
  filter:blur(16px);
}

/* ── the lockup ──────────────────────────────────────────────────────────────*/

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Legibility where the words are, and nowhere else. A scrim over the whole sky dims the rim
   along with everything else; this follows the content instead. */
.wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(780px,180vw);
  height:min(620px,120vh);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(12,9,13,.78), rgba(12,9,13,.42) 58%, transparent 100%);
  pointer-events:none;
  z-index:-1;
}

.mark{margin:0;line-height:0}
.mark img{
  display:block;
  width:clamp(188px,58vw,286px);
  height:auto;
}

.soon{
  margin:clamp(18px,3.4vh,26px) 0 0;
  font-size:clamp(13px,3.4vw,15px);
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--text-2);
}

/* ── the clock ───────────────────────────────────────────────────────────────
   A real date the owner set, not manufactured urgency: no flashing, no colour
   change as it shrinks, no "hurry". It states a fact and gets out of the way.
   Tabular numerals so the digits do not jitter as they tick. */

.clock{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(14px,5vw,30px);
  margin:clamp(20px,3.6vh,28px) 0 0;
}

.clock .u{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:3ch;
}

.clock .n{
  font-size:clamp(26px,8vw,38px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--text);
}

.clock .l{
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}

.when{
  margin:14px 0 0;
  font-size:14px;
  color:var(--text-2);
}

/* When it arrives the clock is gone, not frozen at zero or counting backwards. */
.wrap.open .clock{display:none}
.wrap.open .soon{color:var(--text)}

/* ── the one thing we want ───────────────────────────────────────────────────*/

.form{margin:clamp(24px,4.6vh,34px) 0 0;width:100%}

.row{display:flex;gap:8px;align-items:stretch}

.in{
  flex:1 1 auto;
  min-width:0;
  min-height:52px;
  padding:0 20px;
  font:inherit;
  font-size:16px;              /* 16px or iOS zooms the page on focus */
  color:var(--text);
  caret-color:var(--accent);
  background:var(--surface-1);
  border:1px solid var(--hair-2);
  border-radius:var(--r-cap);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.in::placeholder{color:var(--text-3)}       /* 4.6:1 on --surface-1 */
.in:hover{border-color:rgba(236,233,237,.28)}
.in:focus{outline:none;border-color:var(--accent);background:var(--surface-2)}
.in:focus-visible{outline:none}
.form.bad .in{border-color:var(--bad)}
.in:disabled{opacity:.55;cursor:not-allowed}

.go{
  flex:0 0 auto;
  min-height:52px;
  padding:0 26px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--bg);
  background:var(--text);
  border:0;
  border-radius:var(--r-cap);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:background .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.go:hover{background:#fff}
.go:disabled{opacity:.5;cursor:default}
.go:disabled:hover{background:var(--text)}

.go-s{
  display:none;
  width:14px;height:14px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
}
.form.busy .go-s{display:block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.note{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--text-3);
}

.msg{
  margin:10px 0 0;
  min-height:1.3em;
  font-size:14px;
  font-weight:500;
  color:var(--text-2);
}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--bad)}

/* Once they are on the list there is nothing left to do on this page, so the form gets out of
   the way rather than sitting there inviting a second go. */
.form.done .row,.form.done .note{display:none}
.form.done .msg{margin-top:0;font-size:16px}

/* ── small and short screens ────────────────────────────────────────────────*/

@media (max-width:420px){
  .row{flex-direction:column}
  .go{width:100%}
}

/* Not enough height for the cube to have presence — give the room to the words instead. */
/* Short viewports: the lockup takes a bigger share of the height, so the horizon has to drop
   BELOW it, not rise. Getting this backwards put the fine print directly on the lit rim, which is
   the one place on the page text cannot be read. The planet becomes a sliver here — correct, since
   the words outrank the scenery. */
@media (max-height:700px){
  :root{--planet:clamp(900px,230vw,1800px);--limb:calc(50% + 175px)}
  .soon{margin-top:14px}
  .clock{margin-top:16px;gap:clamp(12px,4vw,24px)}
  .clock .n{font-size:clamp(22px,6vw,30px)}
  .when{margin-top:10px}
  .form{margin-top:18px}
}

@media (prefers-reduced-motion:reduce){
  .stars{animation:none}
  .form.busy .go-s{animation:none}
  *{transition-duration:.01ms !important}
}