/* Shared effects: global backgrounds and motion helpers */

@keyframes topLocationPinDrop {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.82);
  }

  64% {
    opacity: 1;
    transform: translateY(2px) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes topLocationPinFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-3px) scale(1.015); }
  70% { transform: translateY(1px) scale(0.995); }
}

@keyframes topLocationShadowPulse {
  0%, 100% {
    opacity: 0.13;
    transform: scaleX(0.88);
  }

  45% {
    opacity: 0.2;
    transform: scaleX(1.08);
  }
}

@keyframes topLocationHighlightSweep {
  0%, 100% {
    opacity: 0.12;
    transform: translateX(0) scale(1);
  }

  42% {
    opacity: 0.28;
    transform: translateX(5px) scale(1.04);
  }
}

@keyframes topLocationCorePop {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }

  70% {
    opacity: 1;
    transform: scale(1.14);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes topLocationHaloPulse {
  0%, 100% {
    opacity: 0.12;
    transform: scale(1);
  }

  48% {
    opacity: 0.22;
    transform: scale(1.12);
  }
}

@keyframes locationPinPoint {
  0%, 100% {
    filter: drop-shadow(0 2px 2px rgba(var(--rgb-accent), 0.16));
    transform: translateY(0);
  }

  42% {
    filter: drop-shadow(0 7px 5px rgba(var(--rgb-accent), 0.22));
    transform: translateY(-4px);
  }

  68% {
    filter: drop-shadow(0 1px 1px rgba(var(--rgb-accent), 0.18));
    transform: translateY(2px);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.965);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}

@keyframes mobileSheetIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobileSheetOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

#main-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gradient-page-canvas);
}

#main-content::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: var(--gradient-page-overlay);
}

#main-content > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  @keyframes meiGreatWallReveal {
      0% {
        opacity: 0;
        filter: blur(6px) saturate(0.96) opacity(0.72);
        transform: rotate(-6deg) translateY(12px) scale(0.96);
      }

      62% {
        opacity: var(--mei-great-wall-final-opacity);
        filter: blur(1.5px) saturate(1.02) opacity(0.86);
        transform: rotate(-6deg) translateY(-2px) scale(1.01);
      }

      100% {
        opacity: var(--mei-great-wall-final-opacity);
        filter: saturate(0.96) opacity(0.88);
        transform: rotate(-6deg) translateY(0) scale(1);
      }
    }
}

@keyframes journeyIndicatorFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  48% {
    transform: translate3d(0, 8px, 0) scale(1.018);
  }
}

/* page-flow-canvas: start */
#main-content {
  background:
    radial-gradient(ellipse 56% 22% at 86% 8%, rgba(var(--rgb-accent), 0.075), transparent 72%),
    radial-gradient(ellipse 58% 30% at 13% 15%, rgba(var(--rgb-primary), 0.12), transparent 74%),
    radial-gradient(ellipse 58% 28% at 92% 39%, rgba(var(--rgb-primary), 0.065), transparent 76%),
    radial-gradient(ellipse 52% 28% at 9% 57%, rgba(var(--rgb-accent), 0.045), transparent 78%),
    radial-gradient(ellipse 56% 32% at 86% 74%, rgba(var(--rgb-primary), 0.075), transparent 76%),
    linear-gradient(180deg, var(--color-white) 0%, #f6f9fd 18%, #fbfdff 33%, #eef5fc 49%, #fbfdff 64%, #f4f8fd 82%, #edf4fb 100%);
}

#main-content::before {
  background:
    linear-gradient(180deg, rgba(var(--rgb-white), 0) 0%, rgba(var(--rgb-white), 0.32) 18%, rgba(var(--rgb-white), 0.12) 42%, rgba(var(--rgb-white), 0.28) 66%, rgba(var(--rgb-white), 0.06) 100%),
    radial-gradient(circle at 9% 24%, rgba(var(--rgb-white), 0.62) 0 34px, transparent 35px),
    radial-gradient(circle at 91% 35%, rgba(var(--rgb-accent), 0.05), transparent 23%),
    radial-gradient(circle at 12% 70%, rgba(var(--rgb-primary), 0.08), transparent 24%);
}

#main-content::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 16%, rgba(var(--rgb-primary), 0.026) 24%, transparent 34%, rgba(var(--rgb-accent), 0.018) 45%, transparent 56%, rgba(var(--rgb-primary), 0.024) 70%, transparent 82%),
    radial-gradient(ellipse 42% 12% at 50% 31%, rgba(var(--rgb-white), 0.7), transparent 74%),
    radial-gradient(ellipse 48% 11% at 50% 61%, rgba(var(--rgb-white), 0.55), transparent 76%);
  mix-blend-mode: normal;
}
/* page-flow-canvas: end */