/* Avolang Motion System — inspired by motion design principles from motion.zajno.com */

.motion-enabled {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-gold: var(--gold, #C4A04A);
}

/* Secondary-page sections stay in document flow. A tall section scrolls to
   its bottom before pinning, so no part of its content is skipped. */
.motion-enabled .motion-strong-stack {
  position: relative;
  isolation: isolate;
}

.motion-enabled .motion-strong-stack > .motion-stack-cover {
  position: relative;
  z-index: var(--motion-stack-z, 1);
  background-color: var(--motion-stack-bg, #07111f);
}

.motion-enabled .motion-strong-stack > .motion-stack-panel {
  position: sticky;
  top: var(--motion-stack-top, 64px);
  box-shadow: 0 -1px 0 rgba(196, 160, 74, 0.08), 0 -18px 38px rgba(0, 0, 0, 0.12);
}

/* The section stack replaces scroll-triggered text reveals on subpages. */
.motion-section-stack-page .reveal,
.motion-section-stack-page .motion-reveal,
.motion-section-stack-page .definition-block .knowledge-kicker,
.motion-section-stack-page .definition-block p,
.motion-section-stack-page .wr-word,
.motion-section-stack-page .motion-word-inner {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  transition: none !important;
}

.motion-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 3000;
  height: 3px;
  pointer-events: none;
  transform-origin: 0 50%;
}

.motion-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--motion-gold);
  opacity: 0.9;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.motion-enabled .motion-count-up {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.motion-count-up__sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.motion-enabled .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.72s var(--motion-ease) var(--motion-delay, 0ms),
    transform 0.72s var(--motion-ease) var(--motion-delay, 0ms);
}

.motion-enabled .motion-reveal.motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-enabled .definition-block .knowledge-kicker {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--motion-ease), transform 0.5s var(--motion-ease);
}

.motion-enabled .definition-block.motion-db-in .knowledge-kicker { opacity: 1; transform: translateY(0); }

.motion-enabled .definition-block p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--motion-ease) 0.32s, transform 0.6s var(--motion-ease) 0.32s;
}

.motion-enabled .definition-block.motion-db-in p { opacity: 1; transform: translateY(0); }

/* Shared per-word mask reveal, used by .definition-block headlines and by
   the auto-revealed h2 section headlines below. */
.motion-enabled .motion-word {
  display: inline-block;
  overflow: hidden;
  /* Work Sans extends beyond the nominal word box at the descender and the
     right side bearing. Compensating margins preserve spacing and wrapping. */
  padding: 0 0.08em 0.14em;
  margin: 0 -0.08em -0.14em;
  vertical-align: bottom;
}

.motion-enabled .motion-word-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.62s var(--motion-ease);
  transition-delay: calc(var(--motion-word-i, 0) * 40ms + 90ms);
}

.motion-enabled .definition-block.motion-db-in .motion-word-inner,
.motion-enabled .motion-visible .motion-word-inner,
.motion-enabled .reveal.visible .motion-word-inner {
  transform: translateY(0);
}

/* Section headlines with a word reveal skip the flat block fade: the words
   themselves carry the motion instead of the whole heading. */
.motion-enabled .motion-reveal.motion-split-heading {
  opacity: 1;
  transform: none;
  transition: none;
}

/* The homepage's explicitly marked sticky section reveals on
   scroll distance rather than elapsed time. The mask and upward movement are
   shared with the regular heading reveal; the longer scroll travel makes this
   heading feel calmer than the surrounding copy. */
.motion-enabled.motion-sticky-scroll-active .motion-sticky-scroll-reveal .motion-sticky-scroll-heading {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-enabled.motion-sticky-scroll-active .motion-sticky-scroll-reveal .motion-sticky-scroll-heading .motion-word-inner {
  transform: translate3d(0, var(--motion-sticky-word-y, 112%), 0);
  transition: none;
  will-change: transform;
}

.motion-enabled.motion-sticky-scroll-active .motion-sticky-scroll-reveal .motion-sticky-scroll-copy {
  opacity: var(--motion-sticky-copy-opacity, 0);
  transform: translate3d(0, var(--motion-sticky-copy-y, 22px), 0);
  transition: none;
  will-change: opacity, transform;
}

.motion-enabled .motion-card {
  position: relative;
  isolation: isolate;
}

.motion-enabled .motion-card-glow {
  display: none;
}

.motion-enabled .motion-card img,
.motion-enabled .motion-card video {
  transition: transform 0.7s var(--motion-ease);
}

.motion-enabled .motion-card:hover img,
.motion-enabled .motion-card:hover video {
  transform: scale(1.025);
}

.motion-enabled .motion-magnetic {
  translate: var(--motion-magnetic-x, 0) var(--motion-magnetic-y, 0);
  transition: translate 0.34s var(--motion-ease);
  will-change: translate;
}

.motion-enabled .nav-links a,
.motion-enabled .nav-mobile-links a {
  position: relative;
}

.motion-enabled .nav-links a::after,
.motion-enabled .nav-mobile-links a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.34s var(--motion-ease);
  pointer-events: none;
}

.motion-enabled .nav-links a:hover::after,
.motion-enabled .nav-mobile-links a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.motion-enabled .motion-depth-layer {
  scale: 1.025;
  translate: var(--motion-depth-x, 0) var(--motion-depth-y, 0);
  transition: translate 0.45s var(--motion-ease);
  will-change: translate;
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .motion-enabled .motion-strong-stack > .motion-stack-panel {
    position: relative;
    top: auto;
    box-shadow: none;
  }
  .motion-enabled .motion-magnetic { translate: none; }
  .motion-enabled .article-meta {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .motion-enabled :is(.article-title, .article-body, .article-cta h3) {
    overflow-wrap: anywhere;
  }
  .motion-enabled .more-card > div,
  .motion-enabled .article-body .step-content {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .motion-enabled .motion-word,
  .motion-enabled .motion-word-inner {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .motion-enabled .ki-scan-inner {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .motion-enabled .ki-scan-inner > * {
    min-width: 0;
  }
  .motion-enabled .document-glow {
    max-width: 100%;
  }

}

@media (max-width: 400px) {
  .motion-enabled .stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .motion-strong-stack > .motion-stack-panel {
    position: relative;
    top: auto;
    box-shadow: none;
  }
  .motion-scroll-progress { display: none; }
  .motion-enabled .motion-reveal,
  .motion-enabled .motion-reveal.motion-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motion-enabled .definition-block .knowledge-kicker,
  .motion-enabled .definition-block p,
  .motion-enabled .motion-word-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motion-enabled.motion-sticky-scroll-active .motion-sticky-scroll-reveal .motion-sticky-scroll-heading,
  .motion-enabled.motion-sticky-scroll-active .motion-sticky-scroll-reveal .motion-sticky-scroll-heading .motion-word-inner,
  .motion-enabled.motion-sticky-scroll-active .motion-sticky-scroll-reveal .motion-sticky-scroll-copy {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .motion-enabled .motion-card img,
  .motion-enabled .motion-card video,
  .motion-enabled .motion-card:hover img,
  .motion-enabled .motion-card:hover video,
  .motion-enabled .motion-magnetic,
  .motion-enabled .motion-depth-layer {
    transform: none;
    translate: none;
    scale: none;
    transition: none;
  }

}