/* --- 1. Keyframes (Core Logic) --- */
/* Hero container MUST be relative */
.hero {
    position: relative;
}

/* Base dot */
.dot {
    position: absolute;
    top: 30%;
    left: 80%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* Individual dot offsets */
.dot-1 {
    background-color: #CD208B;
    box-shadow:
        0 0 12px #CD208B,
        0 0 0 #CD208B,
        0 0 0 #CD208B;
    --x: -520px;
    --y: -60px;
    animation: drift-a 30s linear infinite;
}

.dot-2 {
    background-color: #004AAD;
    box-shadow:
        0 0 12px #004AAD,
        0 0 0 #004AAD,
        0 0 0 #004AAD;
    --x: 60px;
    --y: 40px;
    animation: drift-b 30s linear infinite;
}

.dot-3 {
    background-color: #f7db3d;
    box-shadow:
        0 0 12px #f7db3d,
        0 0 0 #f7db3d,
        0 0 0 #f7db3d;
    --x: -590px;
    --y: 510px;
    animation: drift-c 30s linear infinite;
}

@keyframes drift-a {
    0% {
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(0, 0) rotate(0deg);
    }

    25% {
        /* Large sweeping move to the top right */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(200px, -30px) rotate(5deg);
    }

    50% {
        /* Dive deep to the center left */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(-50px, -20px) rotate(-3deg);
    }

    75% {
        /* Pull back toward the bottom right */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(-120px, -80px) rotate(2deg);
    }

    100% {
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(0, 0) rotate(0deg);
    }
}

@keyframes drift-b {
    0% {
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(0, 0) rotate(0deg);
    }

    25% {
        /* Large sweeping move to the top right */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(-100px, -30px) rotate(5deg);
    }

    50% {
        /* Dive deep to the center left */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(2 0px, 20px) rotate(-3deg);
    }

    75% {
        /* Pull back toward the bottom right */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(100px, 40px) rotate(2deg);
    }

    100% {
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(0, 0) rotate(0deg);
    }
}

@keyframes drift-c {
    0% {
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(0, 0) rotate(0deg);
    }

    25% {
        /* Large sweeping move to the top right */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(-150px, 30px) rotate(5deg);
    }

    50% {
        /* Dive deep to the center left */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(0px, 20px) rotate(-3deg);
    }

    75% {
        /* Pull back toward the bottom right */
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(-120px, -80px) rotate(2deg);
    }

    100% {
        transform: translate(-50%, -50%) translate(var(--x), var(--y)) translate(0, 0) rotate(0deg);
    }
}


@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(5px, -15px);
    }
}

@keyframes float-icon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes slow-zoom {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes soft-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes wave-flow-fixed {

    0%,
    100% {
        transform: translateX(0) scaleY(1);
    }

    50% {
        transform: translateX(-20%) scaleY(1.1);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes badge-bounce {

    0%,
    100% {
        transform: rotate(3deg) translateY(0);
    }

    50% {
        transform: rotate(1deg) translateY(-10px);
    }
}

@keyframes slow-spin-subtle {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(15deg) scale(1.1);
    }
}



/* --- 2. Animation Utility Classes --- */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-slow-zoom {
    animation: slow-zoom 12s ease-in-out infinite;
}

.animate-soft-pulse {
    animation: soft-pulse 8s ease-in-out infinite;
}

.animate-badge {
    animation: badge-bounce 4s ease-in-out infinite;
}

.feature-card-icon {
    animation: float-icon 3s ease-in-out infinite;
}

.animate-icon-subtle {
    animation: slow-spin-subtle 10s ease-in-out infinite alternate;
}

.animate-wave-fixed {
    animation: wave-flow-fixed 20s ease-in-out infinite;
    transform-origin: bottom center;
}

/* Shimmer Effect */
.animate-shimmer {
    position: relative;
    overflow: hidden;
}

.animate-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 3s infinite;
}

/* --- 3. Component & Hover States --- */

/* Card Radius and Border logic */
.promise-card {
    transition: all 0.3s ease;
}

.promise-card:hover {
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Corner Accent Effect */
.corner-accent {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .corner-accent {
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 2.5rem;
    /* Match parent card radius */
    opacity: 0.1;
}

/* List Item Interactions */
.list-item-pop {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.group:hover .list-item-pop {
    transform: translateX(8px);
}