/*
 * Page-load entry: the hero settles in from blur, top to bottom, with the
 * headline word by word. Each .enter sets its start time with --d. Fill mode
 * is `backwards` so the animation lets go once done (the ticker swap and hover
 * states keep working), and with no CSS animation support everything just shows.
 */
.enter {
  animation: enter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) backwards;
}
.hero__title .enter { display: inline-block; }

@keyframes enter {
  from { opacity: 0; filter: blur(10px); translate: 0 14px; }
}

/* the header and nav only fade (nav centres itself with translate) */
.header, .nav { animation: enter-fade 0.9s ease-out backwards; }
@keyframes enter-fade {
  from { opacity: 0; }
}

/* WebGL canvas: no entry. The engine drops .opacity-0 on its first frame and
   the shape is simply there (its own intro is off in vendor/webgl-engine.js). */
.webgl-layer > canvas { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .enter, .header, .nav { animation: none; }
}