/* Clip the composited world itself, including WebKit's transformed image layers. */
.emble-orb.weather-logo,.chapter-hud-avatar.weather-logo {
  isolation:isolate;overflow:hidden;border-radius:50%;clip-path:circle(50%);
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  background:#a4cff5;box-shadow:inset 0 0 0 1px #d6e9ff80;
}
.weather-logo .logo-world { position:absolute;inset:0;display:block;overflow:hidden;border-radius:50%;clip-path:circle(50%); }
.weather-logo .logo-world>span { position:absolute;inset:0;pointer-events:none; }
.weather-logo .logo-cloudscape { inset:-10% -23%;background:url('/assets/weather-clouds.png') center/cover;animation:logo-cloud-drift 17s ease-in-out infinite alternate; }
.weather-logo .logo-sunlight { background:radial-gradient(circle at 74% 22%,#fff5c5,transparent 58%);animation:logo-sunny 30s linear infinite; }
.weather-logo .logo-overcast { background:linear-gradient(140deg,#c1cbd3dd,#4b6077cc);animation:logo-cloudy 30s linear infinite; }
.weather-logo .logo-nightfall { background:linear-gradient(150deg,#26365ee8,#0c1938eb);animation:logo-night 30s linear infinite; }
.weather-logo .logo-rain { animation:logo-rain-visible 30s linear infinite; }
.weather-logo .logo-rain>span { position:absolute;inset:-40% -20%;background:repeating-linear-gradient(105deg,transparent 0 9px,#dfeefc99 10px 11px,transparent 12px 20px);mask-image:repeating-linear-gradient(transparent 0 8px,#000 9px 14px,transparent 15px 24px);animation:logo-rainfall 1s linear infinite; }
.weather-logo .logo-starlight { background:radial-gradient(circle at 22% 30%,#fff 0 .6px,transparent 1px),radial-gradient(circle at 72% 17%,#fff 0 .7px,transparent 1px),radial-gradient(circle at 30% 74%,#d4e9ff 0 .6px,transparent 1px),radial-gradient(circle at 80% 69%,#d4e9ff 0 .5px,transparent 1px);animation:logo-night 30s linear infinite; }
.weather-logo .logo-world>.logo-gaze { inset:24% auto auto 44%;width:40%;height:48%;animation:logo-look 10s cubic-bezier(.45,0,.2,1) infinite; }
.emble-orb.weather-logo .logo-eye-art,.chapter-hud-avatar.weather-logo .logo-eye-art { display:block;width:100%!important;height:100%!important;margin:0!important;fill:#11232c;stroke:none!important;filter:none;overflow:visible; }
.weather-logo .logo-eye-art>* { transform-box:fill-box;transform-origin:center;animation-duration:30s;animation-timing-function:linear;animation-iteration-count:infinite; }
.weather-logo .logo-eye { animation-name:logo-eye; }
.weather-logo .logo-star { animation-name:logo-star; }
.weather-logo .logo-alert { fill:#ffbd97;animation-name:logo-alert; }
.weather-logo .logo-alert circle { fill:inherit; }
.weather-logo .logo-moon { fill:#fff5db;animation-name:logo-moon; }
.weather-logo .logo-glaze { border-radius:50%;box-shadow:inset 1px 1px 2px #f0f8ffbb,inset -3px -4px 7px #1b285a70,inset 0 0 0 .6px #90b3d488;background:radial-gradient(ellipse at 27% 16%,#fff6,transparent 45%); }
@keyframes logo-cloud-drift {from{transform:translate(-5%,2%) scale(1)}to{transform:translate(8%,-3%) scale(1.05)}}
@keyframes logo-look {0%,100%{transform:translate(0,0) rotate(-8deg)}23%,34%{transform:translate(-25%,-5%) rotate(4deg)}56%,69%{transform:translate(-8%,9%) rotate(0)}83%,90%{transform:translate(9%,-10%) rotate(-8deg)}}
/* Sunny → daylight → cloud → rain → night, with a quiet crossfade at each boundary. */
@keyframes logo-sunny {0%,12%,100%{opacity:1}20%,94%{opacity:0}}
@keyframes logo-cloudy {0%,33%,84%,100%{opacity:0}41%,75%{opacity:1}}
@keyframes logo-night {0%,75%,100%{opacity:0}83%,94%{opacity:1}}
@keyframes logo-rain-visible {0%,56%,82%,100%{opacity:0}62%,75%{opacity:.75}}
@keyframes logo-rainfall {to{transform:translate(-5px,24px)}}
@keyframes logo-star {0%,12%,100%{opacity:1;transform:scale(1)}20%,94%{opacity:0;transform:scale(.6) rotate(-20deg)}}
@keyframes logo-eye {0%,12%,63%,100%{opacity:0;transform:scale(.7)}20%,56%{opacity:1;transform:scale(1)}31%{transform:scale(1,.12)}32%{transform:scale(1)}}
@keyframes logo-alert {0%,56%,83%,100%{opacity:0;transform:scale(.7)}64%,75%{opacity:1;transform:scale(1)}}
@keyframes logo-moon {0%,75%,100%{opacity:0;transform:scale(.7) rotate(-15deg)}83%,94%{opacity:1;transform:scale(1)}}
.weather-logo[data-logo-active=false] *,html[data-logo-visible=false] .weather-logo *,html[data-motion=paused] .weather-logo *,[data-scene-active=false] .weather-logo * { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
  .weather-logo * { animation:none!important; }
  .weather-logo :is(.logo-overcast,.logo-nightfall,.logo-rain,.logo-starlight,.logo-star,.logo-alert,.logo-moon) { opacity:0; }
  .weather-logo .logo-eye { opacity:1; }
}
/* The feature illustrations keep a sunny star; only the inner clouds and gaze drift. */
[data-weather-theme=sunny] .weather-logo :is(.logo-sunlight,.logo-star) { animation:none!important;opacity:1;transform:none; }
[data-weather-theme=sunny] .weather-logo :is(.logo-overcast,.logo-nightfall,.logo-rain,.logo-starlight,.logo-eye,.logo-alert,.logo-moon) { display:none;animation:none!important; }
/* Fixed worlds for individual chapters; drifting clouds and gaze remain shared. */
[data-weather-theme=sunset] .weather-logo :is(.logo-sunlight,.logo-star) { animation:none!important;opacity:1;transform:none; }
[data-weather-theme=sunset] .weather-logo .logo-cloudscape { filter:sepia(.35) saturate(.8); }
[data-weather-theme=sunset] .weather-logo .logo-sunlight { background:linear-gradient(155deg,#aa98c966 5%,#f3a89199 53%,#ffb45ba6 89%); }
[data-weather-theme=sunset] .weather-logo :is(.logo-overcast,.logo-nightfall,.logo-rain,.logo-starlight,.logo-eye,.logo-alert,.logo-moon) { display:none;animation:none!important; }
[data-weather-theme=night] .weather-logo :is(.logo-nightfall,.logo-starlight,.logo-moon) { animation:none!important;opacity:1;transform:none; }
[data-weather-theme=night] .weather-logo :is(.logo-sunlight,.logo-overcast,.logo-rain,.logo-eye,.logo-star,.logo-alert) { display:none;animation:none!important; }
/* A dock icon is a stable anchor; its HUD counterpart keeps its curious gaze. */
[data-logo-motion=still] .weather-logo * { animation:none!important; }
[data-logo-motion=still] .weather-logo .logo-gaze { transform:none; }