/*==================================================
CHANGING TEXT SECTION
==================================================*/

.glass-changing-text{

    position:relative;
    overflow:hidden;

    padding:90px 22px;

    background:
    radial-gradient(circle at 10% 20%,rgba(72,182,255,.10),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(138,92,255,.12),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(72,182,255,.08),transparent 40%),
    var(--bg);

}

/*==================================================
GRID
==================================================*/

.changing-grid{

    display:grid;
    gap:60px;
    align-items:center;

}

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

.changing-content{

    position:relative;
    z-index:2;

}

.changing-content h2{

    margin:24px 0;

    color:var(--text);

    font-size:clamp(2.2rem,8vw,4.4rem);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1px;

}

.changing-content p{

    max-width:560px;

    color:var(--text2);

    line-height:1.8;

    font-size:1rem;

    margin-bottom:38px;

}

/*==================================================
CHANGING WORD
==================================================*/

.changing-word{

    position:relative;

    display:inline-block;

    min-width:280px;

    background:linear-gradient(90deg,#48b6ff,#9d72ff);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    transition:opacity .45s ease,
               transform .45s ease;

    will-change:transform,opacity;

}

.changing-word.hide{

    opacity:0;

    transform:translateY(18px);

}

.changing-word.show{

    opacity:1;

    transform:translateY(0);

}

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

.glass-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 28px;

    border-radius:100px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    background:linear-gradient(135deg,#48b6ff,#7b5cff);

    box-shadow:
    0 12px 35px rgba(72,182,255,.30);

    transition:
    transform .35s,
    box-shadow .35s;

}

.glass-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 20px 45px rgba(72,182,255,.40);

}

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

.changing-image{

    position:relative;

    display:flex;
    justify-content:center;

}

.image-card{

    position:relative;

    width:100%;

    max-width:520px;

    padding:18px;

    border-radius:32px;

    background:linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03));

    backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.10);

    box-shadow:var(--shadow);

    overflow:hidden;

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

}

.image-card::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,255,255,.10),
    transparent 80%);

    transform:translateX(-120%);

    transition:1.2s;

}

.image-card:hover::before{

    transform:translateX(120%);

}

.image-card img{

    display:block;

    width:100%;

    border-radius:22px;

}

/*==================================================
BACKGROUND GLOW
==================================================*/

.glass-changing-text::before{

    content:"";

    position:absolute;

    width:380px;
    height:420px;

    right:-140px;
    top:-100px;

    border-radius:50%;

    background:#48b6ff;

    opacity:.10;

    filter:blur(120px);

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

}

.glass-changing-text::after{

    content:"";

    position:absolute;

    width:320px;
    height:360px;

    left:-120px;
    bottom:-100px;

    border-radius:50%;

    background:#4209d1;

    opacity:.12;

    filter:blur(120px);

    animation:floatBlob 18s ease-in-out infinite alternate;

}

/*==================================================
TABLET
==================================================*/

@media (min-width:768px){

    .changing-grid{

        grid-template-columns:1fr 1fr;

        gap:70px;

    }

    .changing-content{

        order:1;

    }

    .changing-image{

        order:2;

    }

}

/*==================================================
DESKTOP
==================================================*/

@media (min-width:1100px){

    .glass-changing-text{

        padding:120px 40px;

    }

    .changing-grid{

        gap:100px;

    }

    .changing-content h2{

        font-size:4.8rem;

    }

    .changing-content p{

        font-size:1.08rem;

    }

    .image-card{

        max-width:600px;

        padding:22px;

    }

}

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

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0px);

    }

}