/* ============================================================ Soft Days — Night Meteors (reusable) · assets/night-meteors.css ONE cinematic shooting star at a time, NIGHT MODE ONLY. Background layer: above stars/background, below content. Does not touch existing stars, day wave, or any background. Colours: warm white / soft lilac / pale purple / faint champagne (NO green). Tuning lives in assets/night-meteors.js (durations, gaps, profiles). ============================================================ */ .sd-night-meteors{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; display:none; contain:layout paint; } /* night only — supports either data-theme on */ :root[data-theme="night"] .sd-night-meteors{ display:block; } :root[data-theme="day"] .sd-night-meteors{ display:none; } .sd-night-meteor{ position:absolute; top:var(--m-y, 20%); left:var(--m-x, 20%); width:var(--m-len, 300px); height:var(--m-h, 2.2px); transform-origin:0 50%; transform:rotate(var(--m-ang, 32deg)) translate3d(0,0,0); opacity:0; border-radius:999px; filter:blur(.4px); background:linear-gradient(90deg, transparent 0%, var(--m-col, rgba(255,246,233,0)) 20%, var(--m-col2, rgba(233,220,246,.9)) 85%, #fff 100%); will-change:transform, opacity; animation:sd-night-meteor-cinematic var(--m-dur, 6s) cubic-bezier(.25,.6,.3,1) forwards; } .sd-night-meteor::after{ /* bright head + large soft glow (no neon) */ content:''; position:absolute; right:-2px; top:50%; width:var(--m-head, 3.6px); height:var(--m-head, 3.6px); border-radius:50%; transform:translateY(-50%); background:#fff; box-shadow:0 0 9px 2px var(--m-glow, rgba(233,220,246,.75)), 0 0 24px 7px rgba(216,193,163,.15); } /* single-shot: appear -> travel slowly -> head fades -> trail lingers then fades */ @keyframes sd-night-meteor-cinematic{ 0% { opacity:0; transform:rotate(var(--m-ang,32deg)) translate3d(0,0,0); } 8% { opacity:calc(var(--m-op, .8) * .55); } 20% { opacity:var(--m-op, .8); } 70% { opacity:var(--m-op, .8); transform:rotate(var(--m-ang,32deg)) translate3d(calc(var(--m-travel,900px) * .92),0,0); } 85% { opacity:calc(var(--m-op, .8) * .45); transform:rotate(var(--m-ang,32deg)) translate3d(var(--m-travel,900px),0,0); } 100% { opacity:0; transform:rotate(var(--m-ang,32deg)) translate3d(var(--m-travel,900px),0,0); } } @media (prefers-reduced-motion: reduce){ .sd-night-meteor{ animation:none; opacity:0; } } @media (max-width: 640px){ .sd-night-meteors{ display:none !important; } }