/* ===================================================== */
/* EDUCATION NEWS ANIMATION BANNER */
/* ===================================================== */

.education-section{
    width:100%;
    padding:40px 20px;
    text-align:center;
    box-sizing:border-box;
}

.education-section .title{
    font-size:2rem;
    font-weight:800;
    margin-bottom:15px;
    color:#003b8e;
}

.education-section p{
    max-width:900px;
    margin:0 auto 30px auto;
    font-size:1.05rem;
    line-height:1.7;
}

/* ===================================================== */
/* MAIN BANNER */
/* ===================================================== */

.education-banner{
    position:relative;
    width:100%;
    max-width:1100px;
    height:260px;
    margin:40px auto;
    overflow:hidden;
    border-radius:18px;
    background:#ffffff;
    box-shadow:
        0 15px 40px rgba(0,0,0,.15),
        0 5px 15px rgba(0,0,0,.08);
}

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

.image-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:10;
}

#bannerImage{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;

    transform:translateX(0);
    will-change:transform;

    user-select:none;
    pointer-events:none;
}

/* ===================================================== */
/* TEXT LAYER */
/* ===================================================== */

.text-layer{
    position:absolute;
    inset:0;

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

    z-index:5;
    pointer-events:none;
}

#phraseContainer{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;

    font-weight:900;
    text-transform:uppercase;

    font-size:clamp(2rem,5vw,4.5rem);

    letter-spacing:8px;

    text-shadow:
        0 0 8px rgba(200,255,100,1.7),
        0 0 20px rgba(200,255,255,1.45),
        0 4px 12px rgba(5,0,0,.25);

    user-select:none;
}

/* ===================================================== */
/* LETTERS */
/* ===================================================== */

.letter{
    position:relative;

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

    min-width:0.8em;

    opacity:0;

    color:#2784F5;

    transform:
        translateY(15px)
        scale(.85);

    transition:
        opacity .8s ease,
        transform .8s ease,
        filter .8s ease;
}

/* ACTIVE LETTER */

.letter.show{
    opacity:1;

    transform:
        translateY(0)
        scale(1);

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.8))
        drop-shadow(0 0 22px rgba(255,255,255,.4));
}

/* LETTER REMOVAL */

.letter.erase{
    opacity:0;

    transform:
        translateY(-20px)
        scale(1.25)
        rotate(-8deg);

    filter:
        drop-shadow(0 0 25px #ffd700)
        drop-shadow(0 0 40px #1e90ff);
}

/* ===================================================== */
/* SPACE */
/* ===================================================== */

.space{
    display:inline-block;
    width:1.2em;
}

/* ===================================================== */
/* PARTICLE LAYER */
/* ===================================================== */

#particleLayer{
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;
    overflow:hidden;
}

/* ===================================================== */
/* PARTICLES */
/* ===================================================== */

.spark{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    pointer-events:none;

    animation:sparkFly 1.5s ease-out forwards;
}

/* GOLD PARTICLE */

.spark.gold{
    background:#FFD700;

    box-shadow:
        0 0 8px #FFD700,
        0 0 15px #FFD700,
        0 0 25px #FFD700;
}

/* BLUE PARTICLE */

.spark.blue{
    background:#1E90FF;

    box-shadow:
        0 0 8px #1E90FF,
        0 0 15px #1E90FF,
        0 0 25px #1E90FF;
}

/* PARTICLE ANIMATION */

@keyframes sparkFly{

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

    50%{
        opacity:.9;
    }

    100%{
        opacity:0;

        transform:
            translate(
                var(--tx),
                var(--ty)
            )
            scale(0);
    }
}

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

.education-section .btn{
    display:inline-block;

    margin-top:20px;

    padding:14px 30px;

    background:#004aad;
    color:#fff;

    text-decoration:none;

    border-radius:8px;

    font-weight:700;

    transition:.3s;
}

.education-section .btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 10px 20px rgba(0,74,173,.35);
}

/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media(max-width:768px){

    .education-banner{
        height:200px;
    }

    #phraseContainer{
        font-size:clamp(1.3rem,7vw,2.4rem);
        letter-spacing:4px;
    }
}

@media(max-width:480px){

    .education-banner{
        height:170px;
    }

    #phraseContainer{
        letter-spacing:2px;
    }
}