/* The illustration is one transparent image. Motion treats it as one island;
   atmosphere is a separate, softly feathered layer, never a rectangular tint. */
.stage-island {
  --pointer-x: 0px;
  --pointer-y: 0px;
  --mist-color: 244, 250, 255;
  --mist-opacity: .28;
  --beam-color: 255, 237, 187;
  --beam-opacity: .28;
}

.stage-island .scene { isolation: isolate; }

.stage-island .island {
  z-index: 1;
  transform-origin: 50% 58%;
  animation: uw-island-float 13s ease-in-out infinite paused;
}

.stage-island .scene-light {
  z-index: 2;
  background: radial-gradient(ellipse at 50% 48%, #17365755, transparent 73%);
}

.stage-island .island-haze,
.stage-island .island-sunbeams,
.stage-island .island-weather {
  position: absolute;
  pointer-events: none;
}

.stage-island .island-haze {
  z-index: 3;
  inset: 20% 2% 8%;
  opacity: var(--mist-opacity);
  background:
    radial-gradient(ellipse at 31% 65%, rgba(var(--mist-color), .7), transparent 37%),
    radial-gradient(ellipse at 72% 57%, rgba(var(--mist-color), .6), transparent 34%);
  mask-image: radial-gradient(ellipse at center, #000 18%, transparent 72%);
  animation: uw-island-mist 19s ease-in-out infinite paused;
}

.stage-island .island-sunbeams {
  z-index: 2;
  inset: 0;
  opacity: var(--beam-opacity);
  background:
    radial-gradient(ellipse at 29% 23%, rgba(var(--beam-color), .64), transparent 44%),
    conic-gradient(from 147deg at 21% 8%,
      transparent 0deg, rgba(var(--beam-color), .05) 8deg,
      rgba(var(--beam-color), .32) 13deg, transparent 23deg,
      transparent 30deg, rgba(var(--beam-color), .18) 38deg, transparent 48deg);
  mask-image: radial-gradient(ellipse at 44% 35%, #000 10%, transparent 68%);
  animation: uw-island-sunlight 16s ease-in-out infinite paused;
}

.stage-island .island-weather {
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse at 50% 48%, #000 38%, transparent 76%);
}

.stage-island[data-weather-ready="true"] .snow-dots { display: none; }

.stage-island[data-mood="rain"] {
  --mist-color: 217, 235, 248;
  --mist-opacity: .33;
  --beam-color: 201, 223, 242;
  --beam-opacity: .08;
}

.stage-island[data-mood="snow"] {
  --mist-opacity: .35;
  --beam-color: 229, 243, 255;
  --beam-opacity: .18;
}

.stage-island[data-mood="night"] {
  --mist-color: 161, 190, 227;
  --mist-opacity: .13;
  --beam-color: 155, 190, 239;
  --beam-opacity: .12;
}

/* Visibility, reduced-motion preference and explicit pause are managed by JS.
   No animation runs until that controller explicitly enables this stage. */
.stage-island[data-motion="on"] .island,
.stage-island[data-motion="on"] .island-haze,
.stage-island[data-motion="on"] .island-sunbeams {
  animation-play-state: running;
}

.stage-island[data-motion="on"] .island { will-change: transform; }

.stage-island .stage-header { flex-wrap: wrap; }

.stage-island .stage-actions,
.stage-island .expanded-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stage-island .stage-actions { margin-left: auto; }

.stage-island .motion-toggle {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #365d7d38;
  border-radius: 999px;
  background: #ffffff40;
  color: #234b6b;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1px;
  white-space: nowrap;
}

.stage-island .motion-toggle[hidden] { display: none; }
.stage-island .motion-toggle:hover { background: #ffffff70; }
.stage-island .motion-toggle:focus-visible {
  outline: 3px solid #226cc7;
  outline-offset: 3px;
}

.stage-island[data-mood="night"] .motion-toggle {
  color: #dfedff;
  border-color: #dcecff40;
  background: #dcecff0d;
}

.stage-island[data-mood="night"] .motion-toggle:hover { background: #dcecff20; }
.stage-island[data-mood="night"] .motion-toggle:focus-visible { outline-color: #a8d3ff; }

.stage-island.expanded-stage { height: 100%; min-height: 0; max-height: none; }
.stage-island .expanded-actions { position: absolute; z-index: 5; top: 18px; left: 18px; }

@keyframes uw-island-float {
  0%, 100% { transform: translate3d(calc(var(--pointer-x) - 2px), calc(var(--pointer-y) + 3px), 0) rotate(-.12deg); }
  50% { transform: translate3d(calc(var(--pointer-x) + 2px), calc(var(--pointer-y) - 3px), 0) rotate(.12deg); }
}

@keyframes uw-island-mist {
  0%, 100% { transform: translate3d(-7px, 3px, 0); opacity: calc(var(--mist-opacity) * .72); }
  50% { transform: translate3d(8px, -3px, 0); opacity: var(--mist-opacity); }
}

@keyframes uw-island-sunlight {
  0%, 100% { transform: translate3d(-3px, 0, 0); opacity: calc(var(--beam-opacity) * .62); }
  50% { transform: translate3d(4px, 2px, 0); opacity: var(--beam-opacity); }
}

@media (max-width: 520px) {
  .stage-island .stage-header { row-gap: 7px; }
  .stage-island .stage-actions { gap: 12px; }
  .stage-island .motion-toggle { font-size: 9px; padding: 6px 9px; }
}

@media (max-width: 420px) {
  .stage-island .stage-actions { flex-basis: 100%; justify-content: space-between; }
}

/* site.css disables all animation with !important for reduced motion. An
   explicit Play action is the sole exception, identified by data-motion=on. */
@media (prefers-reduced-motion: reduce) {
  .stage-island[data-motion="on"] .island {
    animation: uw-island-float 13s ease-in-out infinite running !important;
  }
  .stage-island[data-motion="on"] .island-haze {
    animation: uw-island-mist 19s ease-in-out infinite running !important;
  }
  .stage-island[data-motion="on"] .island-sunbeams {
    animation: uw-island-sunlight 16s ease-in-out infinite running !important;
  }
}