/**
 * Ambient System
 * Global background geometry layer shared across views.
 */

.app-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* 必须裁切：子层 blur / translateY(100vh) 粒子会撑出文档幽灵高度 */
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

 .app-ambient-base {
   position: absolute;
   inset: 0;
   z-index: -10;
   background: transparent;
 }

 body[data-view="landing"] .app-ambient-base {
   background: linear-gradient(180deg, #020617 0%, #0b1220 35%, #0f172a 100%);
 }

 body.app-theme-light[data-view="landing"] .app-ambient-base {
   background: linear-gradient(180deg, #ffffff 0%, #f8fafc 35%, #f1f5f9 100%);
 }

 .app-ambient-canvas {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0.92;
   filter: saturate(1.06);
   z-index: -9;
 }

main.relative > *:not(.app-ambient) {
  position: relative;
  z-index: 100;
  opacity: 1;
}

.app-ambient-fog,
.app-ambient-lines,
.app-ambient-noise,
.app-ambient-orbits,
.app-ambient-grid,
.app-ambient-sheen,
.app-ambient-orbs,
.app-ambient-rays,
.app-ambient-stars,
.app-ambient-mesh {
  position: absolute;
  inset: 0;
}

 .app-ambient-fog {
   opacity: 0;
   z-index: 1;
 }

 body[data-view="landing"] .app-ambient-fog {
  opacity: 1;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(255, 255, 255, 0.15), transparent 60%),
    radial-gradient(760px 420px at 86% 18%, rgba(14, 165, 233, 0.18), transparent 62%),
    radial-gradient(920px 520px at 60% 82%, rgba(99, 102, 241, 0.15), transparent 66%),
    radial-gradient(860px 560px at 40% 40%, rgba(255, 255, 255, 0.12), transparent 68%);
  filter: blur(18px) saturate(1.12);
  mix-blend-mode: screen;
}

body[data-view="landing"] .app-ambient-fog::after {
  content: '';
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(700px 460px at 18% 14%, rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(820px 520px at 78% 24%, rgba(168, 85, 247, 0.12), transparent 66%),
    radial-gradient(760px 520px at 46% 86%, rgba(56, 189, 248, 0.1), transparent 70%);
  filter: blur(22px);
  opacity: 1;
  transform: translate3d(-1.2%, 0, 0);
  animation: ambientFogDrift 18s ease-in-out infinite;
}

 @keyframes ambientFogDrift {
   0%, 100% { transform: translate3d(-1.2%, 0, 0); }
   50% { transform: translate3d(1.2%, -0.6%, 0); }
 }

 .app-ambient-lines {
   opacity: 0;
   z-index: 2;
 }

 body[data-view="landing"] .app-ambient-lines {
   opacity: 0.22;
   background:
     linear-gradient(135deg, rgba(129, 140, 248, 0.22), transparent 42%),
     repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 6px),
     repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0px, rgba(255,255,255,0.028) 1px, transparent 1px, transparent 10px);
   mask-image: radial-gradient(880px 420px at 50% 0%, black, transparent 62%);
   mix-blend-mode: overlay;
 }

 body[data-view="landing"] .app-ambient-lines::after {
   content: '';
   position: absolute;
   inset: -55% -30%;
   background: linear-gradient(98deg, transparent 46%, rgba(56, 189, 248, 0.12) 50%, transparent 54%);
   transform: translateX(-10%) translateY(-6%) rotate(0deg);
   opacity: 0.32;
   animation: ambientBeam 14s ease-in-out infinite;
 }

 @keyframes ambientBeam {
   0%, 100% { transform: translateX(-12%) translateY(-6%) rotate(0deg); opacity: 0.22; }
   50% { transform: translateX(12%) translateY(-7.5%) rotate(0deg); opacity: 0.42; }
 }

