/* Hero Aurora — repeating-gradient technique (vanilla CSS port) */

html[data-theme="dark"] .lp-hero-v5,
html:not([data-theme]) .lp-hero-v5 {
    background: linear-gradient(165deg, #020f0a 0%, #031b12 100%);
}

html[data-theme="light"] .lp-hero-v5 {
    background: linear-gradient(165deg, #f7fff9 0%, #ecfff4 100%);
}

.waplix-aurora-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.waplix-aurora-layer {
    --waplix-white: #ffffff;
    --waplix-black: #000000;
    --waplix-transparent: transparent;
    --waplix-white-gradient: repeating-linear-gradient(
        100deg,
        var(--waplix-white) 0%,
        var(--waplix-white) 7%,
        var(--waplix-transparent) 10%,
        var(--waplix-transparent) 12%,
        var(--waplix-white) 16%
    );
    --waplix-dark-gradient: repeating-linear-gradient(
        100deg,
        var(--waplix-black) 0%,
        var(--waplix-black) 7%,
        var(--waplix-transparent) 10%,
        var(--waplix-transparent) 12%,
        var(--waplix-black) 16%
    );
    --waplix-aurora-gradient: repeating-linear-gradient(
        100deg,
        #00f06a 10%,
        #34e89a 15%,
        #00d4ff 20%,
        #7affbf 25%,
        #00c878 30%
    );

    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    opacity: 0.4;
    pointer-events: none;
    will-change: transform;

    background-image: var(--waplix-dark-gradient), var(--waplix-aurora-gradient);
    background-size: 300% 200%, 300% 200%;
    background-position: 50% 50%, 50% 50%;
    filter: blur(10px);
    -webkit-filter: blur(10px);

    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
}

html[data-theme="light"] .waplix-aurora-layer {
    opacity: 0.45;
    background-image: var(--waplix-white-gradient), var(--waplix-aurora-gradient);
    filter: blur(10px) invert(1);
    -webkit-filter: blur(10px) invert(1);
}

.waplix-aurora-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--waplix-dark-gradient), var(--waplix-aurora-gradient);
    background-size: 200% 100%, 200% 100%;
    background-position: 50% 50%, 50% 50%;
    background-attachment: fixed;
    mix-blend-mode: difference;
    animation: waplixAurora 60s linear infinite;
}

html[data-theme="light"] .waplix-aurora-layer::after {
    background-image: var(--waplix-white-gradient), var(--waplix-aurora-gradient);
}

@keyframes waplixAurora {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}

.waplix-aurora-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 80% at 15% 45%, rgba(0, 0, 0, 0.42) 0%, transparent 58%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.18) 40%, transparent 100%);
}

html[data-theme="light"] .waplix-aurora-overlay {
    background:
        radial-gradient(ellipse 90% 80% at 15% 45%, rgba(255, 255, 255, 0.55) 0%, transparent 58%),
        linear-gradient(90deg, rgba(247, 255, 249, 0.82) 0%, rgba(236, 255, 244, 0.38) 42%, transparent 100%);
}

.lp-hero-v5 .landing-container,
.lp-hero-v5-grid {
    position: relative;
    z-index: 2;
}

.lp-hero-v5-content,
.lp-hero-v5 .lp-dashboard-stage {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .waplix-aurora-layer {
        opacity: 0.32;
        -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 8%, transparent 75%);
        mask-image: radial-gradient(ellipse at 100% 0%, #000 8%, transparent 75%);
    }

    html[data-theme="light"] .waplix-aurora-layer {
        opacity: 0.38;
    }
}

@media (prefers-reduced-motion: reduce) {
    .waplix-aurora-layer::after {
        animation: none !important;
    }
}