/* =========================================================
   Astra 3D — طبقة العمق (تصميم فقط، لا منطق عمل).
   body.astra-3d-full  : حاسوب بفأرة — كل التأثيرات.
   body.astra-3d-lite  : لمس/جهاز ضعيف/توفير بيانات — خلفية ثابتة فقط.
   body.astra-3d-paused: الصفحة مخفية — كل تحريك معلّق.
========================================================= */
:root{
  --astra-3d-depth: 900px;
  --astra-3d-gold: var(--c-accent);
  --astra-3d-red: var(--c-primary);
}


/* A non-invasive 3D atmospheric layer behind the existing UI */
.astra-3d-root{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 1100px;
  isolation: isolate;
  background:
    none;
}
.astra-3d-scene{
  position:absolute;
  inset:-12%;
  transform-style:preserve-3d;
  transition:transform var(--dur-5) var(--ease-out);
}
.astra-3d-full .astra-3d-scene{ will-change:transform; }
.astra-3d-lite .astra-3d-scene{ transform-style:flat; transition:none; }
.astra-3d-lite .astra-3d-glow{ filter:none; }
.astra-3d-paused .astra-3d-particle{ animation-play-state:paused; }
.astra-3d-glow{
  position:absolute;
  width:min(52vw,620px);
  aspect-ratio:1;
  left:50%; top:44%;
  transform:translate(-50%,-50%) translateZ(-120px);
  border-radius:50%;
  background:none;
  filter:blur(10px);
}
.astra-3d-ring{
  position:absolute;
  left:50%; top:45%;
  width:min(58vw,680px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-16deg) translateZ(-70px);
  border:1px solid rgb(var(--mint-rgb) / .146);
  border-radius:50%;
  box-shadow:var(--elev-4);
}
.astra-3d-ring.r2{
  width:min(43vw,510px);
  transform:translate(-50%,-50%) rotateX(68deg) rotateZ(28deg) translateZ(-20px);
  border-color:rgb(var(--cobalt-rgb) / .236);
}
.astra-3d-ring.r3{
  width:min(30vw,360px);
  transform:translate(-50%,-50%) rotateX(70deg) rotateZ(72deg) translateZ(25px);
  border-color:rgb(var(--mint-rgb) / .146);
}
.astra-3d-orb{
  position:absolute;
  left:50%; top:45%;
  width:clamp(120px,18vw,210px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) translateZ(80px);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgb(var(--white-rgb) / .236), transparent 9%),
    radial-gradient(circle at 38% 34%, var(--c-primary-hover) 0%, var(--cobalt-700) 36%, var(--n-950) 68%, var(--n-950) 100%);
  box-shadow:inset -18px -22px 45px rgb(var(--graphite-rgb) / .5), inset 12px 12px 30px rgb(var(--white-rgb) / .056), var(--elev-4);
  opacity:.48;
}
.astra-3d-orb::after{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  border:1px solid rgb(var(--mint-rgb) / .236);
  box-shadow:var(--elev-4);
}
.astra-3d-particle{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:rgb(var(--mint-rgb) / .618);
  box-shadow:var(--elev-3);
  transform-style:preserve-3d;
  animation:astraFloat var(--dur,6744ms) var(--ease-standard) infinite alternate;
}
@keyframes astraFloat{
  from{ transform:translate3d(0,0,var(--z,0)) scale(.75); opacity:.25; }
  to{ transform:translate3d(var(--dx,18px),var(--dy,-28px),calc(var(--z,0) + 80px)) scale(1.25); opacity:.8; }
}

/* Give existing UI elements physical depth without changing their content */
/* (على الحاسوب فقط: على الهاتف تحجز طبقات رسومية بلا أثر مرئي) */
.astra-3d-full .welcome-inner{
  transform-style:preserve-3d;
  transition:transform var(--dur-2) var(--ease-out);
}
.astra-3d-full .welcome-logo{
  transform:translateZ(45px);
  transition:transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-standard);
}
.astra-3d-full .welcome-title{ transform:translateZ(32px); }
.astra-3d-full .welcome-sub{ transform:translateZ(24px); }
.astra-3d-full .welcome-buttons{ transform:translateZ(40px); }

.astra-3d-full .menu-card, .astra-3d-full .special-card{
  transform-style:preserve-3d;
}
.menu-card.astra-tilt, .special-card.astra-tilt{
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-standard), border-color var(--dur-3) var(--ease-standard);
}
/* البطاقة التي تحت الفأرة فقط تأخذ طبقة رسومية — لا كل البطاقات */
.menu-card.astra-tilt-active, .special-card.astra-tilt-active{ will-change:transform; }
.menu-card.astra-tilt::before,
.special-card.astra-tilt::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgb(var(--white-rgb) / .056), transparent 38%, rgb(var(--mint-rgb) / .034));
  opacity:0;
  transition:opacity var(--dur-3) var(--ease-standard);
}
.menu-card.astra-tilt:hover::before,
.special-card.astra-tilt:hover::before{opacity:1;}

@media (prefers-reduced-motion: reduce){
  .astra-3d-scene,.welcome-inner{transition:none!important;}
  .astra-3d-particle{animation:none!important;}
}
@media (max-width:700px){
  .astra-3d-ring{width:105vw;}
  .astra-3d-ring.r2{width:78vw;}
  .astra-3d-ring.r3{width:55vw;}
  .astra-3d-orb{width:150px; opacity:.32;}
}


/* Modal/overlay safety: the 3D layer must never affect viewport-fixed UI. */
.modal-bg,
.reels-overlay,
#astra-3d-root{
  transform: none !important;
}
.modal-bg{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}
.modal-sheet,
.info-modal-sheet,
.howto-sheet,
.gallery-modal-sheet{
  max-height: 92dvh;
  overflow-y: auto;
}
html, body{
  perspective: none !important;
}

/* ═══════════ العمق في الموقع (depth.css + depth-fx.js) ═══════════ */
:root { --elev-k: 2.6; } /* الموقع داكن: ظلال أعمق */

/* أثر ضغط قصير — يُحسّ باللمس على الهاتف */
.add-cart-btn:active:not(:disabled),
.modal-add-cart-btn:active,
.cat:active,
.help-toggle-btn:active,
.navbar-cart-btn:active { transform: scale(var(--press-scale)); }
.astra-3d-lite .menu-card:active { transform: scale(.985); }

/* الصنف الطائر إلى السلة */
.fly-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  border-radius: 50%;
  background: var(--bg-3, var(--n-900)) center / cover no-repeat;
  border: var(--phi-n3) solid var(--gold, var(--c-accent));
  box-shadow: var(--elev-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold, var(--c-accent)); font-size: var(--t-h4);
  will-change: transform, opacity;
}