/* Cloud Yummy — purposeful motion (transform + opacity only). Composes with tokens. */

@keyframes cy-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes cy-nav-sheet-in {
  from {
    opacity: 0;
    transform: translate3d(0, -0.5rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Hero (home): first slide copy staggers in once — signature entrance */
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-carousel .hero-slide:first-child .hero-slide__inner > * {
    animation: cy-fade-up var(--motion-hero-stagger) var(--ease-out-quart) both;
  }

  .page-home .hero-carousel .hero-slide:first-child .hero-slide__inner > *:nth-child(1) {
    animation-delay: 0.06s;
  }

  .page-home .hero-carousel .hero-slide:first-child .hero-slide__inner > *:nth-child(2) {
    animation-delay: 0.12s;
  }

  .page-home .hero-carousel .hero-slide:first-child .hero-slide__inner > *:nth-child(3) {
    animation-delay: 0.18s;
  }

  .page-home .hero-carousel .hero-slide:first-child .hero-slide__inner > *:nth-child(4) {
    animation-delay: 0.24s;
  }

  /* Mobile overlay nav: sheet fades/slides in */
  @media (max-width: 879px) {
    .nav.is-open {
      animation: cy-nav-sheet-in var(--motion-nav-sheet) var(--ease-out-quart) both;
    }
  }
}

/* Scroll-triggered reveal (home location); JS toggles .is-visible */
@media (prefers-reduced-motion: no-preference) {
  .cy-reveal {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition:
      opacity var(--motion-reveal) var(--ease-out-quart),
      transform var(--motion-reveal) var(--ease-out-quart);
  }

  .cy-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

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

  html {
    scroll-behavior: auto;
  }

  .cy-reveal {
    opacity: 1;
    transform: none;
  }
}