/* One visual grammar for the portal and its generated places.
 * Static art, horizon and beacon are in the HTML and remain visible without JS.
 * Motion is enabled only after the shared connection/motion checks in surface.js.
 */
:root {
  --void: #06090f;
  --text: #e8eefb;
  --muted: #9fb2cd;
  --accent: #4da6ff;
  --ember: #ffb14d;
  --violet: #b785ff;
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

[data-cloud-surface] { --surface-secondary: var(--accent); --surface-scroll: 0; }
.cloud-mote-field,
.cloud-horizon,
.cloud-beacon { position: absolute; pointer-events: none; user-select: none; }
.cloud-mote-field { inset: 0; z-index: 2; overflow: hidden; contain: layout paint; }
.cloud-mote {
  position: absolute;
  left: var(--mote-x);
  bottom: -3%;
  width: var(--mote-size);
  height: var(--mote-size);
  border-radius: 50%;
  background: var(--mote-color);
  opacity: 0;
  box-shadow: 0 0 9px var(--mote-color);
  transform: translate3d(0, 0, 0);
  animation: cloud-mote-rise var(--mote-duration) linear var(--mote-delay) infinite;
}
@keyframes cloud-mote-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.66; }
  82% { opacity: 0.5; }
  100% { transform: translate3d(var(--mote-drift), -105vh, 0); opacity: 0; }
}

.cloud-horizon {
  left: -8%; right: -8%; bottom: -8%; height: 36%; z-index: 1;
  background:
    radial-gradient(ellipse 22% 34% at 8% 62%, rgba(159,178,205,.35), transparent 95%),
    radial-gradient(ellipse 30% 30% at 36% 70%, rgba(232,238,251,.22), transparent 95%),
    radial-gradient(ellipse 27% 35% at 70% 58%, rgba(159,178,205,.26), transparent 95%),
    radial-gradient(ellipse 30% 35% at 97% 73%, rgba(232,238,251,.22), transparent 95%);
  mix-blend-mode: screen;
  opacity: .55;
}
.cloud-beacon {
  z-index: 1;
  display: block;
  width: var(--beacon-width, 68px);
  height: auto;
  left: var(--beacon-left, 12%);
  top: var(--beacon-top, 24%);
  opacity: var(--beacon-opacity, .8);
  filter: drop-shadow(0 0 14px rgba(77,166,255,.55));
  transform: perspective(600px) rotateY(var(--beacon-turn, 0deg)) rotateZ(var(--beacon-tilt, 0deg));
  transform-origin: center bottom;
}
[data-surface-motion] .cloud-beacon {
  animation: beacon-breathe 12s ease-in-out infinite alternate;
}
@keyframes beacon-breathe {
  from { opacity: var(--beacon-opacity, .8); filter: drop-shadow(0 0 9px rgba(77,166,255,.4)); }
  to { opacity: calc(var(--beacon-opacity, .8) * .86); filter: drop-shadow(0 0 18px rgba(77,166,255,.6)); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-mote { animation: none !important; }
  [data-surface-motion] .cloud-beacon { animation: none !important; }
}