/* Shared PotusChef motion language, derived from the About page. */

.reveal,
.animate-fade-up {
  opacity: 1;
  transform: none;
}

.js .reveal,
.js .animate-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 860ms var(--ease-gentle),
    transform 860ms var(--ease-gentle);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.home-hero-content > *,
.pd-hero-text > * {
  opacity: 0;
  transform: translateY(18px);
  animation: heroContentIn 900ms var(--ease-gentle) forwards;
}
.home-hero-content > :nth-child(2),
.pd-hero-text > :nth-child(2) { animation-delay: 90ms; }
.home-hero-content > :nth-child(3),
.pd-hero-text > :nth-child(3) { animation-delay: 180ms; }
.home-hero-content > :nth-child(4),
.pd-hero-text > :nth-child(4) { animation-delay: 270ms; }
@keyframes heroContentIn { to { opacity: 1; transform: none; } }

.js .reveal.is-visible,
.js .animate-fade-up.is-visible,
.no-js .reveal,
.no-js .animate-fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* Match the specificity of .js .reveal so stagger values are not reset by
   the transition shorthand above. */
.js .reveal.delay-1,
.js .animate-fade-up.delay-100 { --reveal-delay: 0.12s; }
.js .reveal.delay-2,
.js .animate-fade-up.delay-200 { --reveal-delay: 0.24s; }
.js .reveal.delay-3,
.js .animate-fade-up.delay-300 { --reveal-delay: 0.36s; }
.js .reveal.delay-500,
.js .animate-fade-up.delay-500 { --reveal-delay: 0.48s; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  :where(
    .btn-primary,
    .btn-pill,
    .hero-cta,
    .tier-btn-outline,
    .tier-btn-solid,
    .contact-submit-btn,
    .host-submit,
    .pop-submit,
    .echoes-arrow,
    .event-card,
    .format-card,
    .nav-menu-toggle
  ) {
    transition-duration: var(--motion-medium);
    transition-timing-function: var(--ease-standard);
  }

  :where(
    .asym-img img,
    .event-card img,
    .host-img-wrap img,
    .experience-arch-img img,
    .curation-card img,
    .editorial-img,
    .contact-img-box img
  ) {
    transition-duration: 900ms;
    transition-timing-function: var(--ease-gentle);
  }

  :where(
    .event-card .read,
    .format-icon,
    .pop-input,
    .host-input,
    .host-textarea,
    .form-input,
    .footer-ig,
    .footer-book
  ) {
    transition-timing-function: var(--ease-standard);
  }

  :where(a, button):active { transform: translateY(0) scale(0.985); }
  .home-hero-primary:hover, .home-hero-secondary:hover { transform: translateY(-2px); }
}

/* About's quiet opening movement, reused on the other photographic heroes. */
.home-hero-image,
.pd-hero-bg img,
.sponsor-hero-media img {
  transform: scale(1.04);
  animation: potusHeroZoom 14s ease-out forwards;
}

@keyframes potusHeroZoom {
  to { transform: scale(1); }
}

/* The image hover has the same restrained, editorial pace as About's CTA. */
.experience-arch-img,
.c1-img-wrap,
.c2-img-wrap,
.editorial-img,
.contact-img-box {
  overflow: hidden;
}

.experience-arch-img img,
.c1-img-wrap img,
.c2-img-wrap img,
.editorial-img,
.contact-img-box img {
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease, opacity 0.7s ease;
}

.experience-arch-img:hover img,
.c1-img-wrap:hover img,
.c2-img-wrap:hover img,
.editorial-img:hover,
.contact-img-box:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .animate-fade-up,
    .home-hero-image,
    .pd-hero-bg img,
    .sponsor-hero-media img,
    .about-hero img,
    .pop-hero > img,
    .cities-track,
    .experience-arch-img img,
  .c1-img-wrap img,
  .c2-img-wrap img,
  .editorial-img,
  .contact-img-box img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .home-hero-content > *, .pd-hero-text > * { opacity: 1 !important; animation: none !important; transform: none !important; }
}