/* ============================================================
   modern-home.css — طبقة تصميم حديثة نظيفة للصفحة الرئيسية
   ألوان الهوية: تركوازي #50a1a3 · داكن #032d36 · أسود.
   بلا ضبابية وبلا حركات دائمة — المربعات صلبة وواضحة كالأصل.
   الحركة تقتصر على تفاعل بسيط عند تمرير الماوس فقط.
   ============================================================ */

:root{
  --m-teal:#50a1a3;
  --m-teal-lite:#7fd3d5;
  --m-teal-deep:#357a7c;
  --m-dark:#032d36;
  --m-black:#031519;
  --m-radius:16px;
  --m-shadow-soft:0 12px 30px -18px rgba(3,45,54,.35);
}

/* ---------- الخطوط ---------- */
body{
  font-family:"Tajawal","Segoe UI",system-ui,sans-serif !important;
  color:#173a40;
  animation:m-pageIn .6s ease both;
}
@keyframes m-pageIn{ from{opacity:0} to{opacity:1} }
h1,h2,h3,h4,.navbar-brand h1,.section-title,.welcome-heading{
  font-family:"Reem Kufi","Tajawal",sans-serif !important;
}

/* ============================================================
   1) الشريط العلوي — صلب وواضح، بلا ضبابية وبلا التصاق
   ============================================================ */
