/*
 * Motion tokens (motion-system skill)
 * Import once at the app root. Durations are in ms here; motion-tokens.ts mirrors them in seconds.
 */

:root {
  /* Duration */
  --duration-none: 0ms;
  --duration-xshort: 75ms;
  --duration-short: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-xslow: 600ms;

  /* Easing: linear */
  --ease-none: cubic-bezier(0, 0, 1, 1);

  /* Easing: ease-in */
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);

  /* Easing: ease-out */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

  /* Easing: ease-in-out */
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/*
 * Amplitude per mode. Set data-motion-mode on <html> for the project default,
 * and on a component to override it. Values follow references/modes.md.
 */
:root,
[data-motion-mode="subtle"] {
  --motion-shift: 4px;            /* entry translate for small/medium elements */
  --motion-scale-from: 0.97;      /* entry scale for surfaces (popover, dialog, menu) */
  --motion-pop-from: 0.9;         /* entry scale for small pops (badge, check, dot) */
  --motion-overshoot: 1;          /* scale peak (1 = no overshoot) */
  --motion-settle: 1;             /* dramatic dip after the peak */
  --motion-overshoot-shift: 0px;  /* positional overshoot past destination */
  --motion-rotate: 0deg;
  --motion-press-scale: 0.98;
  --motion-lift: 1px;
  --motion-stagger: 0ms;
  --stagger-cap: 0;               /* highest stagger index; items past it start with it */
}

[data-motion-mode="expressive"] {
  --motion-shift: 8px;
  --motion-scale-from: 0.94;
  --motion-pop-from: 0.6;
  --motion-overshoot: 1.03;
  --motion-settle: 1;
  --motion-overshoot-shift: 8px;
  --motion-rotate: 8deg;
  --motion-press-scale: 0.96;
  --motion-lift: 2px;
  --motion-stagger: 30ms;
  --stagger-cap: 5;
}

[data-motion-mode="dramatic"] {
  --motion-shift: 12px;
  --motion-scale-from: 0.9;
  --motion-pop-from: 0.4;
  --motion-overshoot: 1.06;
  --motion-settle: 0.99;
  --motion-overshoot-shift: 16px;
  --motion-rotate: 15deg;
  --motion-press-scale: 0.94;
  --motion-lift: 4px;
  --motion-stagger: 50ms;
  --stagger-cap: 7;
}

/* Reduced motion: opacity only, at duration-short. Amplitude goes neutral everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-normal: 150ms;
    --duration-slow: 150ms;
    --duration-xslow: 150ms;
  }
  *,
  *::before,
  *::after {
    --motion-shift: 0px !important;
    --motion-scale-from: 1 !important;
    --motion-pop-from: 1 !important;
    --motion-overshoot: 1 !important;
    --motion-settle: 1 !important;
    --motion-overshoot-shift: 0px !important;
    --motion-rotate: 0deg !important;
    --motion-press-scale: 1 !important;
    --motion-lift: 0px !important;
    --motion-stagger: 0ms !important;
  }
}

/*
 * Keyframes. Apply with the row's tokens, e.g.
 *   animation: motion-pop-in var(--duration-normal) var(--ease-out-quint) both;
 * Overshoot comes from the amplitude variables, so Subtle mode and reduced motion
 * automatically play these without overshoot.
 */
@keyframes motion-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motion-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Surfaces: popover, menu, dialog, tooltip */
@keyframes motion-pop-in {
  0% { opacity: 0; transform: scale(var(--motion-scale-from)); }
  60% { opacity: 1; transform: scale(var(--motion-overshoot)); }
  100% { opacity: 1; transform: scale(1); }
}

/* Dramatic multi-stage settle */
@keyframes motion-pop-in-settle {
  0% { opacity: 0; transform: scale(var(--motion-scale-from)); }
  55% { opacity: 1; transform: scale(var(--motion-overshoot)); }
  75% { transform: scale(var(--motion-settle)); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes motion-pop-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(var(--motion-scale-from)); }
}

