/*============================================
  PREMIUM ACHIEVEMENTS TIMELINE
=============================================*/

/* =========================
   SECTION
========================= */

#achievements{
    position:relative;

    padding:60px 0;

    overflow:hidden;
}

/* =========================
   TIMELINE CONTAINER
========================= */

.timeline{
    position:relative;

    height:340px;

    overflow:hidden;

    margin-top:50px;
}

/* =========================
   ANIMATED CENTER LINE
========================= */

.timeline-line{
    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:4px;

    transform:translateX(-50%);

    border-radius:20px;

    background:linear-gradient(
        to bottom,
        #4f46e5,
        #06b6d4,
        #4f46e5
    );

    background-size:100% 300%;

    animation:lineFlow 6s linear infinite;

    box-shadow:
        0 0 12px rgba(79,70,229,0.3),
        0 0 24px rgba(6,182,212,0.2);

    z-index:1;
}

@keyframes lineFlow{

    0%{
        background-position:0% 0%;
    }

    100%{
        background-position:0% 100%;
    }
}

/* =========================
   TIMELINE INNER
========================= */

.timeline-inner{
    position:relative;

    width:100%;

    will-change:transform;
}

/* =========================
   TIMELINE ITEM
========================= */

.timeline-item{
    position:relative;

    width:100%;

    height:120px;
}

/* =========================
   LEFT CARD
========================= */

.timeline-item.left .timeline-content{
    position:absolute;

    left:5%;

    width:40%;
}

/* =========================
   RIGHT CARD
========================= */

.timeline-item.right .timeline-content{
    position:absolute;

    right:5%;

    width:40%;
}

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

.timeline-content{
    position:absolute;

    top:10px;

    padding:18px 20px;

    border-radius:18px;

    background:rgba(255,255,255,0.72);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.35);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        0 2px 8px rgba(79,70,229,0.08);

    overflow:hidden;

    z-index:5;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

/* =========================
   GRADIENT BORDER GLOW
========================= */

.timeline-content::before{
    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(79,70,229,0.7),
        rgba(6,182,212,0.6),
        rgba(79,70,229,0.7)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:0.4s ease;
}

/* =========================
   SHINE EFFECT
========================= */

.timeline-content::after{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.55),
        transparent
    );

    transform:skewX(-25deg);

    transition:0.8s ease;
}

/* =========================
   CARD HOVER
========================= */

.timeline-content:hover{
    transform:
        translateY(-10px)
        scale(1.02);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.14),
        0 0 25px rgba(79,70,229,0.15);

    border-color:rgba(79,70,229,0.4);
}

.timeline-content:hover::before{
    opacity:1;
}

.timeline-content:hover::after{
    left:140%;
}

/* =========================
   TIMELINE DOT
========================= */

.timeline-dot{
    position:absolute;

    top:42px;

    left:50%;

    width:18px;
    height:18px;

    background:linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4
    );

    border-radius:50%;

    transform:translateX(-50%);

    z-index:10;

    border:4px solid #ffffff;

    box-shadow:
        0 0 0 6px rgba(79,70,229,0.12),
        0 0 18px rgba(79,70,229,0.35);

    transition:all 0.4s ease;

    animation:dotPulse 2.5s infinite;
}

/* =========================
   DOT ANIMATION
========================= */

@keyframes dotPulse{

    0%{
        box-shadow:
            0 0 0 0 rgba(79,70,229,0.35),
            0 0 12px rgba(79,70,229,0.25);
    }

    70%{
        box-shadow:
            0 0 0 12px rgba(79,70,229,0),
            0 0 22px rgba(79,70,229,0.35);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(79,70,229,0),
            0 0 12px rgba(79,70,229,0.2);
    }
}

/* =========================
   DOT HOVER
========================= */

.timeline-item:hover .timeline-dot{
    transform:
        translateX(-50%)
        scale(1.25);

    box-shadow:
        0 0 0 10px rgba(79,70,229,0.12),
        0 0 28px rgba(79,70,229,0.45);
}

/* =========================
   YEAR BADGE
========================= */

.timeline-year{
    display:inline-block;

    padding:5px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

    letter-spacing:0.5px;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #4f46e5,
        #06b6d4
    );

    box-shadow:
        0 4px 12px rgba(79,70,229,0.25);

    margin-bottom:10px;
}

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

.timeline-content p{
    margin:0;

    color:#1f2937;

    font-size:14px;

    line-height:1.7;

    font-weight:500;
}

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

@media(max-width:768px){

    .timeline{
        height:380px;
    }

    .timeline-line{
        left:20px;

        transform:none;
    }

    .timeline-dot{
        left:20px;

        transform:translateX(-50%);
    }

    .timeline-item.left .timeline-content,
    .timeline-item.right .timeline-content{
        left:55px;

        right:auto;

        width:calc(100% - 75px);
    }

    .timeline-item:hover .timeline-dot{
        transform:
            translateX(-50%)
            scale(1.2);
    }
}