.app-ambient-noise {
  opacity: 0.06;
  background-image:
    repeating-radial-gradient(circle at 10% 20%, rgba(0,0,0,0.25) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 90% 70%, rgba(0,0,0,0.18) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
  z-index: 3;
}

body.app-theme-dark .app-ambient-noise {
  opacity: 0.10;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,0.06) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 86% 72%, rgba(255,255,255,0.04) 0 1px, transparent 1px 6px);
  mix-blend-mode: soft-light;
}

.app-ambient-orbits {
  opacity: 0.0;
  z-index: 4;
}

body.app-theme-dark .app-ambient-orbits {
  opacity: 1;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(99, 102, 241, 0.14), transparent 62%),
    radial-gradient(920px 520px at 92% 18%, rgba(168, 85, 247, 0.10), transparent 64%),
    radial-gradient(760px 420px at 70% 86%, rgba(245, 158, 11, 0.06), transparent 70%);
}

.app-ambient-grid {
  opacity: 0;
  z-index: 5;
}

body.app-theme-dark .app-ambient-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotate(-8deg);
  mask-image: radial-gradient(720px 520px at 20% 12%, black, transparent 74%);
}

.app-ambient-sheen {
  opacity: 0;
  z-index: 6;
}

body.app-theme-dark .app-ambient-sheen {
  opacity: 0.55;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 26%),
    radial-gradient(900px 380px at 50% -10%, rgba(255,255,255,0.05), transparent 60%);
}

/* View tuning via body[data-view] (set in app.js) */
body[data-view="landing"] .app-ambient-orbits {
  opacity: 0.7;
  background:
    radial-gradient(1000px 600px at 16% 10%, rgba(99, 102, 241, 0.22), transparent 62%),
    radial-gradient(960px 600px at 92% 18%, rgba(236, 72, 153, 0.14), transparent 66%),
    radial-gradient(800px 500px at 60% 86%, rgba(168, 85, 247, 0.08), transparent 72%);
}

body[data-view="landing"] .app-ambient-grid {
  opacity: 0.15;
  transform: rotate(-10deg);
  mask-image: radial-gradient(780px 540px at 46% 0%, black, transparent 70%);
}

body[data-view="landing"] .app-ambient-sheen {
  opacity: 0.65;
}

body[data-view="processing"] .app-ambient-orbits {
  opacity: 1;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(16, 185, 129, 0.10), transparent 62%),
    radial-gradient(920px 520px at 92% 18%, rgba(99, 102, 241, 0.10), transparent 64%),
    radial-gradient(760px 420px at 70% 86%, rgba(245, 158, 11, 0.05), transparent 70%);
}

body[data-view="editor"] .app-ambient-grid {
  opacity: 0.20;
  mask-image: radial-gradient(820px 560px at 14% 0%, black, transparent 74%);
}

body[data-view="preview"] .app-ambient-orbits {
  opacity: 1;
  background:
    radial-gradient(1000px 520px at 50% 0%, rgba(99, 102, 241, 0.12), transparent 62%),
    radial-gradient(900px 520px at 92% 40%, rgba(14, 165, 233, 0.08), transparent 68%),
    radial-gradient(760px 420px at 20% 86%, rgba(168, 85, 247, 0.07), transparent 72%);
}

/* ========================================
   Enhanced Floating Orbs
   ======================================== */

/* 允许圆形光晕溢出，避免深色模式下因画布边界裁切 */
.app-ambient-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 7;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  animation: ambientOrbFloat var(--duration, 20s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.ambient-orb-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(168, 85, 247, 0.6));
  top: -10%;
  left: -5%;
  --duration: 25s;
}

.ambient-orb-2 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.8), rgba(168, 85, 247, 0.5));
  top: 40%;
  right: -5%;
  --duration: 30s;
  --delay: -8s;
}

.ambient-orb-3 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.8), rgba(99, 102, 241, 0.5));
  bottom: 10%;
  left: 20%;
  --duration: 22s;
  --delay: -12s;
}

