/* Launchii — "Coming Soon: Eclipse".
   Ported 1:1 from the approved Claude Design template
   (templates/coming-soon-eclipse, logoRing / sunrise / thrust-motion /
   tagline defaults) into strict-CSP static CSS: no inline styles anywhere.
   Brand: navy #0b1d31, gold #b98e50, Inter Tight (self-hosted variable). */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* ?v is a manual FONT version — bump it (itv2, itv3…) only when the woff2
     file itself changes. It is NOT the release sha: the font is cached 30 days
     and must not re-download every release. */
  src: url("/fonts/InterTight-var.woff2?v=itv1") format("woff2");
}

:root {
  --navy: #0b1d31;
  --gold: #b98e50;
  --gold-hover: #d3b077;
  --paper: #f6f7f8;
  --ink-faint: #8fa1b3;
  --bg-deep: #050d18;
  color-scheme: dark;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter Tight", Arial, sans-serif;
  background: var(--bg-deep);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- stage ---------- */

.stage {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 56px 20px 40px;
  background: radial-gradient(130% 130% at 50% 38%, #0e2137 0%, #0b1d31 44%, #050d18 100%);
}

/* ---------- starfield ---------- */

#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: lkCoronaIn 2s ease-out 1.28s both;
}

/* The rich canvas field replaces the 12 static CSS stars only once the canvas
   actually initializes (eclipse.js sets .stars-live on the stage); a JS or
   canvas failure keeps the CSS fallback sky. */
.stars-live .stars {
  display: none;
}

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: lkCoronaIn 2s ease-out 1.28s both;
}

.stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--paper);
}

.stars span:nth-child(1)  { left: 12%; top: 18%; opacity: 0.4; }
.stars span:nth-child(2)  { left: 22%; top: 72%; opacity: 0.25; }
.stars span:nth-child(3)  { left: 8%;  top: 52%; width: 3px; height: 3px; opacity: 0.2; filter: blur(1px); }
.stars span:nth-child(4)  { left: 31%; top: 10%; background: #e9d5ae; opacity: 0.35; }
.stars span:nth-child(5)  { left: 68%; top: 14%; opacity: 0.4; }
.stars span:nth-child(6)  { left: 80%; top: 30%; width: 3px; height: 3px; opacity: 0.2; filter: blur(1px); }
.stars span:nth-child(7)  { left: 88%; top: 62%; background: #e9d5ae; opacity: 0.3; }
.stars span:nth-child(8)  { left: 76%; top: 82%; opacity: 0.25; }
.stars span:nth-child(9)  { left: 55%; top: 6%;  opacity: 0.3; }
.stars span:nth-child(10) { left: 42%; top: 88%; opacity: 0.2; }
.stars span:nth-child(11) { left: 93%; top: 12%; opacity: 0.3; }
.stars span:nth-child(12) { left: 4%;  top: 84%; background: #e9d5ae; opacity: 0.25; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

/* ---------- emblem + corona ---------- */

.emblem {
  position: relative;
  height: clamp(220px, 44vmin, 400px);
  aspect-ratio: 55.076 / 47.075;
}

/* Both corona layers align to the logo's ring circle. Parallax is STARS-ONLY
   (Albert, 2026-07-17) — the logo composition stays static. */
.corona-wrap {
  position: absolute;
  left: 50%;
  top: 51.7%;
  width: 105.8%;
  height: 128.9%;
  transform: translate(-50%, -50%);
}

.corona-front {
  pointer-events: none;
}

.lk-corona {
  position: absolute;
  inset: 0;
  animation: lkSunrise 1.52s cubic-bezier(0.3, 0.5, 0.25, 1) 0.84s both;
}

/* Blue chromosphere flash — the cool atmospheric halo that precedes the warm
   corona, sitting BEHIND the mark (the rocket/ring silhouette carves it).
   "Blur animation" is two pre-blurred layers cross-fading opacity (compositor-
   cheap; real filter animation janks phones). */
.blue-flash {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  pointer-events: none;
}

.blue-flash-soft {
  background: radial-gradient(closest-side,
    rgba(124, 165, 220, 0.42) 0%,
    rgba(96, 138, 199, 0.2) 46%,
    rgba(70, 110, 170, 0.07) 68%,
    rgba(70, 110, 170, 0) 80%);
  filter: blur(34px);
  animation:
    lkBlueIn 1.92s cubic-bezier(0.25, 0.6, 0.3, 1) 0.28s both,
    lkBlueBreathe 11s ease-in-out 3.2s infinite;
}

.blue-flash-sharp {
  background: radial-gradient(closest-side,
    rgba(140, 180, 230, 0.30) 0%,
    rgba(110, 150, 205, 0.16) 52%,
    rgba(110, 150, 205, 0) 76%);
  filter: blur(10px);
  animation: lkBlueSharpIn 2.08s cubic-bezier(0.25, 0.6, 0.3, 1) 0.72s both;
}

.lk-bloom {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side at 33.7% 31.9%,
    rgba(233, 150, 55, 0.5) 0%,
    rgba(196, 120, 45, 0.22) 38%,
    rgba(150, 85, 30, 0.08) 58%,
    rgba(150, 85, 30, 0) 74%);
  filter: blur(24px);
  animation: lkBreathe 9s ease-in-out 2.56s infinite;
}

.arc-soft {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    rgba(220, 130, 40, 0) 0deg 48deg,
    rgba(224, 120, 32, 0.45) 88deg,
    rgba(255, 179, 71, 0.85) 120deg,
    #ffd977 138deg,
    rgba(255, 179, 71, 0.8) 158deg,
    rgba(224, 120, 32, 0.35) 190deg,
    rgba(220, 130, 40, 0) 226deg 360deg);
  -webkit-mask: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0) 76.5%, #000 79% 84%, rgba(0, 0, 0, 0) 100%);
  mask: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0) 76.5%, #000 79% 84%, rgba(0, 0, 0, 0) 100%);
  filter: blur(15px);
}

