/* Apple-like Motion System (no external deps) */

:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-dur-xs: 180ms;
  --motion-dur-sm: 320ms;
  --motion-dur-md: 520ms;
  --motion-dur-lg: 820ms;
  --motion-stagger: 70ms;
}

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

/* Enable GPU compositing for common animated nodes */
.motion, .motion * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Page load polish */
html.motion-ready body {
  animation: motion-page-in var(--motion-dur-md) var(--motion-ease-out) both;
}

@keyframes motion-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Generic reveal primitives */
[data-motion="reveal"] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
}

html.motion-ready [data-motion="reveal"].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition:
    opacity var(--motion-dur-md) var(--motion-ease-out),
    transform var(--motion-dur-md) var(--motion-ease-out),
    filter var(--motion-dur-md) var(--motion-ease-out);
}

/* Slightly stronger for hero */
[data-motion="hero"] {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(0.985);
  filter: blur(10px);
}

html.motion-ready [data-motion="hero"].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--motion-dur-lg) var(--motion-ease-out),
    transform var(--motion-dur-lg) var(--motion-ease-out),
    filter var(--motion-dur-lg) var(--motion-ease-out);
}

/* Text reveal (line/word-like) */
[data-motion="text"] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

html.motion-ready [data-motion="text"].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--motion-dur-md) var(--motion-ease-out),
    transform var(--motion-dur-md) var(--motion-ease-out);
}

/* Image polish */
img[data-motion="media"] {
  transform: translate3d(0, 14px, 0) scale(1.01);
  opacity: 0;
  filter: saturate(1.02) contrast(1.02);
}

html.motion-ready img[data-motion="media"].is-in {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transition:
    opacity var(--motion-dur-md) var(--motion-ease-out),
    transform var(--motion-dur-md) var(--motion-ease-out);
}

/* Hover: subtle lift like Apple cards */
[data-motion-hover="lift"] {
  transition:
    transform var(--motion-dur-sm) var(--motion-ease-out),
    box-shadow var(--motion-dur-sm) var(--motion-ease-out),
    filter var(--motion-dur-sm) var(--motion-ease-out);
  will-change: transform;
}

[data-motion-hover="lift"]:hover {
  transform: translate3d(0, -8px, 0);
  filter: saturate(1.03);
}

/* Magnetic buttons (JS adds transform) */
[data-motion-hover="magnet"] {
  transition: transform var(--motion-dur-xs) var(--motion-ease-out);
  will-change: transform;
}

/* Nav glass refine on scroll (JS toggles .motion-nav-scrolled) */
.nav-container.motion-nav-scrolled {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}

/* Parallax targets (JS updates translateY via CSS var) */
[data-motion-parallax] {
  transform: translate3d(0, var(--motion-parallax-y, 0px), 0);
  will-change: transform;
}