/* Short entrances share one rhythm. Content is visible without JavaScript,
   and no completed animation leaves a transformed containing block behind. */
:root {
  --motion-duration: 440ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

@keyframes site-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.video-card-title { min-height: 2.75rem; }
@media (min-width: 1024px) {
  .video-card-title { min-height: 3rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-turbo-preview]) #main-content:not([data-motion-restored]) > :not(.discovery-hero):not(#videos),
  html:not([data-turbo-preview]) #main-content:not([data-motion-restored]) .discovery-hero h1 > span,
  html:not([data-turbo-preview]) #main-content:not([data-motion-restored]) .hero-introduction,
  html:not([data-turbo-preview]) #main-content:not([data-motion-restored]) #videos > div > header,
  html:not([data-turbo-preview]) #main-content:not([data-motion-restored]) #videos .video-grid {
    animation: site-enter var(--motion-duration) var(--motion-ease) var(--motion-delay, 0ms) backwards;
  }
  .discovery-hero h1 > span:nth-child(2) { --motion-delay: 40ms; }
  .discovery-hero h1 > span:nth-child(3) { --motion-delay: 80ms; }
  .hero-introduction { --motion-delay: 120ms; }
  #videos > div > header { --motion-delay: 160ms; }
  #videos .video-grid { --motion-delay: 200ms; }

  .site-search-disclosure[open] .site-search-panel,
  [data-dropdown-target="menu"]:not(.hidden) {
    animation: site-enter 180ms var(--motion-ease) backwards;
  }
}

/* Cover every page and control, including Tailwind hover transforms. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  #main-content .group:hover .transition-transform,
  .hero-browse:hover .site-icon { transform: none !important; }
}