/* ========================================
   PREMIUM BACKGROUND EFFECTS V2.0
   Nền động chuyên nghiệp với nhiều lớp
   ======================================== */

/* Enhanced Animated Stars/Particles Background */
.stars-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.star {
    position: absolute;
    border-radius: 50%;
    animation: starTwinkle 3s ease-in-out infinite;
    will-change: opacity, transform;
}

.star.small {
    width: 2px;
    height: 2px;
    background: rgba(0, 212, 255, 0.9);
    box-shadow: 0 0 8px rgba(0, 212, 255, 1),
        0 0 15px rgba(0, 212, 255, 0.5);
}

.star.medium {
    width: 3px;
    height: 3px;
    background: rgba(0, 102, 255, 1);
    box-shadow: 0 0 10px rgba(0, 102, 255, 1),
        0 0 20px rgba(0, 102, 255, 0.6);
}

.star.large {
    width: 4px;
    height: 4px;
    background: rgba(147, 51, 234, 0.95);
    box-shadow: 0 0 12px rgba(147, 51, 234, 1),
        0 0 25px rgba(147, 51, 234, 0.7);
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1) translateY(0px);
    }

    25% {
        opacity: 0.7;
        transform: scale(1.4) translateY(-5px);
    }

    50% {
        opacity: 1;
        transform: scale(1.8) translateY(-10px);
    }

    75% {
        opacity: 0.7;
        transform: scale(1.4) translateY(-5px);
    }
}

/* Enhanced Gradient Orb Animations - More Dynamic */
.gradient-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.7) 0%, rgba(0, 212, 255, 0.4) 40%, transparent 70%);
    top: -20%;
    left: -20%;
    animation: orbFloat1 20s ease-in-out infinite;
}

.orb-2 {
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.6) 0%, rgba(147, 51, 234, 0.4) 40%, transparent 70%);
    bottom: -20%;
    right: -20%;
    animation: orbFloat2 25s ease-in-out infinite;
}

.orb-3 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.5) 0%, rgba(255, 0, 136, 0.3) 40%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbFloat3 30s ease-in-out infinite;
}

.orb-4 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.4) 0%, rgba(0, 212, 255, 0.3) 40%, transparent 70%);
    top: 20%;
    right: 10%;
    animation: orbFloat4 28s ease-in-out infinite;
}

.orb-5 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 0, 136, 0.35) 0%, rgba(147, 51, 234, 0.25) 40%, transparent 70%);
    bottom: 30%;
    left: 20%;
    animation: orbFloat5 33s ease-in-out infinite;
}

@keyframes orbFloat1 {

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

    20% {
        transform: translate(80px, -80px) scale(1.2) rotate(72deg);
        opacity: 0.6;
    }

    40% {
        transform: translate(-60px, 60px) scale(0.9) rotate(144deg);
        opacity: 0.45;
    }

    60% {
        transform: translate(60px, 80px) scale(1.1) rotate(216deg);
        opacity: 0.55;
    }

    80% {
        transform: translate(-80px, -60px) scale(0.95) rotate(288deg);
        opacity: 0.5;
    }
}

@keyframes orbFloat2 {

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

    25% {
        transform: translate(-70px, 70px) scale(1.25) rotate(90deg);
        opacity: 0.6;
    }

    50% {
        transform: translate(70px, -70px) scale(0.85) rotate(180deg);
        opacity: 0.45;
    }

    75% {
        transform: translate(-60px, -80px) scale(1.15) rotate(270deg);
        opacity: 0.55;
    }
}

@keyframes orbFloat3 {

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

    25% {
        transform: translate(-50%, -50%) scale(1.3) rotate(120deg);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(0.8) rotate(240deg);
        opacity: 0.4;
    }

    75% {
        transform: translate(-50%, -50%) scale(1.15) rotate(360deg);
        opacity: 0.55;
    }
}

@keyframes orbFloat4 {

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

    33% {
        transform: translate(-50px, -50px) scale(1.15);
        opacity: 0.6;
    }

    66% {
        transform: translate(50px, 50px) scale(0.9);
        opacity: 0.45;
    }
}

@keyframes orbFloat5 {

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

    30% {
        transform: translate(60px, -60px) scale(1.2) rotate(108deg);
        opacity: 0.55;
    }

    60% {
        transform: translate(-60px, 60px) scale(0.85) rotate(216deg);
        opacity: 0.45;
    }

    90% {
        transform: translate(50px, 50px) scale(1.1) rotate(324deg);
        opacity: 0.5;
    }
}

