/* =========================================================
   KCGF WEBSITE
   FILE: assets/css/animations.css
   VERSION: 1.0

   PURPOSE:
   01. Global animation variables
   02. Entrance animations
   03. Scroll reveal animations
   04. Floating animations
   05. 3D hover animations
   06. Image animations
   07. Icon animations
   08. Button interactions
   09. Gradient animations
   10. Decorative animations
   11. Loading animations
   12. Animation utility classes
   13. Reduced motion accessibility

   CSS OWNERSHIP:
   style.css       = Global layout and components
   header.css      = Header-specific styling
   footer.css      = Footer-specific styling
   language.css    = Language switcher
   responsive.css  = Responsive adjustments
   infographics.css= Infographic styling

   IMPORTANT:
   Define reusable animation keyframes here.
   Do not duplicate keyframes in page stylesheets.
========================================================= */


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

:root {

    --kcgf-animation-fast: 0.25s;
    --kcgf-animation-normal: 0.55s;
    --kcgf-animation-slow: 0.9s;

    --kcgf-animation-ease:
        cubic-bezier(0.22, 1, 0.36, 1);

    --kcgf-animation-smooth:
        cubic-bezier(0.65, 0, 0.35, 1);

    --kcgf-animation-bounce:
        cubic-bezier(0.34, 1.56, 0.64, 1);

}


/* =========================================================
   02. BASIC ENTRANCE ANIMATIONS
========================================================= */

@keyframes kcgf-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes kcgf-fade-up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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


@keyframes kcgf-fade-down {
    from {
        opacity: 0;
        transform: translateY(-28px);
    }

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


@keyframes kcgf-fade-left {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

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


@keyframes kcgf-fade-right {
    from {
        opacity: 0;
        transform: translateX(-35px);
    }

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


@keyframes kcgf-scale-in {
    from {
        opacity: 0;
        transform: scale(0.88);
    }

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


@keyframes kcgf-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.65);
    }

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


@keyframes kcgf-slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


/* =========================================================
   03. FLOATING ANIMATIONS
========================================================= */

@keyframes kcgf-float {
    0%,
    100% {
        transform: translateY(0);
    }

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


@keyframes kcgf-float-slow {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

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


@keyframes kcgf-float-rotate {
    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-15px) rotate(3deg);
    }
}


@keyframes kcgf-float-horizontal {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(15px);
    }
}


@keyframes kcgf-float-diagonal {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(12px, -15px);
    }
}


/* =========================================================
   04. 3D ANIMATIONS
========================================================= */

@keyframes kcgf-rotate-3d {
    0% {
        transform: perspective(700px) rotateY(0deg);
    }

    50% {
        transform: perspective(700px) rotateY(12deg);
    }

    100% {
        transform: perspective(700px) rotateY(0deg);
    }
}


@keyframes kcgf-rotate-3d-reverse {
    0% {
        transform: perspective(700px) rotateX(0deg);
    }

    50% {
        transform: perspective(700px) rotateX(10deg);
    }

    100% {
        transform: perspective(700px) rotateX(0deg);
    }
}


@keyframes kcgf-flip-in {
    from {
        opacity: 0;
        transform: perspective(800px) rotateY(-90deg);
    }

    to {
        opacity: 1;
        transform: perspective(800px) rotateY(0deg);
    }
}


@keyframes kcgf-tilt {
    0%,
    100% {
        transform: perspective(700px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(700px) rotateX(4deg) rotateY(-5deg);
    }
}


@keyframes kcgf-card-entrance {
    from {
        opacity: 0;
        transform: perspective(900px) translateY(35px) rotateX(8deg);
    }

    to {
        opacity: 1;
        transform: perspective(900px) translateY(0) rotateX(0);
    }
}


/* =========================================================
   05. ICON ANIMATIONS
========================================================= */

@keyframes kcgf-icon-bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-8px);
    }

    65% {
        transform: translateY(-3px);
    }
}


@keyframes kcgf-icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes kcgf-icon-pulse {
    0%,
    100% {
        transform: scale(1);
    }

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


@keyframes kcgf-icon-shake {
    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-8deg);
    }

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

    75% {
        transform: rotate(-5deg);
    }
}


/* =========================================================
   06. PULSE AND GLOW ANIMATIONS
========================================================= */

@keyframes kcgf-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    70% {
        transform: scale(1.08);
        opacity: 0.7;
    }

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


@keyframes kcgf-pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.7;
    }

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


@keyframes kcgf-glow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(255, 107, 0, 0);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 107, 0, 0.30);
    }
}


/* =========================================================
   07. GRADIENT ANIMATIONS
========================================================= */

@keyframes kcgf-gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


@keyframes kcgf-gradient-shift {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(25deg);
    }
}


/* =========================================================
   08. IMAGE ANIMATIONS
========================================================= */

@keyframes kcgf-image-zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.06);
    }
}


@keyframes kcgf-image-reveal {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}


