/* STELLARNOVA holding page — output-claude-v07 (final polish, patched from v06)
   Principle kept: the 4K MP4 is the hero. No full-page overlay, no filter on the video.
   v07 changes (Jonah's v06 review):
   1. Lockup: wordmark pulled closer to the mark (gap 22 -> 11 units) and enlarged (13.5 -> 16.5 units);
      font switched to Montserrat 500 with a real A. The v06 inverted-V A was thin and gappy at this size.
   2. Loading bar: longer line with a faint visible track, slower fill that visibly reaches 100%,
      then holds complete with a soft glow pulse and an occasional light sweep.
   3. Corner labels restored: top-right "BUILDING WHAT'S NEXT —", bottom-right "BLOCKCHAIN | AI AGENTS | ROBOTICS",
      small Manrope caps with a soft fade/blur/tracking settle (scramble rejected as too glitchy for this page).
   4. Pacing: entrance delays ~12-15% snappier; durations unchanged so it stays calm.
   Body text position/treatment unchanged from v06.
   v09: mobile-only polish inside @media (max-width: 720px) (tighter lockup-to-hero gap, slightly smaller
   hero stack). Desktop/tablet rules are byte-identical to v08.
   v10: loading bar width only. The bar now spans the full ink width of OUR WEBSITE WILL BE LIVE SOON.
   (desktop/tablet 237.5 units, was 110; mobile 198.5px, was 88). Everything else is byte-identical to v09.
   Scale unit --s = 1px at a 1280px-wide viewport. */

:root {
  --s: clamp(0.84px, 0.078125vw, 1.5px);
  --ink: #f6fbfa;
  --ink-2: #eefbf6;                     /* line 2 is a hair cooler, as in the reference */
  --body: rgba(214, 228, 225, 0.86);    /* soft white for the body line */
  --mint: #74e6c3;
  --mint-bar: #74e6c3;
  --pad-x: calc(77 * var(--s));         /* ref 1: mark starts at x=77 of 1280 */
  --pad-y: calc(34 * var(--s));         /* ref 1: mark top at y=34 of 720 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 1px 14px rgba(0, 6, 10, 0.55), 0 0 2px rgba(0, 6, 10, 0.45);
  --f-body: "Manrope", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --f-mark: "Montserrat", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --corner: rgba(236, 246, 243, 0.82);
}

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

html, body {
  height: 100%;
  background: #02080b;
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

.stage { position: fixed; inset: 0; overflow: hidden; }

/* ---------- Video: full bleed, untouched brightness ---------- */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Local text-safe zone (not a wash) ---------- */
.safe { position: absolute; pointer-events: none; z-index: 1; }
.safe--tl {
  top: 0; left: 0;
  width: min(62vw, 940px);
  height: min(70vh, 640px);
  background: radial-gradient(ellipse at 8% 18%, rgba(1, 6, 10, 0.34) 0%, rgba(1, 6, 10, 0.14) 46%, rgba(1, 6, 10, 0) 72%);
}
.safe--br {
  right: 0; bottom: 0;
  width: min(46vw, 620px);
  height: calc(150 * var(--s));
  background: radial-gradient(ellipse at 100% 100%, rgba(1, 6, 10, 0.42) 0%, rgba(1, 6, 10, 0) 70%);
}

.brand, .hero, .corner { position: absolute; z-index: 2; text-shadow: var(--shadow); }

/* ---------- 1. Logo lockup ----------
   v07: tighter lockup (gap roughly a third of the mark width, as in the master logo), larger caps,
   moderate tracking so the letters hold together as one word. */
.brand {
  top: var(--pad-y);
  left: var(--pad-x);
  display: flex;
  align-items: center;
  gap: calc(11 * var(--s));
}
.brand__mark {
  width: calc(31 * var(--s));
  height: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(94, 242, 196, 0.25)) drop-shadow(0 1px 5px rgba(0, 6, 10, 0.6));
  opacity: 0;
  transform: scale(0.92) rotate(-8deg);
  animation: markIn 2.4s var(--ease-soft) 0.2s forwards, markGlow 11s ease-in-out 3.5s infinite;
}
.wordmark {
  --track: 0.3em;
  font-family: var(--f-mark);
  font-weight: 500;
  font-size: calc(16.5 * var(--s));
  letter-spacing: var(--track);
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  margin-right: calc(-1 * var(--track));
}
.wordmark .l {
  display: inline-block;
  opacity: 0;
  animation: letterIn 1.6s var(--ease-soft) forwards, shimmer 11s ease-in-out infinite;
  animation-delay: calc(0.35s + var(--i) * 0.06s), calc(3.5s + var(--i) * 0.09s);
}
/* ---------- 2/3. Body text (reference image 2) ----------
   Ref @1280x720: block left x=161, headline ink top y=121; headline ≈38px light sans, line pitch 38px;
   caps line top y=208, ≈11px, mint, wide tracking; bar 33x2px at y=242; body line starts y=264, ≈13px soft white. */