.gradient-navbar{
  background-image:linear-gradient(to right, #000000, #032d36) !important;
  border-bottom:none !important;
  box-shadow:none !important;
}
.gradient-navbar .navbar-brand h1{ font-size:1.55rem; letter-spacing:.5px; }
.gradient-navbar .nav-link{ position:relative; font-weight:500; transition:color .2s; }
.gradient-navbar .nav-link::after{
  content:""; position:absolute; inset-inline:.5rem; bottom:.35rem; height:2px;
  background:var(--m-teal-lite); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform .28s ease;
}
.gradient-navbar .nav-link:hover{ color:#fff !important; }
.gradient-navbar .nav-link:hover::after{ transform:scaleX(1); }
.gradient-navbar .btn-outline-secondary{ border-color:rgba(127,211,213,.4); color:#e2f6f6; border-radius:10px; }
.gradient-navbar .btn-outline-secondary.active,
.gradient-navbar .btn-outline-secondary:hover{ background:var(--m-teal); border-color:var(--m-teal); color:#04252b; }

/* ============================================================
   2) الأزرار — رفعة بسيطة عند التمرير (بلا حركة دائمة)
   ============================================================ */
.btn-primary{
  border-radius:12px !important;
  background-image:linear-gradient(to right, #000000, #032d36) !important;
  border:2px solid #032d36 !important;
  transition:transform .2s ease, box-shadow .2s ease, background-image .3s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  background-image:linear-gradient(to right, #50a1a3, #000000) !important;
  box-shadow:0 14px 26px -14px rgba(80,161,163,.7);
}
.btn-outline-primary{ border-radius:12px !important; border-width:2px !important; font-weight:600; transition:transform .2s; }
.btn-outline-primary:hover{ transform:translateY(-2px); }
.btn-light{ border-radius:12px !important; font-weight:700; transition:transform .2s; }
.btn-light:hover{ transform:translateY(-2px); }

/* ============================================================
   3) الشرائح (Hero) — الصور خلفية ثابتة، بلا حركة
   ============================================================ */
#mainCarousel .carousel-item > .carousel-mobile-height{ height:560px !important; }
#mainCarousel img{ object-fit:cover !important; object-position:center !important; }

/* ---- تسلسل سينمائي للشريحة النشطة ----
   1) كشف: تبدأ الصورة مكبّرة + ضبابية + معتمة ثم تتّضح وتقترب.
   2) تكبير بطيء (Ken Burns) بعد الكشف. */
#mainCarousel .carousel-item img{ will-change:transform, filter; }
#mainCarousel .carousel-item.active img{
  animation:m-heroReveal 1.3s cubic-bezier(.2,.7,.2,1) both,
            m-kenBurns 15s ease-out 1.3s forwards;
}
@keyframes m-heroReveal{
  0%{ transform:scale(1.26); filter:blur(7px) brightness(.55); }
  100%{ transform:scale(1.08); filter:blur(0) brightness(1); }
}
@keyframes m-kenBurns{
  from{ transform:scale(1.08) translate(0,0); }
  to{ transform:scale(1.18) translate(-1.5%,-1.5%); }
}

/* ---- ومضة ضوء تمرّ مرّة واحدة مع كل شريحة ---- */
#mainCarousel .carousel-item.active .carousel-mobile-height::after{
  content:""; position:absolute; top:0; bottom:0; width:55%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.13), transparent);
  transform:skewX(-18deg);
  animation:m-heroShine 1.5s ease-out .25s both;
}
@keyframes m-heroShine{ 0%{ left:-70%; opacity:0 } 25%{ opacity:1 } 100%{ left:130%; opacity:0 } }

/* ---- قبعة تخرّج تنساب في قوسٍ أنيق عبر الواجهة (بديل الطائرة) ---- */
#mainCarousel{ position:relative; }
#mainCarousel .hero-glider{
  position:absolute; z-index:5; top:0; left:0;
  display:flex; align-items:center; gap:22px;
  font-size:56px; color:#f6dc95; pointer-events:none; opacity:0;
  text-shadow:0 0 18px rgba(212,175,90,.85), 0 0 44px rgba(212,175,90,.5);
  animation:m-capFly 11s ease-in-out 1s both; /* مرّة واحدة فقط، بلا تكرار */
}
#mainCarousel .hero-glider i{ animation:m-glideBob 2.6s ease-in-out infinite; }
#mainCarousel .hero-glider i:nth-child(2){ animation-delay:.45s; font-size:.92em; }
#mainCarousel .hero-glider i:nth-child(3){ animation-delay:.9s; font-size:.88em; }
@keyframes m-glideBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes m-capFly{
  0%   { left:104%; top:56%; opacity:0; transform:scale(.8); }
  8%   { opacity:1; }
  50%  { top:20%; }
  92%  { opacity:1; }
  100% { left:-26%; top:30%; opacity:0; transform:scale(1.1); }
}

/* بعد أوّل تبديل للشرائح: أوقِف حركة المقدّمة تمامًا فلا تتكرّر
   (تُضاف .no-intro عبر JS عند أوّل انتقال). */
#mainCarousel.no-intro .carousel-item img{ animation:none !important; transform:none !important; filter:none !important; }
#mainCarousel.no-intro .carousel-item .carousel-mobile-height::after{ animation:none !important; content:none !important; }
#mainCarousel.no-intro .carousel-item .carousel-text h5,
#mainCarousel.no-intro .carousel-item .carousel-text p,
#mainCarousel.no-intro .carousel-item .carousel-text .btn-light{ animation:none !important; }

/* تدرّج داكن أنيق بدل الطبقة السوداء المسطّحة (ثابت، بلا حركة) */
#mainCarousel .position-absolute[style*="rgba(0, 0, 0, 0.4)"],
#mainCarousel .position-absolute[style*="rgba(0,0,0,0.4)"]{
  background:linear-gradient(180deg, rgba(3,21,25,.42) 0%, rgba(3,45,54,.68) 100%) !important;
}
/* دخول ناعم لنص كل شريحة عند ظهورها (مرة واحدة لكل شريحة، بلا وميض) */
.carousel-text{ padding:0 18px; }
#mainCarousel .carousel-item.active .carousel-text h5{ animation:m-textIn .8s cubic-bezier(.2,.7,.2,1) both; }
#mainCarousel .carousel-item.active .carousel-text p{ animation:m-textIn .8s .15s cubic-bezier(.2,.7,.2,1) both; }
#mainCarousel .carousel-item.active .carousel-text .btn-light{ animation:m-textIn .8s .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes m-textIn{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
.carousel-text h5{
  font-family:"Reem Kufi","Tajawal",sans-serif !important;
  font-size:clamp(2.4rem,6vw,4.4rem) !important; letter-spacing:1px;
  text-shadow:0 6px 26px rgba(0,0,0,.55);
}
.carousel-text p{
  font-family:"Tajawal",sans-serif !important; font-weight:500 !important;
  font-size:clamp(1.15rem,3vw,2rem) !important; color:#e7f4f4 !important;
  text-shadow:0 4px 18px rgba(0,0,0,.5);
}
.carousel-text .btn-light{ padding:.7rem 1.7rem; font-size:1rem; }

/* ============================================================
   4) العدّادات — مربعات صلبة واضحة تمامًا (كالأصل) بلا ضباب
   ============================================================ */
