/* Orecast — coming-soon page.
   Mobile-first: the base rules are the 390px reference spec; the ≥640px block
   is the 1080px desktop spec, interpolating between the two across that range. */

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

body {
  margin: 0;
  background: var(--oc-bg);
  color: var(--oc-text);
  font-family: var(--oc-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* — decorative rings ————————————————————————————————————————————
   Fixed layer so they're clipped by the viewport the way they are by the
   reference frame, without clipping (or scrolling) the content column. */
.rings {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ring {
  position: absolute;
  left: 50%;
  top: 48%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 2px solid var(--oc-ring);
}
.ring-inner { width: 360px; height: 360px; }
.ring-outer { display: none; }

/* — page scaffold ———————————————————————————————————————————— */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 24px 26px 28px;
}

/* — header ——————————————————————————————————————————————————— */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.mark { display: block; }
.mark-brand { width: 24px; height: 24px; }
.wordmark {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
}
.pill {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--oc-radius-pill);
  background: var(--oc-accent);
  color: var(--oc-bg);
}

/* — hero ————————————————————————————————————————————————————— */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mark-hero {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}
.kicker {
  margin: 0 0 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--oc-text-dim5);
}
.headline {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}
.headline em {
  font-style: normal;
  color: var(--oc-accent);
}
.blurb {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--oc-text-dim4);
}
.desktop-only { display: none; }

/* — footer: fuse bar ————————————————————————————————————————— */
.fuse-track {
  position: relative;
  height: 10px;
  border-radius: var(--oc-radius-pill);
  background: var(--oc-ring);
}
.fuse-fill {
  position: relative;
  width: 73%;
  height: 100%;
  border-radius: var(--oc-radius-pill);
  background: var(--oc-accent);
}
.fuse-knob {
  position: absolute;
  left: 100%;
  top: 50%;
  translate: -6px -50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--oc-accent-bright);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc-accent) 30%, transparent);
}
.fuse-label {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--oc-text-dim4);
}
.fuse-sep { display: none; }

.site-link {
  color: var(--oc-accent);
  text-decoration: none;
}
.site-link:hover { color: var(--oc-accent-bright); }
.site-link:focus-visible {
  outline: 2px solid var(--oc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* — desktop ——————————————————————————————————————————————————
   --fluid ramps 0→1px across 640px→1080px, so `N * var(--fluid)` walks a
   value N pixels up from its mobile size to its desktop size. */
@media (min-width: 640px) {
  :root { --fluid: calc((100vw - 640px) / 440); }

  .ring { top: 52%; }
  .ring-inner {
    width: clamp(360px, calc(360px + 160 * var(--fluid)), 520px);
    height: clamp(360px, calc(360px + 160 * var(--fluid)), 520px);
  }
  .ring-outer {
    display: block;
    width: clamp(500px, calc(500px + 220 * var(--fluid)), 720px);
    height: clamp(500px, calc(500px + 220 * var(--fluid)), 720px);
    border-color: color-mix(in srgb, var(--oc-ring) 55%, transparent);
  }

  .page {
    padding-top: clamp(24px, calc(24px + 12 * var(--fluid)), 36px);
    padding-inline: clamp(26px, calc(26px + 30 * var(--fluid)), 56px);
    padding-bottom: clamp(28px, calc(28px + 12 * var(--fluid)), 40px);
  }

  .brand { gap: 12px; }
  .mark-brand { width: 30px; height: 30px; }
  .wordmark { font-size: 17px; letter-spacing: 0.22em; }
  .pill { font-size: 12px; padding: 6px 14px; }

  .mark-hero {
    width: clamp(120px, calc(120px + 50 * var(--fluid)), 170px);
    height: clamp(120px, calc(120px + 50 * var(--fluid)), 170px);
    margin-bottom: clamp(20px, calc(20px + 6 * var(--fluid)), 26px);
  }
  .kicker {
    margin-bottom: clamp(12px, calc(12px + 4 * var(--fluid)), 16px);
    font-size: 12.5px;
    letter-spacing: 0.24em;
  }
  .br-mobile { display: none; }
  .headline {
    font-size: clamp(34px, calc(34px + 24 * var(--fluid)), 58px);
    line-height: 1.08;
  }
  .blurb {
    margin-top: clamp(16px, calc(16px + 6 * var(--fluid)), 22px);
    font-size: 15.5px;
  }
  .desktop-only { display: inline; }

  .fuse {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .fuse-track { flex: 1; height: 12px; }
  .fuse-knob {
    translate: -7px -50%;
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--oc-accent) 30%, transparent);
  }
  .fuse-label {
    display: block;
    margin: 0;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .fuse-sep { display: inline; }
}

/* — motion ———————————————————————————————————————————————————
   The spark pulses, the fuse creeps. The fill never reaches the end. */
@keyframes spark-pulse {
  from { scale: 1;    opacity: 0.85; }
  to   { scale: 1.25; opacity: 1; }
}
@keyframes fuse-creep {
  from { width: 70%; }
  to   { width: 76%; }
}

.mark .spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: spark-pulse 1.2s ease-in-out infinite alternate;
}
.fuse-knob { animation: spark-pulse 1.2s ease-in-out infinite alternate; }
.fuse-fill { animation: fuse-creep 8s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .mark .spark,
  .fuse-knob,
  .fuse-fill { animation: none; }
}