/* =========================================================
   09. DECORATIVE ANIMATIONS
========================================================= */

@keyframes kcgf-sparkle {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(45deg);
    }
}


@keyframes kcgf-orbit {
    from {
        transform: rotate(0deg) translateX(20px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(20px) rotate(-360deg);
    }
}


@keyframes kcgf-wave {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-5px) rotate(2deg);
    }

    75% {
        transform: translateY(5px) rotate(-2deg);
    }
}


/* =========================================================
   10. LOADING ANIMATIONS
========================================================= */

@keyframes kcgf-spin {
    to {
        transform: rotate(360deg);
    }
}


@keyframes kcgf-skeleton {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}


@keyframes kcgf-dot-loading {
    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

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


/* =========================================================
   11. ANIMATION UTILITY CLASSES
========================================================= */

/* Entrance */

.kcgf-animate-fade {
    animation: kcgf-fade-in 0.7s var(--kcgf-animation-ease) both;
}

.kcgf-animate-up {
    animation: kcgf-fade-up 0.7s var(--kcgf-animation-ease) both;
}

.kcgf-animate-down {
    animation: kcgf-fade-down 0.7s var(--kcgf-animation-ease) both;
}

.kcgf-animate-left {
    animation: kcgf-fade-left 0.7s var(--kcgf-animation-ease) both;
}

.kcgf-animate-right {
    animation: kcgf-fade-right 0.7s var(--kcgf-animation-ease) both;
}

.kcgf-animate-scale {
    animation: kcgf-scale-in 0.7s var(--kcgf-animation-ease) both;
}

.kcgf-animate-zoom {
    animation: kcgf-zoom-in 0.7s var(--kcgf-animation-ease) both;
}

.kcgf-animate-flip {
    animation: kcgf-flip-in 0.8s var(--kcgf-animation-ease) both;
}


/* Floating */

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

.kcgf-animate-float-slow {
    animation: kcgf-float-slow 7s ease-in-out infinite;
}

.kcgf-animate-float-rotate {
    animation: kcgf-float-rotate 6s ease-in-out infinite;
}

.kcgf-animate-float-horizontal {
    animation: kcgf-float-horizontal 5s ease-in-out infinite;
}

.kcgf-animate-float-diagonal {
    animation: kcgf-float-diagonal 6s ease-in-out infinite;
}


/* 3D */

.kcgf-animate-3d {
    animation: kcgf-rotate-3d 5s ease-in-out infinite;
}

.kcgf-animate-3d-reverse {
    animation: kcgf-rotate-3d-reverse 5s ease-in-out infinite;
}

.kcgf-animate-tilt {
    animation: kcgf-tilt 4s ease-in-out infinite;
}


/* Icons */

.kcgf-animate-bounce {
    animation: kcgf-icon-bounce 1.8s ease-in-out infinite;
}

.kcgf-animate-spin {
    animation: kcgf-icon-spin 4s linear infinite;
}

.kcgf-animate-pulse {
    animation: kcgf-icon-pulse 2s ease-in-out infinite;
}

.kcgf-animate-shake {
    animation: kcgf-icon-shake 1s ease-in-out;
}


/* Effects */

.kcgf-animate-glow {
    animation: kcgf-glow 3s ease-in-out infinite;
}

.kcgf-animate-gradient {
    background-size: 200% 200%;
    animation: kcgf-gradient-flow 6s ease infinite;
}

.kcgf-animate-sparkle {
    animation: kcgf-sparkle 2s ease-in-out infinite;
}

.kcgf-animate-wave {
    animation: kcgf-wave 4s ease-in-out infinite;
}


/* Loading */

.kcgf-spinner {
    width: 30px;
    height: 30px;

    display: inline-block;

    border: 3px solid rgba(255, 107, 0, 0.15);
    border-top-color: var(--kcgf-orange);

    border-radius: 50%;

    animation: kcgf-spin 0.8s linear infinite;
}

.kcgf-skeleton {
    background: linear-gradient(
        90deg,
        #ECEFF2 25%,
        #F7F8FA 50%,
        #ECEFF2 75%
    );

    background-size: 800px 100%;

    animation: kcgf-skeleton 1.5s linear infinite;
}


/* =========================================================
   12. ANIMATION DELAY UTILITIES
========================================================= */

.kcgf-delay-1 {
    animation-delay: 0.1s;
}

.kcgf-delay-2 {
    animation-delay: 0.2s;
}

.kcgf-delay-3 {
    animation-delay: 0.3s;
}

.kcgf-delay-4 {
    animation-delay: 0.4s;
}

.kcgf-delay-5 {
    animation-delay: 0.5s;
}

.kcgf-delay-6 {
    animation-delay: 0.6s;
}

.kcgf-delay-7 {
    animation-delay: 0.7s;
}

.kcgf-delay-8 {
    animation-delay: 0.8s;
}


/* =========================================================
   13. ANIMATION DURATION UTILITIES
========================================================= */

.kcgf-duration-fast {
    animation-duration: 0.35s !important;
}

.kcgf-duration-normal {
    animation-duration: 0.7s !important;
}

.kcgf-duration-slow {
    animation-duration: 1.2s !important;
}

.kcgf-duration-slower {
    animation-duration: 2s !important;
}


/* =========================================================
   14. HOVER ANIMATION UTILITIES
========================================================= */

.kcgf-hover-lift {
    transition: transform var(--kcgf-animation-normal) var(--kcgf-animation-ease);
}

.kcgf-hover-lift:hover {
    transform: translateY(-7px);
}


.kcgf-hover-scale {
    transition: transform var(--kcgf-animation-normal) var(--kcgf-animation-ease);
}

.kcgf-hover-scale:hover {
    transform: scale(1.045);
}


.kcgf-hover-rotate {
    transition: transform var(--kcgf-animation-normal) var(--kcgf-animation-ease);
}

.kcgf-hover-rotate:hover {
    transform: rotate(4deg);
}


.kcgf-hover-3d {
    transition:
        transform var(--kcgf-animation-normal) var(--kcgf-animation-ease),
        box-shadow var(--kcgf-animation-normal) ease;

    transform-style: preserve-3d;
}

.kcgf-hover-3d:hover {
    transform: perspective(800px) rotateX(3deg) rotateY(-4deg) translateY(-5px);
}


/* =========================================================
   15. STAGGER ANIMATION HELPERS
========================================================= */

.kcgf-stagger > * {
    animation: kcgf-fade-up 0.7s var(--kcgf-animation-ease) both;
}

.kcgf-stagger > *:nth-child(1) {
    animation-delay: 0.08s;
}

.kcgf-stagger > *:nth-child(2) {
    animation-delay: 0.16s;
}

.kcgf-stagger > *:nth-child(3) {
    animation-delay: 0.24s;
}

.kcgf-stagger > *:nth-child(4) {
    animation-delay: 0.32s;
}

.kcgf-stagger > *:nth-child(5) {
    animation-delay: 0.40s;
}

.kcgf-stagger > *:nth-child(6) {
    animation-delay: 0.48s;
}


/* =========================================================
   16. SCROLL REVEAL INITIAL STATES
========================================================= */

/*
   JavaScript will add .is-visible when an element enters
   the viewport.

   Keep the default state visible when JS is unavailable.
*/

.js-enabled .kcgf-reveal {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.7s var(--kcgf-animation-ease),
        transform 0.7s var(--kcgf-animation-ease);
}

.js-enabled .kcgf-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.js-enabled .kcgf-reveal-left {
    opacity: 0;
    transform: translateX(-35px);

    transition:
        opacity 0.7s var(--kcgf-animation-ease),
        transform 0.7s var(--kcgf-animation-ease);
}

.js-enabled .kcgf-reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}


