/* ================================
   GLOBAL ANIMATION OPTIMIZATION
=================================== */
:root {
    --delay: 0s;
}

/* Fade-in Up (Lightweight) */
.fade-in-up {
    opacity: 0;
    transform: translateY(25px);
    animation: fadeUp 0.9s ease-out forwards;
    animation-delay: var(--delay);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide In Left */
.slide-in-left {
    opacity: 0;
    transform: translateX(-45px);
    animation: slideLeft 1.4s ease-out forwards;
    animation-delay: var(--delay);
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(-45px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Top Slide */
.top-slide {
    opacity: 0;
    transform: translateY(-50px);
    animation: topSlide 1.5s ease-out forwards;
}

@keyframes topSlide {
    from { opacity: 0; transform: translateY(-50px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================
      FLOAT ANIMATIONS (LIGHT)
   Reduced infinite loops
=================================== */
.float-up-down,
.float-up-down1 {
    animation: floatY 2s ease-in-out infinite alternate;
}

@keyframes floatY {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}

/* Opposite Float */
.float-up {
    animation: floatUp 3.5s ease-in-out infinite alternate;
}

.float-down {
    animation: floatDown 3.5s ease-in-out infinite alternate;
}

@keyframes floatUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}

@keyframes floatDown {
    from { transform: translateY(0); }
    to   { transform: translateY(12px); }
}

/* ================================
        PARALLAX (OPTIMIZED)
=================================== */
.parallex {
    background-attachment: fixed;
}

/* Disable Parallax on Mobile */
@media (max-width: 768px) {
    .parallex {
        background-attachment: scroll !important;
    }
}

/* ================================
            IMAGE FLIP
   (Optimized GPU, no lag)
=================================== */
.flip-card-container {
    width: 100%;
    height: 330px;
    perspective: 1000px;
}

.flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.flip-card-container:hover .flip-card {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-card-back {
    background: #e1e8f0;
    transform: rotateY(180deg);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 25px;
    text-align: center;
    flex-direction: column;
}
/* ================================
              FLIP IMAGE
=================================== */
.flip-img {
    transition: transform 0.5s ease;
}

.flip-img:hover {
    transform: rotateY(180deg);
}

/* ================================
           ORBIT ANIMATION
   Optimized & disabled on mobile
=================================== */
.orbit-container {
   position: relative;
}

.orbit-box {
   position: absolute;
   animation: orbit 10s linear infinite;
}

/* Different speeds */
.orbit-container .col-lg-4:nth-child(1) .feature-item { animation-duration: 12s; }
.orbit-container .col-lg-4:nth-child(2) .feature-item { animation-duration: 15s; }
.orbit-container .col-lg-4:nth-child(3) .feature-item { animation-duration: 18s; }

@keyframes orbit {
   0%   { transform: rotate(0deg) translateX(16px) rotate(0deg); }
   100% { transform: rotate(360deg) translateX(16px) rotate(-360deg); }
}

/* Disable orbit animation on mobile */
@media (max-width: 768px) {
    .orbit-box,
    .feature-item {
        animation: none !important;
    }
}

/* ================================
     HOVER EFFECTS (LIGHT)
=================================== */

/*projectpage hand animation*/
.scroll-arrow {
    font-size: 32px;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}