.fact-box{
  background-image:linear-gradient(to right, #000000, #032d36) !important;
  background-color:#032d36 !important;
  border:2px solid #032d36 !important;
  border-radius:var(--m-radius) !important;
  box-shadow:0 14px 34px -20px rgba(0,0,0,.55) !important;
  transition:transform .25s ease !important;
}
.fact-box:hover{ transform:translateY(-6px); }
.fact-box:hover{ background-image:linear-gradient(to right, #50a1a3, #000000) !important; }
.fact-box .fact-icon{ color:#ffffff !important; }
.fact-box .counter{ font-family:"Reem Kufi",sans-serif !important; font-variant-numeric:tabular-nums; }
.fact-box .label{ letter-spacing:.5px; }

/* ============================================================
   5) الأقسام والبطاقات — نظافة وحداثة، تفاعل عند التمرير فقط
   ============================================================ */
.welcome-badge,.badge.welcome-badge{
  background:linear-gradient(135deg, rgba(80,161,163,.16), rgba(3,45,54,.10)) !important;
  color:var(--m-dark) !important; border:1px solid rgba(80,161,163,.35);
}
.section-title{ position:relative; display:inline-block; padding-bottom:.5rem; }
.section-title::after{
  content:""; position:absolute; inset-inline:15%; bottom:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--m-teal),transparent);
}

.custom-welcome-card,.ads-card,#news-container > div,.card{
  border-radius:var(--m-radius) !important;
  border:1px solid rgba(3,45,54,.08) !important;
  box-shadow:var(--m-shadow-soft) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.custom-welcome-card:hover,.ads-card:hover,#news-container > div:hover{
  transform:translateY(-5px);
  border-color:rgba(80,161,163,.4) !important;
  box-shadow:0 20px 40px -24px rgba(3,45,54,.45) !important;
}
.welcome-icon-shape{ border-radius:16px !important; transition:transform .25s ease; }
.custom-welcome-card:hover .welcome-icon-shape{ transform:rotate(-5deg) scale(1.05); }

/* الحصص التجريبية */
.card.rounded-3{ border-radius:var(--m-radius) !important; }
.card .btn-success{ border-radius:11px; font-weight:700; }
.badge.bg-success{ background:var(--m-teal) !important; }
.text-success{ color:var(--m-teal-deep) !important; }
.btn-outline-success{ color:var(--m-teal-deep); border-color:var(--m-teal); border-radius:11px; }
.btn-outline-success:hover{ background:var(--m-teal); border-color:var(--m-teal); color:#fff; }

/* ============================================================
   6) جدول التخصصات
   ============================================================ */
#majors-section .table-responsive{
  border:1px solid rgba(3,45,54,.1) !important; border-radius:var(--m-radius) !important; box-shadow:var(--m-shadow-soft);
}
#majors-section thead.table-dark th{
  background:linear-gradient(135deg,#052f38,#032d36) !important;
  color:#e2f6f6 !important; font-weight:600; border:0; padding:1rem .75rem;
}
#majors-section tbody tr{ transition:background .2s ease; }
#majors-section tbody tr:hover{ background:rgba(80,161,163,.08) !important; }
#majors-section .badge.bg-primary{ background:linear-gradient(135deg,var(--m-teal),#04343d) !important; border-radius:9px; }
.text-info{ color:var(--m-teal-deep) !important; }

/* ============================================================
   7) الإعلانات والأخبار
   ============================================================ */
.ads-card .ads-image{ transition:transform .4s ease; }
.ads-card:hover .ads-image{ transform:scale(1.03); }
#news-container > div{ border-inline-start:4px solid var(--m-teal) !important; }
#news-container .text-primary{ color:var(--m-dark) !important; }

/* ============================================================
   8) أدوات مساعدة
   ============================================================ */
.text-primary{ color:var(--m-teal-deep) !important; }
::selection{ background:var(--m-teal); color:#04252b; }

@media (max-width:768px){
  #mainCarousel .carousel-item > .carousel-mobile-height{ height:440px !important; }
}
@media (prefers-reduced-motion:reduce){
  #mainCarousel .carousel-item.active .carousel-text h5,
  #mainCarousel .carousel-item.active .carousel-text p,
  #mainCarousel .carousel-item.active .carousel-text .btn-light{ animation:none !important; }
  #mainCarousel .carousel-item img,
  #mainCarousel .carousel-item.active img{ animation:none !important; transition:none !important; transform:none !important; filter:none !important; }
  #mainCarousel .carousel-item.active .carousel-mobile-height::after{ animation:none !important; content:none !important; }
  #mainCarousel .hero-glider{ display:none !important; }
  body{ animation:none !important; }
}