/* Capa artistica universal para heroes con video: luz, textura y movimiento sutil. */
.ocani-hero-art-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(209, 176, 107, 0.23), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(31, 168, 176, 0.16), transparent 27%),
        radial-gradient(circle at 52% 78%, rgba(244, 241, 234, 0.12), transparent 35%),
        linear-gradient(115deg, rgba(10, 56, 52, 0.18), transparent 46%, rgba(209, 176, 107, 0.10));
    mix-blend-mode: screen;
    opacity: 0.78;
}

.ocani-hero-art-overlay::before,
.ocani-hero-art-overlay::after {
    content: "";
    position: absolute;
    inset: -18%;
    pointer-events: none;
}

.ocani-hero-art-overlay::before {
    background-image:
        linear-gradient(120deg, transparent 0 38%, rgba(244, 241, 234, 0.15) 39%, transparent 42%),
        linear-gradient(60deg, transparent 0 44%, rgba(209, 176, 107, 0.13) 45%, transparent 48%),
        url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23F4F1EA' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M30 92c22-28 48-28 70 0s48 28 70 0'/%3E%3Cpath d='M16 132c30-22 58-22 84 0s54 22 84 0'/%3E%3Ccircle cx='90' cy='90' r='42' stroke-opacity='.08'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120% 120%, 110% 110%, 180px 180px;
    background-position: center;
    opacity: 0.48;
    transform: rotate(-3deg);
    animation: ocaniHeroDrift 18s ease-in-out infinite alternate;
}

.ocani-hero-art-overlay::after {
    background:
        linear-gradient(to right, rgba(10, 56, 52, 0.50), transparent 22%, transparent 78%, rgba(10, 56, 52, 0.42)),
        linear-gradient(to bottom, rgba(10, 56, 52, 0.10), transparent 42%, rgba(10, 56, 52, 0.48));
    opacity: 0.84;
}

@keyframes ocaniHeroDrift {
    from { transform: translate3d(-1.5%, -1%, 0) rotate(-3deg) scale(1.02); }
    to { transform: translate3d(1.5%, 1%, 0) rotate(2deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .ocani-hero-art-overlay::before {
        animation: none;
    }
}

@media (max-width: 640px) {
    .ocani-hero-art-overlay {
        opacity: 0.64;
    }

    .ocani-hero-art-overlay::before {
        background-size: 150% 150%, 140% 140%, 150px 150px;
        opacity: 0.36;
    }
}