/* On Seven motion foundation — stage 1
   Central motion tokens, safe reveal primitives, rendering containment, and accessibility fallbacks.
   Visual effects are intentionally restrained until the next stages. */

:root {
  --motion-duration-instant: 120ms;
  --motion-duration-fast: 180ms;
  --motion-duration-base: 420ms;
  --motion-duration-slow: 680ms;
  --motion-distance-sm: 10px;
  --motion-distance-md: 20px;
  --motion-ease-standard: cubic-bezier(.2,.7,.2,1);
  --motion-ease-emphasized: cubic-bezier(.22,.8,.22,1);
}

html[data-motion-ready="true"][data-motion-mode="full"] [data-motion-reveal] {
  opacity: 0;
  transform: translate3d(0,var(--motion-distance-md),0);
  transition:
    opacity var(--motion-duration-base) var(--motion-ease-standard),
    transform var(--motion-duration-slow) var(--motion-ease-emphasized);
  transition-delay: var(--motion-delay,0ms);
  will-change: opacity,transform;
}

html[data-motion-ready="true"][data-motion-mode="full"] [data-motion-reveal="left"] {
  transform: translate3d(calc(var(--motion-distance-md) * -1),0,0);
}

html[data-motion-ready="true"][data-motion-mode="full"] [data-motion-reveal="right"] {
  transform: translate3d(var(--motion-distance-md),0,0);
}

html[data-motion-ready="true"][data-motion-mode="full"] [data-motion-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
  will-change: auto;
}

html[data-motion-mode="reduced"] [data-motion-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@supports (content-visibility:auto) {
  main > section:not(.hero):not(.page-hero) {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }
}

img[data-image-state="loading"] { opacity: .001; }
img[data-image-state="loaded"] {
  opacity: 1;
  transition: opacity var(--motion-duration-fast) ease;
}

@media (max-width:820px) {
  :root {
    --motion-duration-base: 340ms;
    --motion-duration-slow: 480ms;
    --motion-distance-md: 14px;
  }

  @supports (content-visibility:auto) {
    main > section:not(.hero):not(.page-hero) {
      contain-intrinsic-size: auto 620px;
    }
  }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto !important; }

  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-motion-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .page-transition,
  .hero-lines,
  .scroll-progress {
    display: none !important;
  }
}