/* Pillar · coming soon page */

:root {
  --bg: #0a0d13;
  --navy: #1b2a4a;
  --yellow: #f4b740;
  --white: #f4f6fa;
  --gray: #8d95a5;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-swim: cubic-bezier(.45, 0, .25, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
}

.page {
  min-height: 100vh;
  min-height: 100svh;
  padding: 6vh 7vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  text-align: center;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 85% 12%, rgba(244, 183, 64, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 10% 90%, rgba(27, 42, 74, 0.5), transparent 60%);
}

/* Logo + name */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.mark { display: block; }

.word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 84px);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Yellow line */
.line {
  width: min(420px, 80%);
  height: 1px;
  background: var(--yellow);
}

/* Text */
.copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 640px;
}

.headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.7vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tagline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------- Animation ----------
   1. line draws        0.3s
   2. logo fades in     1.3s (lower, near the name's spot)
   3. logo swims up     2.3s
   4. name fades in     3.6s
   5. headline          4.3s
   6. tagline types in  4.9s
*/

.line {
  transform: scaleX(0);
  animation: lineDraw 1.2s var(--ease-out) .3s forwards;
}

.mark {
  opacity: 0;
  transform: translateY(76px);
  animation:
    fadeIn .8s ease 1.3s forwards,
    swimUp 1.4s var(--ease-swim) 2.3s forwards;
}

.word {
  opacity: 0;
  animation: rise .9s var(--ease-out) 3.6s forwards;
}

.headline {
  opacity: 0;
  animation: rise .9s var(--ease-out) 4.3s forwards;
}

.tagline {
  clip-path: inset(0 100% 0 0);
  animation: typeIn 1.1s steps(28, end) 4.9s forwards;
}

@keyframes lineDraw { to { transform: scaleX(1); } }
@keyframes fadeIn   { to { opacity: 1; } }
@keyframes swimUp   { from { transform: translateY(76px); } to { transform: translateY(0); } }
@keyframes rise     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes typeIn   { to { clip-path: inset(0 0 0 0); } }

/* People who turn off motion see the finished page straight away */
@media (prefers-reduced-motion: reduce) {
  .line, .mark, .word, .headline, .tagline {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* Phones */
@media (max-width: 480px) {
  .mark { width: 58px; height: 75px; }
  .page { gap: 26px; }
}