#vehant-anniversary {
    --vehant-blue: #01416B;
    --vehant-orange: #E77621;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, rgba(1,65,107,.96) 0%, rgba(1,65,107,.88) 38%, rgba(3,25,43,.985) 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .7s ease, visibility .7s ease;
}
#vehant-anniversary.is-visible { opacity:1; visibility:visible; pointer-events:auto; }
#vehant-anniversary.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }

#vehant-anniversary::before {
    content:"";
    position:absolute;
    width:min(75vw,850px);
    height:min(75vw,850px);
    border-radius:50%;
    background:rgba(255,255,255,.025);
    box-shadow:0 0 120px rgba(255,255,255,.08),0 0 220px rgba(1,65,107,.45);
    pointer-events:none;
}
#vehant-anniversary::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:-140px;
    width:520px;
    height:220px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(231,118,33,.08);
    filter:blur(35px);
    pointer-events:none;
}
.vehant-anniversary-content {
    position:relative;
    z-index:5;
    width:min(92%,900px);
    text-align:center;
    color:#fff;
    opacity:0;
    transform:translateY(18px);
    transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);
}
#vehant-anniversary.is-visible .vehant-anniversary-content { opacity:1; transform:translateY(0); }

.vehant-anniversary-small {
    margin-bottom:12px;
    font:600 14px/1.4 Arial,Helvetica,sans-serif;
    letter-spacing:7px;
    color:#fff;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .6s ease .15s,transform .6s ease .15s;
}
#vehant-anniversary.is-visible .vehant-anniversary-small { opacity:1; transform:translateY(0); }

.vehant-anniversary-number {
    position: relative;
    display: inline-block;
    margin: 0;
    font: 900 clamp(170px,25vw,320px)/.72 Arial,Helvetica,sans-serif;
    letter-spacing: -14px;

    /* Strong contrast against the background */
    color: #01416B;
    -webkit-text-stroke: 3px rgba(255,255,255,.95);
    text-shadow:
        0 5px 0 rgba(0,0,0,.18),
        0 12px 35px rgba(0,0,0,.55),
        0 0 35px rgba(255,255,255,.18),
        0 0 55px rgba(1,65,107,.85);

    opacity: 0;
    transform: scale(.78);
    filter: blur(5px);

    transition:
        opacity .8s ease .2s,
        transform 1s cubic-bezier(.16,1,.3,1) .2s,
        filter .8s ease .2s;

    /* Blue -> Orange transition after the number appears */
    animation: none;
}

#vehant-anniversary.is-visible .vehant-anniversary-number {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    animation: vehantNumberBrandShift 2.4s ease-in-out 1s forwards;
}

/* A soft halo behind the 21 improves readability without changing the
   overall dark-blue corporate background. */
.vehant-anniversary-number::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 115%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(255,255,255,.12) 0%,
        rgba(1,65,107,.20) 42%,
        rgba(1,65,107,0) 72%
    );
    filter: blur(22px);
    pointer-events: none;
}

@keyframes vehantNumberBrandShift {
    0% {
        color: #01416B;
        text-shadow:
            0 5px 0 rgba(0,0,0,.18),
            0 12px 35px rgba(0,0,0,.55),
            0 0 35px rgba(255,255,255,.18),
            0 0 55px rgba(1,65,107,.85);
    }
    100% {
        color: #E77621;
        text-shadow:
            0 5px 0 rgba(0,0,0,.18),
            0 12px 35px rgba(0,0,0,.55),
            0 0 35px rgba(255,255,255,.18),
            0 0 60px rgba(231,118,33,.65);
    }
}

.vehant-anniversary-years {
    margin-top:24px;
    font:700 24px/1.3 Arial,Helvetica,sans-serif;
    letter-spacing:10px;
    color:#fff;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .6s ease .7s,transform .6s ease .7s;
}
#vehant-anniversary.is-visible .vehant-anniversary-years { opacity:1; transform:translateY(0); }

