/* ──────────────────────────────────────────────────────────────
   Motion system — codified animation tokens.
   Drop in via <link rel="stylesheet" href="motion.css">.
   Use the utility classes directly, or import the keyframes into
   your component CSS.
   ────────────────────────────────────────────────────────────── */

:root {
  /* Durations */
  --motion-quick:   120ms; /* @kind other */
  --motion-step:    220ms; /* @kind other */
  --motion-stride:  350ms; /* @kind other */
  --motion-arc:     700ms; /* @kind other */
  --motion-long:   1400ms; /* @kind other */
  --motion-cycle:  5000ms; /* @kind other */

  /* Easings */
  --ease-quick:   ease; /* @kind other */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-stamp:   cubic-bezier(0.2, 1.6, 0.5, 1); /* @kind other */
  --ease-still:   cubic-bezier(0.4, 0, 0.6, 1); /* @kind other */
}

/* ── Keyframes the brand actually uses ── */

@keyframes le-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 97%      { transform: scaleY(0.04); }
}

@keyframes le-stamp-in {
  0%   { opacity: 0; transform: scale(2.4) rotate(0deg); }
  55%  { opacity: 1; }
  78%  { transform: scale(0.92) rotate(var(--le-stamp-rotation, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--le-stamp-rotation, 0deg)); }
}

@keyframes le-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 5px rgba(191,155,48,0.12); }
  50%      { box-shadow: 0 0 0 11px rgba(191,155,48,0); }
}

@keyframes le-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); }
  50%      { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
}

@keyframes le-rise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes le-stream-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Utility classes ── */

.le-anim-rise   { animation: le-rise   var(--motion-arc) var(--ease-out) both; }
.le-anim-stamp  { animation: le-stamp-in var(--motion-arc) var(--ease-stamp) both; }
.le-anim-blink  { animation: le-blink  var(--motion-cycle) var(--ease-still) infinite; }
.le-anim-pulse  { animation: le-pulse-ring var(--motion-long) var(--ease-still) infinite; }
.le-anim-pulse-dot { animation: le-pulse-dot var(--motion-long) var(--ease-still) infinite; }

/* Stagger helpers — apply with style="--le-delay: 120ms" or use the
   nth-child trick on a parent. */
.le-anim-rise[style*="--le-delay"],
.le-anim-stamp[style*="--le-delay"] {
  animation-delay: var(--le-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .le-anim-rise,
  .le-anim-stamp,
  .le-anim-blink,
  .le-anim-pulse,
  .le-anim-pulse-dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Hover transitions on common UI atoms ── */

.le-hov-lift {
  transition: transform var(--motion-step) var(--ease-out),
              box-shadow var(--motion-step) var(--ease-out),
              border-color var(--motion-step);
}
.le-hov-lift:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.le-hov-fade { transition: opacity var(--motion-step), color var(--motion-step); }
.le-hov-fade:hover { opacity: 1; }

.le-hov-gold {
  transition: color var(--motion-quick), background var(--motion-quick), border-color var(--motion-quick);
}
.le-hov-gold:hover { color: var(--gold); border-color: var(--gold); }