/* Scanline Effect (Optional) */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 50%,
            rgba(0, 102, 255, 0.02) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.3;
}

/* Grid Lines (Enhanced - Cyberpunk Style) */
.grid-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.05) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.05) 2px, transparent 2px),
        linear-gradient(rgba(0, 102, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 255, 0.03) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.8;
    }
}

/* Noise Texture Overlay - Enhanced */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="300" height="300" filter="url(%23noise)" opacity="0.08"/></svg>');
    pointer-events: none;
    z-index: 2;
    opacity: 0.5;
    animation: noiseMove 0.5s steps(10) infinite;
}

@keyframes noiseMove {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -5%);
    }

    20% {
        transform: translate(-10%, 5%);
    }

    30% {
        transform: translate(5%, -10%);
    }

    40% {
        transform: translate(-5%, 10%);
    }

    50% {
        transform: translate(-10%, 0%);
    }

    60% {
        transform: translate(10%, 0%);
    }

    70% {
        transform: translate(0%, 10%);
    }

    80% {
        transform: translate(0%, -10%);
    }

    90% {
        transform: translate(5%, 5%);
    }

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

/* Spotlight Effect - Enhanced */
.spotlight {
    position: fixed;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 212, 255, 0.12) 0%,
            rgba(0, 102, 255, 0.06) 20%,
            transparent 40%);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease;
}

body:hover .spotlight {
    opacity: 1;
}

/* Vignette Effect - Enhanced */
.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            rgba(10, 25, 47, 0.3) 70%,
            rgba(10, 25, 47, 0.6) 100%);
    pointer-events: none;
    z-index: 4;
}

/* Floating Particles/Dust Effect */
.floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    animation: particleFloat 15s linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-10vh) translateX(100px) scale(1);
        opacity: 0;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .orb-1,
    .orb-2,
    .orb-3,
    .orb-4,
    .orb-5 {
        filter: blur(80px);
        opacity: 0.3;
    }

    .grid-lines {
        opacity: 0.4;
        background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    }

    .noise-overlay {
        opacity: 0.3;
    }

    .spotlight {
        display: none;
    }

    .floating-particles {
        display: none;
    }

    .star {
        animation-duration: 2s !important;
    }
}

/* Performance Optimization */
@media (prefers-reduced-motion: reduce) {

    .star,
    .gradient-orb,
    .grid-lines,
    .noise-overlay,
    .floating-particles {
        animation: none !important;
    }

    .spotlight {
        display: none;
    }
}

}

/* ========================================
   NEW MYSTICAL COSMIC EFFECTS
   ======================================== */

/* Cosmic Nebula Clouds */
.nebula-cloud {
    position: fixed;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.4;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.nebula-1 {
    width: 900px;
    height: 900px;
    background: radial-gradient(circle,
            rgba(147, 51, 234, 0.6) 0%,
            rgba(168, 85, 247, 0.4) 30%,
            rgba(236, 72, 153, 0.3) 60%,
            transparent 80%);
    top: -30%;
    right: -20%;
    animation: nebulaFloat1 90s ease-in-out infinite;
    z-index: 8;
}

.nebula-2 {
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle,
            rgba(6, 182, 212, 0.5) 0%,
            rgba(14, 165, 233, 0.4) 30%,
            rgba(147, 51, 234, 0.3) 60%,
            transparent 80%);
    bottom: -30%;
    left: -25%;
    animation: nebulaFloat2 100s ease-in-out infinite;
    z-index: 8;
}

.nebula-3 {
    width: 850px;
    height: 850px;
    background: radial-gradient(circle,
            rgba(236, 72, 153, 0.45) 0%,
            rgba(219, 39, 119, 0.35) 30%,
            rgba(147, 51, 234, 0.25) 60%,
            transparent 80%);
    top: 40%;
    left: 30%;
    animation: nebulaFloat3 85s ease-in-out infinite;
    z-index: 8;
}

.nebula-4 {
    width: 950px;
    height: 950px;
    background: radial-gradient(circle,
            rgba(16, 185, 129, 0.35) 0%,
            rgba(6, 182, 212, 0.3) 30%,
            rgba(14, 165, 233, 0.2) 60%,
            transparent 80%);
    top: 60%;
    right: 20%;
    animation: nebulaFloat4 95s ease-in-out infinite;
    z-index: 8;
}