.ambient-orb-4 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.75), rgba(236, 72, 153, 0.45));
  top: 15%;
  right: 20%;
  --duration: 28s;
  --delay: -16s;
}

@keyframes ambientOrbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(40px, -30px) scale(1.05);
  }
  50% {
    transform: translate(-20px, 30px) scale(0.95);
  }
  75% {
    transform: translate(30px, 20px) scale(1.02);
  }
}

/* ========================================
   Light Rays Effect
   ======================================== */

.app-ambient-rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 8;
  opacity: 0.3;
}

.app-ambient-rays::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(99, 102, 241, 0.06) 10deg,
    transparent 20deg,
    transparent 40deg,
    rgba(168, 85, 247, 0.04) 50deg,
    transparent 60deg,
    transparent 80deg,
    rgba(236, 72, 153, 0.04) 90deg,
    transparent 100deg,
    transparent 120deg,
    rgba(99, 102, 241, 0.06) 130deg,
    transparent 140deg,
    transparent 160deg,
    rgba(168, 85, 247, 0.04) 170deg,
    transparent 180deg,
    transparent 200deg,
    rgba(236, 72, 153, 0.04) 210deg,
    transparent 220deg,
    transparent 240deg,
    rgba(99, 102, 241, 0.06) 250deg,
    transparent 260deg,
    transparent 280deg,
    rgba(168, 85, 247, 0.04) 290deg,
    transparent 300deg,
    transparent 320deg,
    rgba(236, 72, 153, 0.04) 330deg,
    transparent 340deg,
    transparent 360deg
  );
  animation: raysRotate 60s linear infinite;
}

@keyframes raysRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   Star Field Effect
   ======================================== */

.app-ambient-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9;
}

.ambient-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: var(--opacity, 0.4);
  animation: starTwinkle var(--duration, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  box-shadow: 0 0 2px 0.5px rgba(255, 255, 255, 0.4);
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: var(--opacity, 0.4);
    transform: scale(1);
  }
  50% {
    opacity: calc(var(--opacity, 0.4) * 1.3);
    transform: scale(1.2);
    box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.6);
  }
}

/* ========================================
   Gradient Mesh Background
   ======================================== */

.app-ambient-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.4;
}

body[data-view="landing"] .app-ambient-mesh {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 60% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 70%, rgba(6, 182, 212, 0.08) 0%, transparent 35%);
  animation: meshPulse 15s ease-in-out infinite;
}

@keyframes meshPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* ========================================
   Enhanced View-Specific Ambient
   ======================================== */

body[data-view="landing"] .app-ambient-orbs {
  opacity: 1;
}

body[data-view="landing"] .app-ambient-rays {
  opacity: 0.4;
}

body[data-view="landing"] .app-ambient-stars {
  opacity: 0.8;
}

body[data-view="processing"] .app-ambient-orbs {
  opacity: 0.8;
}

body[data-view="processing"] .ambient-orb-1 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(99, 102, 241, 0.25));
}

body[data-view="processing"] .ambient-orb-2 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(16, 185, 129, 0.2));
}

body[data-view="editor"] .app-ambient-orbs {
  opacity: 0.28;
  mask-image: radial-gradient(ellipse 92% 88% at 50% 42%, black 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 42%, black 55%, transparent 100%);
}

body[data-view="editor"] .ambient-orb-1 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(14, 165, 233, 0.3));
}

body[data-view="preview"] .app-ambient-orbs {
  opacity: 0.9;
}

body[data-view="preview"] .ambient-orb-1 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.35));
}

body[data-view="preview"] .ambient-orb-2 {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(99, 102, 241, 0.25));
}

/* ========================================
   Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .app-ambient-canvas {
    display: none;
  }
  .app-ambient-fog::after,
  .app-ambient-lines::after,
  .app-ambient-rays::before,
  .ambient-orb,
  .ambient-star,
  .app-ambient-mesh {
    animation: none !important;
  }
  body.app-theme-dark .app-ambient-grid {
    transform: none;
  }
}