/*
 Theme Name:   EER Middle East
 Theme URI:    https://generatepress.com
 Description:  Child theme built for the EER Middle East
 Author:       Leaders in Digital Media
 Author URI:   https://leadersindigitalmedia.com
 Template:     generatepress
 Version:      0.1
*/

/* ============================================================
   KEYFRAMES
   opacity + transform only — compositor thread, zero CLS
============================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

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

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

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

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

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

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


/* ============================================================
   BASE STATE
   Reserves layout space — element is invisible, not removed
============================================================ */

[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}


/* ============================================================
   TRIGGERED STATE
   JS adds .is-visible when element enters viewport
============================================================ */

[data-animate].is-visible {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade"].is-visible           { animation-name: fadeIn; }
[data-animate="fade-left"].is-visible      { animation-name: fadeInLeft; }
[data-animate="slide-left"].is-visible     { animation-name: slideInLeft; }
[data-animate="fade-right"].is-visible     { animation-name: fadeInRight; }
[data-animate="slide-right"].is-visible    { animation-name: slideInRight; }
[data-animate="slide-out-right"].is-visible { animation-name: slideOutRight; }
[data-animate="fade-top"].is-visible       { animation-name: fadeInTop; }
[data-animate="slide-top"].is-visible      { animation-name: slideInTop; }
[data-animate="fade-bottom"].is-visible    { animation-name: fadeInBottom; }
[data-animate="slide-bottom"].is-visible   { animation-name: slideInBottom; }
[data-animate="slide-out-bottom"].is-visible { animation-name: slideOutBottom; }


/* ============================================================
   STAGGER DELAYS
   Add data-delay="1" through "5" to sequence siblings
============================================================ */

[data-delay="1"].is-visible { animation-delay: 0.1s; }
[data-delay="2"].is-visible { animation-delay: 0.2s; }
[data-delay="3"].is-visible { animation-delay: 0.35s; }
[data-delay="4"].is-visible { animation-delay: 0.5s; }
[data-delay="5"].is-visible { animation-delay: 0.7s; }


/* ============================================================
   ACCESSIBILITY
   Always include — respects user OS motion preference
============================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    animation: none !important;
  }
}

.rotate-conic {
    background: radial-gradient(
        circle at center,
        #A0A0A7 0%,
        #898A93 25%,
        #6C6D75 50%,
        #333836 75%,
        #A0A0A7 100%
        
    );
    background-size: 200% 200%;
    animation: swirlMotion 8s ease-in-out infinite;
}

.rotate-conic2 {
    background: radial-gradient(
        circle at center,
        #A0A0A7 0%,
        #898A93 25%,
        #6C6D75 50%,
        #333836 75%,
        #A0A0A7 100%
        
    );
    background-size: 200% 200%;
    animation: swirlMotion 7s ease-in-out infinite;
}
.rotate-conic3 {
    background: radial-gradient(
        circle at center,
        #A0A0A7 0%,
        #898A93 25%,
        #6C6D75 50%,
        #333836 75%,
        #A0A0A7 100%
        
    );
    background-size: 200% 200%;
    animation: swirlMotion 6s ease-in-out infinite;
}
    
    

@keyframes swirlMotion {
    0% {
    background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}