/* ==========================================================================
   الأجواء: خلفية حيّة خلف كل شيء
   طبقة واحدة ثابتة، لا تلتقط النقر، ولا تؤثر على التمرير.
   ========================================================================== */

.amb {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.amb i { position: absolute; display: block; }

/* ---------------- حركات مشتركة ---------------- */
@keyframes ambDrift  { 0%,100% { transform: translate(0,0) scale(1); }   50% { transform: translate(4%,-5%) scale(1.14); } }
@keyframes ambDrift2 { 0%,100% { transform: translate(0,0) scale(1); }   50% { transform: translate(-5%,4%) scale(1.09); } }
@keyframes ambDrift3 { 0%,100% { transform: translate(0,0) scale(1); }   50% { transform: translate(3%,6%) scale(1.06); } }
@keyframes ambRise   { 0%   { transform: translateY(8vh) scale(.7); opacity: 0; }
                       12%  { opacity: .55; }
                       85%  { opacity: .35; }
                       100% { transform: translateY(-104vh) scale(1.1); opacity: 0; } }
@keyframes ambPulse  { 0%,100% { opacity: .22; } 50% { opacity: .6; } }
@keyframes ambScan   { 0% { transform: translateY(-30vh); } 100% { transform: translateY(110vh); } }
@keyframes ambTwinkle{ 0%,100% { opacity: .18; } 50% { opacity: .5; } }
@keyframes ambSweep  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3%); } }

/* ========================================================================
   ١) شفق: هالات لونية تتنفّس
   ======================================================================== */
[data-amb="aurora"] .amb i:nth-child(1) {
  width: 58vw; height: 58vw; inset-inline-start: -14vw; top: -18vh; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 26%, transparent), transparent 68%);
  filter: blur(46px);
  animation: ambDrift 26s ease-in-out infinite;
}
[data-amb="aurora"] .amb i:nth-child(2) {
  width: 46vw; height: 46vw; inset-inline-end: -11vw; bottom: -16vh; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 66%);
  filter: blur(54px);
  animation: ambDrift2 33s ease-in-out infinite;
}
[data-amb="aurora"] .amb i:nth-child(3) {
  width: 38vw; height: 38vw; inset-inline-start: 38%; top: 34%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--alt) 18%, transparent), transparent 70%);
  filter: blur(60px);
  animation: ambDrift3 41s ease-in-out infinite;
}
[data-theme="dark"][data-amb="aurora"] .amb i:nth-child(1) { opacity: .62; }
[data-theme="dark"][data-amb="aurora"] .amb i:nth-child(2) { opacity: .5; }
[data-theme="dark"][data-amb="aurora"] .amb i:nth-child(3) { opacity: .45; }

/* ========================================================================
   ٢) الملعب: خطوط عشب وضوء كشّاف
   ======================================================================== */
[data-amb="turf"] .amb {
  background-image: repeating-linear-gradient(
    102deg,
    color-mix(in srgb, var(--brand) 5%, transparent) 0 42px,
    transparent 42px 84px);
  mask-image: linear-gradient(to top, #000 4%, transparent 62%);
  -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 62%);
}
[data-amb="turf"] .amb i:nth-child(1) {
  width: 78vw; height: 42vh; inset-inline-start: 11vw; top: -22vh; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  filter: blur(58px);
  animation: ambSweep 30s ease-in-out infinite;
}
[data-amb="turf"] .amb i:nth-child(2) {
  width: 52vw; height: 52vw; inset-inline-end: -16vw; bottom: -22vh; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 24%, transparent), transparent 66%);
  filter: blur(50px);
  animation: ambDrift2 29s ease-in-out infinite;
}
[data-amb="turf"] .amb i:nth-child(3) {
  inset-inline: 0; bottom: 0; height: 36vh;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand) 12%, transparent), transparent);
}

/* ========================================================================
   ٣) فقاعات: كرات تطفو لأعلى
   ======================================================================== */
[data-amb="bubbles"] .amb i {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
              color-mix(in srgb, var(--brand) 38%, transparent),
              color-mix(in srgb, var(--brand) 10%, transparent) 62%, transparent 72%);
  bottom: -14vh;
  animation: ambRise linear infinite;
}
[data-amb="bubbles"] .amb i:nth-child(1) { width: 92px;  height: 92px;  inset-inline-start: 8%;  animation-duration: 34s; animation-delay: 0s; }
[data-amb="bubbles"] .amb i:nth-child(2) { width: 46px;  height: 46px;  inset-inline-start: 24%; animation-duration: 27s; animation-delay: 5s; }
[data-amb="bubbles"] .amb i:nth-child(3) { width: 130px; height: 130px; inset-inline-start: 42%; animation-duration: 44s; animation-delay: 11s;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
[data-amb="bubbles"] .amb i:nth-child(4) { width: 62px;  height: 62px;  inset-inline-start: 61%; animation-duration: 31s; animation-delay: 3s; }
[data-amb="bubbles"] .amb i:nth-child(5) { width: 104px; height: 104px; inset-inline-start: 77%; animation-duration: 39s; animation-delay: 17s;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--alt) 30%, transparent), transparent 70%); }
[data-amb="bubbles"] .amb i:nth-child(6) { width: 34px;  height: 34px;  inset-inline-start: 90%; animation-duration: 24s; animation-delay: 8s; }
[data-amb="bubbles"] .amb i:nth-child(7) { width: 74px;  height: 74px;  inset-inline-start: 52%; animation-duration: 37s; animation-delay: 22s; }