@keyframes nebulaFloat1 {

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

    33% {
        transform: translate(-100px, 80px) rotate(120deg) scale(1.3);
        opacity: 0.5;
    }

    66% {
        transform: translate(80px, -60px) rotate(240deg) scale(0.9);
        opacity: 0.35;
    }
}

@keyframes nebulaFloat2 {

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

    40% {
        transform: translate(120px, -90px) rotate(144deg) scale(1.2);
        opacity: 0.48;
    }

    80% {
        transform: translate(-90px, 100px) rotate(288deg) scale(0.85);
        opacity: 0.38;
    }
}

@keyframes nebulaFloat3 {

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

    50% {
        transform: translate(-70px, -70px) rotate(180deg) scale(1.25);
        opacity: 0.5;
    }
}

@keyframes nebulaFloat4 {

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

    25% {
        transform: translate(-80px, 60px) rotate(90deg) scale(1.15);
        opacity: 0.42;
    }

    75% {
        transform: translate(90px, -80px) rotate(270deg) scale(0.92);
        opacity: 0.38;
    }
}

/* Aurora Wave Effects */
.aurora-wave {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: screen;
    z-index: 5;
}

.aurora-1 {
    background: linear-gradient(45deg,
            transparent 0%,
            rgba(6, 182, 212, 0.3) 20%,
            rgba(147, 51, 234, 0.35) 50%,
            rgba(236, 72, 153, 0.3) 80%,
            transparent 100%);
    animation: auroraFlow1 25s ease-in-out infinite;
}

.aurora-2 {
    background: linear-gradient(-45deg,
            transparent 0%,
            rgba(16, 185, 129, 0.25) 25%,
            rgba(6, 182, 212, 0.3) 50%,
            rgba(147, 51, 234, 0.25) 75%,
            transparent 100%);
    animation: auroraFlow2 20s ease-in-out infinite;
}

.aurora-3 {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(236, 72, 153, 0.28) 30%,
            rgba(168, 85, 247, 0.32) 60%,
            transparent 100%);
    animation: auroraFlow3 30s ease-in-out infinite;
}

@keyframes auroraFlow1 {

    0%,
    100% {
        transform: translateY(0%) scaleX(1);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-15%) scaleX(1.3);
        opacity: 0.75;
    }
}

@keyframes auroraFlow2 {

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

    50% {
        transform: translateX(10%) scaleY(1.4);
        opacity: 0.7;
    }
}

@keyframes auroraFlow3 {

    0%,
    100% {
        transform: translate(0%, 0%) rotate(0deg);
        opacity: 0.6;
    }

    33% {
        transform: translate(-5%, 5%) rotate(3deg);
        opacity: 0.65;
    }

    66% {
        transform: translate(5%, -5%) rotate(-3deg);
        opacity: 0.7;
    }
}

/* Shooting Stars */
.shooting-star {
    position: fixed;
    width: 3px;
    height: 3px;
    background: linear-gradient(90deg, #fff, transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 1),
            rgba(0, 212, 255, 0.8),
            rgba(147, 51, 234, 0.5),
            transparent);
    transform: translateX(3px);
}

.shooting-star::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(0, 212, 255, 0.6) 50%,
            transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
        0 0 25px rgba(0, 212, 255, 0.6);
}

@keyframes shootingStar {
    0% {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        transform: translate(-1000px, 1000px) rotate(-45deg);
        opacity: 0;
    }
}

/* Ethereal Light Beams */
.light-beam {
    position: fixed;
    width: 2px;
    height: 100%;
    pointer-events: none;
    opacity: 0.15;
    z-index: 10;
    filter: blur(2px);
}

.beam-1 {
    left: 10%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(6, 182, 212, 0.4) 30%,
            rgba(147, 51, 234, 0.3) 70%,
            transparent 100%);
    animation: beamPulse1 40s ease-in-out infinite;
}

.beam-2 {
    left: 30%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(236, 72, 153, 0.35) 25%,
            rgba(168, 85, 247, 0.3) 75%,
            transparent 100%);
    animation: beamPulse2 45s ease-in-out infinite;
}

