/* Base Theme Variables */
:root {
  --color-bg: #0b1021;
  --color-bg-alt: #090d1b;
  --color-surface-a: #172147;
  --color-surface-b: #0f1736;
  --color-text: #e6ebff;
  --color-text-muted: #cdd6ffcc;
  --color-border: #2a3352;
  --color-accent: #7aa2ff;
  --max-width: 72rem;
  --easing-pop: cubic-bezier(.9,.1,.1,.9);
}

/* CSS Reset (minimal) */
*,*::before,*::after { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  line-height: 1.4;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Layout */
.site { min-height: 100%; display: grid; place-items: center; overflow: hidden; }
.wrapper { position: relative; display: grid; place-items: center; text-align: center; gap: clamp(1rem,2vw,1.5rem); padding: clamp(1.25rem,3vw,2rem); width: min(100%, var(--max-width)); }

/* Canvas Background */
#particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 800px at 15% 10%, var(--color-surface-a), transparent 60%),
    radial-gradient(1000px 600px at 85% 80%, var(--color-surface-b), transparent 65%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

/* Header */
header { display: grid; place-items: center; gap: .75rem; }

/* Typography */
.logo { width: clamp(56px,9vw,84px); aspect-ratio: 1/1; opacity:0; transform: scale(.9); transition: opacity 1400ms ease, transform 1400ms var(--easing-pop); }
.logo.fade-in { opacity:1; transform: scale(1); }
h1 { margin: 0; font-weight: 800; letter-spacing: .02em; font-size: clamp(2rem,8vw,5rem); }
.subtitle { margin: 0; color: var(--color-text-muted); font-size: clamp(.95rem,2.5vw,1.15rem); }

/* Hero animation */
.headline { display: inline-block; will-change: transform, opacity; transform: translate3d(-120vw,10px,0) scale(.66) rotate(-6deg); opacity: .9; }
.headline.animate { animation: rocket-in 1.4s var(--easing-pop) 80ms 1 forwards; }

@keyframes rocket-in {
  0% { transform: translate3d(-120vw,10px,0) scale(.66) rotate(-6deg); opacity: 0; }
  20% { opacity: 1; }
  65% { transform: translate3d(8vw,-4px,0) scale(1.05) rotate(1deg); } /* sudden brake point */
  80% { transform: translate3d(-2vw,-6px,0) scale(.99) rotate(-.5deg); }
  90% { transform: translate3d(1vw,-6px,0) scale(1.01) rotate(.2deg); }
  100% { transform: translate3d(0,-6px,0) scale(1) rotate(0); }
}

/* Subtle push-forward vibration after settle */
.headline.vibrate { animation: push-vibe 1s ease-in-out infinite; }

@keyframes push-vibe {
  0%   { transform: translate3d(0,-6px,0) scale(1); }
  40%  { transform: translate3d(6px,-6px,0) scale(1.01); }
  60%  { transform: translate3d(3px,-6px,0) scale(1.005); }
  100% { transform: translate3d(0,-6px,0) scale(1); }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .headline { transform: none; opacity: 0; }
  .headline.animate { animation: fade-in 600ms ease-out 100ms 1 forwards; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .headline.vibrate { animation: none; }
}

/* Footer */
footer { position: fixed; inset: auto 0 1rem; display: grid; place-items: center; font-size: .85rem; color: #c5cfff88; }

/* Utilities */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }