/* ================================
   PERLA PAINT - EFFECTS
   Clean Effect Layer
   ================================ */

.hero-soft-wash {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(34px);
    opacity: 0;
    mix-blend-mode: screen;
}

.hero-soft-wash-1 {
    top: 12%;
    left: -18%;
    width: 54vw;
    height: 42vh;
    background:
        radial-gradient(circle at 35% 40%, rgba(216, 197, 168, 0.34), transparent 38%),
        radial-gradient(circle at 70% 56%, rgba(179, 150, 109, 0.22), transparent 48%);
    animation: heroWashOne 5.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-soft-wash-2 {
    right: -18%;
    bottom: 10%;
    width: 46vw;
    height: 38vh;
    background:
        radial-gradient(circle at 44% 46%, rgba(234, 233, 229, 0.16), transparent 42%),
        radial-gradient(circle at 72% 38%, rgba(179, 150, 109, 0.18), transparent 50%);
    animation: heroWashTwo 6.2s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

@keyframes heroWashOne {
    0% {
        opacity: 0;
        transform: translate3d(-14%, 4%, 0) scale(0.92) rotate(-8deg);
    }

    32% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.18;
        transform: translate3d(44%, -3%, 0) scale(1.05) rotate(8deg);
    }
}

@keyframes heroWashTwo {
    0% {
        opacity: 0;
        transform: translate3d(18%, -8%, 0) scale(0.95) rotate(8deg);
    }

    30% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.13;
        transform: translate3d(-38%, 4%, 0) scale(1.07) rotate(-6deg);
    }
}

.hero-paint-cursor {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 520px;
    height: 520px;
    pointer-events: none;
    opacity: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(216, 197, 168, 0.24), rgba(179, 150, 109, 0.12) 34%, transparent 68%);
    transform: translate3d(
        calc(var(--paint-x, 50vw) - 260px),
        calc(var(--paint-y, 50vh) - 260px),
        0
    );
    transition:
        opacity 0.45s ease,
        transform 0.08s linear;
    mix-blend-mode: screen;
}

.home-hero.is-paint-active .hero-paint-cursor {
    opacity: 1;
}

@media (max-width: 960px) {
    .hero-paint-cursor {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-soft-wash,
    .hero-paint-cursor {
        animation: none !important;
        transition: none !important;
    }
}