/* ==========================================================================
   InitiativeSpark — Coming Soon
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted, no external requests)

   Subsetted to latin / latin-ext from the supplied Google Fonts bundles:
     Space Grotesk 2.000, Manrope 4.504, Inter 4.001 — all SIL OFL 1.1,
     license texts in assets/fonts/*-OFL.txt.

   Space Grotesk and Manrope keep their weight axis, so one file per subset
   covers the range. Inter is pinned to wght 500 (the only weight in use) and
   to opsz 14 — leaving its optical-size axis free would reshape the 32px
   tagline away from the approved design.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  --indigo: #4f46e5;
  --cyan: #06b6d4;
  --ink: #15132e;
  --muted: #56536f;
  --surface: #f7f7fb;

  --mark-size: 58px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Page shell — soft cyan glow top right, indigo glow bottom left
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  overflow: hidden;
  background:
    radial-gradient(900px 560px at 78% 12%, rgba(6, 182, 212, 0.16), transparent 60%),
    radial-gradient(820px 600px at 14% 82%, rgba(79, 70, 229, 0.16), transparent 58%),
    var(--surface);
}

/* Fine dot grid, faded out towards the edges. */
.dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(79, 70, 229, 0.13) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(620px 620px at 50% 48%, #000, transparent 72%);
  mask-image: radial-gradient(620px 620px at 50% 48%, #000, transparent 72%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Floating sparks — 8 marks drifting out of phase with each other
   -------------------------------------------------------------------------- */

.sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --nudge preserves the vertical offset the sparks have in the approved design,
   where each mark sat on a text baseline inside its positioned wrapper. It is
   applied via `translate` so it composes with the drift `transform`. */
.spark {
  position: absolute;
  width: var(--size);
  height: var(--size);
  translate: 0 var(--nudge, 0px);
  fill: currentColor;
  animation: drift var(--dur) ease-in-out infinite var(--delay);
}

.spark--1 { --size: 18px; --dur: 6s;   --delay: -2.3s; --nudge: 0px; top: 18%;    left: 22%;  color: var(--indigo); opacity: 0.45; }
.spark--2 { --size: 22px; --dur: 7.5s; --delay: -5.1s; --nudge: 0px; bottom: 22%; right: 24%; color: var(--cyan);   opacity: 0.5; }
.spark--3 { --size: 12px; --dur: 5.2s; --delay: -1.4s; --nudge: 5px; top: 30%;    right: 18%; color: var(--cyan);   opacity: 0.4; }
.spark--4 { --size: 14px; --dur: 6.8s; --delay: -4.2s; --nudge: 3px; top: 14%;    right: 32%; color: var(--indigo); opacity: 0.4; }
.spark--5 { --size: 16px; --dur: 8.2s; --delay: -6.7s; --nudge: 1px; bottom: 30%; left: 16%;  color: var(--cyan);   opacity: 0.45; }
.spark--6 { --size: 11px; --dur: 5.8s; --delay: -0.8s; --nudge: 6px; top: 62%;    right: 14%; color: var(--indigo); opacity: 0.35; }
.spark--7 { --size: 10px; --dur: 7s;   --delay: -3.6s; --nudge: 7px; top: 12%;    left: 38%;  color: var(--cyan);   opacity: 0.4; }
.spark--8 { --size: 13px; --dur: 6.4s; --delay: -5.9s; --nudge: 4px; bottom: 16%; left: 40%;  color: var(--indigo); opacity: 0.4; }

/* --------------------------------------------------------------------------
   Logo lockup
   -------------------------------------------------------------------------- */

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand__mark {
  position: relative;
  width: var(--mark-size);
  height: var(--mark-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Rings expanding out of the mark, staggered to read as a slow pulse. */
.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--mark-size);
  height: var(--mark-size);
  margin: calc(var(--mark-size) / -2) 0 0 calc(var(--mark-size) / -2);
  border-radius: 999px;
  border: 1.5px solid var(--ring-color);
  animation: glowring 4.68s ease-out infinite var(--ring-delay, 0s);
}

.ring--1 { --ring-color: rgba(79, 70, 229, 0.5); --ring-delay: 0s; }
.ring--2 { --ring-color: rgba(6, 182, 212, 0.5); --ring-delay: 1.56s; }
.ring--3 { --ring-color: rgba(79, 70, 229, 0.4); --ring-delay: 3.12s; }

.brand__spark {
  position: relative;
  width: var(--mark-size);
  height: var(--mark-size);
}

.brand__spark path {
  transform-origin: 50px 50px;
  animation: twinkle 3.4s ease-in-out infinite;
}

.brand__name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(36px, 6vw, 54px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.brand__name-accent {
  font-weight: 700;
  background: linear-gradient(100deg, var(--indigo), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--indigo);
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.tagline {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 30px 0 0;
}

.note {
  position: relative;
  font-size: clamp(16px, 2.4vw, 19px);
  font-weight: 500;
  color: var(--muted);
  margin: 22px 0 0;
  letter-spacing: 0.01em;
  line-height: 1.6;
  max-width: 22em;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.84); }
}

@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(4deg); }
}

@keyframes glowring {
  0%   { transform: scale(0.55); opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spark,
  .brand__spark path {
    animation: none;
  }

  /* Without the animation the rings would sit as static circles on the mark. */
  .ring {
    display: none;
  }
}