/* =========================================================================
   ANIMATIONS.CSS — Keyframes & Scroll Reveal System
   ========================================================================= */

/* ---------- Keyframes ---------- */
@keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(3%, -4%) scale(1.06); }
    100% { transform: translate(-3%, 3%) scale(1); }
}

@keyframes float-shape {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-22px) rotate(8deg); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.9; }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes scroll-line {
    0%   { top: -100%; }
    100% { top: 100%; }
}

@keyframes ripple-effect {
    from { transform: scale(0); opacity: 0.45; }
    to   { transform: scale(2.4); opacity: 0; }
}

@keyframes pop-in {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ---------- Scroll Reveal (data-aos) ---------- */
[data-aos] {
    opacity: 0;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    will-change: opacity, transform;
}
[data-aos="fade-up"]    { transform: translateY(28px); }
[data-aos="fade-left"]  { transform: translateX(28px); }
[data-aos="fade-right"] { transform: translateX(-28px); }

[data-aos].is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .bg-glow, .hero__shape, .hero__particles circle, .hero__portrait-ring,
    .hero__scroll span::after, .hero__typing-cursor {
        animation: none !important;
    }
}

/* ---------- Ripple (buttons) ---------- */
.btn { --x: 50%; --y: 50%; }
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transform: scale(0);
    pointer-events: none;
    animation: ripple-effect 650ms var(--ease);
}

/* ---------- Counter pop ---------- */
.hero__counter.is-counted,
.achievement-card__stat span.is-counted {
    animation: pop-in 400ms var(--ease);
}

/* ---------- Timeline reveal line ---------- */
.timeline__marker {
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.timeline__item.is-visible .timeline__marker {
    transform: scale(1);
    opacity: 1;
}

/* ---------- Badge stagger entrance ---------- */
.tech-badge {
    opacity: 0;
    transform: translateY(10px);
    animation: badge-in 0.6s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}
.technology-group.is-visible .tech-badge { }
@keyframes badge-in {
    to { opacity: 1; transform: translateY(0); }
}
.technology-group:not(.is-visible) .tech-badge {
    animation-play-state: paused;
}