/* SeismoForge AI — stealth landing
   Palette: Midnight Obsidian / Seismic Teal / Forge Amber (60/30/10)
   Type: Montserrat (display) · Inter (body) */

:root {
  --sf-obsidian: #0b1215;
  --sf-teal: #2ec4b6;
  --sf-amber: #ff9f1c;
  --sf-ink: #f4f8f8;
  --sf-ink-muted: #b7c4c4;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--sf-obsidian);
  color: var(--sf-ink);
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
}

/* Full-bleed orbital field — Earth anchors right; Obsidian void for lockup */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.stage__photo {
  position: absolute;
  inset: 0;
  background-color: var(--sf-obsidian);
  background-image: url("../assets/images/orbit-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  animation: stage-drift 48s ease-in-out infinite alternate;
  will-change: transform;
}

/* Soft Obsidian wash so logo disc and void read as one surface */
.stage__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 48% 58% at 34% 50%,
      rgba(11, 18, 21, 0.05) 0%,
      rgba(11, 18, 21, 0.28) 52%,
      rgba(11, 18, 21, 0.55) 100%
    ),
    linear-gradient(
      90deg,
      rgba(11, 18, 21, 0.55) 0%,
      rgba(11, 18, 21, 0.22) 40%,
      rgba(11, 18, 21, 0.04) 66%,
      rgba(11, 18, 21, 0.12) 100%
    );
}

.lockup {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Sit in the void; Earth mass on the right balances the composition */
  padding: clamp(1.5rem, 5vw, 3rem);
  padding-right: clamp(1.5rem, 18vw, 12rem);
  text-align: center;
  animation: lockup-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lockup__brand {
  margin: 0;
  line-height: 0;
}

.lockup__logo {
  display: block;
  width: min(34rem, 86vw);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(46, 196, 182, 0.08));
}

/* Process slogan — lighter weight under the lockup (brand hierarchy) */
.lockup__slogan {
  margin: 1.15rem 0 0;
  max-width: 28rem;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.12em;
  line-height: 1.45;
  color: var(--sf-ink-muted);
  animation: slogan-fade 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@keyframes lockup-rise {
  from {
    opacity: 0;
    transform: translateY(0.85rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slogan-fade {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stage-drift {
  from {
    transform: scale(1.04) translate3d(0.6%, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(-0.8%, -0.4%, 0);
  }
}

@media (max-width: 640px) {
  .stage__photo {
    background-position: 72% center;
  }

  .lockup {
    padding-right: clamp(1.5rem, 5vw, 3rem);
  }

  .lockup__slogan {
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage__photo,
  .lockup,
  .lockup__slogan {
    animation: none;
  }
}