/*
 * Sukud design system - motion
 * Keyframes, entrance helpers and the animated-icon layer.
 * Every duration reads a --sk-dur-* token, so reduced motion is honoured
 * by the token file without special cases here.
 */

@keyframes sk-fade-in { from { opacity: 0; } }
@keyframes sk-fade-out { to { opacity: 0; } }
@keyframes sk-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sk-drop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes sk-scale-in { from { opacity: 0; transform: scale(0.94); } }
@keyframes sk-scale-out { to { opacity: 0; transform: scale(0.96); } }
@keyframes sk-sheet-in { from { transform: translateY(100%); } }
@keyframes sk-sheet-out { to { transform: translateY(100%); } }
@keyframes sk-slide-in-right { from { transform: translateX(100%); } }
@keyframes sk-slide-out-right { to { transform: translateX(100%); } }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes sk-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgb(var(--t-rgb) / 0.45); }
  100% { box-shadow: 0 0 0 10px rgb(var(--t-rgb) / 0); }
}
@keyframes sk-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@keyframes sk-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@keyframes sk-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(3deg); }
}
@keyframes sk-ring {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(16deg); }
  20% { transform: rotate(-14deg); }
  30% { transform: rotate(12deg); }
  40% { transform: rotate(-9deg); }
  50% { transform: rotate(6deg); }
  60% { transform: rotate(-3deg); }
  70% { transform: rotate(0); }
}
@keyframes sk-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes sk-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
  55% { transform: translateY(0); }
  70% { transform: translateY(-1.5px); }
}
@keyframes sk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sk-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.85; } }
@keyframes sk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sk-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  25% { transform: scale(0.96, 1.06) skewX(-2deg); }
  50% { transform: scale(1.03, 0.95) skewX(1.5deg); }
  75% { transform: scale(0.98, 1.04) skewX(-1deg); }
}
@keyframes sk-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes sk-count-glow { 0% { color: var(--t-text); } 100% { color: inherit; } }
@keyframes sk-float-up {
  0% { opacity: 0; transform: translateY(4px) scale(0.9); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(1); }
}

/* ---------- Entrance helpers ----------
 * .sk-enter plays once on insert. Stagger children with --i. */
