/* Multi-shape ambient effects (looping transparent shapes) */
.global-fx-container {
  position: fixed;
  top: 8vh;
  right: 6vw;
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  mix-blend-mode: screen;
}

.fx-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(14px) saturate(120%);
  opacity: 0;
  border-radius: 28% 72% 50% 50% / 60% 40% 60% 40%;
  transition: opacity 900ms ease, transform 1200ms cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}

.fx-shape.active {
  opacity: 0.12;
  transform: translate(-50%, -50%) scale(1.06) rotate(6deg);
}

.fx-shape.low {
  opacity: 0.06;
}

.fx-shape .inner-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.9;
}

body.global-fx-reveal {
  animation: globalFxReveal 0.6s ease-out;
}

@keyframes globalFxReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .global-fx-container { width: 160px; height: 160px; top: 12vh; right: 4vw; }
  .fx-shape { width: 110px; height: 110px; filter: blur(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-shape,
  body.global-fx-reveal { transition: none !important; animation: none !important; }
}