/* Small pops: check, badge, dot, chip icon */
@keyframes motion-pop-small-in {
  0% { opacity: 0; transform: scale(var(--motion-pop-from)); }
  60% { opacity: 1; transform: scale(calc(var(--motion-overshoot) + (var(--motion-overshoot) - 1) * 2)); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes motion-pop-small-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(var(--motion-pop-from)); }
}

/* Small/medium elements rising into place: toast, card, list item */
@keyframes motion-rise-in {
  0% { opacity: 0; transform: translateY(var(--motion-shift)); }
  70% { opacity: 1; transform: translateY(calc(var(--motion-overshoot-shift) * -0.25)); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes motion-rise-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(var(--motion-shift)); }
}

/* Full-travel surfaces. Swap the axis and sign for other edges. */
@keyframes motion-slide-in-bottom {
  0% { transform: translateY(100%); }
  70% { transform: translateY(calc(var(--motion-overshoot-shift) * -1)); }
  100% { transform: translateY(0); }
}

@keyframes motion-slide-out-bottom {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes motion-slide-in-right {
  0% { transform: translateX(100%); }
  70% { transform: translateX(calc(var(--motion-overshoot-shift) * -1)); }
  100% { transform: translateX(0); }
}

@keyframes motion-slide-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes motion-slide-in-left {
  0% { transform: translateX(-100%); }
  70% { transform: translateX(var(--motion-overshoot-shift)); }
  100% { transform: translateX(0); }
}

@keyframes motion-slide-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Under reduced motion, full-travel slides become fades. */
@media (prefers-reduced-motion: reduce) {
  @keyframes motion-slide-in-bottom { from { opacity: 0; } to { opacity: 1; } }
  @keyframes motion-slide-out-bottom { from { opacity: 1; } to { opacity: 0; } }
  @keyframes motion-slide-in-right { from { opacity: 0; } to { opacity: 1; } }
  @keyframes motion-slide-out-right { from { opacity: 1; } to { opacity: 0; } }
  @keyframes motion-slide-in-left { from { opacity: 0; } to { opacity: 1; } }
  @keyframes motion-slide-out-left { from { opacity: 1; } to { opacity: 0; } }
}

/* Feedback: reversible controls; orientation: surfaces enter without delaying focus. */
button, .button { transition: background-color var(--duration-xshort) var(--ease-out-quad), border-color var(--duration-xshort) var(--ease-out-quad), color var(--duration-xshort) var(--ease-out-quad), transform var(--duration-short) var(--ease-out-cubic); }
button:enabled:active, .button:active { transform:scale(.98); transition-duration:var(--duration-xshort); }
button:disabled { transform:none; }
.card, .card-controls { transition: border-color var(--duration-short) var(--ease-out-quad), opacity var(--duration-short) var(--ease-out-quad); }
dialog[open] { animation:eye-surface-in var(--duration-slow) var(--ease-out-cubic); }
dialog[open]::backdrop { animation:eye-fade-in var(--duration-slow) var(--ease-out-cubic); }
@keyframes eye-surface-in { from {opacity:0;transform:scale(.97)} to {opacity:1;transform:none} }
@keyframes eye-fade-in { from {opacity:0} to {opacity:1} }
@media(prefers-reduced-motion:reduce) {
 button, .button { transform:none!important; transition:background-color var(--duration-short) var(--ease-out-cubic),color var(--duration-short) var(--ease-out-cubic)!important; }
 dialog[open],dialog[open]::backdrop { animation:eye-fade-in var(--duration-short) var(--ease-out-cubic); }
}

/* Character: a single introduction, no autoplay or scroll interception. */
.hero { animation:eye-hero-in var(--duration-xslow) var(--ease-out-quart); }
@keyframes eye-hero-in { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:none} }
@media(hover:hover) and (pointer:fine) { .button:hover {transform:translateY(-2px)} }
@media(prefers-reduced-motion:reduce) { .hero {animation:eye-fade-in var(--duration-short) var(--ease-out-cubic)} .button:hover {transform:none} }