/* landing/styles.css — full-page video loop + single CTA.
 *
 * Layout: video covers the entire viewport (object-fit:cover), a thin dark
 * veil sits above it for legibility, and the CTA pinned at the bottom-center
 * floats over both. No nav, no chrome, no content beyond the button — by
 * design (per Pavel 2026-05-11: "1 static landing page, nothing else"). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0a0a0c; /* paint-base while the video loads */
  color: #fff;
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

.bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.bg-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Soft top-to-bottom darken — keeps the CTA readable without flattening the
     video content. Heavier toward the bottom where the button sits. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.10) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 24px 64px;
}

@media (min-height: 720px) {
  .stage { padding-bottom: 96px; }
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  font: 500 16px/1 'Geist', system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 40px -16px rgba(0, 0, 0, 0.65);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.cta:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.cta:active {
  transform: translateY(0);
}

.cta-arrow {
  width: 16px;
  height: 16px;
  transition: transform 220ms ease;
}

.cta:hover .cta-arrow {
  transform: translateX(2px);
}

/* Reduced-motion / autoplay-failed fallback: if the video can't render,
   the background remains the deep paint-base color and the CTA still works. */
@media (prefers-reduced-motion: reduce) {
  .bg-video { display: none; }
}