/**
 * ============================================================
 * CareerSetu Pro
 * Global Animations
 * Version: V50 Ultra Premium
 * ============================================================
 *
 * FILE:
 * public_html/assets/css/animations.css
 *
 * PATH:
 * public_html/assets/css/animations.css
 *
 * Covers:
 * - Fade Animations
 * - Slide Animations
 * - Scale Animations
 * - Reveal Effects
 * - Card Hover Effects
 * - Button Effects
 * - Icon Animations
 * - Loading / Spinner
 * - Skeleton Loader
 * - Pulse / Status
 * - Notification Effects
 * - Modal Effects
 * - Dropdown Effects
 * - Assessment Effects
 * - Success / Error Effects
 * - Accessibility / Reduced Motion
 * ============================================================
 */


/* ============================================================
   01. ANIMATION VARIABLES
============================================================ */

:root {
    --cs-anim-fast: 180ms;
    --cs-anim-normal: 300ms;
    --cs-anim-medium: 450ms;
    --cs-anim-slow: 650ms;

    --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --cs-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --cs-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============================================================
   02. FADE IN
============================================================ */

@keyframes csFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cs-animate-fade-in {
    animation:
        csFadeIn
        var(--cs-anim-normal)
        var(--cs-ease-standard)
        both;
}


/* ============================================================
   03. FADE OUT
============================================================ */

@keyframes csFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.cs-animate-fade-out {
    animation:
        csFadeOut
        var(--cs-anim-normal)
        var(--cs-ease-standard)
        both;
}


/* ============================================================
   04. FADE UP
============================================================ */

@keyframes csFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.cs-animate-fade-up {
    animation:
        csFadeUp
        var(--cs-anim-medium)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   05. FADE DOWN
============================================================ */

@keyframes csFadeDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.cs-animate-fade-down {
    animation:
        csFadeDown
        var(--cs-anim-medium)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   06. FADE LEFT
============================================================ */

@keyframes csFadeLeft {
    from {
        opacity: 0;
        transform: translate3d(25px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.cs-animate-fade-left {
    animation:
        csFadeLeft
        var(--cs-anim-medium)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   07. FADE RIGHT
============================================================ */

@keyframes csFadeRight {
    from {
        opacity: 0;
        transform: translate3d(-25px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.cs-animate-fade-right {
    animation:
        csFadeRight
        var(--cs-anim-medium)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   08. SLIDE UP
============================================================ */

@keyframes csSlideUp {
    from {
        transform: translate3d(0, 100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.cs-animate-slide-up {
    animation:
        csSlideUp
        var(--cs-anim-normal)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   09. SLIDE DOWN
============================================================ */

@keyframes csSlideDown {
    from {
        transform: translate3d(0, -100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.cs-animate-slide-down {
    animation:
        csSlideDown
        var(--cs-anim-normal)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   10. SLIDE FROM LEFT
============================================================ */

@keyframes csSlideFromLeft {
    from {
        transform: translate3d(-100%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.cs-animate-slide-left {
    animation:
        csSlideFromLeft
        var(--cs-anim-normal)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   11. SLIDE FROM RIGHT
============================================================ */

@keyframes csSlideFromRight {
    from {
        transform: translate3d(100%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.cs-animate-slide-right {
    animation:
        csSlideFromRight
        var(--cs-anim-normal)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   12. SCALE IN
============================================================ */

@keyframes csScaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cs-animate-scale-in {
    animation:
        csScaleIn
        var(--cs-anim-normal)
        var(--cs-ease-bounce)
        both;
}


/* ============================================================
   13. SCALE OUT
============================================================ */

@keyframes csScaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.94);
    }
}

.cs-animate-scale-out {
    animation:
        csScaleOut
        var(--cs-anim-fast)
        var(--cs-ease-standard)
        both;
}


/* ============================================================
   14. POP IN
============================================================ */

@keyframes csPopIn {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    70% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cs-animate-pop {
    animation:
        csPopIn
        420ms
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   15. SOFT ZOOM
============================================================ */

@keyframes csSoftZoom {
    from {
        opacity: 0;
        transform: scale(0.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cs-animate-soft-zoom {
    animation:
        csSoftZoom
        var(--cs-anim-medium)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   16. REVEAL BASE
============================================================ */

.cs-reveal {
    opacity: 0;

    transform: translate3d(0, 22px, 0);

    transition:
        opacity var(--cs-anim-slow) var(--cs-ease-smooth),
        transform var(--cs-anim-slow) var(--cs-ease-smooth);

    will-change: opacity, transform;
}

.cs-reveal.is-visible {
    opacity: 1;

    transform: translate3d(0, 0, 0);
}


/* ============================================================
   17. REVEAL LEFT
============================================================ */

.cs-reveal-left {
    opacity: 0;

    transform: translate3d(-28px, 0, 0);

    transition:
        opacity var(--cs-anim-slow) var(--cs-ease-smooth),
        transform var(--cs-anim-slow) var(--cs-ease-smooth);

    will-change: opacity, transform;
}

.cs-reveal-left.is-visible {
    opacity: 1;

    transform: translate3d(0, 0, 0);
}


/* ============================================================
   18. REVEAL RIGHT
============================================================ */

.cs-reveal-right {
    opacity: 0;

    transform: translate3d(28px, 0, 0);

    transition:
        opacity var(--cs-anim-slow) var(--cs-ease-smooth),
        transform var(--cs-anim-slow) var(--cs-ease-smooth);

    will-change: opacity, transform;
}

.cs-reveal-right.is-visible {
    opacity: 1;

    transform: translate3d(0, 0, 0);
}


/* ============================================================
   19. REVEAL SCALE
============================================================ */

.cs-reveal-scale {
    opacity: 0;

    transform: scale(0.97);

    transition:
        opacity var(--cs-anim-slow) var(--cs-ease-smooth),
        transform var(--cs-anim-slow) var(--cs-ease-smooth);

    will-change: opacity, transform;
}

.cs-reveal-scale.is-visible {
    opacity: 1;

    transform: scale(1);
}


/* ============================================================
   20. ANIMATION DELAYS
============================================================ */

.cs-delay-1 {
    animation-delay: 80ms !important;
    transition-delay: 80ms !important;
}

.cs-delay-2 {
    animation-delay: 160ms !important;
    transition-delay: 160ms !important;
}

.cs-delay-3 {
    animation-delay: 240ms !important;
    transition-delay: 240ms !important;
}

.cs-delay-4 {
    animation-delay: 320ms !important;
    transition-delay: 320ms !important;
}

.cs-delay-5 {
    animation-delay: 400ms !important;
    transition-delay: 400ms !important;
}

.cs-delay-6 {
    animation-delay: 480ms !important;
    transition-delay: 480ms !important;
}


/* ============================================================
   21. CARD LIFT
============================================================ */

.cs-hover-lift {
    transition:
        transform var(--cs-anim-normal) var(--cs-ease-smooth),
        box-shadow var(--cs-anim-normal) var(--cs-ease-smooth),
        border-color var(--cs-anim-normal) var(--cs-ease-standard);
}

.cs-hover-lift:hover {
    transform: translateY(-4px);

    box-shadow: var(--cs-shadow-lg);
}


/* ============================================================
   22. CARD SOFT LIFT
============================================================ */

.cs-hover-soft {
    transition:
        transform var(--cs-anim-normal) var(--cs-ease-smooth),
        box-shadow var(--cs-anim-normal) var(--cs-ease-smooth);
}

.cs-hover-soft:hover {
    transform: translateY(-2px);

    box-shadow: var(--cs-shadow-md);
}


/* ============================================================
   23. HOVER SCALE
============================================================ */

.cs-hover-scale {
    transition:
        transform
        var(--cs-anim-normal)
        var(--cs-ease-smooth);
}

.cs-hover-scale:hover {
    transform: scale(1.025);
}


/* ============================================================
   24. IMAGE ZOOM
============================================================ */

.cs-image-zoom {
    overflow: hidden;
}

.cs-image-zoom img {
    transition:
        transform
        700ms
        var(--cs-ease-smooth);
}

.cs-image-zoom:hover img {
    transform: scale(1.055);
}


/* ============================================================
   25. BUTTON LIFT
============================================================ */

.cs-btn-lift {
    transition:
        transform var(--cs-anim-fast) var(--cs-ease-standard),
        box-shadow var(--cs-anim-fast) var(--cs-ease-standard);
}

.cs-btn-lift:hover {
    transform: translateY(-1px);
}

.cs-btn-lift:active {
    transform: translateY(0);
}


/* ============================================================
   26. BUTTON SHINE
============================================================ */

.cs-btn-shine {
    position: relative;

    overflow: hidden;
}

.cs-btn-shine::after {
    content: "";

    position: absolute;

    top: -50%;
    left: -80%;

    width: 40%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.22),
            transparent
        );

    transform: rotate(20deg);

    transition:
        left
        650ms
        var(--cs-ease-smooth);

    pointer-events: none;
}

.cs-btn-shine:hover::after {
    left: 130%;
}


/* ============================================================
   27. RIPPLE
============================================================ */

.cs-ripple {
    position: relative;

    overflow: hidden;

    isolation: isolate;
}

.cs-ripple-effect {
    position: absolute;

    z-index: -1;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    pointer-events: none;

    transform: translate(-50%, -50%) scale(0);

    animation:
        csRipple
        600ms
        linear;
}

@keyframes csRipple {
    to {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(25);
    }
}


/* ============================================================
   28. SPINNER
============================================================ */

@keyframes csSpin {
    to {
        transform: rotate(360deg);
    }
}

.cs-spinner {
    display: inline-block;

    width: 20px;
    height: 20px;

    border: 2px solid rgba(var(--cs-primary-rgb), 0.18);
    border-top-color: var(--cs-primary);
    border-radius: 50%;

    animation:
        csSpin
        700ms
        linear
        infinite;
}

.cs-spinner-sm {
    width: 15px;
    height: 15px;

    border-width: 2px;
}

.cs-spinner-lg {
    width: 32px;
    height: 32px;

    border-width: 3px;
}


/* ============================================================
   29. PAGE LOADER
============================================================ */

.cs-page-loader {
    position: fixed;

    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cs-white);

    opacity: 1;
    visibility: visible;

    transition:
        opacity var(--cs-anim-normal) ease,
        visibility var(--cs-anim-normal) ease;
}

.cs-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}

.cs-page-loader-spinner {
    width: 42px;
    height: 42px;

    border: 3px solid rgba(var(--cs-primary-rgb), 0.12);
    border-top-color: var(--cs-primary);
    border-radius: 50%;

    animation:
        csSpin
        750ms
        linear
        infinite;
}


/* ============================================================
   30. DOT LOADER
============================================================ */

.cs-loading-dots {
    display: inline-flex;
    align-items: center;

    gap: 4px;
}

.cs-loading-dots span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: currentColor;

    animation:
        csLoadingDot
        1.1s
        ease-in-out
        infinite;
}

.cs-loading-dots span:nth-child(2) {
    animation-delay: 140ms;
}

.cs-loading-dots span:nth-child(3) {
    animation-delay: 280ms;
}

@keyframes csLoadingDot {
    0%,
    60%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-4px);
    }
}


/* ============================================================
   31. SKELETON
============================================================ */

.cs-skeleton {
    position: relative;

    overflow: hidden;

    border-radius: var(--cs-radius-sm);

    background: var(--cs-gray-100);
}

.cs-skeleton::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.72) 50%,
            transparent 100%
        );

    transform: translateX(-100%);

    animation:
        csSkeleton
        1.5s
        ease-in-out
        infinite;
}

@keyframes csSkeleton {
    100% {
        transform: translateX(100%);
    }
}

.cs-skeleton-text {
    width: 100%;
    height: 12px;
}

.cs-skeleton-title {
    width: 65%;
    height: 18px;
}

.cs-skeleton-avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;
}


/* ============================================================
   32. PULSE
============================================================ */

@keyframes csPulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

.cs-animate-pulse {
    animation:
        csPulse
        1.7s
        ease-in-out
        infinite;
}


/* ============================================================
   33. STATUS PULSE
============================================================ */

.cs-status-pulse {
    position: relative;
}

.cs-status-pulse::after {
    content: "";

    position: absolute;

    inset: -3px;

    border: 2px solid currentColor;
    border-radius: inherit;

    opacity: 0;

    animation:
        csStatusPulse
        1.8s
        ease-out
        infinite;
}

@keyframes csStatusPulse {
    0% {
        opacity: 0.4;
        transform: scale(0.85);
    }

    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}


/* ============================================================
   34. ONLINE DOT
============================================================ */

.cs-online-pulse {
    position: relative;
}

.cs-online-pulse::after {
    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 50%;

    background: currentColor;

    opacity: 0.25;

    animation:
        csOnlinePulse
        1.8s
        ease-out
        infinite;
}

@keyframes csOnlinePulse {
    0% {
        opacity: 0.35;
        transform: scale(0.75);
    }

    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}


/* ============================================================
   35. SHAKE
============================================================ */

@keyframes csShake {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

.cs-animate-shake {
    animation:
        csShake
        420ms
        ease;
}


/* ============================================================
   36. SUCCESS POP
============================================================ */

@keyframes csSuccessPop {
    0% {
        opacity: 0;
        transform: scale(0.65);
    }

    65% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cs-success-pop {
    animation:
        csSuccessPop
        500ms
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   37. CHECKMARK
============================================================ */

@keyframes csCheckmark {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.cs-animate-check {
    animation:
        csCheckmark
        450ms
        var(--cs-ease-bounce)
        both;
}


/* ============================================================
   38. BOUNCE
============================================================ */

@keyframes csBounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.cs-animate-bounce {
    animation:
        csBounce
        1.5s
        ease-in-out
        infinite;
}


/* ============================================================
   39. FLOAT
============================================================ */

@keyframes csFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -7px, 0);
    }
}

.cs-animate-float {
    animation:
        csFloat
        4s
        ease-in-out
        infinite;
}


/* ============================================================
   40. GENTLE ROTATE
============================================================ */

@keyframes csGentleRotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(0);
    }
}

.cs-animate-gentle-rotate {
    animation:
        csGentleRotate
        3s
        ease-in-out
        infinite;
}


/* ============================================================
   41. DROPDOWN OPEN
============================================================ */

@keyframes csDropdownOpen {
    from {
        opacity: 0;

        transform:
            translate3d(0, -6px, 0)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

.cs-dropdown.is-open,
.cs-dropdown-menu.show {
    animation:
        csDropdownOpen
        var(--cs-anim-fast)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   42. MODAL OPEN
============================================================ */

@keyframes csModalOpen {
    from {
        opacity: 0;

        transform:
            translate3d(0, 12px, 0)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

.cs-modal-backdrop.is-open .cs-modal,
.cs-admin-modal-backdrop.is-open .cs-admin-modal {
    animation:
        csModalOpen
        var(--cs-anim-normal)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   43. TOAST / FLASH MESSAGE
============================================================ */

@keyframes csToastIn {
    from {
        opacity: 0;

        transform:
            translate3d(20px, 0, 0)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

.cs-toast,
.cs-flash-message {
    animation:
        csToastIn
        var(--cs-anim-normal)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   44. NOTIFICATION ARRIVAL
============================================================ */

@keyframes csNotificationArrival {
    0% {
        opacity: 0;
        transform: translateX(15px);
    }

    70% {
        opacity: 1;
        transform: translateX(-2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.cs-notification-new {
    animation:
        csNotificationArrival
        420ms
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   45. NOTIFICATION BELL
============================================================ */

@keyframes csBellRing {
    0%,
    100% {
        transform: rotate(0);
    }

    20% {
        transform: rotate(12deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(7deg);
    }

    80% {
        transform: rotate(-4deg);
    }
}

.cs-bell-ring {
    transform-origin: top center;

    animation:
        csBellRing
        600ms
        ease;
}


/* ============================================================
   46. PROGRESS BAR
============================================================ */

.cs-progress-animated {
    position: relative;

    overflow: hidden;
}

.cs-progress-animated::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.22) 45%,
            transparent 70%
        );

    transform: translateX(-100%);

    animation:
        csProgressShine
        2s
        ease-in-out
        infinite;
}

@keyframes csProgressShine {
    100% {
        transform: translateX(100%);
    }
}


/* ============================================================
   47. ASSESSMENT OPTION
============================================================ */

.cs-answer-option {
    transition:
        border-color var(--cs-anim-fast) ease,
        background var(--cs-anim-fast) ease,
        transform var(--cs-anim-fast) ease;
}

.cs-answer-option:hover {
    transform: translateX(2px);
}

.cs-answer-option.is-selected {
    animation:
        csAnswerSelected
        260ms
        var(--cs-ease-smooth);
}

@keyframes csAnswerSelected {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.012);
    }

    100% {
        transform: scale(1);
    }
}


/* ============================================================
   48. TIMER WARNING
============================================================ */

@keyframes csTimerWarning {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

.cs-timer-warning {
    animation:
        csTimerWarning
        900ms
        ease-in-out
        infinite;
}


/* ============================================================
   49. SIDEBAR NAV INDICATOR
============================================================ */

.cs-candidate-nav-link::before,
.cs-admin-nav-link::before {
    transition:
        opacity var(--cs-anim-fast) ease,
        transform var(--cs-anim-fast) ease;
}


/* ============================================================
   50. SIDEBAR OPEN
============================================================ */

.cs-candidate-sidebar,
.cs-admin-sidebar {
    will-change: transform;
}


/* ============================================================
   51. INPUT FOCUS
============================================================ */

.cs-input-animated,
.cs-admin-input,
.cs-admin-select,
.cs-admin-textarea {
    transition:
        border-color var(--cs-anim-fast) ease,
        box-shadow var(--cs-anim-fast) ease,
        background var(--cs-anim-fast) ease;
}


/* ============================================================
   52. LINK ARROW
============================================================ */

.cs-link-arrow i,
.cs-link-arrow svg {
    transition:
        transform
        var(--cs-anim-fast)
        var(--cs-ease-standard);
}

.cs-link-arrow:hover i,
.cs-link-arrow:hover svg {
    transform: translateX(3px);
}


/* ============================================================
   53. ICON HOVER
============================================================ */

.cs-icon-hover i,
.cs-icon-hover svg {
    transition:
        transform
        var(--cs-anim-normal)
        var(--cs-ease-bounce);
}

.cs-icon-hover:hover i,
.cs-icon-hover:hover svg {
    transform: scale(1.12);
}


/* ============================================================
   54. COPY SUCCESS
============================================================ */

@keyframes csCopySuccess {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.cs-copy-success {
    animation:
        csCopySuccess
        300ms
        var(--cs-ease-smooth);
}


/* ============================================================
   55. PAYMENT PROCESSING
============================================================ */

@keyframes csPaymentProcessing {
    0% {
        box-shadow:
            0 0 0 0
            rgba(var(--cs-primary-rgb), 0.18);
    }

    70% {
        box-shadow:
            0 0 0 12px
            rgba(var(--cs-primary-rgb), 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(var(--cs-primary-rgb), 0);
    }
}

.cs-payment-processing {
    animation:
        csPaymentProcessing
        1.6s
        ease-out
        infinite;
}


/* ============================================================
   56. QR SOFT ENTRY
============================================================ */

@keyframes csQrEntry {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cs-upi-qr {
    animation:
        csQrEntry
        450ms
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   57. DASHBOARD STAT ENTRY
============================================================ */

.cs-candidate-stat-card,
.cs-admin-stat-card {
    animation:
        csFadeUp
        500ms
        var(--cs-ease-smooth)
        both;
}

.cs-candidate-stat-card:nth-child(2),
.cs-admin-stat-card:nth-child(2) {
    animation-delay: 60ms;
}

.cs-candidate-stat-card:nth-child(3),
.cs-admin-stat-card:nth-child(3) {
    animation-delay: 120ms;
}

.cs-candidate-stat-card:nth-child(4),
.cs-admin-stat-card:nth-child(4) {
    animation-delay: 180ms;
}


/* ============================================================
   58. JOB CARD ENTRY
============================================================ */

.cs-job-card {
    animation:
        csFadeUp
        500ms
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   59. PAGE CONTENT ENTRY
============================================================ */

.cs-page-main,
.cs-candidate-content,
.cs-admin-content {
    animation:
        csFadeIn
        320ms
        ease
        both;
}


/* ============================================================
   60. ERROR SHAKE HELPER
============================================================ */

.cs-has-error {
    animation:
        csShake
        420ms
        ease;
}


/* ============================================================
   61. SUCCESS RING
============================================================ */

@keyframes csSuccessRing {
    0% {
        opacity: 0.5;
        transform: scale(0.65);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.cs-success-ring {
    position: relative;
}

.cs-success-ring::after {
    content: "";

    position: absolute;

    inset: -5px;

    border: 2px solid var(--cs-success);
    border-radius: 50%;

    animation:
        csSuccessRing
        900ms
        ease-out
        both;
}


/* ============================================================
   62. ATTENTION PULSE
============================================================ */

@keyframes csAttentionPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}

.cs-attention {
    animation:
        csAttentionPulse
        1.7s
        ease-in-out
        infinite;
}


/* ============================================================
   63. SHIMMER TEXT
============================================================ */

.cs-text-shimmer {
    background:
        linear-gradient(
            90deg,
            var(--cs-primary-dark),
            var(--cs-primary-light),
            var(--cs-primary-dark)
        );

    background-size: 200% auto;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation:
        csTextShimmer
        3s
        linear
        infinite;
}

@keyframes csTextShimmer {
    to {
        background-position: 200% center;
    }
}


/* ============================================================
   64. ACCORDION
============================================================ */

.cs-accordion-content {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows
        var(--cs-anim-normal)
        var(--cs-ease-smooth),
        opacity
        var(--cs-anim-normal)
        ease;
}

.cs-accordion-content > div {
    overflow: hidden;
}

.cs-accordion-item.is-open .cs-accordion-content {
    grid-template-rows: 1fr;

    opacity: 1;
}

.cs-accordion-icon {
    transition:
        transform
        var(--cs-anim-normal)
        var(--cs-ease-smooth);
}

.cs-accordion-item.is-open .cs-accordion-icon {
    transform: rotate(180deg);
}


/* ============================================================
   65. MOBILE NAV ENTRY
============================================================ */

@keyframes csMobileNavEntry {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cs-candidate-bottom-nav {
    animation:
        csMobileNavEntry
        var(--cs-anim-normal)
        var(--cs-ease-smooth)
        both;
}


/* ============================================================
   66. OVERLAY FADE
============================================================ */

.cs-candidate-overlay.is-open,
.cs-admin-overlay.is-open {
    animation:
        csFadeIn
        var(--cs-anim-fast)
        ease
        both;
}


/* ============================================================
   67. FORM VALIDATION SUCCESS
============================================================ */

.cs-field-success {
    animation:
        csFieldSuccess
        400ms
        ease;
}

@keyframes csFieldSuccess {
    0% {
        box-shadow:
            0 0 0 0
            rgba(var(--cs-success-rgb), 0);
    }

    50% {
        box-shadow:
            0 0 0 4px
            rgba(var(--cs-success-rgb), 0.12);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(var(--cs-success-rgb), 0);
    }
}


/* ============================================================
   68. COUNTER ENTRY
============================================================ */

.cs-counter {
    animation:
        csCounterEntry
        500ms
        var(--cs-ease-smooth)
        both;
}

@keyframes csCounterEntry {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   69. TOOLTIP
============================================================ */

.cs-tooltip {
    opacity: 0;

    transform: translateY(4px);

    transition:
        opacity var(--cs-anim-fast) ease,
        transform var(--cs-anim-fast) ease;

    pointer-events: none;
}

.cs-tooltip.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   70. DISABLED ANIMATION HELPER
============================================================ */

.cs-no-animation,
.cs-no-animation *,
.cs-no-animation::before,
.cs-no-animation::after {
    animation: none !important;
    transition: none !important;
}


/* ============================================================
   71. PERFORMANCE OPTIMIZATION
============================================================ */

.cs-animate-fade-up,
.cs-animate-fade-down,
.cs-animate-fade-left,
.cs-animate-fade-right,
.cs-animate-scale-in,
.cs-animate-slide-left,
.cs-animate-slide-right,
.cs-animate-float {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ============================================================
   72. REDUCED MOTION ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .cs-reveal,
    .cs-reveal-left,
    .cs-reveal-right,
    .cs-reveal-scale {
        opacity: 1 !important;

        transform: none !important;
    }

    .cs-animate-float,
    .cs-animate-bounce,
    .cs-animate-pulse,
    .cs-attention,
    .cs-timer-warning,
    .cs-payment-processing,
    .cs-online-pulse::after,
    .cs-status-pulse::after {
        animation: none !important;
    }

    .cs-image-zoom:hover img,
    .cs-hover-lift:hover,
    .cs-hover-soft:hover,
    .cs-hover-scale:hover,
    .cs-answer-option:hover {
        transform: none !important;
    }
}


/* ============================================================
   73. PRINT
============================================================ */

@media print {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .cs-reveal,
    .cs-reveal-left,
    .cs-reveal-right,
    .cs-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }

    .cs-page-loader {
        display: none !important;
    }
}


/* ============================================================
   END - CAREERSETU PRO GLOBAL ANIMATIONS
============================================================ */