:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --motion-duration-fast: 180ms;
  --motion-duration-base: 360ms;
  --motion-duration-slow: 780ms;
  --motion-duration-page-in: 480ms;
  --motion-duration-page-out: 240ms;
  --motion-reveal-distance: 16px;
  --motion-section-distance: 10px;
  --motion-page-distance: 10px;
  --motion-parallax-scale: 1.08;
}

a, button, input, textarea, select {
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-duration: var(--motion-duration-fast);
  transition-timing-function: var(--motion-ease-out);
}

.hover-lift {
  transition: transform var(--motion-duration-base) var(--motion-ease-out), box-shadow var(--motion-duration-base) var(--motion-ease-out);
}

@media (hover: hover) {
  .hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.045), 0 10px 14px -6px rgba(0, 0, 0, 0.025);
  }
}

.hover-zoom img {
  transition: transform 1000ms var(--motion-ease-out);
}

.group:hover .hover-zoom img,
.hover-zoom:hover img {
  transform: scale(1.04);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance), 0);
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out),
              transform var(--motion-duration-slow) var(--motion-ease-out);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.reveal-section {
  opacity: 0;
  transform: translate3d(0, var(--motion-section-distance), 0);
  transition: opacity 900ms var(--motion-ease-out),
              transform 900ms var(--motion-ease-out);
  will-change: opacity, transform;
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

[data-parallax] {
  --parallax-shift: 0px;
  --parallax-scale: var(--motion-parallax-scale);
  transform: translate3d(0, var(--parallax-shift), 0) scale(var(--parallax-scale));
  transform-origin: center center;
  will-change: transform;
}

[data-parallax-container] {
  overflow: hidden;
}

.page-shell {
  opacity: 1;
  transition: opacity var(--motion-duration-page-in) var(--motion-ease-out),
              transform var(--motion-duration-page-in) var(--motion-ease-out);
}

body.is-page-leaving .page-shell {
  opacity: 0;
  transform: translate3d(0, var(--motion-page-distance), 0);
  pointer-events: none;
}

@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation-duration: var(--motion-duration-page-out);
    animation-timing-function: var(--motion-ease-in-out);
  }

  ::view-transition-new(root) {
    animation-duration: var(--motion-duration-page-in);
    animation-timing-function: var(--motion-ease-out);
  }
}

.stagger-1 { transition-delay: 60ms; }
.stagger-2 { transition-delay: 120ms; }
.stagger-3 { transition-delay: 180ms; }
.stagger-4 { transition-delay: 240ms; }
.stagger-5 { transition-delay: 300ms; }

@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;
  }
  
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .reveal-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .hover-lift:hover {
    transform: none !important;
  }

  .page-shell,
  body.is-page-leaving .page-shell {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }

  .hover-zoom img,
  .group:hover .hover-zoom img,
  .hover-zoom:hover img {
    transform: none !important;
  }

  [data-parallax] {
    transform: none !important;
    will-change: auto !important;
  }
}