.arc-crisp {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    rgba(255, 214, 110, 0) 0deg 100deg,
    rgba(255, 203, 95, 0.9) 124deg,
    #ffe9a8 138deg,
    rgba(255, 203, 95, 0.9) 152deg,
    rgba(255, 214, 110, 0) 178deg 360deg);
  -webkit-mask: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0) 77.5%, #000 78.6% 81.5%, rgba(0, 0, 0, 0) 87%);
  mask: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0) 77.5%, #000 78.6% 81.5%, rgba(0, 0, 0, 0) 87%);
  filter: blur(2px);
}

/* The eclipse "diamond" peeking over the ring's upper-left, in front.
   The sun ignites from scale(0): wide halo first, then mid, hot core last. */
.peek {
  position: absolute;
  left: 22.9%;
  top: 19.9%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: lkSunIgnite 1.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.peek-wide { animation-delay: 0.92s; }
.peek-mid  { animation-delay: 1.06s; }
.peek-core { animation-delay: 1.2s; }

.peek-wide {
  width: 30%;
  background: radial-gradient(closest-side,
    rgba(255, 190, 90, 0.5) 0%,
    rgba(240, 150, 60, 0.2) 48%,
    rgba(240, 150, 60, 0) 74%);
  filter: blur(14px);
}

.peek-mid {
  width: 14%;
  background: radial-gradient(closest-side,
    #ffd98f 0%,
    rgba(255, 203, 110, 0.8) 40%,
    rgba(255, 203, 110, 0) 72%);
  filter: blur(6px);
}

.peek-core {
  width: 7%;
  background: radial-gradient(closest-side,
    #fffbf0 0%,
    rgba(255, 236, 190, 0.95) 40%,
    rgba(255, 236, 190, 0) 70%);
  filter: blur(2px);
}

/* ---------- the mark (porcelain-on-dark) ---------- */

.mark-wrap {
  position: absolute;
  inset: 0;
  animation: lkFadeUp 0.64s cubic-bezier(0.2, 0.7, 0.3, 1) 0.08s both;
}

.mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.mark .lk-earth  { fill: var(--paper); }
.mark .lk-ring   { fill: none; stroke: var(--paper); stroke-width: 5.2; }
.mark .lk-rocket { fill: var(--paper); }
.mark .lk-window { fill: var(--navy); }
.mark .lk-thrust { fill: var(--gold); }

.lk-thrusting .lk-thrust {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: lkThrustY 1.4s ease-in-out infinite;
}

.lk-thrusting .lk-thrust-l { animation-duration: 1.7s; animation-delay: 0.2s; }
.lk-thrusting .lk-thrust-r { animation-duration: 2s;   animation-delay: 0.45s; }

/* ---------- titles ---------- */

.titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vmin, 20px);
  text-align: center;
}

