/* Ambient animated lights background — hero only */
.ambient-lights {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.light {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.8;
    mix-blend-mode: screen;
}

.light-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(57, 255, 20, 0.9) 0%, rgba(57, 255, 20, 0) 70%);
    top: -20%;
    left: -15%;
    animation: float1 15s ease-in-out infinite;
}

.light-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 255, 128, 0.8) 0%, rgba(0, 255, 128, 0) 70%);
    top: 50%;
    right: -10%;
    animation: float2 18s ease-in-out infinite;
}

.light-3 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(50, 205, 50, 0.8) 0%, rgba(50, 205, 50, 0) 70%);
    bottom: -15%;
    left: 20%;
    animation: float3 16s ease-in-out infinite;
}

.light-4 {
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(0, 255, 200, 0.7) 0%, rgba(0, 255, 200, 0) 70%);
    top: 20%;
    left: 40%;
    animation: float4 14s ease-in-out infinite;
}

.light-5 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(154, 205, 50, 0.8) 0%, rgba(154, 205, 50, 0) 70%);
    top: 5%;
    right: 15%;
    animation: float5 17s ease-in-out infinite;
}

@keyframes float1 {

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

    20% {
        transform: translate(300px, 150px) scale(1.4) rotate(72deg);
    }

    40% {
        transform: translate(150px, 400px) scale(0.7) rotate(144deg);
    }

    60% {
        transform: translate(-200px, 300px) scale(1.2) rotate(216deg);
    }

    80% {
        transform: translate(-100px, 100px) scale(0.9) rotate(288deg);
    }
}

@keyframes float2 {

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

    15% {
        transform: translate(-250px, -180px) scale(1.5) rotate(54deg);
    }

    30% {
        transform: translate(-400px, 100px) scale(0.6) rotate(108deg);
    }

    45% {
        transform: translate(-100px, 350px) scale(1.3) rotate(162deg);
    }

    60% {
        transform: translate(200px, 200px) scale(0.8) rotate(216deg);
    }

    75% {
        transform: translate(100px, -100px) scale(1.1) rotate(270deg);
    }

    90% {
        transform: translate(-50px, -50px) scale(0.95) rotate(324deg);
    }
}

@keyframes float3 {

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

    12% {
        transform: translate(200px, -250px) scale(0.6) rotate(43deg);
    }

    24% {
        transform: translate(-150px, -400px) scale(1.4) rotate(86deg);
    }

    36% {
        transform: translate(-350px, -150px) scale(0.8) rotate(129deg);
    }

    48% {
        transform: translate(-200px, 200px) scale(1.2) rotate(172deg);
    }

    60% {
        transform: translate(100px, 350px) scale(0.7) rotate(215deg);
    }

    72% {
        transform: translate(300px, 150px) scale(1.3) rotate(258deg);
    }

    84% {
        transform: translate(150px, -100px) scale(0.9) rotate(301deg);
    }
}

@keyframes float4 {

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

    25% {
        transform: translate(-350px, 250px) scale(1.6) rotate(90deg);
    }

    50% {
        transform: translate(-200px, -300px) scale(0.5) rotate(180deg);
    }

    75% {
        transform: translate(250px, -150px) scale(1.3) rotate(270deg);
    }
}

@keyframes float5 {

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

    10% {
        transform: translate(200px, -150px) scale(0.7) rotate(36deg);
    }

    20% {
        transform: translate(400px, 50px) scale(1.4) rotate(72deg);
    }

    30% {
        transform: translate(300px, 300px) scale(0.6) rotate(108deg);
    }

    40% {
        transform: translate(50px, 400px) scale(1.2) rotate(144deg);
    }

    50% {
        transform: translate(-200px, 300px) scale(0.8) rotate(180deg);
    }

    60% {
        transform: translate(-350px, 100px) scale(1.3) rotate(216deg);
    }

    70% {
        transform: translate(-300px, -150px) scale(0.7) rotate(252deg);
    }

    80% {
        transform: translate(-100px, -300px) scale(1.1) rotate(288deg);
    }

    90% {
        transform: translate(100px, -200px) scale(0.9) rotate(324deg);
    }
}