/* ============================================================
   Atlas Animations — keyframes and motion utilities. All
   durations and easings reference --f-dur-* / --f-ease-* from
   tokens.css so JS-driven and CSS-driven motion stay in sync.

   To use a keyframe directly:
     animation: f-fade-in var(--f-dur-base) var(--f-ease-out);

   To use a one-shot helper class on an element entering the DOM:
     class="f-anim-fade-in"
   ============================================================ */

/* -------- Keyframes -------- */
@keyframes f-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes f-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes f-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes f-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes f-slide-from-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes f-slide-from-left {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes f-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes f-scale-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.96); }
}

@keyframes f-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes f-sheet-down {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}
@keyframes f-drawer-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes f-drawer-out-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@keyframes f-drawer-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes f-drawer-out-right {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

@keyframes f-toast-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes f-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-12px) scale(0.98); }
}

@keyframes f-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes f-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@keyframes f-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Note: @keyframes f-shimmer is declared in components.css (existing).
   Don't redeclare here — the duplicate would clobber the existing one
   depending on load order. Use .f-shimmer / .f-skel from components.css
   for shimmer effects. */

/* -------- One-shot helper classes -------- */
.f-anim-fade-in       { animation: f-fade-in       var(--f-dur-base) var(--f-ease-out) both; }
.f-anim-fade-out      { animation: f-fade-out      var(--f-dur-base) var(--f-ease-out) both; }
.f-anim-slide-up      { animation: f-slide-up      var(--f-dur-base) var(--f-ease-out) both; }
.f-anim-slide-down    { animation: f-slide-down    var(--f-dur-base) var(--f-ease-out) both; }
.f-anim-scale-in      { animation: f-scale-in      var(--f-dur-base) var(--f-ease-spring) both; }
.f-anim-scale-out     { animation: f-scale-out     var(--f-dur-fast) var(--f-ease-in) both; }
.f-anim-shake         { animation: f-shake         var(--f-dur-slow) var(--f-ease-inout) both; }
.f-anim-pulse         { animation: f-pulse 1.6s var(--f-ease-inout) infinite; }
.f-anim-spin          { animation: f-spin 1s var(--f-ease-linear) infinite; }

/* -------- Reduced motion: respect the user's preference -------- */
@media (prefers-reduced-motion: reduce) {
    .f-anim-fade-in,
    .f-anim-fade-out,
    .f-anim-slide-up,
    .f-anim-slide-down,
    .f-anim-scale-in,
    .f-anim-scale-out,
    .f-anim-shake,
    .f-anim-pulse,
    .f-anim-spin {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}