.hero {
  left: calc(161 * var(--s));
  top: 16.1vh;   /* ref 2: headline ink top at 16.8% of height */
  max-width: min(60vw, 900px);
}
.hero__title {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: calc(38.5 * var(--s));
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: flex;            /* stops the lines' negative margins collapsing, so metrics stay exact */
  flex-direction: column;
  align-items: flex-start;
}
.hero__title .line { display: block; overflow: hidden; padding: 0.06em 0 0.24em; margin: -0.06em 0 -0.24em; }  /* room for descenders (g, y) inside the reveal mask */
.hero__title .line + .line { color: var(--ink-2); }
.hero__title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(4px);
  animation: rise 2.2s var(--ease-soft) forwards;
  animation-delay: calc(0.85s + var(--i) * 0.28s);
}
.hero__sub {
  margin-top: calc(11 * var(--s));
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(10.5 * var(--s));
  letter-spacing: 0.24em;
  line-height: 1.4;
  color: var(--mint);
  opacity: 0;
  animation: fade 2.2s var(--ease) 2.3s forwards;
}

/* Thin premium loading line (v07 fix).
   v06 was a 34-unit stub with no track and a 1.4s fill, so it read as stopping short.
   Now: 110-unit line, faint visible track so the full length is legible, 2.6s fill that visibly
   reaches the end, then holds complete with a soft glow pulse and an occasional light sweep. */
.bar {
  position: relative;
  margin-top: calc(23 * var(--s));
  width: calc(237.5 * var(--s));   /* v10: = ink width of .hero__sub (237.6 units measured, trailing tracking excluded) */
  height: max(1.5px, calc(1.5 * var(--s)));
  background: rgba(116, 230, 195, 0.16);
  opacity: 0;
  animation: fade 0.8s linear 2.7s forwards;
}
.bar__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(116, 230, 195, 0.75), var(--mint-bar));
  box-shadow: 0 0 6px rgba(94, 242, 196, 0.45);
  transform-origin: left center;
  transform: scaleX(0);
  animation: load 2.6s cubic-bezier(0.45, 0, 0.2, 1) 2.9s forwards, barGlow 5s ease-in-out 5.5s infinite;
}
.bar__fill::after {   /* light sweep, clipped to the line */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  opacity: 0;
  animation: sweep 7s ease-in-out 6.5s infinite;
}

.hero__body {
  margin-top: calc(17 * var(--s));
  font-family: var(--f-body);
  font-weight: 400;
  font-size: calc(12 * var(--s));
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--body);
  opacity: 0;
  animation: fade 2.2s var(--ease) 3.4s forwards;
}

/* ---------- Corner labels (v07 restored) ----------
   Small, quiet Manrope caps. Entrance: soft fade + slight blur + tracking settle. No scramble/glitch. */
.corner {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(9.5 * var(--s));
  letter-spacing: 0.26em;
  line-height: 1;
  color: var(--corner);
  white-space: nowrap;
  opacity: 0;
  animation: cornerIn 2.4s var(--ease-soft) forwards;
}
.corner--tr {
  top: calc(var(--pad-y) + 9 * var(--s));    /* optically centred on the lockup */
  right: var(--pad-x);
  animation-delay: 1.4s;
}
.corner--tr .dash { color: var(--mint); margin-left: 0.35em; letter-spacing: 0; }
.corner--br {
  bottom: calc(var(--pad-y) + 6 * var(--s));
  right: var(--pad-x);
  animation-delay: 3.8s;
}
.corner--br .sep { color: var(--mint); margin: 0 0.7em; opacity: 0.85; }

