/* ===================================
   ADVANCED MOTION GRAPHICS CSS
   Keyframes and Animations for Moving Elements
   =================================== */

/* ===== GEOMETRIC SHAPES ANIMATIONS ===== */
@keyframes floatShape {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(30px, -30px) rotate(90deg) scale(1.1);
    }

    50% {
        transform: translate(-20px, -60px) rotate(180deg) scale(0.9);
    }

    75% {
        transform: translate(-40px, -30px) rotate(270deg) scale(1.05);
    }
}

/* ===== FLOATING ICONS ===== */
@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.1;
    }

    25% {
        transform: translateY(-40px) translateX(20px) rotate(5deg);
        opacity: 0.15;
    }

    50% {
        transform: translateY(-80px) translateX(-10px) rotate(-5deg);
        opacity: 0.2;
    }

    75% {
        transform: translateY(-40px) translateX(-20px) rotate(3deg);
        opacity: 0.15;
    }
}

/* ===== PULSING DOTS ===== */
@keyframes pulseDot {

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

    50% {
        opacity: 0.3;
        transform: scale(1.5);
    }
}

/* ===== ANIMATED GRID ===== */
@keyframes gridMove {
    0% {
        background-position: 0 0;
    }

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

/* ===== DIAGONAL LINES ===== */
@keyframes lineSlide {
    0% {
        transform: translateY(-100%) rotate(15deg);
    }

    100% {
        transform: translateY(100%) rotate(15deg);
    }
}

/* ===== VIDEO BACKGROUND SHIFT ===== */
@keyframes videoShift {

    0%,
    100% {
        background-position: 0% 50%;
        filter: brightness(0.9);
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.1);
    }
}

/* ===== PATTERN MOVEMENT ===== */
@keyframes patternMove {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(50px, 50px) scale(1.1);
    }
}

/* ===== ROTATING HEXAGON ===== */
@keyframes rotateHexagon {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== MORPHING CIRCLE ===== */
@keyframes morphCircle {

    0%,
    100% {
        border-radius: 50%;
    }

    25% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    50% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    75% {
        border-radius: 30% 70% 50% 50% / 50% 60% 40% 60%;
    }
}

/* ===== DEPTH LAYER FLOAT ===== */
@keyframes depthFloat {

    0%,
    100% {
        transform: translateY(0) translateZ(0);
    }

    50% {
        transform: translateY(-20px) translateZ(10px);
    }
}

/* ===== SHIMMER SWEEP ===== */
@keyframes shimmerSweep {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

/* ===== GLOW PULSE ===== */
@keyframes glowPulseAdvanced {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(201, 169, 97, 0.2);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(201, 169, 97, 0.4);
        filter: brightness(1.2);
    }
}

/* ===== SCALE BOUNCE ===== */
@keyframes scaleBounce {

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

    10% {
        transform: scale(1.1);
    }

    20% {
        transform: scale(0.95);
    }

    30% {
        transform: scale(1.05);
    }

    40% {
        transform: scale(0.98);
    }

    50% {
        transform: scale(1.02);
    }

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

/* ===== FADE SLIDE UP ===== */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* ===== ROTATE SLOW ===== */
@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

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

/* ===== WAVE MOTION ===== */
@keyframes waveMotion {

    0%,
    100% {
        transform: translateX(0) translateY(0);
    }

    25% {
        transform: translateX(10px) translateY(-5px);
    }

    50% {
        transform: translateX(0) translateY(-10px);
    }

    75% {
        transform: translateX(-10px) translateY(-5px);
    }
}

/* ===== ELASTIC BOUNCE ===== */
@keyframes elasticBounce {
    0% {
        transform: scale(1, 1);
    }

    10% {
        transform: scale(1.1, 0.9);
    }

    30% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.05, 0.95);
    }

    70% {
        transform: scale(0.95, 1.05);
    }

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

/* ===== BACKGROUND GRADIENT SHIFT ===== */
@keyframes gradientShiftAdvanced {
    0% {
        background-position: 0% 50%;
    }

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

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

/* ===== ZOOM IN OUT ===== */
@keyframes zoomInOut {

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

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

/* ===== SLIDE DIAGONAL ===== */
@keyframes slideDiagonal {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(100px, 100px);
    }
}

/* ===== OPACITY PULSE ===== */
@keyframes opacityPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

/* ===== BORDER GLOW ===== */
@keyframes borderGlow {

    0%,
    100% {
        border-color: rgba(201, 169, 97, 0.3);
        box-shadow: 0 0 5px rgba(201, 169, 97, 0.2);
    }

    50% {
        border-color: rgba(201, 169, 97, 0.8);
        box-shadow: 0 0 20px rgba(201, 169, 97, 0.5);
    }
}

/* ===== UTILITY CLASSES FOR MOTION ===== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(201, 169, 97, 0.4);
}

.smooth-transform {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {

    .geometric-shapes,
    .animated-grid,
    .diagonal-lines {
        opacity: 0.5;
    }

    .floating-icons {
        display: none;
    }

    @keyframes floatShape {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        50% {
            transform: translate(10px, -20px) rotate(90deg);
        }
    }
}

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

    .geometric-shapes,
    .animated-grid,
    .floating-icons,
    .pulsing-dots,
    .diagonal-lines,
    .parallax-layer {
        animation: none !important;
        transform: none !important;
    }
}