/* LUESS YAPI | V7 MOTION SYSTEM
   Single shared timing scale, graceful navigation, compositor-friendly reveals.
   No layout-shifting animation, no dependency, all corners stay square. */
:root {
  --motion-fast: 180ms;
  --motion-base: 560ms;
  --motion-slow: 740ms;
  --motion-distance: 20px;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Avoid transient click states and accidental scroll animation on page restore. */
html.motion-enabled { scroll-behavior: smooth; }
html.motion-enabled body.is-leaving > main {
  animation: none !important;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  pointer-events: none;
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}

/* Gentle entrance only on inner page content. The home has its own hero choreography. */
html.motion-enabled body:not(.motion-restored) > main.page-main {
  animation: luess-page-enter 440ms var(--motion-ease) both;
}
@keyframes luess-page-enter {
  from { opacity: .18; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Observer owns the state. CSS does not hide elements without initialized JS. */
html.motion-enabled .page-main .motion-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
  transition-delay: var(--motion-stagger, 0ms);
}
html.motion-enabled .page-main .motion-reveal.is-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* V6 disables legacy reveal in inner pages; V7 uses its own nonconflicting class. */
html.motion-enabled .page-main .motion-reveal:focus-within {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}
/* Decorative media stays steady while children enter. */
html.motion-enabled .page-main :where(.about-image, .service-visual, .featured-post, .blog-card, .rel-card).motion-reveal {
  --motion-distance: 16px;
}

/* Clean once-per-page masthead rhythm; no moving background on low-performance devices. */
html.motion-enabled .page-main :is(.page-hero, .post-hero) .hero-content > * {
  animation: luess-heading-in 610ms var(--motion-ease) both;
}
html.motion-enabled .page-main :is(.page-hero, .post-hero) .hero-content > :nth-child(2) { animation-delay: 75ms; }
html.motion-enabled .page-main :is(.page-hero, .post-hero) .hero-content > :nth-child(3) { animation-delay: 135ms; }
html.motion-enabled .page-main :is(.page-hero, .post-hero) .hero-content > :nth-child(n+4) { animation-delay: 175ms; }
html.motion-enabled .upcoming-page .upcoming-content > * { animation: luess-heading-in 580ms var(--motion-ease) both; }
html.motion-enabled .upcoming-page .upcoming-content > :nth-child(2) { animation-delay: 55ms; }
html.motion-enabled .upcoming-page .upcoming-content > :nth-child(3) { animation-delay: 110ms; }
html.motion-enabled .upcoming-page .upcoming-content > :nth-child(4) { animation-delay: 155ms; }
html.motion-enabled .upcoming-page .upcoming-content > :nth-child(n+5) { animation-delay: 185ms; }
@keyframes luess-heading-in {
  from { opacity: 0; transform: translate3d(0, 13px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Enhanced reading experience: keyboard and accessibility preferences take priority. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  html.motion-enabled body > main,
  html.motion-enabled .page-main .motion-reveal,
  html.motion-enabled .page-main :is(.page-hero,.post-hero) .hero-content > *,
  html.motion-enabled .upcoming-page .upcoming-content > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  html.motion-enabled body > main,
  html.motion-enabled .page-main .motion-reveal,
  html.motion-enabled .page-main :is(.page-hero,.post-hero) .hero-content > *,
  html.motion-enabled .upcoming-page .upcoming-content > * {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
  }
}