.wordmark {
  font-weight: 700;
  font-size: clamp(30px, 5.6vmin, 48px);
  letter-spacing: 0.12em;
  padding-left: 0.12em;
  line-height: 1;
  color: var(--paper);
  animation: lkFadeUp 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 0.36s both;
}

.wordmark .lk-ii {
  color: var(--gold);
}

.soon {
  font-size: clamp(12px, 1.9vmin, 15px);
  font-weight: 600;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  animation: lkFadeUp 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 0.48s both;
}

.tagline {
  max-width: 52ch;
  text-align: center;
  font-size: clamp(14px, 2vmin, 16px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--ink-faint);
  animation: lkFadeUp 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 0.64s both;
}

/* ---------- footer ---------- */

.foot {
  padding: 1.1rem 1.4rem 1.3rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  background: var(--bg-deep);
}

.foot a.email {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 142, 80, 0.55);
  /* Enlarge the tap target toward the ~44px house standard without shifting
     the baseline (negative margin offsets the padding). */
  display: inline-block;
  padding: 11px 6px 10px;
  margin: -11px -6px -10px;
}

.foot a.email:hover {
  color: var(--gold-hover);
  border-bottom-color: var(--gold-hover);
}

.foot a.email:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* No-JS fallback: address assembled from CSS strings (never present in the
   HTML source); contact.js replaces it with a clickable mailto. */
:root:not(.js) .email::after {
  content: "info" "\0040" "launchii" "." "ca";
}

/* ---------- animations (verbatim from the approved design) ---------- */

@keyframes lkCoronaIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lkFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lkSunrise {
  from { opacity: 0; transform: translateY(2.5%) scale(0.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lkBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.78; transform: scale(0.97); }
}

@keyframes lkThrustY {
  0%, 100% { transform: scaleY(0.9); }
  50%      { transform: scaleY(1.15); }
}

@keyframes lkSunIgnite {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes lkBlueIn {
  from { opacity: 0; transform: scale(0.7); }
  55%  { opacity: 0.85; }
  to   { opacity: 0.34; transform: scale(1); }
}

@keyframes lkBlueSharpIn {
  from { opacity: 0; transform: scale(0.82); }
  60%  { opacity: 0.65; }
  to   { opacity: 0.3; transform: scale(1); }
}

@keyframes lkBlueBreathe {
  0%, 100% { opacity: 0.34; }
  50%      { opacity: 0.22; }
}

/* ---------- small / short screens ---------- */

@media (max-height: 520px) {
  .stage { padding: 24px 16px 16px; }
  .emblem { height: clamp(140px, 38vmin, 240px); }
  .hero { gap: 18px; }
}

/* ---------- reduced motion: everything lands settled ---------- */

@media (prefers-reduced-motion: reduce) {
  .stars,
  #starfield,
  .lk-corona,
  .lk-bloom,
  .blue-flash,
  .peek,
  .mark-wrap,
  .wordmark,
  .soon,
  .tagline,
  .lk-thrusting .lk-thrust {
    animation: none;
  }
  /* Blue flash keyframes end at partial opacity; without them, pin the
     settled look explicitly. */
  .blue-flash-soft  { opacity: 0.34; }
  .blue-flash-sharp { opacity: 0.3; }
}

/* ---------- 404 ---------- */

.err {
  gap: 26px;
}

.err .mark-sm {
  height: 110px;
  width: auto;
  overflow: visible;
}

.err .mark-sm .lk-earth  { fill: var(--paper); }
.err .mark-sm .lk-ring   { fill: none; stroke: var(--paper); stroke-width: 5.2; }
.err .mark-sm .lk-rocket { fill: var(--paper); }
.err .mark-sm .lk-window { fill: var(--navy); }
.err .mark-sm .lk-thrust { fill: var(--gold); }

.err h1 {
  font-size: clamp(22px, 4vmin, 32px);
  letter-spacing: 0.12em;
  padding-left: 0.12em;
  color: var(--paper);
}

.err p {
  color: var(--ink-faint);
  line-height: 1.9;
}

.err a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 142, 80, 0.55);
  display: inline-block;
  padding: 10px 8px;
  margin: -10px -8px;
}

.err a:hover {
  color: var(--gold-hover);
  border-bottom-color: var(--gold-hover);
}

.err a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}