body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(201 255 56 / 4%), transparent 62%);
  mix-blend-mode: multiply;
}

.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

.hero h1 {
  animation: hero-in 1.15s cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: left center;
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(55px) skewY(2deg); letter-spacing: -.12em; }
  to { opacity: 1; transform: none; }
}

.project .visual {
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), box-shadow .65s ease;
}

.project:hover .visual {
  transform: translateY(-10px) rotate(.25deg);
  box-shadow: 0 28px 70px rgb(0 0 0 / 18%);
}

.project .visual span { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.project:hover .visual span { transform: translateX(8px); }

.cap-grid article {
  transition: background-color .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

.cap-grid article:hover {
  background: #111;
  transform: translateY(-8px);
}

.ticker span { transition: background .3s ease, color .3s ease, transform .35s ease; }
.ticker span:hover { background: #0a0a0a; color: #c9ff38; transform: translateY(-5px); }

header { transition: height .35s ease, box-shadow .35s ease; }
header.scrolled { height: 66px; box-shadow: 0 12px 35px rgb(0 0 0 / 8%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  body::before { display: none; }
}