.vehant-anniversary-line {
    width:190px;
    height:4px;
    margin:25px auto 23px;
    background:linear-gradient(90deg,#01416B 0%,#01416B 50%,#E77621 50%,#E77621 100%);
    box-shadow:0 0 10px rgba(255,255,255,.15);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .65s ease .95s;
}
#vehant-anniversary.is-visible .vehant-anniversary-line { transform:scaleX(1); }

.vehant-anniversary-message {
    font:500 clamp(25px,3.5vw,40px)/1.25 Arial,Helvetica,sans-serif;
    letter-spacing:.2px;
    color:#fff;
    text-shadow:0 3px 18px rgba(0,0,0,.48);
    opacity:0;
    transform:translateY(8px);
    transition:opacity .6s ease 1.05s,transform .6s ease 1.05s;
}
#vehant-anniversary.is-visible .vehant-anniversary-message { opacity:1; transform:translateY(0); }
.vehant-orange-text { color:#E77621; text-shadow:0 3px 16px rgba(231,118,33,.25); }

.vehant-anniversary-dates {
    margin-top:18px;
    font:700 15px/1.4 Arial,Helvetica,sans-serif;
    letter-spacing:6px;
    color:#fff;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .6s ease 1.2s,transform .6s ease 1.2s;
}
#vehant-anniversary.is-visible .vehant-anniversary-dates { opacity:1; transform:translateY(0); }
.vehant-anniversary-dates span { color:#E77621; margin:0 8px; }

.vehant-anniversary-close {
    position:absolute;
    top:25px;
    right:30px;
    z-index:20;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.5);
    border-radius:50%;
    background:rgba(1,65,107,.75);
    color:#fff;
    font:300 27px/38px Arial,Helvetica,sans-serif;
    cursor:pointer;
    transition:background .25s ease,transform .25s ease,border-color .25s ease;
}
.vehant-anniversary-close:hover { background:#E77621; border-color:#E77621; transform:rotate(90deg); }

/* Elegant sparkle effect */
.vehant-anniversary-particles {
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    overflow:hidden;
}
.vehant-sparkle {
    --sparkle-scale:1;
    position:absolute;
    display:block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 5px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.75),0 0 22px rgba(1,65,107,.55);
    opacity:0;
    transform:scale(.15) rotate(45deg);
    animation:vehantSparkle 3.2s ease-in-out infinite;
}
.vehant-sparkle::before,.vehant-sparkle::after {
    content:"";
    position:absolute;
    left:50%; top:50%;
    background:rgba(255,255,255,.95);
    transform:translate(-50%,-50%);
    border-radius:999px;
}
.vehant-sparkle::before { width:3px; height:22px; }
.vehant-sparkle::after { width:22px; height:3px; }
.vehant-sparkle.is-orange {
    background:#E77621;
    box-shadow:0 0 5px rgba(231,118,33,.95),0 0 13px rgba(231,118,33,.75),0 0 25px rgba(231,118,33,.5);
}
.vehant-sparkle.is-orange::before,.vehant-sparkle.is-orange::after { background:#E77621; }
@keyframes vehantSparkle {
    0%,100% { opacity:0; transform:scale(.15) rotate(45deg); }
    20% { opacity:.2; transform:scale(.35) rotate(45deg); }
    48% { opacity:1; transform:scale(var(--sparkle-scale)) rotate(45deg); }
    68% { opacity:.65; transform:scale(.65) rotate(45deg); }
    84% { opacity:.05; transform:scale(.2) rotate(45deg); }
}

@media (max-width:767px) {
    .vehant-anniversary-small { font-size:11px; letter-spacing:4px; }
    .vehant-anniversary-number { font-size:155px; letter-spacing:-8px; -webkit-text-stroke:2px rgba(255,255,255,.95); }
    .vehant-anniversary-years { margin-top:20px; font-size:18px; letter-spacing:6px; }
    .vehant-anniversary-line { width:125px; height:3px; margin-top:21px; margin-bottom:19px; }
    .vehant-anniversary-message { font-size:22px; padding:0 15px; }
    .vehant-anniversary-dates { font-size:12px; letter-spacing:3px; }
    .vehant-anniversary-close { top:18px; right:18px; width:38px; height:38px; font-size:24px; line-height:34px; }
}
@media (prefers-reduced-motion:reduce) {
    #vehant-anniversary,#vehant-anniversary *,#vehant-anniversary::before,#vehant-anniversary::after { animation:none!important; transition:none!important; }
    #vehant-anniversary.is-visible .vehant-anniversary-content,
    #vehant-anniversary.is-visible .vehant-anniversary-small,
    #vehant-anniversary.is-visible .vehant-anniversary-number,
    #vehant-anniversary.is-visible .vehant-anniversary-years,
    #vehant-anniversary.is-visible .vehant-anniversary-message,
    #vehant-anniversary.is-visible .vehant-anniversary-dates { opacity:1; transform:none; filter:none; }
    #vehant-anniversary.is-visible .vehant-anniversary-line { transform:scaleX(1); }
}