.beam-3 {
    right: 25%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(16, 185, 129, 0.3) 35%,
            rgba(6, 182, 212, 0.25) 65%,
            transparent 100%);
    animation: beamPulse3 50s ease-in-out infinite;
}

.beam-4 {
    right: 8%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(147, 51, 234, 0.35) 30%,
            rgba(236, 72, 153, 0.3) 70%,
            transparent 100%);
    animation: beamPulse4 48s ease-in-out infinite;
}

@keyframes beamPulse1 {

    0%,
    100% {
        opacity: 0.15;
        transform: scaleY(1) translateY(0%);
    }

    50% {
        opacity: 0.25;
        transform: scaleY(1.3) translateY(-5%);
    }
}

@keyframes beamPulse2 {

    0%,
    100% {
        opacity: 0.15;
        transform: scaleY(1) translateY(0%);
    }

    50% {
        opacity: 0.22;
        transform: scaleY(1.4) translateY(5%);
    }
}

@keyframes beamPulse3 {

    0%,
    100% {
        opacity: 0.15;
        transform: scaleY(1) translateY(0%);
    }

    50% {
        opacity: 0.2;
        transform: scaleY(1.2) translateY(-3%);
    }
}

@keyframes beamPulse4 {

    0%,
    100% {
        opacity: 0.15;
        transform: scaleY(1) translateY(0%);
    }

    50% {
        opacity: 0.23;
        transform: scaleY(1.35) translateY(4%);
    }
}

/* Cosmic Dust Clouds */
.cosmic-dust {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    opacity: 0.25;
    mix-blend-mode: screen;
    z-index: 6;
}

.dust-1 {
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse,
            rgba(147, 51, 234, 0.4) 0%,
            rgba(168, 85, 247, 0.2) 50%,
            transparent 100%);
    top: 15%;
    left: 5%;
    animation: dustDrift1 120s ease-in-out infinite;
}

.dust-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle,
            rgba(6, 182, 212, 0.35) 0%,
            rgba(14, 165, 233, 0.2) 50%,
            transparent 100%);
    bottom: 20%;
    right: 10%;
    animation: dustDrift2 100s ease-in-out infinite;
}

.dust-3 {
    width: 550px;
    height: 450px;
    background: radial-gradient(ellipse,
            rgba(236, 72, 153, 0.3) 0%,
            rgba(219, 39, 119, 0.15) 50%,
            transparent 100%);
    top: 50%;
    right: 30%;
    animation: dustDrift3 110s ease-in-out infinite;
}

@keyframes dustDrift1 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.25;
    }

    50% {
        transform: translate(-50px, 30px) rotate(180deg);
        opacity: 0.35;
    }
}

@keyframes dustDrift2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.25;
    }

    50% {
        transform: translate(40px, -40px) rotate(-180deg);
        opacity: 0.32;
    }
}

@keyframes dustDrift3 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.25;
    }

    50% {
        transform: translate(-30px, -30px) rotate(180deg);
        opacity: 0.3;
    }
}

/* Enhanced star colors for cosmic theme */
.star.cosmic-cyan {
    background: rgba(6, 182, 212, 0.95);
    box-shadow: 0 0 10px rgba(6, 182, 212, 1),
        0 0 20px rgba(6, 182, 212, 0.6);
}

.star.cosmic-purple {
    background: rgba(168, 85, 247, 0.95);
    box-shadow: 0 0 10px rgba(168, 85, 247, 1),
        0 0 20px rgba(168, 85, 247, 0.6);
}

.star.cosmic-pink {
    background: rgba(236, 72, 153, 0.95);
    box-shadow: 0 0 10px rgba(236, 72, 153, 1),
        0 0 20px rgba(236, 72, 153, 0.6);
}

/* Mobile Optimization */
@media (max-width: 768px) {

    .nebula-cloud,
    .aurora-wave,
    .light-beam,
    .cosmic-dust {
        opacity: 0.2;
    }

    .shooting-star {
        display: none;
    }

    .nebula-1,
    .nebula-2,
    .nebula-3,
    .nebula-4 {
        filter: blur(100px);
    }
}

/* Performance Optimization */
@media (prefers-reduced-motion: reduce) {

    .nebula-cloud,
    .aurora-wave,
    .shooting-star,
    .light-beam,
    .cosmic-dust {
        animation: none !important;
    }
}