.light-ambient-effects {
  contain: layout paint style;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transition: opacity 600ms ease;
  z-index: 1;
}

.scene-visual[data-background-mode="photo"] .light-ambient-effects[data-ambient-active="true"] {
  opacity: 1;
}

.ambient-breath,
.ambient-glimmer {
  inset: -4%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  will-change: opacity, transform;
}

.ambient-breath {
  mix-blend-mode: soft-light;
}

.ambient-glimmer {
  mix-blend-mode: screen;
}

.light-ambient-effects[data-scene-type="water"] .ambient-breath {
  background:
    radial-gradient(ellipse at 50% 76%, rgba(185, 218, 235, 0.56) 0 12%, rgba(141, 181, 205, 0.22) 34%, transparent 66%),
    radial-gradient(ellipse at 72% 58%, rgba(246, 212, 177, 0.32) 0 10%, transparent 48%);
}

.light-ambient-effects[data-scene-type="water"] .ambient-glimmer {
  background:
    radial-gradient(ellipse at 34% 76%, rgba(228, 242, 255, 0.55) 0 4%, rgba(184, 218, 240, 0.20) 18%, transparent 42%),
    radial-gradient(ellipse at 66% 81%, rgba(255, 228, 195, 0.42) 0 3%, rgba(240, 202, 171, 0.14) 17%, transparent 38%);
}

.light-ambient-effects[data-scene-type="mountain"] .ambient-breath {
  background:
    radial-gradient(ellipse at 42% 70%, rgba(121, 160, 135, 0.45) 0 13%, rgba(89, 125, 112, 0.18) 37%, transparent 67%),
    radial-gradient(ellipse at 62% 42%, rgba(168, 191, 220, 0.26) 0 12%, transparent 52%);
}

.light-ambient-effects[data-scene-type="mountain"] .ambient-glimmer {
  background: radial-gradient(ellipse at 56% 53%, rgba(215, 225, 238, 0.34) 0 4%, rgba(167, 193, 211, 0.12) 19%, transparent 46%);
}

.light-ambient-effects[data-scene-type="plain"] .ambient-breath {
  background:
    radial-gradient(ellipse at 48% 76%, rgba(137, 176, 127, 0.44) 0 13%, rgba(99, 145, 118, 0.18) 36%, transparent 66%),
    radial-gradient(ellipse at 68% 65%, rgba(218, 202, 156, 0.28) 0 9%, transparent 49%);
}

.light-ambient-effects[data-scene-type="plain"] .ambient-glimmer {
  background:
    radial-gradient(ellipse at 37% 78%, rgba(214, 235, 228, 0.40) 0 4%, rgba(171, 208, 205, 0.12) 18%, transparent 41%),
    radial-gradient(ellipse at 73% 72%, rgba(244, 221, 180, 0.28) 0 3%, transparent 34%);
}

.light-ambient-effects[data-scene-type="city"] .ambient-breath {
  background:
    radial-gradient(ellipse at 50% 68%, rgba(118, 142, 185, 0.36) 0 13%, rgba(82, 101, 153, 0.15) 38%, transparent 68%),
    radial-gradient(ellipse at 67% 77%, rgba(222, 173, 119, 0.26) 0 8%, transparent 45%);
}

.light-ambient-effects[data-scene-type="city"] .ambient-glimmer {
  background:
    radial-gradient(ellipse at 22% 72%, rgba(255, 218, 166, 0.55) 0 2%, rgba(239, 183, 123, 0.16) 12%, transparent 30%),
    radial-gradient(ellipse at 52% 65%, rgba(225, 233, 255, 0.45) 0 2%, rgba(170, 188, 233, 0.13) 12%, transparent 28%),
    radial-gradient(ellipse at 78% 78%, rgba(255, 204, 143, 0.50) 0 2%, rgba(226, 156, 102, 0.15) 13%, transparent 31%);
}

.sky-effects {
  contain: layout paint style;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.scene-vignette { z-index: 3; }

.sky-effect {
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  will-change: opacity, transform;
}

.bird-flight {
  height: 1px;
  opacity: 0;
  transform: translate3d(var(--effect-start-x), var(--effect-start-y), 0);
  width: 1px;
}

.bird-flight.is-running {
  animation: bird-flight var(--effect-duration) linear both;
}

.sky-bird {
  height: auto;
  left: var(--bird-offset-x);
  opacity: var(--bird-opacity);
  position: absolute;
  top: var(--bird-offset-y);
  transform: scaleX(var(--bird-facing));
  transform-origin: center;
  width: var(--bird-size);
}

.shooting-star {
  height: auto;
  opacity: 0;
  transform: translate3d(var(--effect-start-x), var(--effect-start-y), 0) rotate(var(--effect-angle));
  transform-origin: center;
  width: var(--star-length);
}

.shooting-star.is-running {
  animation: shooting-star var(--effect-duration) cubic-bezier(0.18, 0.64, 0.32, 1) both;
}

@keyframes bird-flight {
  0% {
    opacity: 0;
    transform: translate3d(var(--effect-start-x), var(--effect-start-y), 0);
  }
  8% { opacity: 1; }
  33.333% {
    transform: translate3d(var(--effect-path-one-x), var(--effect-path-one-y), 0);
  }
  66.667% {
    transform: translate3d(var(--effect-path-two-x), var(--effect-path-two-y), 0);
  }
  90% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--effect-end-x), var(--effect-end-y), 0);
  }
}

@keyframes shooting-star {
  0% {
    opacity: 0;
    transform: translate3d(var(--effect-start-x), var(--effect-start-y), 0) rotate(var(--effect-angle));
  }
  12% { opacity: 0.84; }
  68% { opacity: 0.74; }
  100% {
    opacity: 0;
    transform: translate3d(var(--effect-end-x), var(--effect-end-y), 0) rotate(var(--effect-angle));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky-effects,
  .light-ambient-effects { display: none; }
}