/*==========================================
 Anniversary Panel
==========================================*/

.anniversary-panel{
    flex:1.1;
    background:
        radial-gradient(circle at 50% 52%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 20%, transparent 38%),
        radial-gradient(circle at 50% 52%, rgba(255,215,90,.22) 0%, transparent 48%),
        radial-gradient(circle at 25% 15%, rgba(255,255,255,.65) 0%, transparent 22%),
        radial-gradient(circle at 80% 18%, rgba(255,255,255,.45) 0%, transparent 18%),
        linear-gradient(180deg,#edf3ff 0%,#f8fbff 100%);
    border-right:1px solid #E6EBF5;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:hidden;
    position:relative;
    padding:20px 28px 10px;
}
.anniversary-panel::before{
    content:"";
    position:absolute;

    width:335px;
    height:320px;

    left:51%;
    top:53%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:2px solid rgba(255,220,120,.45);

    box-shadow:
        0 0 18px rgba(255,220,120,.20),
        0 0 35px rgba(255,240,180,.12);

    opacity:.85;

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

    z-index:0;
}
.anniversary-panel::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 22%, rgba(255,255,255,.65) 0%, transparent 18%),

    radial-gradient(circle at 80% 28%, rgba(255,255,255,.45) 0%, transparent 14%),

    radial-gradient(circle at 30% 80%, rgba(255,255,255,.30) 0%, transparent 18%);

    pointer-events:none;

    z-index:0;

}

.anniversary-content{

    width:100%;
    height:100%;
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;

}


.anniversary-logo{

    width:82px;

    margin-bottom:8px;

    transition:.3s;

}


.anniversary-school-name{

    font-family:'Poppins',sans-serif;

    font-size:24px;

    font-weight:800;

    color:#1f2937;

    line-height:1;

    text-align:center;

    margin:0;

}

.anniversary-tagline{

    margin-top:8px;

    font-size:13px;

    color:#67748c;

    font-weight:500;

    text-align:center;

}

.anniversary-divider{
    width:110px;
    height:4px;
    margin:18px auto 28px;
    border-radius:20px;
    position:relative;
    overflow:hidden;

    background:#4d74ff;
}

.anniversary-divider::before{

    content:"";

    position:absolute;

    top:0;
    left:-45px;

    width:45px;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );

    animation:dividerShine 2.8s linear infinite;

}

.anniversary-image-box{
    flex: 1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:-10px;
    margin-bottom:-35px;
    position:relative;
}


.anniversary-image{

    width:510px;

    max-width:none;

    height:auto;

    display:block;

    transform:translateY(-30px);
    animation:heroFloat 6s ease-in-out infinite;
 
    filter:
    drop-shadow(0 0 12px rgba(255,255,255,.95))
    drop-shadow(0 0 35px rgba(255,230,170,.55));

}



.anniversary-panel>*{

    position:relative;

    z-index:2;

}

@keyframes heroFloat{

    0%{

        transform:translateY(-30px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(-30px);

    }

}

@keyframes panelGlow{

    0%,100%{

        opacity:.55;

        transform:scale(1);

    }

    50%{

        opacity:.9;

        transform:scale(1.05);

    }

}


@keyframes dividerShine{

    from{

        left:-45px;

    }

    to{

        left:140px;

    }

}

.floating-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index: 3;

}

.floating-particles span{

    position:absolute;

    top:-30px;

    width:8px;

    height:8px;

    border-radius:2px;

    opacity:.9;

    animation:confettiFall linear infinite;

}


@keyframes particleFloat{

    0%{

        transform:translateY(0) scale(1);

    }

    50%{

        transform:translateY(-12px) scale(1.25);

    }

    100%{

        transform:translateY(0) scale(1);

    }

}

@keyframes confettiFall{

    0%{

        transform:
            translateY(-40px)
            rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:
            translateY(720px)
            rotate(720deg)
            translateX(40px);

        opacity:0;

    }

}

.anniversary-message{
    margin-top:-4%;
    margin-bottom:10px;
    text-align:center;
    position:relative;
    z-index:5;
}

.anniversary-values{
    font-size:16px;
    font-weight:700;
    color:#1b56d6;
    margin-bottom:4px;
}

.anniversary-values .dot{
    color:#d4a017;
    margin:0 10px;
}

.anniversary-desc{
    margin:0;
    font-size:13px;
    line-height:1.45;
    color:#4f4f4f;
    font-weight:500;
}

.anniversary-more{
    margin-top:2px;
    font-size:18px;
    font-style:italic;
    font-family:cursive;
    color:#1b56d6;
    font-weight:600;
}

@keyframes ringGlow{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

        opacity:.75;

    }

    50%{

        transform:translate(-50%,-50%) scale(1.03);

        opacity:1;

    }

}

.spark{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#fff6c7;
    box-shadow:
        0 0 8px #fff4b8,
        0 0 18px rgba(255,230,120,.9);
    animation:twinkle 3s ease-in-out infinite;
    z-index:1;
}

.spark::before,
.spark::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:#fff9da;
}

.spark::before{
    width:18px;
    height:1px;
}

.spark::after{
    width:1px;
    height:18px;
}

@keyframes twinkle{

    0%,100%{
        opacity:.2;
        transform:scale(.6);
    }

    50%{
        opacity:1;
        transform:scale(1);
    }

}