/* Multi-layer Stars Background (optimized)
   - Reduced heavy box-shadows
   - will-change for transforms/opacity
   - containment to isolate painting
   - prefers-reduced-motion support
*/

/* Prevent white overscroll/elastic bounce showing through.
    Set the page background at the root so macOS/iOS elastic scrolling
    shows the same dark color. Keep background fixed and non-interactive. */
html, body {
     background-color: #050516 !important;
     color: #ffffff;
     height: 100%;
     min-height: 100%;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
     background-attachment: fixed;
}

.stars, .stars2, .stars3, .stars4 {
    position: fixed;
    inset: 0; /* top/right/bottom/left = 0 — keeps layers fixed across scrolling */
    pointer-events: none; /* non-interactive background */
    z-index: 0;
    contain: paint; /* isolates paint work */
    /* Ensure layers are not affected by ancestor transforms or user interaction */
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: hidden;
    touch-action: none;
    user-select: none;
}

/* Debug helper: when the page sets data-debug="true" on the container,
   a subtle outline will appear so we can verify the layer is present. */
.stars[data-debug="true"], .stars2[data-debug="true"], .stars3[data-debug="true"], .stars4[data-debug="true"] {
    outline: 2px dashed rgba(255,255,255,0.08);
}

/* Shared star defaults */
.star, .star2, .star3, .star4 {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    transform-origin: center center;
    /* stronger base shadow for more visible twinkle across devices */
    box-shadow: 0 0 4px rgba(255,255,255,0.14);
}

/* layer-specific colors and subtle glows */
.star { background: rgba(255,255,255,1); box-shadow: 0 0 8px rgba(255,255,255,0.30); animation: twinkle 2.2s linear infinite; }
.star2 { background: rgba(100,200,255,0.99); box-shadow: 0 0 8px rgba(100,200,255,0.30); animation: pulse 3.2s linear infinite; }
.star3 { background: rgba(255,215,130,0.99); box-shadow: 0 0 8px rgba(255,215,130,0.30); animation: glow 3.6s linear infinite; }
.star4 { background: rgba(157,123,255,0.98); box-shadow: 0 0 8px rgba(157,123,255,0.26); animation: shimmer 4.0s linear infinite; }

/* Stronger, faster twinkle on large screens (desktop) */
@media (min-width: 1200px) {
    /* stronger glow and faster twinkle on very large screens */
    .star, .star2, .star3, .star4 { box-shadow: 0 0 10px rgba(255,255,255,0.24); }
    .star { box-shadow: 0 0 14px rgba(255,255,255,0.36); animation: twinkle 1.2s linear infinite; }
    .star2 { box-shadow: 0 0 14px rgba(100,200,255,0.34); animation: pulse 1.8s linear infinite; }
    .star3 { box-shadow: 0 0 14px rgba(255,215,130,0.34); animation: glow 2.0s linear infinite; }
    .star4 { box-shadow: 0 0 14px rgba(157,123,255,0.3); animation: shimmer 2.6s linear infinite; }

    /* very vivid desktop twinkle: higher floor and larger peak scale */
    @keyframes twinkle { 0%,100% { opacity:0.75; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.6);} }
    @keyframes pulse   { 0%,100% { opacity:0.75; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.45);} }
    @keyframes glow    { 0%,100% { opacity:0.78; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.8);} }
    @keyframes shimmer { 0%,100% { opacity:0.72; transform: translate3d(0,0,0) scale(1) rotate(0deg);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.6) rotate(120deg);} }
}

/* Enhanced twinkle for tablets (medium screens) */
@media (max-width: 1199px) and (min-width: 769px) {
    .star, .star2, .star3, .star4 { box-shadow: 0 0 5px rgba(255,255,255,0.14); }
    .star { box-shadow: 0 0 8px rgba(255,255,255,0.20); animation: twinkle 2.2s linear infinite; }
    .star2 { box-shadow: 0 0 8px rgba(100,200,255,0.20); animation: pulse 3.0s linear infinite; }
    .star3 { box-shadow: 0 0 8px rgba(255,215,130,0.20); animation: glow 3.4s linear infinite; }
    .star4 { box-shadow: 0 0 8px rgba(157,123,255,0.18); animation: shimmer 3.8s linear infinite; }

    @keyframes twinkle { 0%,100% { opacity:0.55; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.28);} }
    @keyframes pulse   { 0%,100% { opacity:0.55; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.22);} }
    @keyframes glow    { 0%,100% { opacity:0.57; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.38);} }
    @keyframes shimmer { 0%,100% { opacity:0.53; transform: translate3d(0,0,0) scale(1) rotate(0deg);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.30) rotate(120deg);} }
}

/* Enhanced twinkle for small phones (mobile) - toned down vs desktop but brighter than baseline */
@media (max-width: 768px) {
    .star, .star2, .star3, .star4 { box-shadow: 0 0 4px rgba(255,255,255,0.12); }
    .star { box-shadow: 0 0 6px rgba(255,255,255,0.18); animation: twinkle 2.6s linear infinite; }
    .star2 { box-shadow: 0 0 6px rgba(100,200,255,0.18); animation: pulse 3.6s linear infinite; }
    .star3 { box-shadow: 0 0 6px rgba(255,215,130,0.18); animation: glow 4.2s linear infinite; }
    .star4 { box-shadow: 0 0 6px rgba(157,123,255,0.16); animation: shimmer 4.8s linear infinite; }

    @keyframes twinkle { 0%,100% { opacity:0.52; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.22);} }
    @keyframes pulse   { 0%,100% { opacity:0.52; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.18);} }
    @keyframes glow    { 0%,100% { opacity:0.54; transform: translate3d(0,0,0) scale(1);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.3);} }
    @keyframes shimmer { 0%,100% { opacity:0.50; transform: translate3d(0,0,0) scale(1) rotate(0deg);} 50% { opacity:1; transform: translate3d(0,0,0) scale(1.24) rotate(120deg);} }
}

/* Shooting star: small, pooled, translated with transforms only */
.shooting-star {
    position: fixed;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(to left, rgba(255,255,255,0.9), rgba(255,255,255,0));
    border-radius: 50%;
    opacity: 0.9;
}

.shooting-star.active {
    animation: shootingStar 2s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

@keyframes shootingStar {
    0% { opacity: 0; transform: translate3d(0,0,0) rotate(-45deg); }
    8% { opacity: 1; }
    92% { opacity: 0.85; }
    100% { opacity: 0; transform: translate3d(-360px,360px,0) rotate(-45deg); }
}

/* Reduced motion: disable most animations */
@media (prefers-reduced-motion: reduce) {
    .star, .star2, .star3, .star4 { animation-duration: 0s !important; opacity: 0.85 !important; }
    .shooting-star { display: none !important; }
}