@import "tailwindcss";

@theme {
  --color-bg: #000000;
  --color-fg: #ffffff;
  --color-muted: #9a9a9a;
  --color-dim: #6e6e6e;
  --color-line: rgb(255 255 255 / 0.16);
  --color-overlay: rgb(0 0 0 / 0.42);
  --color-scrim: rgb(0 0 0 / 0.72);

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Barlow", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-nav: 0.8125rem;
  --text-kicker: clamp(0.95rem, 0.7rem + 0.7vw, 1.25rem);
  --text-hero: clamp(1.85rem, 1.1rem + 3.4vw, 3.35rem);
  --text-display: clamp(2.4rem, 1.2rem + 5vw, 5.4rem);
  --text-stat: clamp(2.4rem, 1.4rem + 3.2vw, 4.6rem);
  --text-body: 1.05rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  --tracking-nav: 0.14em;
  --tracking-wide: 0.22em;
  --tracking-btn: 0.2em;
  --tracking-hero: 0.04em;
  --tracking-logo: 0.48em;

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-body: 1.62;

  --radius-none: 0px;
  --radius-sm: 2px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-quick: 150ms;
  --motion-fast: 250ms;
  --motion-medium: 400ms;
  --motion-slow: 700ms;
}

@layer base {
  html {
    background: var(--color-bg);
    color: var(--color-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: var(--leading-body);
  }

  * {
    border-color: var(--color-line);
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  ::selection {
    background: var(--color-fg);
    color: var(--color-bg);
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img,
  video {
    max-width: 100%;
  }
}

@layer utilities {
  .font-display {
    font-family: var(--font-display);
  }

  .hero-scrim {
    background: linear-gradient(
      to top,
      rgb(0 0 0 / 0.82) 0%,
      rgb(0 0 0 / 0.28) 42%,
      rgb(0 0 0 / 0.18) 70%,
      rgb(0 0 0 / 0.35) 100%
    );
  }

  .header-scrim {
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.72) 0%,
      rgb(0 0 0 / 0.18) 70%,
      transparent 100%
    );
  }

  .kenburns {
    animation: kenburns 28s var(--ease-smooth) infinite alternate;
  }

  .stagger-in > * {
    opacity: 0;
    transform: translateY(10px);
    animation: rise-in 700ms var(--ease-out) forwards;
  }
  .stagger-in > *:nth-child(1) {
    animation-delay: 80ms;
  }
  .stagger-in > *:nth-child(2) {
    animation-delay: 180ms;
  }
  .stagger-in > *:nth-child(3) {
    animation-delay: 280ms;
  }
  .stagger-in > *:nth-child(4) {
    animation-delay: 380ms;
  }
  .stagger-in > *:nth-child(5) {
    animation-delay: 480ms;
  }
}

@keyframes kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@keyframes rise-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .kenburns,
  .stagger-in > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}