/**
 * meteor-shower.css
 * Meteor shower for the creative-coding.html demo frame.
 * Meteors are injected by meteor-shower.js. All selectors are scoped with
 * the .cc-meteor- prefix so they cannot leak into the rest of the site.
 */

.cc-meteor-shower {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at bottom,
        #0b1a3a 0%, #050a14 60%, #000000 100%);
}

/* Twinkling starfield */
.cc-meteor-stars {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 28% 42%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 45% 12%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 62% 32%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 78% 20%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 88% 48%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 18% 64%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1px 1px at 36% 78%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 55% 88%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 72% 70%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 92% 82%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 6% 90%, rgba(255,255,255,0.75), transparent);
    animation: cc-twinkle 4s ease-in-out infinite;
}

/* A single meteor anchor point (positioned by JS via top/left) */
.cc-meteor {
    position: absolute;
    width: 100px; height: 2px;
    opacity: 0;
}

/* The streak behind the meteor head (rotated by JS to the fall angle) */
.cc-meteor-trail {
    position: absolute; 
    right: 100%; 
    top: -1px;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right,
        rgba(150, 200, 255, 0) 0%,
        rgba(180, 215, 255, 0.45) 55%,
        rgba(255, 255, 255, 0.95) 100%);
    transform-origin: right center;
}

/* The bright glowing meteor head */
.cc-meteor-head {
    position: absolute;
    top: 0px; left: 0px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 6px 2px rgba(200, 225, 255, 0.9),
        0 0 14px 4px rgba(140, 190, 255, 0.5);
    transform: translate(-50%, -50%);
}

@keyframes cc-twinkle {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.5; }
}

@keyframes cc-fall-std {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(450px, 450px) scale(0.4); opacity: 0; }
}
@keyframes cc-fall-steep {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(300px, 550px) scale(0.4); opacity: 0; }
}
@keyframes cc-fall-shallow {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(580px, 320px) scale(0.4); opacity: 0; }
}