/*==================================================
  LANGLEAR v2
  ANIMATIONS.CSS
==================================================*/

/*==================================================
  KEYFRAMES
==================================================*/

@keyframes floatSlow{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

@keyframes floatMedium{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

@keyframes floatFast{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:.65;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.65;

    }

}

@keyframes glow{

    0%{

        filter:drop-shadow(
            0 0 0 rgba(198,40,40,.25)
        );

    }

    50%{

        filter:drop-shadow(
            0 0 18px rgba(198,40,40,.45)
        );

    }

    100%{

        filter:drop-shadow(
            0 0 0 rgba(198,40,40,.25)
        );

    }

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================
  HERO FLOATING ELEMENTS
==================================================*/

.tutor-card{

    animation:
        floatSlow 7s ease-in-out infinite;

}

.lesson-card{

    animation:
        floatMedium 6s ease-in-out infinite;

}

.success-card{

    animation:
        floatFast 5s ease-in-out infinite;

}

.greeting-1{

    animation:
        floatMedium 6s ease-in-out infinite;

}

.greeting-2{

    animation:
        floatSlow 8s ease-in-out infinite;

}

.greeting-3{

    animation:
        floatFast 5.5s ease-in-out infinite;

}

.greeting-4{

    animation:
        floatMedium 7s ease-in-out infinite;

}

/*==================================================
  SVG ANIMATION
==================================================*/

.map-nodes circle{

    animation:

        pulse 2.5s ease-in-out infinite,

        glow 2.5s ease-in-out infinite;

}

.hero-showcase::before{

    animation:

        rotateSlow 60s linear infinite;

}

/*==================================================
  ENTRANCE ANIMATIONS
==================================================*/

.animate-fade-up{

    animation:fadeUp .8s cubic-bezier(.22,.61,.36,1) both;

}

.animate-fade-down{

    animation:fadeDown .8s cubic-bezier(.22,.61,.36,1) both;

}

.animate-fade-left{

    animation:fadeLeft .8s cubic-bezier(.22,.61,.36,1) both;

}

.animate-fade-right{

    animation:fadeRight .8s cubic-bezier(.22,.61,.36,1) both;

}

.animate-scale{

    animation:scaleIn .7s cubic-bezier(.22,.61,.36,1) both;

}

/*==================================================
  STAGGER DELAYS
==================================================*/

.delay-100{

    animation-delay:.1s;

}

.delay-200{

    animation-delay:.2s;

}

.delay-300{

    animation-delay:.3s;

}

.delay-400{

    animation-delay:.4s;

}

.delay-500{

    animation-delay:.5s;

}

.delay-600{

    animation-delay:.6s;

}

/*==================================================
  BUTTON INTERACTIONS
==================================================*/

.btn{

    transition:

        transform .3s cubic-bezier(.22,.61,.36,1),

        box-shadow .3s cubic-bezier(.22,.61,.36,1),

        background-color .3s ease,

        color .3s ease;

}

.btn:active{

    transform:scale(.98);

}

/*==================================================
  CARD INTERACTIONS
==================================================*/

.card,
.glass-card,
.feature-card,
.language-card,
.timeline-card,
.testimonial-card,
.pricing-card{

    transition:

        transform .35s cubic-bezier(.22,.61,.36,1),

        box-shadow .35s cubic-bezier(.22,.61,.36,1),

        border-color .35s ease;

}

.card:hover,
.feature-card:hover,
.language-card:hover,
.timeline-card:hover,
.testimonial-card:hover,
.pricing-card:hover{

    transform:

        translateY(-10px);

}

.glass-card:hover{

    transform:

        translateY(-10px)

        rotateX(2deg)

        rotateY(-2deg);

}

/*==================================================
  ICON ANIMATIONS
==================================================*/

.card-icon,
.feature-icon{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.feature-card:hover .feature-icon,
.glass-card:hover .card-icon{

    transform:

        scale(1.08)

        rotate(-5deg);

}

/*==================================================
  NAVIGATION
==================================================*/

.nav-links a{

    transition:

        color .3s ease;

}

.nav-links a::after{

    transition:

        width .3s ease;

}

/*==================================================
  LOGO
==================================================*/

.logo-mark{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.logo:hover .logo-mark{

    transform:

        rotate(-6deg)

        scale(1.06);

}

/*==================================================
  CTA
==================================================*/

.cta-card{

    overflow:hidden;

}

.cta-card::before{

    transition:

        transform 6s linear;

}

.cta-card:hover::before{

    transform:scale(1.3);

}

/*==================================================
  PROGRESS BAR
==================================================*/

.progress-bar{

    transition:width .15s linear;

}

/*==================================================
  SCROLL REVEAL
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .8s ease,

        transform .8s cubic-bezier(.22,.61,.36,1);

}

.reveal.active{

    opacity:1;

    transform:none;

}

.reveal-left{

    opacity:0;

    transform:translateX(-40px);

    transition:

        opacity .8s ease,

        transform .8s cubic-bezier(.22,.61,.36,1);

}

.reveal-left.active{

    opacity:1;

    transform:none;

}

.reveal-right{

    opacity:0;

    transform:translateX(40px);

    transition:

        opacity .8s ease,

        transform .8s cubic-bezier(.22,.61,.36,1);

}

.reveal-right.active{

    opacity:1;

    transform:none;

}

.reveal-scale{

    opacity:0;

    transform:scale(.94);

    transition:

        opacity .8s ease,

        transform .8s cubic-bezier(.22,.61,.36,1);

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}

/*==================================================
  HERO BACKGROUND MOTION
==================================================*/

.hero-blob{

    animation:
        blobFloat 16s ease-in-out infinite;

}

.blob-2{

    animation-duration:20s;

    animation-direction:reverse;

}

@keyframes blobFloat{

    0%{

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

    }

    50%{

        transform:
            translate3d(0,-24px,0)
            scale(1.06);

    }

    100%{

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

    }

}

/*==================================================
  HERO CONTENT
==================================================*/

.hero-content>*{

    animation:fadeUp .8s cubic-bezier(.22,.61,.36,1) both;

}

.hero-content>*:nth-child(1){

    animation-delay:.1s;

}

.hero-content>*:nth-child(2){

    animation-delay:.2s;

}

.hero-content>*:nth-child(3){

    animation-delay:.3s;

}

.hero-content>*:nth-child(4){

    animation-delay:.4s;

}

.hero-content>*:nth-child(5){

    animation-delay:.5s;

}

/*==================================================
  IMAGE SMOOTHING
==================================================*/

img{

    transition:

        transform .4s ease,

        opacity .3s ease;

}

img:hover{

    transform:scale(1.02);

}

/*==================================================
  LINK MICRO INTERACTION
==================================================*/

a{

    transition:

        color .3s ease,

        opacity .3s ease;

}

a:hover{

    opacity:.95;

}

/*==================================================
  INPUTS
==================================================*/

input,
textarea{

    transition:

        border-color .3s ease,

        box-shadow .3s ease;

}

input:focus,
textarea:focus{

    border-color:var(--red);

    box-shadow:

        0 0 0 4px rgba(198,40,40,.12);

    outline:none;

}

/*==================================================
  LOADING PLACEHOLDER
==================================================*/

.loading{

    position:relative;

    overflow:hidden;

}

.loading::after{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    animation:

        shimmer 1.4s infinite;

}

@keyframes shimmer{

    100%{

        transform:translateX(100%);

    }

}

/*==================================================
  GPU OPTIMISATION
==================================================*/

.hero-showcase,
.glass-card,
.hero-blob,
.greeting,
.card,
.feature-card,
.language-card,
.timeline-card,
.testimonial-card,
.pricing-card{

    backface-visibility:hidden;

    transform-style:preserve-3d;

    will-change:transform;

}

/*==================================================
  SMOOTH SCROLL TARGETS
==================================================*/

section{

    scroll-margin-top:110px;

}

/*==================================================
  ACCESSIBILITY
==================================================*/

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale{

        opacity:1 !important;

        transform:none !important;

    }

}

/*==================================================
  IMAGE LOADING
==================================================*/

img[loading="lazy"]{

    opacity:0;

    transition:opacity .5s ease;

}

img.loaded{

    opacity:1;

}

/*==================================================
  END OF ANIMATIONS.CSS
==================================================*/