/* Loopi Digital — motion. The brand is named after a loop: everything is a cycle,
   nothing snaps. Enter/exit with quint ease, liquid morphs on the S-curve,
   ambient loops run 12–28s and never stop. */
:root {
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-med: 340ms; /* @kind other */
  --dur-slow: 520ms; /* @kind other */
  --dur-cine: 880ms; /* @kind other */

  --loop-fast: 6s; /* @kind other */
  --loop-base: 14s; /* @kind other */
  --loop-slow: 24s; /* @kind other */
  --loop-ambient: 38s; /* @kind other */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1); /* @kind other */
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  --t-hover: var(--dur-base) var(--ease-out); /* @kind other */
  --t-press: var(--dur-instant) var(--ease-snap); /* @kind other */
  --t-reveal: var(--dur-cine) var(--ease-glide); /* @kind other */

  --lift-hover: -2px; /* @kind other */
  --press-scale: 0.975; /* @kind other */
}

@keyframes loopi-spin { to { transform: rotate(360deg); } }
@keyframes loopi-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes loopi-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes loopi-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
@keyframes loopi-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(1200%); opacity: 0; }
}
@keyframes loopi-grid-pan {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); }
}
@keyframes loopi-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes loopi-dash { to { stroke-dashoffset: -1000; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}