/* 1. Base Star Styles */
.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.star {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Base star glow effect */
.star::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0.3;
    border-radius: 50%;
    z-index: -1;
}

/* Star sparkle effect */
.star::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    border-radius: 50%;
    animation: sparkle var(--sparkle-duration, 4s) ease-in-out infinite;
    animation-delay: var(--sparkle-delay, 0s);
}

/* 2. Star Color Variants (Pastel Theme) */
:root {
    --star-pastel-pink: #FFB3E6;
    --star-pastel-blue: #B3E5FF;
    --star-pastel-purple: #E6B3FF;
    --star-pastel-green: #B3FFE6;
    --star-pastel-yellow: #FFE6B3;
    --star-pastel-rose: #FFB3D9;
    --star-pastel-sky: #B3D9FF;
    --star-pastel-lavender: #D9B3FF;
    --star-pastel-mint: #B3FFCC;
    --star-pastel-peach: #FFCCB3;
    --star-pastel-coral: #FFB3B3;
    --star-pastel-sage: #CCFFB3;
}

.star--pastel-pink {
    color: var(--star-pastel-pink);
    background: var(--star-pastel-pink);
    box-shadow: 0 0 10px var(--star-pastel-pink), 0 0 20px var(--star-pastel-pink);
}

.star--pastel-blue {
    color: var(--star-pastel-blue);
    background: var(--star-pastel-blue);
    box-shadow: 0 0 10px var(--star-pastel-blue), 0 0 20px var(--star-pastel-blue);
}

.star--pastel-purple {
    color: var(--star-pastel-purple);
    background: var(--star-pastel-purple);
    box-shadow: 0 0 10px var(--star-pastel-purple), 0 0 20px var(--star-pastel-purple);
}

.star--pastel-green {
    color: var(--star-pastel-green);
    background: var(--star-pastel-green);
    box-shadow: 0 0 10px var(--star-pastel-green), 0 0 20px var(--star-pastel-green);
}

.star--pastel-yellow {
    color: var(--star-pastel-yellow);
    background: var(--star-pastel-yellow);
    box-shadow: 0 0 10px var(--star-pastel-yellow), 0 0 20px var(--star-pastel-yellow);
}

.star--pastel-rose {
    color: var(--star-pastel-rose);
    background: var(--star-pastel-rose);
    box-shadow: 0 0 10px var(--star-pastel-rose), 0 0 20px var(--star-pastel-rose);
}

.star--pastel-sky {
    color: var(--star-pastel-sky);
    background: var(--star-pastel-sky);
    box-shadow: 0 0 10px var(--star-pastel-sky), 0 0 20px var(--star-pastel-sky);
}

.star--pastel-lavender {
    color: var(--star-pastel-lavender);
    background: var(--star-pastel-lavender);
    box-shadow: 0 0 10px var(--star-pastel-lavender), 0 0 20px var(--star-pastel-lavender);
}

.star--pastel-mint {
    color: var(--star-pastel-mint);
    background: var(--star-pastel-mint);
    box-shadow: 0 0 10px var(--star-pastel-mint), 0 0 20px var(--star-pastel-mint);
}

.star--pastel-peach {
    color: var(--star-pastel-peach);
    background: var(--star-pastel-peach);
    box-shadow: 0 0 10px var(--star-pastel-peach), 0 0 20px var(--star-pastel-peach);
}

.star--pastel-coral {
    color: var(--star-pastel-coral);
    background: var(--star-pastel-coral);
    box-shadow: 0 0 10px var(--star-pastel-coral), 0 0 20px var(--star-pastel-coral);
}

.star--pastel-sage {
    color: var(--star-pastel-sage);
    background: var(--star-pastel-sage);
    box-shadow: 0 0 10px var(--star-pastel-sage), 0 0 20px var(--star-pastel-sage);
}

/* 3. Star Size Variants */
.star--tiny {
    width: 2px;
    height: 2px;
}

.star--small {
    width: 3px;
    height: 3px;
}

.star--medium {
    width: 4px;
    height: 4px;
}

.star--large {
    width: 6px;
    height: 6px;
}

.star--xl {
    width: 8px;
    height: 8px;
}

/* 4. Animation Keyframes */

