/* مشهد الواجهة الرئيسية ثلاثي الأبعاد — يحقنه hero3d.js ويعمل تحت html.mo-live فقط */

/* التمرير: النص يصعد أسرع من الصفحة، والبطاقة تبتعد للخلف */
html.mo-live .hero-copy {
  transform: translate3d(0, calc(var(--hp, 0) * -80px), 0);
  opacity: calc(1 - var(--hp, 0) * 0.55);
}
html.mo-live .hero-art {
  transform: perspective(1300px) translate3d(0, calc(var(--hp, 0) * 110px), 0)
    rotateX(calc(var(--hp, 0) * 24deg)) scale(calc(1 - var(--hp, 0) * 0.14));
  transform-origin: 50% 100%;
}
html.mo-live .hero-rocket {
  transform: translate3d(0, calc(var(--hp, 0) * 180px), 0) rotate(calc(var(--hp, 0) * -14deg));
}

.m-scene,
.m-front {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.m-scene {
  z-index: 0;
}
.m-front {
  z-index: 2;
}

/* كروت خلف البطاقة تنفرد كمروحة وتميل معها */
.m-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw, 400px);
  height: var(--ch, 440px);
  margin: calc(var(--ch, 440px) / -2) 0 0 calc(var(--cw, 400px) / -2);
  border-radius: var(--r-xl);
  opacity: min(1, calc(var(--fan, 0) * 4));
  transform: rotateX(var(--crx, 6deg)) rotateY(var(--cry, -8deg))
    translate3d(calc(var(--m-dir) * var(--k) * var(--fan, 0) * -42px),
      calc(var(--k) * var(--fan, 0) * -40px), calc(var(--k) * var(--fan, 0) * -70px))
    rotateZ(calc(var(--m-dir) * var(--k) * var(--fan, 0) * -3deg));
  transition: transform 0.35s var(--ease);
}
.m-ghost.g1 {
  --k: 1;
  background: linear-gradient(165deg, #2b2b34 0%, #0e0e13 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(8, 8, 14, 0.28);
}
.m-ghost.g2 {
  --k: 2;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #ff3537 0%, #c80002 55%, #600001 100%);
  box-shadow: 0 30px 70px rgba(244, 0, 2, 0.32);
}

/* أجسام تطفو على أعماق مختلفة: --d سالب خلف البطاقة وموجب أمامها */
.m-obj {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--mx, 0) * var(--d) * 1px),
      calc(var(--my, 0) * var(--d) * 1px + var(--hp, 0) * var(--d) * -2.4px), calc(var(--d) * 1px))
    scale(var(--pop, 1));
}
.m-ball {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffc2c3 0%, #ff3b3d 16%, #d80002 48%, #5e0001 100%);
  box-shadow: 0 24px 40px -14px rgba(244, 0, 2, 0.5);
  animation: mFloat 6s ease-in-out infinite;
}
.m-ball.b1 {
  width: 108px;
  height: 108px;
  top: 14%;
  inset-inline-start: -2%;
}
.m-ball.b2 {
  width: 44px;
  height: 44px;
  top: 47%;
  inset-inline-end: 4%;
  background: radial-gradient(circle at 32% 28%, #a5a5b4 0%, #3a3a45 22%, #111117 60%, #000 100%);
  box-shadow: 0 18px 30px -12px rgba(8, 8, 14, 0.55);
  animation-delay: -2s;
}
.m-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--red);
  rotate: 45deg;
  animation: mFloat 5s ease-in-out infinite;
}
.m-dot.d1 { top: 4%; inset-inline-start: 30%; animation-delay: -1s; }
.m-dot.d2 { bottom: 3%; inset-inline-start: 26%; width: 8px; height: 8px; background: var(--ink); animation-delay: -3s; }
.m-dot.d3 { top: 30%; inset-inline-end: -1%; width: 13px; height: 13px; animation-delay: -2s; }

.m-cube {
  --s: 62px;
  width: var(--s);
  height: var(--s);
  bottom: 17%;
  inset-inline-start: -3%;
}
.m-cube > b {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: mSpin 16s linear infinite;
}
.m-cube i {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.m-cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); background: #ff2326; }
.m-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); background: #b80002; }
.m-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: #e00003; }
.m-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: #c30002; }
.m-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: #ff5759; }
.m-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #8f0002; }

@keyframes mSpin {
  from { transform: rotateX(-20deg) rotateY(0deg); }
  to { transform: rotateX(340deg) rotateY(720deg); }
}
@keyframes mFloat {
  50% { translate: 0 -14px; }
}
.hero.m-off :is(.m-cube > b, .m-ball, .m-dot) {
  animation-play-state: paused;
}

/* الموبايل: البطاقة بعرض الشاشة — لا شيء أمامها، والبطاقة تستقيم وهي تدخل الشاشة */
@media (max-width: 940px) {
  html.mo-live .hero-copy {
    transform: translate3d(0, calc(var(--hp, 0) * -40px), 0);
    opacity: 1;
  }
  html.mo-live .hero-art {
    transform: perspective(1100px) translate3d(0, calc(var(--ap, 0) * 70px), 0)
      rotateX(calc(var(--ap, 0) * 26deg)) scale(calc(1 - var(--ap, 0) * 0.1));
    transform-origin: 50% 0;
  }
  .m-front {
    display: none;
  }
  .m-ghost.g1 { --k: 0.7; }
  .m-ghost.g2 { --k: 1.4; }
  .m-ball.b1 {
    width: 70px;
    height: 70px;
    top: -5%;
    inset-inline-start: 6%;
  }
}