/* AutoKlar motion: finite entrances, deliberate interactions, readable at rest. */
:root {
  --mx-ease: cubic-bezier(.16, 1, .3, 1);
  --mx-quick: 220ms;
}

/* Retire the earlier reveal/hero animations. Nothing waits in an invisible CSS
   state: the controller animates only an element's entrance into the viewport. */
.motion-on .reveal-ready,
.motion-on .reveal-ready.is-visible,
.motion-paused .reveal-ready {
  opacity: 1;
  transform: none;
  transition: none;
}
.motion-on .hero-content h1,
.motion-on .hero-content .hero-lead,
.motion-on .hero-content .actions {
  animation: none;
}

/* Actual text stays in the heading. Small gutters protect accents, italic
   overhang and descenders while each word rises through its own paper edge. */
.mx-title .mx-word {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
  overflow: hidden;
  overflow: clip;
  margin: 0 -.035em -.16em;
  padding: 0 .035em .16em;
  line-height: inherit;
}
.mx-word-inner {
  display: inline-block;
  vertical-align: baseline;
  max-width: 100%;
  transform-origin: 50% 100%;
}
.mx-title .mx-word,
.mx-title .mx-word-inner {
  white-space: normal;
  text-decoration: inherit;
}
.mx-card { transform-origin: center bottom; }

/* A quiet reading-progress line belongs to the navigation, not an overlay. */
.mx-ready.motion-on .header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  opacity: .75;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left center;
}

/* Separate hover feedback from arrival transforms. Cards remain static
   editorial content; their number and rule react without suggesting a link. */
.motion-on :is(.step, .benefit, .purchase-grid article) {
  transition: border-color 350ms ease;
}
.motion-on .step-number {
  transition: color 300ms ease, transform 450ms var(--mx-ease);
}
.motion-on :is(.button, .portal-link, .theme-toggle, .menu-toggle, .chapter, .gallery-controls button, .copy-button, .language-switcher summary) {
  transition-duration: var(--mx-quick);
  transition-timing-function: var(--mx-ease);
}
.motion-on .portrait-frame img {
  transition: transform 950ms var(--mx-ease);
}
@media (hover: hover) and (pointer: fine) {
  .motion-on :is(.step, .benefit, .purchase-grid article):hover {
    border-color: var(--blue);
  }
  .motion-on .step:hover .step-number {
    color: var(--ink);
    transform: translateX(4px);
  }
  .motion-on .portrait-frame:hover img {
    transform: scale(1.025);
  }
  .motion-on .button:hover {
    transform: translateY(-3px);
    transition-duration: 350ms;
  }
  .motion-on .portal-link:hover {
    box-shadow: 0 5px 18px rgba(38, 74, 244, .16);
  }
  .footer-main nav a:hover,
  .footer-legal a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
}
.motion-on :is(.button, .portal-link, .theme-toggle, .menu-toggle, .chapter, .gallery-controls button, .copy-button, .language-switcher summary).mx-pressed,
.motion-on .button:active {
  transform: translateY(1px) scale(.985);
  transition: transform 110ms ease, background-color 110ms ease;
}

/* Menu reveal uses the same timing as the page, with no layout displacement. */
@media (max-width: 1240px) {
  .motion-on .nav.open {
    animation: mx-menu-arrival 340ms var(--mx-ease) both;
    transform-origin: top center;
  }
  .motion-on .nav.open a {
    animation: mx-menu-item 420ms var(--mx-ease) both;
  }
  .motion-on .nav.open a:nth-child(2) { animation-delay: 25ms; }
  .motion-on .nav.open a:nth-child(3) { animation-delay: 50ms; }
  .motion-on .nav.open a:nth-child(4) { animation-delay: 75ms; }
  .motion-on .nav.open a:nth-child(5) { animation-delay: 100ms; }
  .motion-on .nav.open a:nth-child(6) { animation-delay: 125ms; }
}
@keyframes mx-menu-arrival {
  from { opacity: 0; clip-path: inset(0 0 8% 0 round 8px); transform: translateY(-6px); }
  to { opacity: 1; clip-path: inset(0 0 0 round 8px); transform: none; }
}
@keyframes mx-menu-item {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 650px), (pointer: coarse) {
  .mx-ready.motion-on .header::after { height: 1px; opacity: .8; }
  .motion-on .gallery-slide.is-active img {
    animation-name: mx-photo-drift-compact;
  }
  .motion-on :is(.button, .portal-link, .chapter, .gallery-controls button).mx-pressed {
    transform: scale(.985);
  }
}
@keyframes mx-photo-drift-compact {
  from { transform: scale(1.025); }
  to { transform: scale(1.06); }
}

/* System accessibility preferences also win before JavaScript initializes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .mx-word-inner, .reveal-ready, .mx-pressed { transform: none !important; opacity: 1 !important; }
  .header::after { display: none; }
}
.motion-paused .nav.open,
.motion-paused .nav.open a,
.motion-paused .mx-word-inner {
  animation: none;
  transform: none;
}
@media print {
  .mx-word, .mx-word-inner { display: inline !important; overflow: visible; }
  .mx-title, .mx-text, .mx-card, .mx-image, .mx-word-inner {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}