.sk-enter { animation: sk-rise var(--sk-dur-slow) var(--sk-ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.sk-enter-fade { animation: sk-fade-in var(--sk-dur-slow) var(--sk-ease-out) both; }
.sk-enter-scale { animation: sk-scale-in var(--sk-dur-slow) var(--sk-ease-spring) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.sk-stagger > * { animation: sk-rise var(--sk-dur-slow) var(--sk-ease-out) backwards; }
.sk-stagger > :nth-child(2) { animation-delay: 40ms; }
.sk-stagger > :nth-child(3) { animation-delay: 80ms; }
.sk-stagger > :nth-child(4) { animation-delay: 120ms; }
.sk-stagger > :nth-child(5) { animation-delay: 160ms; }
.sk-stagger > :nth-child(6) { animation-delay: 200ms; }
.sk-stagger > :nth-child(n+7) { animation-delay: 240ms; }

/* Lift on hover for interactive surfaces. */
.sk-lift { transition: transform var(--sk-dur-base) var(--sk-ease-out), box-shadow var(--sk-dur-base) var(--sk-ease-out), border-color var(--sk-dur-base); }
@media (hover: hover) {
  .sk-lift:hover { transform: translateY(-2px); box-shadow: var(--sk-shadow-md); }
}
.sk-lift:active { transform: translateY(0) scale(0.99); transition-duration: var(--sk-dur-instant); }

/* ---------- Animated icons ----------
 * sk-anim-{name} picks the motion; sk-anim--{trigger} decides when.
 * "hover" plays while the icon's control (or any .sk-anim-host) is hovered
 * or focused. */
.sk-icon { stroke-width: var(--sk-icon-stroke); transform-box: fill-box; transform-origin: center; }
.sk-icon.sk-icon--art { stroke-width: 0; }

.sk-anim-ring, .sk-anim-wiggle { transform-origin: 50% 8%; }
.sk-anim-bounce, .sk-anim-flicker { transform-origin: 50% 100%; }

.sk-anim--always.sk-anim-spin { animation: sk-spin 0.9s linear infinite; }
.sk-anim--always.sk-anim-ring { animation: sk-ring 2.4s var(--sk-ease-in-out) infinite; }
.sk-anim--always.sk-anim-wiggle { animation: sk-wiggle 1.8s var(--sk-ease-in-out) infinite; }
.sk-anim--always.sk-anim-pulse { animation: sk-pulse 1.6s var(--sk-ease-in-out) infinite; }
.sk-anim--always.sk-anim-bounce { animation: sk-bounce 1.4s var(--sk-ease-out) infinite; }
.sk-anim--always.sk-anim-float { animation: sk-float 3s var(--sk-ease-in-out) infinite; }
.sk-anim--always.sk-anim-nudge { animation: sk-nudge 1.2s var(--sk-ease-in-out) infinite; }
.sk-anim--always.sk-anim-flicker { animation: sk-flicker 1.1s var(--sk-ease-in-out) infinite; }
.sk-anim--always.sk-anim-pop { animation: sk-pop 1.6s var(--sk-ease-spring) infinite; }
.sk-anim--always.sk-anim-shake { animation: sk-shake 1.8s var(--sk-ease-in-out) infinite; }
.sk-anim--always.sk-anim-draw > * { stroke-dasharray: 1; animation: sk-draw 1.6s var(--sk-ease-in-out) infinite alternate; }

.sk-anim--appear.sk-anim-spin { animation: sk-spin 0.6s var(--sk-ease-out) 1; }
.sk-anim--appear.sk-anim-ring { animation: sk-ring 1s var(--sk-ease-in-out) 1; }
.sk-anim--appear.sk-anim-wiggle { animation: sk-wiggle 0.8s var(--sk-ease-in-out) 1; }
.sk-anim--appear.sk-anim-pulse { animation: sk-pulse 0.6s var(--sk-ease-in-out) 1; }
.sk-anim--appear.sk-anim-bounce { animation: sk-bounce 0.7s var(--sk-ease-out) 1; }
.sk-anim--appear.sk-anim-float { animation: sk-float 1.2s var(--sk-ease-in-out) 1; }
.sk-anim--appear.sk-anim-nudge { animation: sk-nudge 0.6s var(--sk-ease-in-out) 2; }
.sk-anim--appear.sk-anim-flicker { animation: sk-flicker 0.6s var(--sk-ease-in-out) 2; }
.sk-anim--appear.sk-anim-pop { animation: sk-pop 0.5s var(--sk-ease-spring) 1; }
.sk-anim--appear.sk-anim-shake { animation: sk-shake 0.5s var(--sk-ease-in-out) 1; }
.sk-anim--appear.sk-anim-draw > * { stroke-dasharray: 1; animation: sk-draw 0.9s var(--sk-ease-out) both; }
.sk-anim--appear.sk-anim-draw > :nth-child(2) { animation-delay: 0.12s; }
.sk-anim--appear.sk-anim-draw > :nth-child(3) { animation-delay: 0.24s; }
.sk-anim--appear.sk-anim-draw > :nth-child(n+4) { animation-delay: 0.32s; }

@media (hover: hover) {
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-spin,
  .sk-anim--hover.sk-anim-spin:hover { animation: sk-spin 0.7s var(--sk-ease-out) 1; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-ring,
  .sk-anim--hover.sk-anim-ring:hover { animation: sk-ring 0.9s var(--sk-ease-in-out) 1; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-wiggle,
  .sk-anim--hover.sk-anim-wiggle:hover { animation: sk-wiggle 0.7s var(--sk-ease-in-out) 1; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-pulse,
  .sk-anim--hover.sk-anim-pulse:hover { animation: sk-pulse 0.7s var(--sk-ease-in-out) infinite; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-bounce,
  .sk-anim--hover.sk-anim-bounce:hover { animation: sk-bounce 0.7s var(--sk-ease-out) 1; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-float,
  .sk-anim--hover.sk-anim-float:hover { animation: sk-float 1.2s var(--sk-ease-in-out) infinite; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-nudge,
  .sk-anim--hover.sk-anim-nudge:hover { animation: sk-nudge 0.8s var(--sk-ease-in-out) infinite; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-flicker,
  .sk-anim--hover.sk-anim-flicker:hover { animation: sk-flicker 0.9s var(--sk-ease-in-out) infinite; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-pop,
  .sk-anim--hover.sk-anim-pop:hover { animation: sk-pop 0.45s var(--sk-ease-spring) 1; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-shake,
  .sk-anim--hover.sk-anim-shake:hover { animation: sk-shake 0.5s var(--sk-ease-in-out) 1; }
  :where(.sk-anim-host, a, button, label, summary, [role="button"], [role="menuitem"], [role="tab"]):is(:hover, :focus-visible) .sk-anim--hover.sk-anim-draw > *,
  .sk-anim--hover.sk-anim-draw:hover > * { stroke-dasharray: 1; animation: sk-draw 0.7s var(--sk-ease-out) both; }
}

/* Charts below the fold hold their entrance until scrolled into view. */
[data-sk-wait], [data-sk-wait] * { animation-play-state: paused !important; }

/* ----------------------------------------------------------------------
 * Drag to reorder ([data-sk-sortable]). The real item stays in the list
 * as a soft slot; a floating copy (.sk-sort-ghost) follows the pointer.
 * ---------------------------------------------------------------------- */
[data-sk-drag-handle] { -webkit-touch-callout: none; }
[data-sk-sortable-item][data-sk-drag-handle] { -webkit-user-select: none; user-select: none; touch-action: pan-y; }
[data-sk-sortable-item].is-sort-source {
  border-color: transparent !important;
  background: rgb(var(--sk-brand-rgb) / 0.06) !important;
  box-shadow: inset 0 0 0 2px rgb(var(--sk-brand-rgb) / 0.28) !important;
}
[data-sk-sortable-item].is-sort-source > * { visibility: hidden; }
.sk-sort-ghost {
  cursor: grabbing;
  will-change: transform;
  transform-origin: 50% 50%;
  transition: box-shadow 200ms var(--sk-ease-out);
}
.sk-sort-ghost.is-lifted { box-shadow: 0 22px 44px -16px rgb(var(--sk-shadow-rgb) / 0.42), 0 0 0 1px rgb(var(--sk-brand-rgb) / 0.3) !important; }
.sk-sort-ghost.is-dropping { box-shadow: var(--sk-shadow-sm); }
.sk-sort-ghost [data-sk-drag-handle] { color: var(--sk-brand-11); background: var(--sk-brand-3); }
[data-sk-sortable-item].is-moved { animation: sk-sort-land 560ms var(--sk-ease-out); }
@keyframes sk-sort-land { 0% { box-shadow: 0 0 0 3px rgb(var(--sk-brand-rgb) / 0.32); } 100% { box-shadow: 0 0 0 3px rgb(var(--sk-brand-rgb) / 0); } }
.is-sorting, .is-sorting * { -webkit-user-select: none; user-select: none; cursor: grabbing !important; }