/*
 * Falue global ambient visual layer.
 *
 * Presentation only: no page geometry, scrolling, media sizing, modal stack,
 * or gesture behavior is changed here. The existing falue-gesture-rating
 * controller remains the sole swipe/rating implementation.
 */

body.falue-global-ambient-enabled {
  --falue-ambient-canvas: #f7f7fa;
  --falue-ambient-canvas-deep: #f2f3f9;
  --falue-ambient-violet: rgba(93, 95, 147, .10);
  --falue-ambient-purple: rgba(107, 78, 255, .09);

  background-color: var(--falue-ambient-canvas);
  background-image:
    radial-gradient(circle at 12% 18%, var(--falue-ambient-violet), transparent 28%),
    radial-gradient(circle at 88% 24%, var(--falue-ambient-purple), transparent 30%),
    linear-gradient(145deg, var(--falue-ambient-canvas) 0%, #f8f7fc 52%, var(--falue-ambient-canvas-deep) 100%);
  background-position:
    -3vw 0,
    4vw 5vh,
    center;
  background-repeat: repeat-y, repeat-y, no-repeat;
  background-size: 100% 100vh, 100% 100vh, cover;
  animation: none;
}

body.falue-global-ambient-enabled[data-falue-ambient-theme="dark"],
html.falue-night-mode body.falue-global-ambient-enabled,
html.falue-rating-night-mode body.falue-global-ambient-enabled {
  --falue-ambient-canvas: #12131a;
  --falue-ambient-canvas-deep: #171925;
  --falue-ambient-violet: rgba(141, 122, 245, .14);
  --falue-ambient-purple: rgba(109, 86, 255, .12);
  background-image:
    radial-gradient(circle at 12% 18%, var(--falue-ambient-violet), transparent 29%),
    radial-gradient(circle at 88% 24%, var(--falue-ambient-purple), transparent 31%),
    linear-gradient(145deg, var(--falue-ambient-canvas) 0%, #151620 52%, var(--falue-ambient-canvas-deep) 100%);
}

/* Immersive routes and custom profile canvases retain their owned background. */
body.falue-global-ambient-enabled.falue-ambient-immersive,
body.falue-global-ambient-enabled.falue-profile-custom-background {
  background-color: var(--body-bg);
  background-image: none;
  background-position: initial;
  background-repeat: initial;
  background-size: initial;
  animation: none;
}

/* Welcome's exact smoke/sheen gradients now style the already-global swipe
   underlay. No second gesture controller is introduced. */
body.falue-global-ambient-enabled .falue-gesture-chrome[data-surface="post"][data-kind="negative"] {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .075), transparent 31%),
    linear-gradient(145deg, #34384a 0%, #242838 70%, #1f2230 100%) !important;
}

body.falue-global-ambient-enabled .falue-gesture-chrome[data-surface="post"][data-kind="rating"][data-rating-tier="red"] {
  background:
    radial-gradient(circle at 52% 36%, rgba(255, 255, 255, .12), transparent 32%),
    linear-gradient(145deg, #e85d70 0%, #b83d55 58%, #602c3b 100%) !important;
}

body.falue-global-ambient-enabled .falue-gesture-chrome[data-surface="post"][data-kind="rating"][data-rating-tier="blue"] {
  background:
    radial-gradient(circle at 52% 36%, rgba(255, 255, 255, .12), transparent 32%),
    linear-gradient(145deg, #5a96f4 0%, #416fbd 58%, #2b416e 100%) !important;
}

body.falue-global-ambient-enabled .falue-gesture-chrome[data-surface="post"][data-kind="rating"][data-rating-tier="purple"] {
  background:
    radial-gradient(circle at 52% 36%, rgba(255, 255, 255, .12), transparent 32%),
    linear-gradient(145deg, #7157d8 0%, #5d5f93 58%, #3f436b 100%) !important;
}

body.falue-global-ambient-enabled .falue-gesture-chrome[data-surface="post"][data-kind="rating"][data-rating-tier="neutral"] {
  background:
    radial-gradient(circle at 52% 36%, rgba(255, 255, 255, .09), transparent 32%),
    linear-gradient(145deg, #777b8d 0%, #686c7e 58%, #515566 100%) !important;
}

@keyframes falueAmbientBackgroundDrift {
  from {
    background-position: -3vw 0, 4vw 5vh, center;
  }
  to {
    background-position: 7vw 8vh, -8vw 13vh, center;
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body.falue-global-ambient-enabled {
    animation: falueAmbientBackgroundDrift 24s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  }
}

@media (max-width: 899.98px) {
  body.falue-global-ambient-enabled {
    background-size: 125% 100vh, 125% 100vh, cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.falue-global-ambient-enabled {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  body.falue-global-ambient-enabled {
    background: Canvas !important;
  }
}

@media print {
  body.falue-global-ambient-enabled {
    background: #fff !important;
    animation: none !important;
  }
}