/* ========================================================================
   ٤) ليل: نجوم ونبض ضوء
   ======================================================================== */
[data-amb="night"] .amb {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, color-mix(in srgb, var(--ink) 34%, transparent), transparent),
    radial-gradient(1.4px 1.4px at 28% 62%, color-mix(in srgb, var(--ink) 28%, transparent), transparent),
    radial-gradient(1.8px 1.8px at 44% 24%, color-mix(in srgb, var(--ink) 32%, transparent), transparent),
    radial-gradient(1.3px 1.3px at 61% 71%, color-mix(in srgb, var(--ink) 26%, transparent), transparent),
    radial-gradient(1.7px 1.7px at 73% 33%, color-mix(in srgb, var(--ink) 30%, transparent), transparent),
    radial-gradient(1.4px 1.4px at 86% 58%, color-mix(in srgb, var(--ink) 28%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 94% 14%, color-mix(in srgb, var(--ink) 26%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 19% 84%, color-mix(in srgb, var(--ink) 24%, transparent), transparent),
    radial-gradient(1.6px 1.6px at 55% 91%, color-mix(in srgb, var(--ink) 28%, transparent), transparent);
  animation: ambTwinkle 9s ease-in-out infinite;
}
[data-amb="night"] .amb i:nth-child(1) {
  width: 64vw; height: 64vw; inset-inline-start: -18vw; top: -24vh; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 26%, transparent), transparent 62%);
  filter: blur(64px);
  animation: ambPulse 11s ease-in-out infinite;
}
[data-amb="night"] .amb i:nth-child(2) {
  width: 44vw; height: 44vw; inset-inline-end: -14vw; bottom: -18vh; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--alt) 22%, transparent), transparent 64%);
  filter: blur(58px);
  animation: ambPulse 15s ease-in-out infinite 3s;
}
[data-amb="night"] .amb i:nth-child(3),
[data-amb="night"] .amb i:nth-child(4) {
  width: 1.5px; height: 24vh; top: 0;
  background: linear-gradient(to bottom, transparent,
              color-mix(in srgb, var(--accent) 42%, transparent), transparent);
  animation: ambScan 17s linear infinite;
}
[data-amb="night"] .amb i:nth-child(3) { inset-inline-start: 27%; }
[data-amb="night"] .amb i:nth-child(4) { inset-inline-start: 71%; animation-duration: 23s; animation-delay: 6s; }
[data-amb="night"] .amb i:nth-child(5) {
  inset: 0;
  background: radial-gradient(90% 60% at 50% 100%,
              color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%);
}

/* ========================================================================
   ٥) شبكة
   ======================================================================== */
[data-amb="grid"] .amb {
  background-image:
    linear-gradient(to right,  color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(130% 85% at 50% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(130% 85% at 50% 0%, #000 18%, transparent 76%);
}
[data-amb="grid"] .amb i:nth-child(1) {
  width: 54vw; height: 40vh; inset-inline-end: -10vw; top: -14vh; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%);
  filter: blur(54px);
  animation: ambDrift 34s ease-in-out infinite;
}

/* ========================================================================
   ٦) ورق
   ======================================================================== */
[data-amb="paper"] .amb {
  background-image: linear-gradient(to bottom,
                    color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 100% 36px;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  opacity: .6;
}
[data-amb="paper"] .amb i:nth-child(1) { display: none; }

/* ========================================================================
   إيقاف الحركة
   ======================================================================== */
[data-motion="off"] .amb i,
[data-motion="off"] .amb { animation: none !important; }

[data-motion="off"] .card,
[data-motion="off"] .stat,
[data-motion="off"] .idea,
[data-motion="off"] .task,
[data-motion="off"] .alert,
[data-motion="off"] .cell,
[data-motion="off"] .char,
[data-motion="off"] .content,
[data-motion="off"] .msg,
[data-motion="off"] .bar-fill,
[data-motion="off"] .ring-fg,
[data-motion="off"] .pulse-bar,
[data-motion="off"] .focus-card { animation: none !important; }

[data-motion="off"] .card:hover,
[data-motion="off"] a.stat:hover,
[data-motion="off"] .idea:hover,
[data-motion="off"] .task:hover,
[data-motion="off"] .cell:hover,
[data-motion="off"] .char:hover,
[data-motion="off"] .btn:hover,
[data-motion="off"] .alert:hover { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .amb, .amb i { animation: none !important; }
}