/* Basic star twinkle */
@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    25% {
        opacity: 0.7;
        transform: scale(1.1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    75% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Enhanced twinkle with movement */
@keyframes starTwinkleMove {
    0%, 100% {
        opacity: 0.3;
        transform: translate(0, 0) scale(0.8) rotate(0deg);
    }
    25% {
        opacity: 0.8;
        transform: translate(2px, -3px) scale(1.1) rotate(90deg);
    }
    50% {
        opacity: 1;
        transform: translate(-1px, -2px) scale(1.3) rotate(180deg);
    }
    75% {
        opacity: 0.7;
        transform: translate(3px, 1px) scale(1.1) rotate(270deg);
    }
}

/* Pulsing star */
@keyframes starPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
        box-shadow: 0 0 5px currentColor;
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
        box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* Floating star */
@keyframes starFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(90deg);
    }
    50% {
        transform: translateY(-5px) rotate(180deg);
    }
    75% {
        transform: translateY(-15px) rotate(270deg);
    }
}

/* Sparkle effect */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    }
}

/* Star breathing effect */
@keyframes starBreathe {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
        filter: brightness(1.3);
    }
}

/* Complex orbital motion */
@keyframes starOrbit {
    0% {
        transform: rotate(0deg) translateX(20px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(20px) rotate(-360deg);
    }
}

/* 5. Constellation System */
.constellation {
    position: absolute;
    pointer-events: none;
}

.constellation-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.2;
    animation: constellationPulse 8s ease-in-out infinite;
    transform-origin: left center;
}

@keyframes constellationPulse {
    0%, 100% {
        opacity: 0.1;
        transform: scaleX(0.8);
    }
    50% {
        opacity: 0.4;
        transform: scaleX(1.2);
    }
}

/* Constellation star - brighter stars in constellation */
.star--constellation {
    z-index: 2;
    animation: starPulse 4s ease-in-out infinite;
}

.star--constellation::before {
    opacity: 0.6;
    width: 300%;
    height: 300%;
}

/* 6. Interactive Star Effects */
.star--interactive {
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.star--interactive:hover {
    transform: scale(2);
    z-index: 10;
    animation-play-state: paused;
}

.star--interactive:hover::before {
    opacity: 1;
    width: 400%;
    height: 400%;
}

/* Click ripple effect */
.star--interactive::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.star--interactive.clicked::after {
    animation: starRipple 0.6s ease-out;
}

@keyframes starRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

/* 7. Shooting Stars */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, #ffffff, currentColor);
    border-radius: 50%;
    animation: shootingStar 3s linear infinite;
    opacity: 0;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, currentColor, transparent);
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 0.8;
}

.shooting-star::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 0.6;
}

@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(100px) scale(0);
    }
    10% {
        opacity: 1;
        transform: translateX(-50px) translateY(50px) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateX(100vw) translateY(-100vh) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(120vw) translateY(-120vh) scale(0);
    }
}

/* Shooting star variants */
.shooting-star--1 {
    top: 20%;
    left: -100px;
    color: var(--star-pastel-pink);
    animation-delay: 0s;
    animation-duration: 4s;
}

.shooting-star--2 {
    top: 40%;
    left: -100px;
    color: var(--star-pastel-blue);
    animation-delay: 8s;
    animation-duration: 3.5s;
}

.shooting-star--3 {
    top: 60%;
    left: -100px;
    color: var(--star-pastel-purple);
    animation-delay: 15s;
    animation-duration: 5s;
}

/* 8. Star Field Background */
.star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, var(--star-pastel-pink), transparent),
        radial-gradient(1px 1px at 40px 70px, var(--star-pastel-blue), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--star-pastel-purple), transparent),
        radial-gradient(1px 1px at 130px 80px, var(--star-pastel-green), transparent),
        radial-gradient(1px 1px at 160px 30px, var(--star-pastel-yellow), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    opacity: 0.3;
    animation: starFieldMove 100s linear infinite;
}

@keyframes starFieldMove {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100px);
    }
}

/* 9. Performance Optimizations */
.star-container-optimized {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform;
}

