:root {
  --background: #fafaf9;
  --foreground: #171717;

  /* Motion system */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-enter: 700ms;
  --duration-menu: 320ms;
}

html {
  scroll-behavior: smooth;
}

/* Home: lock to one viewport, never scroll (accounts for mobile browser chrome) */
.home-shell {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
}

body:has(.home-shell) {
  overflow: hidden;
}

/* About / Contact: center content in the viewport like the home logo;
   grow past one screen (and scroll) only when the content needs it. */
.page-shell {
  position: relative;
}

.page-shell > nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.page-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-dm-sans), system-ui, sans-serif;
}

/* Shared content enter: soft fade + slight rise */
@keyframes contentEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-logo-enter,
.page-copy {
  opacity: 0;
  animation: contentEnter var(--duration-enter) var(--ease-out) forwards;
}

.page-copy {
  animation-delay: 40ms;
}

/* Home logo: monochrome CRT grain, flicker and horizontal-sync slips */
.hero-logo-tv {
  color: var(--foreground);
}

.hero-logo-tv__mark {
  display: block;
  overflow: visible;
  animation: tvJitter 6.8s steps(1, end) infinite;
  animation-delay: calc(var(--duration-enter) + 250ms);
  will-change: transform;
}

.hero-logo-tv__ink {
  animation: tvFlicker 3.7s steps(1, end) infinite;
  animation-delay: var(--duration-enter);
}

.hero-logo-tv__tear {
  --tv-shift-sm: 6px;
  --tv-shift-md: 12px;
  --tv-shift-lg: 19px;
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: tvTear 4.6s steps(1, end) infinite;
  animation-delay: calc(var(--duration-enter) + 700ms);
}

@keyframes tvFlicker {
  0%,
  100% {
    opacity: 1;
  }
  2.2% {
    opacity: 0.82;
  }
  2.8% {
    opacity: 1;
  }
  3.2% {
    opacity: 0.68;
  }
  3.7% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  24.4% {
    opacity: 0.9;
  }
  25% {
    opacity: 1;
  }
  61% {
    opacity: 1;
  }
  61.3% {
    opacity: 0.58;
  }
  61.8% {
    opacity: 0.92;
  }
  62.2% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  88.5% {
    opacity: 0.78;
  }
  89.2% {
    opacity: 1;
  }
}

@keyframes tvJitter {
  0%,
  100% {
    transform: translate(0, 0);
  }
  14% {
    transform: translate(0, 0);
  }
  14.3% {
    transform: translate(-1px, 0);
  }
  14.7% {
    transform: translate(1.5px, 0.5px);
  }
  15.1% {
    transform: translate(0, 0);
  }
  52% {
    transform: translate(0, 0);
  }
  52.2% {
    transform: translate(2px, -0.5px);
  }
  52.5% {
    transform: translate(-1.5px, 0.5px);
  }
  52.9% {
    transform: translate(0, 0);
  }
  81% {
    transform: translate(0, 0);
  }
  81.3% {
    transform: translate(0.5px, 1px);
  }
  81.7% {
    transform: translate(0, 0);
  }
}

/* Each burst tears in ONE direction only: a faint sliced ghost that
   pushes off the letters to a single side, then recedes. Bursts
   alternate right / left / right across the cycle. */
@keyframes tvTear {
  0%,
  12%,
  15.8%,
  45%,
  48.8%,
  76%,
  79.4%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }
  /* burst 1 — right */
  12.2% {
    opacity: 0.5;
    transform: translateX(var(--tv-shift-lg));
  }
  13.4% {
    opacity: 0.34;
    transform: translateX(var(--tv-shift-md));
  }
  14.6% {
    opacity: 0.2;
    transform: translateX(var(--tv-shift-sm));
  }
  /* burst 2 — left */
  45.2% {
    opacity: 0.52;
    transform: translateX(calc(-1 * var(--tv-shift-lg)));
  }
  46.4% {
    opacity: 0.36;
    transform: translateX(calc(-1 * var(--tv-shift-md)));
  }
  47.6% {
    opacity: 0.22;
    transform: translateX(calc(-1 * var(--tv-shift-sm)));
  }
  /* burst 3 — right */
  76.2% {
    opacity: 0.44;
    transform: translateX(var(--tv-shift-md));
  }
  77.4% {
    opacity: 0.3;
    transform: translateX(var(--tv-shift-lg));
  }
  78.6% {
    opacity: 0.18;
    transform: translateX(var(--tv-shift-sm));
  }
}

@media (max-width: 639px) {
  .hero-logo-tv__tear {
    --tv-shift-sm: 4px;
    --tv-shift-md: 8px;
    --tv-shift-lg: 12px;
  }
}

/* Burger icon: two dashes → X */
.nav-burger-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 24px;
  height: 24px;
}

.nav-burger-line {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--foreground);
  border-radius: 9999px;
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-inout);
}

.nav-burger-line-top {
  transform: translateY(0) rotate(0);
}

.nav-burger-line-bottom {
  transform: translateY(0) rotate(0);
}

button[aria-expanded="true"] .nav-burger-line-top,
button.nav-burger--open .nav-burger-line-top {
  transform: translateY(4px) rotate(45deg);
}

button[aria-expanded="true"] .nav-burger-line-bottom,
button.nav-burger--open .nav-burger-line-bottom {
  transform: translateY(-4px) rotate(-45deg);
}

/* Mobile menu overlay */
.nav-menu-overlay {
  opacity: 0;
  transition: opacity var(--duration-menu) var(--ease-inout);
}

.nav-menu-overlay.nav-menu-overlay--visible {
  opacity: 1;
}

.nav-menu-overlay.nav-menu-overlay--closing {
  opacity: 0;
}

.nav-menu-links {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-menu) var(--ease-out),
    transform var(--duration-menu) var(--ease-out);
  transition-delay: 60ms;
}

.nav-menu-overlay--visible .nav-menu-links {
  opacity: 1;
  transform: translateY(0);
}

.nav-menu-overlay--closing .nav-menu-links {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: 0s;
  transition-timing-function: var(--ease-inout);
}

/* Desktop nav underline */
.nav-link-underline {
  position: relative;
}

.nav-link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--foreground);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-link-underline:hover::after,
.nav-link-underline.nav-link-active::after {
  transform: scaleX(1);
}

/* Footer: fade in once when in view */
.footer-enter-trigger {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}

.footer-enter-trigger.footer-enter-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tap feedback */
.btn-tap {
  transition: transform var(--duration-fast) var(--ease-inout);
}

.btn-tap:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-logo-enter,
  .page-copy {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-logo-tv__mark,
  .hero-logo-tv__ink,
  .hero-logo-tv__tear {
    animation: none;
  }

  .hero-logo-tv__mark {
    transform: none;
  }

  .hero-logo-tv__ink {
    opacity: 1;
    filter: none;
  }

  .hero-logo-tv__tear {
    display: none;
  }

  .nav-burger-line,
  .nav-menu-overlay,
  .nav-menu-links,
  .nav-link-underline::after,
  .footer-enter-trigger,
  .btn-tap {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .footer-enter-trigger {
    opacity: 1;
    transform: none;
  }

  .btn-tap:active {
    transform: none;
  }
}