/* Launch experience: additive layers over the approved intro and hero.
   Nothing here restyles the frozen rocket, smoke, blob or headline. */

@property --veil-y { syntax: '<percentage>'; inherits: false; initial-value: 92%; }
@property --veil-r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ---------- Intro: pre-ignition veil ----------
   Painted from the head stylesheet so the homepage never flashes before the
   rocket is ready. Sits under the smoke canvas (z 1) and the ship (z 2). */
.launch-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, #ffffffd0 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 64%, #ffffff90 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 31%, #ffffffb0 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, #ffffffa0 50%, transparent 51%),
    radial-gradient(1px 1px at 69% 47%, #ffffff80 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 22%, #ffffffc0 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 71%, #ffffff90 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 82%, #ffffff70 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 88%, #ffffff60 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 86%, #ffffff60 50%, transparent 51%),
    radial-gradient(1px 1px at 49% 55%, #ffffff50 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 41%, #ffffff70 50%, transparent 51%),
    radial-gradient(120% 70% at 50% 120%, #2a120a 0%, #12090a 38%, transparent 70%),
    #07080a;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% var(--veil-y), transparent var(--veil-r), #000 calc(var(--veil-r) + 22%));
  mask-image: radial-gradient(ellipse 70% 62% at 50% var(--veil-y), transparent var(--veil-r), #000 calc(var(--veil-r) + 22%));
}
.launch-intro.is-playing::before { animation: launch-veil-open 2.55s cubic-bezier(.7, 0, .2, 1) forwards; }

@keyframes launch-veil-open {
  0%, 28% { --veil-y: 92%; --veil-r: 0%; }
  100% { --veil-y: 38%; --veil-r: 165%; }
}

/* Launch-pad glow: ignites, then falls away as the rocket climbs. */
.launch-intro::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14vh;
  z-index: 1;
  width: min(120vw, 1400px);
  height: 46vh;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, #ffd9a8 0%, #ff8a3d55 26%, #e8502a2e 52%, transparent 100%);
  mix-blend-mode: screen;
}
.launch-intro.is-playing::after { animation: launch-pad-glow 2.4s cubic-bezier(.22, 1, .36, 1) forwards; }

@keyframes launch-pad-glow {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  12% { opacity: 1; transform: translateX(-50%) scale(1); }
  22% { opacity: .82; }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.25) translateY(12vh); }
}

/* Ignition shudder on the rocket artwork (the wrapper carries the flight transform). */
.launch-intro.is-playing .launch-intro-ship img { animation: launch-shudder .07s linear 8 alternate; }
@keyframes launch-shudder {
  from { transform: translate3d(-.8px, .4px, 0); }
  to { transform: translate3d(.8px, -.4px, 0); }
}

.launch-ignition {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------- Hero: background depth ----------
   The WebGL blob canvas is opaque black, so these layers add light with
   screen blending instead of sitting behind it. */
.hero-depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1);
}
.hero-depth.is-ready { opacity: 1; }
.hero-depth-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-depth-orbits {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(150vmin, 1500px);
  height: min(150vmin, 1500px);
  transform: translate3d(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)), 0);
  transition: transform 1.4s cubic-bezier(.22, 1, .36, 1);
}
.hero-depth-orbits svg { width: 100%; height: 100%; overflow: visible; }
.hero-depth-horizon {
  position: absolute;
  left: 50%;
  bottom: -62vmax;
  width: 150vmax;
  height: 80vmax;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 88%, #ff6a3d26 94%, #ffb38a12 97%, transparent 100%);
  box-shadow: 0 -2px 120px -40px #e8502a55;
}

/* Horizontal logo lockup (badge + wordmark), sized to read at a glance. */
.nav .nav-logo { display: inline-flex; align-items: center; }
.nav .nav-logo picture, .footer .footer-brand picture { display: block; line-height: 0; }
.nav .nav-logo-img { display: block; width: auto; height: 46px; border-radius: 0; }
.nav .nav-links a { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1100px) {
  .nav .nav-logo-img { height: 38px; }
  .nav .nav-links { gap: 0; }
  .nav .nav-links a { padding-inline: 9px; }
  .nav .nav-cta { white-space: nowrap; }
}
.footer.home-v2 .footer-logo { display: block; width: auto; height: 56px; max-width: 100%; margin-bottom: 16px; border-radius: 0; }

.hero-template { cursor: crosshair; }
.hero-slogan {
  max-width: 34ch;
  margin: clamp(14px, 2.2vh, 22px) auto 0;
  color: #d9dce0;
  font: 500 clamp(1.02rem, 1.55vw, 1.32rem)/1.45 'Manrope', sans-serif;
  letter-spacing: -.005em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 18px #000, 0 0 2px #000;
}
.hero-slogan span { display: block; color: #ff9a75; font-weight: 700; }
.hero-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 56px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px;
  transform: translateX(-50%);
  border: 1px solid #ffffff22;
  border-radius: 999px;
  background: #0b0c0fb3;
  color: #d9dce0;
  font: 600 .78rem/1 'Manrope', sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: hero-hint-in .9s cubic-bezier(.22, 1, .36, 1) 1.2s both;
}
.hero-hint span { width: 8px; height: 8px; border-radius: 50%; background: #ff6a3d; box-shadow: 0 0 0 0 #ff6a3d88; animation: hero-hint-pulse 1.8s ease-out infinite; }
.hero-template.is-exploring .hero-hint { animation: hero-hint-out .5s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes hero-hint-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hero-hint-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 8px); visibility: hidden; } }
@keyframes hero-hint-pulse { 70% { box-shadow: 0 0 0 9px #ff6a3d00; } 100% { box-shadow: 0 0 0 0 #ff6a3d00; } }

@media (max-width: 700px) {
  .nav .nav-logo-img { height: 38px; }
  .footer.home-v2 .footer-logo { height: 48px; }
  .hero-depth-orbits { width: 190vmin; height: 190vmin; }
  .hero-depth-horizon { bottom: -70vmax; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-hint { display: none; }
  .hero-depth { transition: none; }
  .hero-depth-orbits { transition: none; transform: translate(-50%, -50%); }
}