/* ═══════════════════════════════════════════════════════════════
   animations.css — Keyframes & Animation Utility Classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Pulse ring (avatar +3 badge) ── */
@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 111, 232, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(59, 111, 232, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 111, 232, 0);
    }
}

/* ── Float (trusted widget) ── */
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ── Fade up (entrance) ── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Footer floating icons ── */
@keyframes floatA {
    0%,
    100% {
        transform: translateY(0) rotate(-6deg);
    }
    50% {
        transform: translateY(-14px) rotate(2deg);
    }
}

@keyframes floatB {
    0%,
    100% {
        transform: translateY(0) rotate(8deg);
    }
    50% {
        transform: translateY(-10px) rotate(-4deg);
    }
}

@keyframes morph {
    0% {
        border-radius: 38% 62% 55% 45% / 45% 45% 55% 55%;
    }
    20% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    40% {
        border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
    }
    60% {
        border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
    }
    80% {
        border-radius: 40% 70% 40% 60% / 40% 60% 30% 70%;
    }
    100% {
        border-radius: 38% 62% 55% 45% / 45% 45% 55% 55%;
    }
}

@keyframes floatUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-4px);
    }
}

/* ── Utility classes ── */
.float-anim {
    animation: float 4s ease-in-out infinite;
}

.fade-up {
    opacity: 0;
    animation: fadeUp 0.7s ease forwards;
}

.delay-1 {
    animation-delay: 0.15s;
}
.delay-2 {
    animation-delay: 0.3s;
}
.delay-3 {
    animation-delay: 0.45s;
}
.delay-4 {
    animation-delay: 0.6s;
}
.delay-5 {
    animation-delay: 0.75s;
}

/* ── Slow spin (scroll indicator) ── */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

/* ── Bounce up and down (scroll indicator) ── */
@keyframes bounce-updown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* ── Scroll Indicator Glow Effect ── */
.scroll-indicator-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 266px;
    height: 266px;
    background: radial-gradient(circle, rgba(0, 131, 207, 0.15) 0%, rgba(0, 131, 207, 0.08) 40%, rgba(0, 131, 207, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* ── Wave Hand Animation ── */
@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(14deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    30% {
        transform: rotate(14deg);
    }
    40% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.wave-hand {
    display: inline-block;
    animation: wave 2.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}

.wave-hand:hover {
    animation: wave 0.6s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════
   Technology Icons Animations (About Section)
   ═══════════════════════════════════════════════════════════════ */

/* ── Floating animations for tech icons ── */
@keyframes float-tech-1 {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-8px) translateX(2px);
    }
    50% {
        transform: translateY(-4px) translateX(-2px);
    }
    75% {
        transform: translateY(-12px) translateX(1px);
    }
}

@keyframes float-tech-2 {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-6px) translateX(-2px);
    }
    50% {
        transform: translateY(-10px) translateX(2px);
    }
    75% {
        transform: translateY(-4px) translateX(-1px);
    }
}

@keyframes float-tech-3 {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-10px) translateX(1px);
    }
    50% {
        transform: translateY(-6px) translateX(-2px);
    }
    75% {
        transform: translateY(-8px) translateX(2px);
    }
}

@keyframes float-tech-4 {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-7px) translateX(-1px);
    }
    50% {
        transform: translateY(-12px) translateX(1px);
    }
    75% {
        transform: translateY(-5px) translateX(-2px);
    }
}

/* ── Glow pulse effect ── */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 4px 4px 20px 0px rgba(6, 68, 202, 0.1);
    }
    50% {
        box-shadow: 4px 4px 30px 5px rgba(6, 68, 202, 0.25);
    }
}

/* ── Path draw animation for curves ── */
@keyframes draw-path {
    from {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
    }
    to {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

/* ── Fade slide in from left ── */
@keyframes fade-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Tech icon animation classes ── */
.tech-icon-1 {
    animation: float-tech-1 6s ease-in-out infinite;
}

.tech-icon-2 {
    animation: float-tech-2 5.5s ease-in-out infinite 0.5s;
}

.tech-icon-3 {
    animation: float-tech-3 6.5s ease-in-out infinite 1s;
}

.tech-icon-4 {
    animation: float-tech-4 5.8s ease-in-out infinite 1.5s;
}

/* ── Curve line animations ── */
.curve-line-animate {
    animation: draw-path 0.8s ease-out forwards;
}

.curve-line-delay-1 {
    animation-delay: 0.3s;
}

.curve-line-delay-2 {
    animation-delay: 0.6s;
}

.curve-line-delay-3 {
    animation-delay: 0.9s;
}

/* ── Container fade in ── */
.tech-icons-container {
    animation: fade-slide-in-left 0.8s ease-out forwards;
}

/* ── Continuous subtle glow ── */
.tech-icon-glow {
    animation: glow-pulse 3s ease-in-out infinite;
}