/* Scenery-only magic. All three planes belong inside #scene-camera. */
#journey-viewport {
  --journey-magic: 0;
  --magic-bridge-bloom: .55;
  --magic-garden-bloom: .55;
}
#journey-viewport[data-stop="glade"] { --journey-magic: 0; }
#journey-viewport[data-stop="gate"] { --journey-magic: .08; }
#journey-viewport[data-stop="trail"] { --journey-magic: .2; }
#journey-viewport[data-stop="fork"] { --journey-magic: .45; }
#journey-viewport[data-stop="bridge"] {
  --journey-magic: .75;
  --magic-bridge-bloom: 1;
  --magic-garden-bloom: .35;
}
#journey-viewport[data-stop="garden"] {
  --journey-magic: 1;
  --magic-bridge-bloom: .35;
  --magic-garden-bloom: 1;
}

#scene-camera .journey-magic-plane,
#scene-camera .journey-magic-plane * {
  pointer-events: none !important;
  user-select: none;
}
.journey-magic-plane {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  /* Keep opacity/filter off the plane so its 3D depth is not flattened. */
}
.journey-magic-far { transform: translateZ(-420px) scale(1.38); }
.journey-magic-mid { transform: translateZ(-300px) scale(1.27); }
.journey-magic-near { transform: translateZ(-160px) scale(1.15); }

.journey-magic-light {
  position: absolute;
  left: var(--magic-x);
  top: var(--magic-y);
  width: var(--magic-size, 4px);
  height: var(--magic-size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #fffce0 0 16%, var(--magic-colour, #9aece6) 36% 52%, transparent 74%);
  box-shadow: 0 0 7px 2px var(--magic-colour, #9aece6), 0 0 1px #43234c;
  opacity: calc(var(--journey-magic) * var(--magic-strength, .76));
  transition: opacity 2.4s ease;
  animation: journey-magic-drift var(--magic-duration, 19s) ease-in-out var(--magic-delay, 0s) infinite alternate;
  animation-play-state: paused;
}
#journey-viewport:is([data-stop="gate"], [data-stop="trail"], [data-stop="fork"], [data-stop="bridge"], [data-stop="garden"]) .journey-magic-light {
  animation-play-state: running;
}

/* Soft colour stays among plant beds, never a screen-sized tint or star field. */
.journey-magic-plant {
  position: absolute;
  left: var(--magic-x);
  top: var(--magic-y);
  width: var(--magic-bed-width, 140px);
  height: var(--magic-bed-height, 52px);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 65%, #adf3e979, #55d1cc36 36%, #a6e9cc12 57%, transparent 76%);
  opacity: calc(var(--journey-magic) * var(--magic-bloom, .55) * .52);
  transform: rotate(var(--magic-bed-turn, -8deg));
  transition: opacity 2.4s ease;
}
.journey-magic-plant--bridge { --magic-bloom: var(--magic-bridge-bloom); }
.journey-magic-plant--garden {
  --magic-bloom: var(--magic-garden-bloom);
  background: radial-gradient(ellipse at 50% 65%, #ffed9d80, #97e5ce3d 37%, #bcecd515 58%, transparent 76%);
}
.journey-magic-plant--verge {
  --magic-bloom: .4;
  background: radial-gradient(ellipse at 50% 70%, #b6f0de73, #74d2d02b 39%, transparent 74%);
}

/* The flowers themselves gather light deeper in the shared world. */
#scene-camera .discovery-thicket::after {
  content: "";
  position: absolute;
  inset: 20% -18% -12%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 65%, #8df9d85c, #72ccde29 42%, transparent 70%);
  opacity: calc(var(--journey-magic) * .85);
  filter: blur(9px);
  pointer-events: none !important;
  transition: opacity 1.45s ease;
}
#scene-camera .thicket-branch > i {
  filter: brightness(calc(1 + var(--journey-magic) * .14))
    drop-shadow(0 0 calc(var(--journey-magic) * 8px) #a8ffe0);
}
#scene-camera .thicket-gnome::after {
  background: radial-gradient(ellipse at 50% 65%, #a4fce789, #c1f49e44 42%, transparent 72%);
}
#journey-app[data-motion="still"] .discovery-thicket::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .discovery-thicket::after { transition: none !important; } }

/* Only position drifts; luminosity stays steady with no flashing or pulsing. */
@keyframes journey-magic-drift {
  from { transform: translate3d(-2px, 2px, 0); }
  to { transform: translate3d(4px, -7px, 3px); }
}

@media (max-width: 600px) {
  .journey-magic-light--optional { display: none; }
  .journey-magic-light { --magic-strength: .58; }
  .journey-magic-plant {
    width: min(var(--magic-bed-width, 140px), 95px);
    height: min(var(--magic-bed-height, 52px), 37px);
    opacity: calc(var(--journey-magic) * var(--magic-bloom, .55) * .34);
  }
}

/* Keep the location-based static glow while removing decorative movement. */
#journey-app[data-motion="still"] .journey-magic-light {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
#journey-app[data-motion="still"] .journey-magic-plant { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .journey-magic-light {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .journey-magic-plant { transition: none !important; }
}