/* ==========================================================================
   XTORY MOTION CANON — v0.2
   2026-04-27 · canonical keyframes for all Xtory product UIs.
   Depends on: tokens.css (uses --xt-ease-* and --xt-dur-* vars)
   ========================================================================== */

/* ============================================================
   barGrow — the authority signature.
   A 2px gradient line scales horizontally from 0 to 1.
   Use under hero sections, slide footers, and CTA closings.
   ============================================================ */
.xt-grow-bar {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--xt-ink) 0%,
    var(--xt-signal) 60%,
    var(--xt-signal-soft) 100%
  );
  transform-origin: left;
  animation: xt-bar-grow var(--xt-dur-bar-grow) 0.5s var(--xt-ease-out) both;
}
@keyframes xt-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   fadeInUp — the cascade.
   Stagger entrance for sequential elements. Pair with .xt-d1..d5
   to delay each child in the cascade.
   ============================================================ */
.xt-fade-in {
  opacity: 0;
  transform: translateY(16px);
  animation: xt-fade-in-up var(--xt-dur-cinematic) var(--xt-ease-cinematic) forwards;
}
.xt-fade-in.xt-d1 { animation-delay: 0.20s; }
.xt-fade-in.xt-d2 { animation-delay: 0.50s; }
.xt-fade-in.xt-d3 { animation-delay: 0.80s; }
.xt-fade-in.xt-d4 { animation-delay: 1.10s; }
.xt-fade-in.xt-d5 { animation-delay: 1.40s; }

@keyframes xt-fade-in-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   counter — count-up for big numbers (hero stats, KPIs).
   Used with JS counter helper in xtory.js.
   The animation itself is JS-driven; this rule sets defaults.
   ============================================================ */
.xt-counter {
  font-family: var(--xt-font-sans);
  font-weight: var(--xt-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--xt-tracking-tight);
}

/* ============================================================
   particle-drift — only relevant if you embed the canvas mark
   declaratively. The actual drift is computed in xtory.js.
   This class just provides the canvas slot styling.
   ============================================================ */
.xt-particle-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.xt-particle-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   hover-lift — default product UI hover for cards.
   ============================================================ */
.xt-hover-lift {
  transition: transform var(--xt-dur-base) var(--xt-ease-out),
              box-shadow var(--xt-dur-base) var(--xt-ease-out);
}
.xt-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--xt-shadow-lift);
}

/* ============================================================
   link-underline — editorial link with growing underline.
   ============================================================ */
.xt-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--xt-signal), var(--xt-signal));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--xt-dur-base) var(--xt-ease-out),
              color var(--xt-dur-fast) var(--xt-ease-out);
}
.xt-link:hover {
  color: var(--xt-signal);
  background-size: 100% 1px;
}

/* ============================================================
   reduced-motion — honor the OS preference.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .xt-grow-bar,
  .xt-fade-in,
  .xt-hover-lift,
  .xt-link {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}