.star-optimized {
    contain: layout paint;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

/* GPU acceleration hints */
.star--gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 10. Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .star,
    .shooting-star,
    .constellation-line,
    .star-field {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .star::after,
    .star::before {
        animation: none !important;
    }
    
    .star--interactive:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .star {
        background: #ffffff;
        border: 1px solid #000000;
    }
    
    [data-theme="dark"] .star {
        background: #000000;
        border: 1px solid #ffffff;
    }
}

/* 11. Theme Integration */
[data-theme="dark"] .star {
    box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}

[data-theme="dark"] .star::before {
    opacity: 0.5;
}

[data-theme="dark"] .constellation-line {
    opacity: 0.3;
}

[data-theme="dark"] .star-field {
    opacity: 0.5;
}

/* Light theme adjustments */
[data-theme="light"] .star {
    box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
}

[data-theme="light"] .star::before {
    opacity: 0.3;
}

/* 12. Responsive Design */
@media (max-width: 768px) {
    .star {
        width: 3px;
        height: 3px;
    }
    
    .star--large {
        width: 5px;
        height: 5px;
    }
    
    .star--xl {
        width: 6px;
        height: 6px;
    }
    
    .shooting-star::before {
        width: 60px;
    }
    
    .shooting-star::after {
        width: 30px;
    }
}

@media (max-width: 480px) {
    .star {
        width: 2px;
        height: 2px;
    }
    
    .star--medium {
        width: 3px;
        height: 3px;
    }
    
    .star--large {
        width: 4px;
        height: 4px;
    }
    
    .star--xl {
        width: 5px;
        height: 5px;
    }
    
    .shooting-star::before {
        width: 40px;
    }
    
    .shooting-star::after {
        width: 20px;
    }
    
    .star-field {
        background-size: 150px 75px;
    }
}

/* Tablet landscape optimizations */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .star-field {
        background-size: 250px 125px;
    }
    
    .shooting-star::before {
        width: 120px;
    }
}

/* Large screen enhancements */
@media (min-width: 1200px) {
    .star--xl {
        width: 10px;
        height: 10px;
    }
    
    .shooting-star::before {
        width: 150px;
    }
    
    .shooting-star::after {
        width: 75px;
    }
}

/* Ultra-wide screen adjustments */
@media (min-width: 1600px) {
    .star-field {
        background-size: 300px 150px;
    }
}

/* Print styles - hide all animations */
@media print {
    .star,
    .shooting-star,
    .constellation-line,
    .star-field {
        display: none !important;
    }
}

/* Custom animation classes for JavaScript control */
.star--animate-twinkle {
    animation: starTwinkle var(--duration, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.star--animate-move {
    animation: starTwinkleMove var(--duration, 4s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.star--animate-pulse {
    animation: starPulse var(--duration, 2s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.star--animate-float {
    animation: starFloat var(--duration, 6s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.star--animate-breathe {
    animation: starBreathe var(--duration, 5s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.star--animate-orbit {
    animation: starOrbit var(--duration, 10s) linear infinite;
    animation-delay: var(--delay, 0s);
}

/* Utility classes for dynamic star generation */
.star-generator {
    --star-count: 50;
    --star-colors: var(--star-pastel-pink), var(--star-pastel-blue), var(--star-pastel-purple);
    --star-sizes: 2px, 3px, 4px, 6px;
    --animation-durations: 2s, 3s, 4s, 5s;
    --animation-delays: 0s, 0.5s, 1s, 1.5s, 2s;
}

/* CSS-only star distribution */
.stars-auto-distribute {
    background-image: 
        radial-gradient(2px 2px at 10% 20%, var(--star-pastel-pink), transparent),
        radial-gradient(3px 3px at 80% 30%, var(--star-pastel-blue), transparent),
        radial-gradient(2px 2px at 60% 70%, var(--star-pastel-purple), transparent),
        radial-gradient(4px 4px at 30% 80%, var(--star-pastel-green), transparent),
        radial-gradient(2px 2px at 90% 60%, var(--star-pastel-yellow), transparent),
        radial-gradient(3px 3px at 20% 40%, var(--star-pastel-rose), transparent),
        radial-gradient(2px 2px at 70% 10%, var(--star-pastel-sky), transparent),
        radial-gradient(4px 4px at 40% 50%, var(--star-pastel-lavender), transparent);
    background-size: 100% 100%;
    animation: starFieldMove 200s linear infinite;
}

/* 3D star effect for modern browsers */
@supports (transform-style: preserve-3d) {
    .stars-3d-container {
        transform-style: preserve-3d;
        perspective: 1000px;
    }
    
    .star--3d {
        transform-style: preserve-3d;
        animation: star3DFloat 8s ease-in-out infinite;
    }
    
    @keyframes star3DFloat {
        0%, 100% {
            transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
        }
        25% {
            transform: translate3d(10px, -10px, 50px) rotateX(90deg) rotateY(90deg);
        }
        50% {
            transform: translate3d(-5px, -15px, -30px) rotateX(180deg) rotateY(180deg);
        }
        75% {
            transform: translate3d(-10px, 5px, 20px) rotateX(270deg) rotateY(270deg);
        }
    }
}</click>