/* =========================================================
   طبقة تحسينات بصرية عامة (micro-interactions / scroll reveal)
   تضاف فوق تنسيقات كل صفحة بدون أي تعديل على الألوان أو
   التخطيط أو المحتوى — فقط انتقالات وتفاعلات أنعم وأدق.
   ========================================================= */

:root{
  --ease-premium: cubic-bezier(.22,1,.36,1);
  --dur-fast: .18s;
  --dur: .3s;
  --dur-slow: .6s;
}

/* انتقال موحّد وسلس لكل العناصر التفاعلية الشائعة بالموقع،
   يغطي فقط transform/box-shadow/background/color/border-color
   (أبدًا "all") عشان ما يأثر على أي خاصية تخطيطية. */
a, button, .btn, .btn-start, .btn-ghost, .register-btn, .back-button,
.speaker-btn, .nav-mark, .menu-close, .game-close, .bot-close,
.game-answer-btn, .bot-send-btn, input, select, textarea {
  transition-timing-function: var(--ease-premium);
}

/* حلقة تركيز واضحة عند التنقل بلوحة المفاتيح، بدون ما تغيّر
   شكل العنصر وقت الضغط بالماوس */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.btn-start:focus-visible, .btn-ghost:focus-visible,
.register-btn:focus-visible, .back-button:focus-visible,
.speaker-btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sky, #6ccff6);
  outline-offset: 3px;
}

/* لمسة ضغط خفيفة على الأزرار (feedback لحظي عند النقر) */
button:active, .btn:active, .btn-start:active, .btn-ghost:active,
.register-btn:active, .back-button:active, .speaker-btn:active,
.game-answer-btn:active, .bot-send-btn:active {
  transform: scale(.97);
}

/* ظل خفيف وارتفاع بسيط للبطاقات اللي ما عندها تأثير hover خاص
   فيها أصلًا (past-card / register-card / card) */
.past-card:hover, .card:hover, .register-card:hover {
  box-shadow: 0 16px 34px -18px rgba(0,8,120,.35);
}

/* =========================================================
   Scroll reveal (js/reveal.js) — إخفاء مبدئي بسيط بـ class
   بدل opacity مباشر، عشان أي حركة دخول فعلية تُبنى بـ
   Web Animations API من غير ما تتعارض مع transition الأصلي
   لنفس العنصر (hover البطاقات مثلًا يبقى زي ما هو تمامًا)
   ========================================================= */
.reveal-pending{opacity:0;}

/* =========================================================
   تأثير 3D تفاعلي (js/tilt3d.js) — يميل البطاقة بخفة مع حركة
   الماوس، مع إضاءة لامعة تتبع المؤشر. يعمل بس على أجهزة فيها
   ماوس حقيقي (hover:hover) ومو مفعّل reduced-motion.
   ========================================================= */
.tilt-ready{
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-ready::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(500px circle at var(--tilt-x,50%) var(--tilt-y,50%),
    rgba(255,255,255,.22), transparent 55%);
  opacity:0;
  transition:opacity .35s var(--ease-premium);
  pointer-events:none;
}
.tilt-ready:hover::before{opacity:1;}

/* لمعة تمر فوق الأزرار الأساسية عند المرور عليها — طبقة إضاءة
   بيضاء خفيفة فقط، بدون أي لون جديد بالهوية البصرية */
.btn, .register-btn, .btn-start{position:relative;overflow:hidden;}
.btn::after, .register-btn::after, .btn-start::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .85s var(--ease-premium);
  pointer-events:none;
}
.btn:hover::after, .register-btn:hover::after, .btn-start:hover::after{
  transform:translateX(130%);
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal-pending{opacity:1 !important;}
  .tilt-ready{transform:none !important;}
  .btn::after, .register-btn::after, .btn-start::after{display:none;}
}

/* الأجهزة اللي ما فيها ماوس حقيقي (لمس) ما تحتاج تأثير الميلان */
@media (hover: none), (pointer: coarse){
  .tilt-ready::before{display:none;}
}