/* Linear-style motion — blur word headlines + fade-rise body */

.anim-headline {
  font-kerning: none;
  text-rendering: optimizeSpeed;
}

.anim-headline-inner {
  display: inline;
}

.anim-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20%);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--word-i, 0) * 0.1s);
}

.anim-word.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Body: fade-rise (no blur — distinct from headlines) */
.anim-body {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--body-delay, 0s);
}

.anim-body.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero product mock — illustrate entrance */
.anim-illustrate {
  opacity: 0;
  transform: perspective(1400px) translate3d(40px, -40px, 280px) rotateX(8deg);
  transform-origin: center top;
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-illustrate.is-in {
  opacity: 1;
  transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg);
}

/* Stagger children inside sections */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stagger-i, 0) * 0.08s);
}

.anim-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .anim-word,
  .anim-body,
  .anim-illustrate,
  .anim-stagger > * {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}