/* Scroll and entrance motion shared by every page.
   Everything here is progressive: without motion.js nothing is hidden,
   and prefers-reduced-motion swaps movement for a short cross-fade. */

:root { --m-ease: cubic-bezier(.2, .8, .2, 1); --m-ease-out: cubic-bezier(.16, 1, .3, 1); }

/* Reading progress: native scroll timeline when available, motion.js sets --m-progress otherwise. */
.m-progress {
  position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #0f555a, #2b8178 70%, #ddba78);
  transform-origin: 0 50%; transform: scaleX(var(--m-progress, 0));
}
@supports (animation-timeline: scroll()) {
  .m-progress { transform: none; animation: m-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes m-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Section entrance. Only elements that start below the fold get .m-reveal, so nothing
   visible at load ever blinks, and nothing is hidden at all if the script does not run. */
.m-reveal {
  transition: opacity .7s var(--m-ease) var(--m-delay, 0s), translate .9s var(--m-ease-out) var(--m-delay, 0s);
}
.m-reveal:not(.is-in) { opacity: 0; translate: 0 32px; }

/* Photo curtain: the arch rises into place while the image settles from a slight zoom. */
.m-mask {
  transition: clip-path 1.15s var(--m-ease-out) var(--m-delay, 0s), scale 1.4s var(--m-ease-out) var(--m-delay, 0s);
}
.m-mask:not(.is-in) { clip-path: inset(100% 0 0 0); scale: 1.08; }
.m-mask.is-in { clip-path: inset(0 0 0 0); }

/* Scroll-linked depth for a few small accents; motion.js writes --m-y / --m-x. */
.m-par { translate: var(--m-x, 0) var(--m-y, 0); will-change: translate; }
.hero-photo-wrap .hero-photo.m-par,
figure.hero-photo img.m-par { scale: 1.08; }

/* First paint choreography for page heroes (pure CSS; ends fully visible even if it never runs). */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .xseed-hero-grid > div:first-child > * {
    animation: m-rise .8s var(--m-ease-out) both;
  }
  .hero-copy > :nth-child(2), .xseed-hero-grid > div:first-child > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3), .xseed-hero-grid > div:first-child > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4), .xseed-hero-grid > div:first-child > :nth-child(4) { animation-delay: .18s; }
  .hero-copy > :nth-child(n+5), .xseed-hero-grid > div:first-child > :nth-child(n+5) { animation-delay: .24s; }

  .hero-photo-wrap, figure.hero-photo, .xseed-brand { animation: m-curtain 1.2s var(--m-ease-out) .05s both; }
  .hero-badge { animation: m-pop .9s var(--m-ease-out) .55s both; }
  .hero-image-caption { animation: m-fade .6s ease .8s both; }
}
@keyframes m-rise { from { opacity: 0; translate: 0 22px; } }
@keyframes m-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-pop { from { opacity: 0; scale: .6; } }
@keyframes m-fade { from { opacity: 0; } }

/* Reduced motion: no travel, no zoom, no parallax; content still eases in with a brief fade. */
@media (prefers-reduced-motion: reduce) {
  .m-reveal, .m-mask { transition: opacity .45s ease !important; }
  .m-reveal:not(.is-in) { translate: none; }
  .m-mask:not(.is-in) { clip-path: none; scale: none; opacity: 0; }
  .m-par { translate: none !important; will-change: auto; }
  .hero-photo-wrap .hero-photo.m-par, figure.hero-photo img.m-par { scale: none; }
}

@media print {
  .m-progress { display: none; }
  .m-reveal, .m-mask { opacity: 1 !important; translate: none !important; clip-path: none !important; scale: none !important; }
}