/* Sky Scene Styles - Lake Wequaquet */

/* Constellations */
.constellation { cursor: pointer; }
.constellation .hit-area { fill: transparent; }
.constellation .lines { stroke: rgba(80,120,200,0); stroke-width: 1.5; fill: none; transition: stroke 0.4s; }
.constellation:hover .lines { stroke: rgba(100,150,255,0.5); }
.constellation:hover .stars circle { filter: drop-shadow(0 0 8px rgba(150,180,255,0.9)); }
.star-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; fill: rgba(180,200,255,0); transition: fill 0.3s; pointer-events: none; }
.constellation:hover .star-label { fill: rgba(180,200,255,0.7); }

/* Planets */
.planet { cursor: pointer; }
.planet:hover circle { filter: drop-shadow(0 0 12px rgba(255,220,150,0.8)); }
.planet-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; fill: rgba(255,220,150,0.8); pointer-events: none; }

/* Meteors */
#meteorLayer { pointer-events: none; }
.meteor { stroke: url(#meteorGrad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 200 600; stroke-dashoffset: 600; opacity: 0; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #aaddff) drop-shadow(0 0 12px #6699ee); }
.meteor.active { animation: meteor-streak 1.8s ease-out forwards; }

/* Stars */
.star { opacity: 0.7; }
.star:nth-child(5n) { animation: star-twinkle 4s ease-in-out infinite; }
.star:nth-child(7n) { animation: star-twinkle 5s ease-in-out infinite; animation-delay: 1s; }

/* Performance Mode */
#viewSky.perf-mode { shape-rendering: optimizeSpeed; image-rendering: optimizeSpeed; }
#viewSky.perf-mode .cloud-shape { filter: none !important; opacity: 0 !important; }
#viewSky.perf-mode .star { animation: none !important; }
#viewSky.perf-mode ellipse[fill="url(#milkyWay)"] { opacity: 0; }
#viewSky.perf-mode #moonDisc { filter: none; }
#viewSky.perf-mode .sun-group circle[fill="url(#sunGlow)"] { opacity: 0; }
#viewSky.perf-mode .constellation .lines { stroke: rgba(80,120,200,0.3) !important; }

/* Cloud Groups */
.cloud-group { cursor: pointer; transition: opacity 0.3s; animation: cloudDrift 180s ease-in-out infinite; }
.cloud-group[data-instance="2"] { animation-delay: -60s; }
.cloud-group[data-instance="3"] { animation-delay: -120s; }
.cloud-group:hover { filter: brightness(1.1); }
.cloud-group:hover .cloud-shape { filter: url(#cloudBlur) brightness(1.2); }

/* Cloud Reader */
.cloud-reader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(60,100,140,0.98) 0%, rgba(40,70,110,0.98) 100%); z-index: 210; display: none; flex-direction: column; overflow: hidden; }
.cloud-reader.visible { display: flex; }
.cloud-reader-header { padding: 16px 24px; padding-right: 60px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.cloud-back { position: absolute; top: 12px; right: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 1rem; color: rgba(255,255,255,0.8); background: rgba(40,70,100,0.8); border: 1px solid rgba(255,255,255,0.3); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 220; }
.cloud-back:hover { background: rgba(60,100,150,0.9); color: #fff; border-color: rgba(255,255,255,0.5); }
.cloud-type-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.cloud-reader-content { flex: 1; overflow-y: auto; padding: 24px; }
.cloud-hero { text-align: center; margin-bottom: 30px; }
.cloud-icon { font-size: 4rem; margin-bottom: 12px; }
.cloud-name { font-family: 'Crimson Text', serif; font-size: 2rem; color: #fff; margin-bottom: 6px; }
.cloud-category { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.cloud-section { background: rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.cloud-section-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.cloud-lore { font-family: 'Crimson Text', serif; font-size: 1.15rem; color: rgba(255,255,255,0.9); line-height: 1.7; }
.cloud-lore-short { font-style: italic; color: rgba(255,255,255,0.7); margin-bottom: 16px; }
.cloud-forecast { display: flex; align-items: center; gap: 12px; }
.cloud-forecast-icon { font-size: 2rem; }
.cloud-forecast-text { font-family: 'Crimson Text', serif; font-size: 1.05rem; color: rgba(255,255,255,0.85); line-height: 1.5; }
.cloud-science { font-family: 'Crimson Text', serif; font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.6; }
.cloud-science-item { margin-bottom: 8px; }
.cloud-science-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-right: 8px; }
.cloud-cultural { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.cloud-cultural:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cloud-cultural-name { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: rgba(200,180,140,0.9); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.cloud-cultural-term { font-family: 'Crimson Text', serif; font-size: 1.1rem; color: rgba(255,255,255,0.9); margin-bottom: 8px; }
.cloud-cultural-text { font-family: 'Crimson Text', serif; font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.5; font-style: italic; }
.cloud-proverbs { font-family: 'Crimson Text', serif; font-size: 1rem; color: rgba(255,255,255,0.8); }
.cloud-proverb { margin-bottom: 10px; padding-left: 16px; border-left: 2px solid rgba(255,255,255,0.2); font-style: italic; }

/* Sun */
.sun-group { cursor: pointer; transition: filter 0.3s; }
.sun-group:hover { filter: brightness(1.15); }

/* Daytime Hint */
.sky-daytime-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: rgba(255,255,255,0.4); background: rgba(0,0,0,0.3); padding: 6px 14px; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.sky-daytime-hint.visible { opacity: 1; }