/* ==========================================================================
   Cosmos theme — loaded after site.css. Re-tokens the design system for deep
   space, makes surfaces glass so the animated scene (js/cosmos.js) shows
   through, and lays out a full-viewport hero.
   ========================================================================== */

:root {
  color-scheme: dark;
  --paper: #06070f;
  --paper-2: rgba(255, 255, 255, 0.05);
  --paper-3: rgba(255, 255, 255, 0.09);
  --white: rgba(14, 16, 32, 0.55);
  --ink: #f2f4ff;
  --ink-2: rgba(242, 244, 255, 0.78);
  --ink-3: rgba(242, 244, 255, 0.55);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.30);
  --accent: #8fd3ff;
  --accent-ink: #c7b8ff;
  --accent-soft: rgba(143, 211, 255, 0.14);
  --success: #7be0a8;
  --danger: #ff8f88;
  --on-ink: #f2f4ff;
  --on-ink-2: rgba(242, 244, 255, 0.78);
  --on-ink-3: rgba(242, 244, 255, 0.55);
  --line-on-ink: rgba(255, 255, 255, 0.14);
  --on-accent: #06070f;
  --nav-bg: rgba(6, 7, 15, 0.35);
  --glow: 0 0 40px rgba(143, 211, 255, 0.28);
}

html { background: var(--paper); }
body { background: var(--paper); }
::selection { background: var(--accent); color: var(--paper); }

/* The scene sits behind everything */
#cosmos {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.nav, main, .footer, .cookie { position: relative; z-index: 1; }
/* Sideways swipes rotate the scene (js/cosmos.js); up/down swipes still scroll and pinch still zooms */
html, body { touch-action: pan-y pinch-zoom; }
.cookie { position: fixed; z-index: 60; }

/* Type */
.display { text-shadow: var(--glow); }
.display strong, .display .bold, .display em { color: var(--accent); text-shadow: 0 0 32px rgba(143, 211, 255, 0.45); }
.h1 strong, .h2 strong, .h3 strong, .h1 .bold, .h2 .bold, .h3 .bold { color: var(--accent); }
.eyebrow { color: var(--ink-3); }
.brand__name span { color: var(--accent); }

/* Nav */
.nav { background: var(--nav-bg); }
.nav.is-scrolled { background: rgba(6, 7, 15, 0.6); border-bottom-color: var(--line); }
.nav__links a:hover { background: rgba(255, 255, 255, 0.07); }
.nav__toggle { border-color: var(--line-strong); }
@media (max-width: 800px) {
  .nav__links { background: rgba(6, 7, 15, 0.96); }
}

