/* =========================================================================
   Iori · Motion
   「軟綿綿、輕輕飄」— soft and gently floating.
   Slow, calm, eased. NEVER fast, NEVER bouncy, NEVER SaaS-snappy.
   ========================================================================= */
:root {
  /* ---- Durations ---- */
  --dur-fast:   200ms;  /* @kind other */
  --dur-base:   500ms;  /* @kind other */
  --dur-slow:   800ms;  /* @kind other */
  --dur-drift:  5500ms; /* @kind other */

  /* ---- Easing — gentle ease, no overshoot ---- */
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: ease-in-out; /* @kind other */

  /* ---- Hover / press conventions ----
     Hover:  primary → darken (sage→sage-dark) + lift -2px; soft surfaces
             wash with blush; ghost → ink/5 tint.
     Press:  settle back down (no shrink), or slightly darker.
     Focus:  2px sage ring, 2px offset.                                     */
  --lift-hover: translateY(-2px); /* @kind other */
}

/* Signature keyframes — reusable across products */
@keyframes iori-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes iori-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes iori-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Utilities */
.iori-drift { animation: iori-drift var(--dur-drift) var(--ease-inout) infinite; }
.iori-rise  { animation: iori-rise var(--dur-slow) var(--ease-soft) both; }
.iori-fade  { animation: iori-fade var(--dur-base) var(--ease-soft) both; }

@media (prefers-reduced-motion: reduce) {
  .iori-drift, .iori-rise, .iori-fade { animation: none; }
}