/* ============================================================
   INFINIVAL — landing page styles
   ============================================================ */

/* Self-hosted fonts (no external dependencies) */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/orbitron-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('assets/fonts/sora-200.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/sora-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/sora-400.woff2') format('woff2');
}

* { box-sizing: border-box; }

:root {
  --bg: #000;
  --text-soft: rgba(230, 232, 238, 0.85);
  --text-faint: rgba(200, 205, 215, 0.55);
  --rule: rgba(255, 255, 255, 0.10);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text-soft);
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 300;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle radial vignette over the whole page for depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* ============================================================
   3D Scene canvas
   ============================================================ */
#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  display: block;
}

/* ============================================================
   Top bar
   ============================================================ */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: clamp(18px, 2.4vw, 32px) clamp(20px, 3vw, 44px);
  pointer-events: none;
  animation: fadeIn 1.6s ease-out 0.2s both;
}

.top-spacer { display: none; }

.domain {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 0.95vw, 13px);
  letter-spacing: 0.32em;
  color: rgba(220, 225, 235, 0.7);
  pointer-events: auto;
}

.domain .dot {
  color: #5fa7ff;
  margin: 0 1px;
}

/* ============================================================
   Brandmark (galaxy infinity logo above the wordmark)
   ============================================================ */
.brandmark {
  display: block;
  margin: 0 auto clamp(8px, 1.6vh, 18px);
  width: clamp(180px, 22vw, 280px);
  pointer-events: none;
  /* Fade in earliest, just before the wordmark */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  animation:
    brandmarkIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards,
    brandmarkBreathe 6s ease-in-out 2.2s infinite;
}

.brandmark img {
  display: block;
  width: 100%;
  height: auto;
  /* Subtle bloom/glow that ties to the page's space aesthetic */
  filter: drop-shadow(0 0 30px rgba(80, 140, 220, 0.40))
          drop-shadow(0 0 70px rgba(100, 160, 230, 0.20));
}

@keyframes brandmarkIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes brandmarkBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.018);
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* push content up — Mars rises from below */
  padding-bottom: clamp(150px, 32vh, 320px);
  pointer-events: none;
  text-align: center;
}

/* ============================================================
   Chrome wordmark — INFINIVAL
   ============================================================ */
.wordmark {
  position: relative;
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 13vw, 11.5rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  margin: 0;
  padding: 0;
  color: transparent;
  user-select: none;

  /* fade in */
  opacity: 0;
  animation: chromeIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

/* Background layer — deep 3D extrusion */
.wordmark::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #0d0d0d;
  text-shadow:
    0 1px 0 #1a1a1a,
    0 2px 0 #181818,
    0 3px 0 #161616,
    0 4px 0 #131313,
    0 5px 0 #101010,
    0 6px 0 #0d0d0d,
    0 7px 0 #0a0a0a,
    0 8px 0 #070707,
    0 9px 0 #050505,
    0 14px 22px rgba(0, 0, 0, 0.85),
    0 22px 40px rgba(0, 0, 0, 0.55);
}

/* Foreground layer — the chrome itself */
.chrome {
  position: relative;
  z-index: 2;
  display: inline-block;

  /* Classic chrome horizon gradient:
     bright sky → silver → horizon shadow → black band → dark ground → silvery ground → bright rim */
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fafafa 6%,
      #e6e6e6 14%,
      #c2c2c2 22%,
      #8a8a8a 32%,
      #4d4d4d 42%,
      #1e1e1e 48%,
      #050505 50%,
      #0f0f0f 52%,
      #2c2c2c 56%,
      #565656 64%,
      #8a8a8a 74%,
      #c0c0c0 84%,
      #ececec 93%,
      #ffffff 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* A faint outline so edges read crisp against bright Mars limb */
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.08);

  /* Specular sheen */
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.05));
}

/* Subtle top highlight stripe (mimics a polished chrome edge catching light) */
.chrome::after {
  content: attr(data-text);
}

/* ============================================================
   Tagline
   ============================================================ */
.tagline {
  margin: clamp(28px, 4vh, 56px) 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 200;
  font-size: clamp(0.78rem, 1.35vw, 1.15rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em; /* compensate so it stays optically centered */
  text-transform: uppercase;
  color: rgba(220, 225, 235, 0.78);
  text-shadow: 0 0 24px rgba(255, 120, 80, 0.08);

  opacity: 0;
  animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

/* Decorative thin rule under the tagline */
.tagline::before,
.tagline::after {
  content: "";
  display: inline-block;
  width: clamp(20px, 3vw, 48px);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(220, 225, 235, 0.5),
    transparent
  );
  vertical-align: middle;
  margin: 0 clamp(12px, 1.6vw, 22px);
  transform: translateY(-2px);
}

/* ============================================================
   Footer
   ============================================================ */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(16px, 2.2vw, 28px) clamp(20px, 3vw, 44px);
  font-family: 'Sora', sans-serif;
  font-weight: 300;
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
  animation: fadeIn 1.6s ease-out 1.8s both;
}

.bottom-bar a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  transition: color 0.3s ease;
}
.bottom-bar a:hover {
  color: #ff8c5a;
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes chromeIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.985); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 720px) {
  .hero {
    padding-bottom: clamp(80px, 22vh, 200px);
  }
  .tagline {
    font-size: 0.7rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    padding: 0 24px;
  }
  .tagline::before,
  .tagline::after {
    width: 18px;
    margin: 0 10px;
  }
}

@media (max-height: 640px) {
  .hero { padding-bottom: 14vh; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .top-bar, .wordmark, .tagline, .bottom-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}