/* Entrance, scroll reveals, hovers, scramble, reduced motion */

.js [data-in] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-in].is-visible {
  opacity: 1;
  transform: none;
}

.js [data-in][data-w="1"] { transition-delay: 0.08s; }
.js [data-in][data-w="2"] { transition-delay: 0.16s; }
.js [data-in][data-w="3"] { transition-delay: 0.24s; }

.js h2[data-in],
.js .wipe[data-in] {
  clip-path: inset(0 0 100% 0);
  transform: none;
  opacity: 1;
  transition: clip-path 0.9s var(--ease);
}

.js h2[data-in].is-visible,
.js .wipe[data-in].is-visible {
  clip-path: inset(0 0 0 0);
}

.hero-kicker,
.hero-claim,
.hero-lead,
.hero-scroll-hint,
.masthead {
  animation: rise 0.9s var(--ease) both;
}

.masthead { animation-delay: 0.05s; }
.hero-kicker { animation-delay: 0.15s; }
.hero-claim { animation-delay: 0.28s; }
.hero-lead { animation-delay: 0.48s; }
.hero-scroll-hint { animation-delay: 0.7s; }

.wordmark .mark {
  animation: mark-pop 0.7s var(--ease) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes mark-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.8); }
  to { opacity: 1; transform: none; }
}

[data-scramble] { display: inline; }
.hero-claim [data-scramble] { display: block; }

.btn,
.dock-item,
.thumbs button,
.faq summary,
.menu-sheet a,
.legal-toc a {
  transition: color var(--t-fast), background var(--t-mid), border-color var(--t-mid), transform var(--t-mid) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-in],
  .js h2[data-in],
  .js .wipe[data-in] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .hero-kicker,
  .hero-claim,
  .hero-lead,
  .hero-scroll-hint,
  .masthead,
  .wordmark .mark {
    animation: none;
  }
}