.js-enabled .kcgf-reveal-right {
    opacity: 0;
    transform: translateX(35px);

    transition:
        opacity 0.7s var(--kcgf-animation-ease),
        transform 0.7s var(--kcgf-animation-ease);
}

.js-enabled .kcgf-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}


.js-enabled .kcgf-reveal-scale {
    opacity: 0;
    transform: scale(0.92);

    transition:
        opacity 0.7s var(--kcgf-animation-ease),
        transform 0.7s var(--kcgf-animation-ease);
}

.js-enabled .kcgf-reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}


/* =========================================================
   17. REDUCED MOTION ACCESSIBILITY
========================================================= */

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

    .kcgf-animate-fade,
    .kcgf-animate-up,
    .kcgf-animate-down,
    .kcgf-animate-left,
    .kcgf-animate-right,
    .kcgf-animate-scale,
    .kcgf-animate-zoom,
    .kcgf-animate-flip,
    .kcgf-animate-float,
    .kcgf-animate-float-slow,
    .kcgf-animate-float-rotate,
    .kcgf-animate-float-horizontal,
    .kcgf-animate-float-diagonal,
    .kcgf-animate-3d,
    .kcgf-animate-3d-reverse,
    .kcgf-animate-tilt,
    .kcgf-animate-bounce,
    .kcgf-animate-spin,
    .kcgf-animate-pulse,
    .kcgf-animate-glow,
    .kcgf-animate-gradient,
    .kcgf-animate-sparkle,
    .kcgf-animate-wave,
    .kcgf-spinner,
    .kcgf-skeleton,
    .kcgf-stagger > * {
        animation: none !important;
    }

    .js-enabled .kcgf-reveal,
    .js-enabled .kcgf-reveal-left,
    .js-enabled .kcgf-reveal-right,
    .js-enabled .kcgf-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .kcgf-hover-lift:hover,
    .kcgf-hover-scale:hover,
    .kcgf-hover-rotate:hover,
    .kcgf-hover-3d:hover {
        transform: none !important;
    }

}


/* =========================================================
   END OF GLOBAL ANIMATION LIBRARY
========================================================= */