/* ---------- Keyframes ---------- */
@keyframes rise   { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes fade   { to { opacity: 1; } }
@keyframes letterIn { from { opacity: 0; transform: translateY(0.25em); } to { opacity: 1; transform: none; } }
@keyframes markIn { to { opacity: 1; transform: none; } }
@keyframes markGlow {
  0%, 70%, 100% { filter: drop-shadow(0 0 8px rgba(94, 242, 196, 0.25)) drop-shadow(0 1px 5px rgba(0, 6, 10, 0.6)); }
  12%           { filter: drop-shadow(0 0 15px rgba(94, 242, 196, 0.6)) drop-shadow(0 1px 5px rgba(0, 6, 10, 0.6)); }
}
@keyframes load { to { transform: scaleX(1); } }
@keyframes barGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(94, 242, 196, 0.45); }
  50%      { box-shadow: 0 0 12px rgba(94, 242, 196, 0.8); }
}
@keyframes sweep {
  0%        { left: -30%; opacity: 0; }
  4%        { opacity: 1; }
  24%       { left: 100%; opacity: 1; }
  26%, 100% { left: 100%; opacity: 0; }
}
@keyframes cornerIn {
  from { opacity: 0; filter: blur(3px); letter-spacing: 0.34em; }
  to   { opacity: 1; filter: blur(0);   letter-spacing: 0.26em; }
}
@keyframes shimmer {
  0%, 16%, 100% { color: var(--ink); text-shadow: var(--shadow); }
  6%            { color: #dffff4; text-shadow: 0 0 10px rgba(94, 242, 196, 0.8), 0 0 2px rgba(94, 242, 196, 0.6); }
}
/* ---------- Mobile / narrow ---------- */
@media (max-width: 720px) {
  :root { --pad-x: 24px; --pad-y: 26px; }
  .brand { gap: 10px; }
  .brand__mark { width: 28px; }
  .wordmark { --track: 0.28em; font-size: 15px; }
  /* v09 mobile polish: hero pulled up under the lockup (v08 top was clamp(120px,18vh,170px) = 152px at 390x844,
     ~100px of dead space) and the stack scaled down slightly, so the whole block, including
     THE BRIDGE BETWEEN TWO WORLDS., sits in the dark upper-left window above the bright bridge/beam/horizon. */
  .hero { left: var(--pad-x); top: calc(var(--pad-y) + clamp(62px, 8.4vh, 78px)); max-width: calc(100vw - 2 * var(--pad-x)); }
  /* max-width 10em keeps the v07/v08 three-line stack (We're building / something / extraordinary.) at every
     phone width, so the headline stays left of the vertical beam instead of running into it. */
  .hero__title { font-size: clamp(24px, 7.2vw, 30px); line-height: 1.06; max-width: 10em; }
  .hero__sub { margin-top: 14px; font-size: 9.5px; letter-spacing: 0.18em; }
  .bar { margin-top: 17px; width: 198.5px; height: 1.5px; }   /* v10: = ink width of mobile .hero__sub (198.5px) */
  .hero__body { margin-top: 14px; font-size: 10.5px; letter-spacing: 0.14em; }
  /* phones: top-right would collide with the lockup, so both labels stack bottom-left */
  .corner { font-size: 9px; letter-spacing: 0.2em; }
  .corner--tr { top: auto; right: auto; left: var(--pad-x); bottom: calc(var(--pad-y) + 22px); }
  .corner--br { right: auto; left: var(--pad-x); bottom: var(--pad-y); }
  .corner--br .sep { margin: 0 0.5em; }
  .safe--br { left: 0; width: 100vw; height: 130px; background: linear-gradient(0deg, rgba(1, 6, 10, 0.42), rgba(1, 6, 10, 0)); }
  .safe--tl { width: 100vw; height: 62vh; background: radial-gradient(ellipse at 20% 22%, rgba(1, 6, 10, 0.36) 0%, rgba(1, 6, 10, 0.14) 50%, rgba(1, 6, 10, 0) 78%); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__title .w, .hero__sub, .bar, .hero__body, .brand__mark, .wordmark .l, .corner { opacity: 1; transform: none; filter: none; }
  .bar__fill { transform: scaleX(1); }
}