/* ==========================================================================
   VaultLine // COMMS — Keyframe Animations
   ==========================================================================
   All keyframe animations extracted from the VaultLine design system.
   These are kept separate from app.css because keyframe animations don't
   map well to Tailwind utility classes and are better as traditional CSS.

   Referenced by Razor components via class names or inline animation props.
   ========================================================================== */

/* --------------------------------------------------------------------------
   fadeUp — Entrance animation for messages, list items, content blocks.
   Translates 6px upward while fading in.
   Usage: animation: fadeUp 0.2s cubic-bezier(0.22, 1, 0.36, 1);
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   pulseDot — Status indicator pulse. Scales and fades a dot on a 2s loop.
   Usage: animation: pulseDot 2s ease-in-out infinite;
   -------------------------------------------------------------------------- */
@keyframes pulseDot {
    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* --------------------------------------------------------------------------
   vcdPulse — Voice controls dock status dot pulse. Simpler opacity-only pulse.
   Usage: animation: vcdPulse 2s ease-in-out infinite;
   -------------------------------------------------------------------------- */
@keyframes vcdPulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* --------------------------------------------------------------------------
   dockFadeIn — Voice controls dock entrance. Slides up 6px while fading in.
   Usage: animation: dockFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
   -------------------------------------------------------------------------- */
@keyframes dockFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   badgePop — Notification badge pop-in. Scales from 0 to 1 with spring ease.
   Usage: animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   -------------------------------------------------------------------------- */
@keyframes badgePop {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* --------------------------------------------------------------------------
   popupIn — User profile popup entrance. Scale + translateY transition.
   Usage: animation: popupIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
   -------------------------------------------------------------------------- */
@keyframes popupIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --------------------------------------------------------------------------
   ctxIn — Context menu entrance. Scale from 0.95 while fading in.
   Usage: animation: ctxIn 0.12s ease-out;
   -------------------------------------------------------------------------- */
@keyframes ctxIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --------------------------------------------------------------------------
   ttIn — Tooltip entrance. Slides up 4px while fading in.
   Usage: animation: ttIn 0.15s ease-out;
   -------------------------------------------------------------------------- */
@keyframes ttIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   toastIn / toastOut — Toast notification slide-in from the right.
   Usage: animation: toastIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
          animation: toastOut 0.3s ease-in forwards;
   -------------------------------------------------------------------------- */
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* --------------------------------------------------------------------------
   modalBgIn — Modal overlay backdrop fade-in.
   Usage: animation: modalBgIn 0.2s ease-out;
   -------------------------------------------------------------------------- */
@keyframes modalBgIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   modalIn — Modal content entrance. Scale from 0.95 + translateY(20px).
   Usage: animation: modalIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
   -------------------------------------------------------------------------- */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --------------------------------------------------------------------------
   typeBounce — Typing indicator dots bounce animation.
   Usage: animation: typeBounce 1.4s ease-in-out infinite;
          Each dot staggers via animation-delay (0s, 0.15s, 0.3s).
   -------------------------------------------------------------------------- */
@keyframes typeBounce {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.3;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   fadeLeft — Slide-in from right for side panels (pins, search).
   Usage: animation: fadeLeft 0.2s cubic-bezier(0.22, 1, 0.36, 1);
   -------------------------------------------------------------------------- */
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --------------------------------------------------------------------------
   fadeDown — Slide-in from top for dropdown overlays.
   Usage: animation: fadeDown 0.2s cubic-bezier(0.22, 1, 0.36, 1);
   -------------------------------------------------------------------------- */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   fadeRight — Slide-in from left for sidebars.
   Usage: animation: fadeRight 0.2s cubic-bezier(0.22, 1, 0.36, 1);
   -------------------------------------------------------------------------- */
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   Animation Utility Classes
   ==========================================================================
   Pre-composed classes for common animation patterns used across Razor
   components. Each bundles the keyframe, duration, and easing together.
   ========================================================================== */

.animate-fade-up {
    animation: fadeUp 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-pulse-dot {
    animation: pulseDot 2s ease-in-out infinite;
}

.animate-vcd-pulse {
    animation: vcdPulse 2s ease-in-out infinite;
}

.animate-dock-fade-in {
    animation: dockFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-badge-pop {
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-popup-in {
    animation: popupIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-ctx-in {
    animation: ctxIn 0.12s ease-out both;
}

.animate-tooltip-in {
    animation: ttIn 0.15s ease-out both;
}

.animate-toast-in {
    animation: toastIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-toast-out {
    animation: toastOut 0.3s ease-in forwards;
}

.animate-modal-bg-in {
    animation: modalBgIn 0.2s ease-out both;
}

.animate-modal-in {
    animation: modalIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-type-bounce {
    animation: typeBounce 1.4s ease-in-out infinite;
}

.animate-fade-left {
    animation: fadeLeft 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-fade-down {
    animation: fadeDown 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-fade-right {
    animation: fadeRight 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Typing indicator dot delay helpers */
.animate-type-bounce-delay-1 {
    animation: typeBounce 1.4s ease-in-out infinite;
    animation-delay: 0.15s;
}

.animate-type-bounce-delay-2 {
    animation: typeBounce 1.4s ease-in-out infinite;
    animation-delay: 0.3s;
}

/* --------------------------------------------------------------------------
   spin — Loading spinner rotation animation.
   Usage: animation: spin 1s linear infinite;
   -------------------------------------------------------------------------- */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}