/* Buttons */
.btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); box-shadow: 0 0 28px rgba(143, 211, 255, 0.45); }
.btn--ghost { background: rgba(255, 255, 255, 0.04); color: var(--ink); border-color: var(--line-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); border-color: var(--ink); box-shadow: none; }
.btn--on-ink { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn--on-ink:hover { background: #fff; border-color: #fff; color: #06070f; }
.nav__links a.btn { color: var(--paper); }
.nav__links a.btn:hover { color: var(--paper); }
.tag { background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tag--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag--accent { background: var(--accent-soft); color: var(--accent); }
.link { color: var(--ink); border-color: var(--line-strong); }
.link:hover { color: var(--accent); border-color: var(--accent); }

/* Glass surfaces */
.card, .launch, .auth__card, .empty, .cookie, .band, .stats {
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.card { background: rgba(255, 255, 255, 0.045); border-color: var(--line); }
.card:hover { border-color: rgba(143, 211, 255, 0.45); box-shadow: 0 0 0 1px rgba(143, 211, 255, 0.25), 0 30px 60px -24px rgba(143, 211, 255, 0.35); }
.card--next { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 40px rgba(143, 211, 255, 0.25); }
.card__media { background: rgba(255, 255, 255, 0.04); border-bottom-color: var(--line); }
.card__initial { color: var(--ink); opacity: 0.9; text-shadow: var(--glow); }
.launch { background: rgba(14, 16, 32, 0.55); border-color: var(--line); }
.launch__label .dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent); }
.stats { background: rgba(6, 7, 15, 0.35); }
.stat__value { text-shadow: 0 0 24px rgba(143, 211, 255, 0.25); }
.band { background: rgba(255, 255, 255, 0.04); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .field { background: rgba(255, 255, 255, 0.05); border-color: var(--line-strong); }
.band .field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form .input, .form textarea { background: rgba(255, 255, 255, 0.05); border-color: var(--line-strong); color: var(--ink); }
.form .input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form__success { background: rgba(123, 224, 168, 0.12); }
.form__error { background: rgba(255, 143, 136, 0.14); }
.social a { border-color: var(--line-strong); }
.social a:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.footer { background: transparent; }
.cookie { background: rgba(14, 16, 32, 0.9); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8); }
.auth__card { background: rgba(14, 16, 32, 0.6); }
.auth__switch a { color: var(--accent); border-color: transparent; }
.prose a { color: var(--accent); }
.prose blockquote { border-color: var(--accent); }
:focus-visible { outline-color: var(--accent); }

/* Full-viewport hero */
.cosmos-hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(96px, 14vh, 160px); /* sides keep the .wrap gutter */
}
.cosmos-hero__inner { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.cosmos-hero__inner .display { max-width: 12ch; }
.cosmos-hero__inner .lead { max-width: 48ch; }
.cosmos-mantra {
  align-self: center; text-align: right;
  font-family: var(--font-serif); font-size: clamp(3rem, 7.6vw, 8rem); line-height: 0.92; letter-spacing: -0.02em;
  color: var(--ink); opacity: 0.92; text-shadow: 0 0 36px rgba(199, 184, 255, 0.45);
  pointer-events: none;
}
.cosmos-mantra strong { font-weight: 400; font-style: italic; color: var(--accent-ink); }
.cosmos-hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
.cosmos-hint::after { content: ''; width: 1px; height: 36px; background: linear-gradient(180deg, var(--ink-3), transparent); animation: cosmos-drop 2.2s ease-in-out infinite; }
@keyframes cosmos-drop { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 0; } }

/* Launch countdown as Nixie tubes (markup in themes/cosmos/index.ejs, digits from js/site.js).
   Each tube: a clear glass bulb with an exhaust pip and a faint sheen in the dome; inside,
   mica spacers on support rods hold the stack of unlit cathode wires, the lit digit glows orange
   behind a honeycomb anode mesh; leads run down into a bakelite socket. The colons are small
   neon lamps blinking the seconds. */
.launch--nixie {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 18px; align-self: flex-start;
  padding: 20px 26px 18px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045); /* same glass as the cards */
}
.launch--nixie .launch__label { font-size: 0.9rem; }
.launch--nixie .launch__label .dot { background: #ffa04a; box-shadow: 0 0 0 4px rgba(255, 140, 40, 0.16), 0 0 12px #ff7a14; }
.nixie__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nixie { --tube: clamp(24px, 4.4vw, 58px); display: flex; align-items: flex-start; gap: calc(var(--tube) * 0.2); }
.nixie__group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nixie__tubes { position: relative; display: flex; gap: calc(var(--tube) * 0.12); padding: 0 calc(var(--tube) * 0.12) calc(var(--tube) * 0.2); }
.nixie__tubes::after { /* bakelite socket strip */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tube) * 0.26);
  border-radius: 4px 4px 7px 7px;
  background: linear-gradient(180deg, #3a322c 0%, #231d1a 30%, #120f10 100%);
  box-shadow: inset 0 1px 0 rgba(255, 235, 215, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.6), 0 8px 14px rgba(0, 0, 0, 0.6);
}
.nixie__tube { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: var(--tube); padding-top: calc(var(--tube) * 0.12); }
.nixie__tube::before { /* sealed exhaust pip on top of the dome */
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(var(--tube) * 0.14); height: calc(var(--tube) * 0.2);
  border-radius: 50% 50% 35% 35% / 75% 75% 25% 25%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.38) 40%, rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 240, 225, 0.2);
}
.nixie__bulb {
  position: relative; overflow: hidden; width: 100%; height: calc(var(--tube) * 1.9);
  border-radius: 50% 50% calc(var(--tube) * 0.14) calc(var(--tube) * 0.14) / calc(var(--tube) * 0.44) calc(var(--tube) * 0.44) calc(var(--tube) * 0.14) calc(var(--tube) * 0.14);
  background: radial-gradient(75% 42% at 50% 54%, rgba(255, 105, 20, 0.2), rgba(255, 90, 10, 0.05) 60%, transparent 80%);
  box-shadow: 0 0 30px rgba(255, 110, 30, 0.18), 0 0 2px rgba(255, 150, 80, 0.4);
}
.nixie__rods { /* support rods between an upper and a lower mica spacer */
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 14%, rgba(190, 175, 160, 0.45) 14%, rgba(190, 175, 160, 0.45) 16%, transparent 16%, transparent 84%, rgba(190, 175, 160, 0.4) 84%, rgba(190, 175, 160, 0.4) 86%, transparent 86%) 0 16% / 100% 76% no-repeat;
}
.nixie__rods::before, .nixie__rods::after {
  content: ''; position: absolute; left: 9%; right: 9%; height: 4.5%; border-radius: 2px;
  background: linear-gradient(180deg, rgba(240, 230, 220, 0.42), rgba(170, 160, 150, 0.22));
  box-shadow: 0 0 8px rgba(255, 120, 40, 0.3);
}
.nixie__rods::before { top: 14%; }
.nixie__rods::after { bottom: 7%; }
.nixie__cathodes, .nixie__digit {
  position: absolute; left: 17%; top: 21%; width: 66%; height: 68%; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.nixie__cathodes { stroke: rgba(175, 160, 150, 0.2); stroke-width: 1.3; }
.nixie__digit {
  stroke: #ffcf8f; stroke-width: 2.4;
  filter: drop-shadow(0 0 1px #ffe2b8) drop-shadow(0 0 3px #ff9b3d) drop-shadow(0 0 8px #ff6d0a) drop-shadow(0 0 18px rgba(255, 80, 0, 0.6));
  animation: nixie-hum 4.3s ease-in-out infinite;
}
.nixie__digit.is-switching { animation: nixie-switch 0.2s ease-out, nixie-hum 4.3s ease-in-out 0.2s infinite; }
@keyframes nixie-switch { 0% { opacity: 0.2; } 35% { opacity: 0.75; } 55% { opacity: 0.45; } 100% { opacity: 1; } }
@keyframes nixie-hum { 0%, 100% { opacity: 1; } 46% { opacity: 0.92; } 50% { opacity: 1; } 54% { opacity: 0.95; } }
.nixie__mesh { /* honeycomb anode mesh in front of the cathodes, curving away at the sides */
  position: absolute; left: 8%; right: 8%; top: 17%; bottom: 10%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3.464' viewBox='0 0 6 3.464'%3E%3Cpath d='M0 1.732L1 0h2l1 1.732-1 1.732H1zM4 1.732h2' fill='none' stroke='%23ffd2a8' stroke-opacity='.5' stroke-width='.4'/%3E%3C/svg%3E") 0 0 / calc(var(--tube) * 0.15) auto repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.nixie__glass { /* sheen in the dome, glass thickening at the curved sides, reflections, the glass edge */
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(58% 13% at 50% 1%, rgba(235, 235, 250, 0.3), rgba(200, 200, 220, 0.1) 55%, transparent 82%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 10%, transparent 22%, transparent 78%, rgba(255, 255, 255, 0.03) 90%, rgba(255, 255, 255, 0.14)),
    linear-gradient(90deg, transparent 11%, rgba(255, 255, 255, 0.34) 16%, rgba(255, 255, 255, 0.08) 22%, transparent 28%, transparent 77%, rgba(255, 255, 255, 0.14) 83%, transparent 89%),
    linear-gradient(180deg, transparent 88%, rgba(255, 255, 255, 0.07) 94%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 225, 0.28), inset 0 2px 3px rgba(255, 255, 255, 0.14);
}
.nixie__pins { /* leads from the glass base into the socket */
  width: 64%; height: calc(var(--tube) * 0.16);
  background: repeating-linear-gradient(90deg, rgba(205, 195, 185, 0.6) 0 1px, transparent 1px calc(var(--tube) * 0.1));
}
.nixie__colon {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--tube) * 0.3);
  height: calc(var(--tube) * 2.02); padding-top: calc(var(--tube) * 0.12);
}
.nixie__colon i { /* tiny neon lamp: a glass capsule glowing near its tip */
  width: calc(var(--tube) * 0.15 + 2px); height: calc(var(--tube) * 0.3 + 2px); border-radius: 999px;
  background: radial-gradient(60% 34% at 50% 38%, #fff0d2 0 18%, #ffa04a 38%, rgba(255, 110, 20, 0.35) 62%, transparent 80%), linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.22) 35%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 235, 215, 0.24), 0 0 10px rgba(255, 110, 20, 0.6);
  animation: nixie-blink 1s steps(1) infinite;
}
@keyframes nixie-blink { 50% { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2) 35%, rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px rgba(255, 235, 215, 0.2); } }
.launch--nixie.is-zero .nixie__colon i { animation: none; }
.nixie__unit { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 960px) {
  .cosmos-hero { padding-bottom: clamp(64px, 10vh, 120px); }
  .cosmos-hero { grid-template-columns: minmax(0, 1fr); }
  .cosmos-mantra { text-align: left; margin-top: 8px; font-size: clamp(2.6rem, 12vw, 4.2rem); }
  .cosmos-hint { display: none; } /* would collide with the mantra, and its gestures are mostly for the mouse */
}

/* Section separators lighter on dark */
.section + .section { border-top-color: var(--line); }
.details, .details__row { border-color: var(--line); }

@media (max-width: 560px) {
  .launch--nixie { padding: 16px 14px 14px; }
  .nixie__unit { font-size: 0.56rem; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos-hint::after, .nixie__digit, .nixie__digit.is-switching, .nixie__colon i { animation: none; }
}