/* ============================================================
   LangoSpot — Design Tokens & Base Styles
   theme.css — Single source of truth
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800;900&family=Amita:wght@400;700&display=swap');

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  /* Colors */
  --primary:       #38006b;
  --primary-light: #7c43bd;
  --primary-dark:  #38006b;
  --gold:          #ffd700;
  --green:          #4caf50;
  --green-dark:     #2e7d32;
  --secondary:      #4caf50;
  --secondary-dark: #2e7d32;
  --red:            #c62828;

  /* Text */
  --text-main:  #1a1a2e;
  --text-muted: #555;

  /* Surface */
  --bg:     #f8f7ff;
  --white:  #ffffff;
  --border: #e8e0f5;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Shadow */
  --shadow-sm: 0 2px 12px rgba(74,20,140,.08);
  --shadow-md: 0 6px 24px rgba(74,20,140,.15);
  --shadow-lg: 0 12px 40px rgba(74,20,140,.20);

  /* Transition */
  --transition: .2s ease;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base element colors ──────────────────────────────────────── */
p { color: var(--text-muted); }

/* ── Global back button ───────────────────────────────────────── */
.ls-back-wrap {
  max-width: 840px;
  margin: 0 auto;
  padding: 14px 24px 0;
}
.ls-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  padding: 7px 16px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  background: var(--white);
  transition: all .2s;
  font-family: 'Almarai', sans-serif;
}
.ls-back-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.ls-back-btn svg { flex-shrink: 0; }

/* ── Decorative Background Container ─────────────────────────── */
.ls-bg-decor {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100lvh; /* large viewport height — لا يتغير عند ظهور شريط المتصفح */
  overflow: hidden;
  pointer-events: none;
  z-index: -1; /* خلف جميع العناصر دائماً */
}

/* Grid Pattern */
.ls-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74, 20, 140, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 20, 140, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
}
html[data-theme="dark"] .ls-grid-pattern {
  background-image:
    linear-gradient(rgba(124, 67, 189, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 67, 189, 0.07) 1px, transparent 1px);
}

/* ============================================================
   Aurora Mesh Background — replacement for legacy .ls-shape system
   Layered radial gradients with slow rotation/morph for depth
   ============================================================ */

/* Layer 1 — main aurora (large flowing blobs) */
.ls-bg-decor::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 50% 40% at 18% 22%, rgba(124, 67, 189, 0.85) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 18%, rgba(255, 200, 0, 0.55)  0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 75% 78%, rgba(89, 0, 169, 0.80)   0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 22% 82%, rgba(46, 196, 102, 0.50) 0%, transparent 58%),
    radial-gradient(ellipse 45% 35% at 50% 50%, rgba(168, 85, 247, 0.45) 0%, transparent 58%);
  filter: blur(70px) saturate(140%);
  opacity: 0.95;
  animation: ls-aurora-flow 28s ease-in-out infinite;
  will-change: transform;
}

/* Layer 2 — secondary depth (counter-rotating, smaller hot spots) */
.ls-bg-decor::after {
  content: '';
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle 300px at 65% 35%, rgba(255, 196, 0, 0.40)  0%, transparent 62%),
    radial-gradient(circle 340px at 30% 65%, rgba(157, 78, 221, 0.50) 0%, transparent 62%),
    radial-gradient(circle 260px at 88% 88%, rgba(46, 196, 102, 0.35) 0%, transparent 62%),
    radial-gradient(circle 220px at 12% 15%, rgba(236, 64, 122, 0.30) 0%, transparent 60%);
  filter: blur(50px) saturate(130%);
  opacity: 0.85;
  animation: ls-aurora-counter 36s ease-in-out infinite;
  will-change: transform;
}

@keyframes ls-aurora-flow {
  0%, 100% { transform: rotate(0deg)   scale(1)    translate(0, 0); }
  25%      { transform: rotate(60deg)  scale(1.12) translate(2%, -1%); }
  50%      { transform: rotate(180deg) scale(1.18) translate(-1%, 2%); }
  75%      { transform: rotate(300deg) scale(1.08) translate(1%, 1%); }
}

@keyframes ls-aurora-counter {
  0%, 100% { transform: rotate(0deg)    scale(1); }
  33%      { transform: rotate(-90deg)  scale(1.15); }
  66%      { transform: rotate(-220deg) scale(0.92); }
}

/* Dark mode — aurora أعمق وأكثر تشبّعاً (نيون على سماء ليلية) */
html[data-theme="dark"] .ls-bg-decor::before {
  background:
    radial-gradient(ellipse 50% 40% at 18% 22%, rgba(157, 78, 221, 0.70) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 18%, rgba(255, 200, 0, 0.32)  0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 75% 78%, rgba(236, 64, 122, 0.50) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 22% 82%, rgba(89, 0, 169, 0.75)   0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 50% 50%, rgba(168, 85, 247, 0.40) 0%, transparent 58%);
  opacity: 0.75;
}
html[data-theme="dark"] .ls-bg-decor::after {
  opacity: 0.55;
}

/* Mobile — تقليل الـ blur للأداء، إيقاف الحركة لتفادي القفز عند شريط المتصفح */
@media (max-width: 768px) {
  .ls-bg-decor::before {
    filter: blur(45px);
    animation: none;
    transform: scale(1.05);
  }
  .ls-bg-decor::after {
    filter: blur(30px);
    animation: none;
  }
}

/* Reduced motion — احترام تفضيلات المستخدم */
@media (prefers-reduced-motion: reduce) {
  .ls-bg-decor::before,
  .ls-bg-decor::after { animation: none; }
}

/* ─── Legacy .ls-shape — الإبقاء على الفئة للتوافق الخلفي فقط ─── */
.ls-shape { display: none; }

/* ── Base ─────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Almarai', 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text-main);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; }

/* ── Shared Utilities ─────────────────────────────────────────── */

/* Back button (used in lecture-group, note-single, recording-single) */
.ls-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  font-size: .88rem;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  background: var(--white);
  margin-bottom: 28px;
  transition: background var(--transition), color var(--transition);
}
.ls-back:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Hero shared pattern */
.ls-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0515;
}
.ls-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .45;
}
.ls-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(74,20,140,.55) 0%, rgba(5,2,20,.82) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.ls-hero-overlay h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
  margin-bottom: 10px;
}
.ls-hero-overlay p {
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  max-width: 500px;
}

/* Section divider */
.ls-divider {
  max-width: 680px;
  margin: 24px auto;
  border: none;
  border-top: 1px solid var(--border);
}

/* Section title with gold underline */
.ls-section-title {
  text-align: center;
  margin-bottom: 20px;
}
.ls-section-title h2 {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--primary);
  display: inline-block;
}
.ls-section-title h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin: 8px auto 0;
}

/* Vertical list (notes, recordings) */
.ls-list {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ls-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.ls-list-item::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--primary-light));
}
.ls-list-item:hover {
  transform: translateX(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}
.ls-list-num {
  min-width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
}
.ls-list-text  { flex: 1; }
.ls-list-title { font-weight: 800; font-size: 1rem; color: var(--text-main); }
.ls-list-arrow { color: var(--primary); font-size: 1rem; flex-shrink: 0; }

/* CTA banner (telegram / live lectures) */
.ls-cta {
  background: linear-gradient(135deg, var(--primary) 0%, #1a0050 100%);
  padding: 52px 24px;
  text-align: center;
  color: #fff;
}
.ls-cta h3  { font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; }
.ls-cta p   { opacity: .85; margin-bottom: 24px; }
.ls-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #38006b;
  font-weight: 900;
  font-size: 1rem;
  padding: 13px 32px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255,215,0,.35);
  transition: transform var(--transition);
}
.ls-cta-btn:hover { transform: translateY(-3px); color: #38006b; }

/* Read-more toggle */
.ls-toggle-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0 0;
  font-family: inherit;
  display: block;
  margin: 6px auto 0;
}
.ls-extra {
  overflow: hidden;
  transition: max-height .4s ease;
  max-height: 0;
}
.ls-extra.open { max-height: 300px; }

/* ── Scroll-to-Top Button ─────────────────────────────────────── */
#ls-scroll-top {
  position: fixed;
  bottom: 28px;
  left: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(74,20,140,.35);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s;
  z-index: 999;
}
#ls-scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
}
#ls-scroll-top:hover {
  background: var(--primary-light);
}
#ls-scroll-top svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* ── Responsive helpers ───────────────────────────────────────── */
@media (max-width: 600px) {
  .ls-list-item { padding: 14px 16px; }
}

/* ============================================================
   DARK MODE
   html[data-theme="dark"] — specificity (0,1,1) > :root (0,1,0)
   يتغلب على أي :root داخلي في الصفحات
   ============================================================ */
html[data-theme="dark"] {
  --primary:    #7c43bd;
  --bg:         #0f0c1a;
  --white:      #1c1630;
  --border:     #2e2050;
  --text-main:  #ede8ff;
  --text-muted: #c0aee8;
  --shadow-sm:  0 2px 12px rgba(0,0,0,.35);
  --shadow-md:  0 6px 24px rgba(0,0,0,.50);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.60);
}

/* ── Body & base ─────────────────────────────────────────── */
html[data-theme="dark"] body,
html[data-theme="dark"] .notes-page,
html[data-theme="dark"] .auth-page {
  background: var(--bg) !important;
  color: var(--text-main) !important;
}

/* ── Inputs ─────────────────────────────────────────────── */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #241d40 !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

/* ── Header ──────────────────────────────────────────────── */
html[data-theme="dark"] .ls-header {
  background: rgba(15,12,26,.68) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: rgba(124,67,189,.25) !important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme="dark"] .ls-header { background: rgba(15,12,26,.97) !important; }
}
html[data-theme="dark"] .ls-nav > li > a,
html[data-theme="dark"] .ls-mobile-nav a { color: var(--text-main) !important; }
html[data-theme="dark"] .ls-nav > li > a:hover { color: var(--gold) !important; background: rgba(255,215,0,.08) !important; }
html[data-theme="dark"] .ls-logo-name    { color: var(--gold) !important; }
html[data-theme="dark"] .ls-logo-tagline { color: var(--text-muted) !important; }
html[data-theme="dark"] .nav-arrow       { color: var(--text-muted) !important; }

/* ── Dropdown ────────────────────────────────────────────── */
html[data-theme="dark"] .ls-dropdown {
  background: #1c1630 !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ls-dropdown li a          { color: var(--text-main) !important; }
html[data-theme="dark"] .ls-dropdown li a:hover    { background: rgba(124,67,189,.2) !important; color: var(--gold) !important; }

/* ── Mobile nav ──────────────────────────────────────────── */
html[data-theme="dark"] .ls-mobile-nav { background: #1c1630 !important; border-top-color: var(--border) !important; }
html[data-theme="dark"] .ls-mob-toggle:hover   { background: rgba(124,67,189,.15) !important; }
html[data-theme="dark"] .ls-mob-toggle > a     { color: var(--text-main) !important; }
html[data-theme="dark"] .ls-mob-sub            { background: linear-gradient(135deg,#1a1438,#231950) !important; border-right-color: var(--primary-light) !important; }
html[data-theme="dark"] .ls-mob-sub li a       { color: var(--primary-light) !important; }
html[data-theme="dark"] .ls-mob-sub li a:hover { background: rgba(124,67,189,.2) !important; }

/* ── Cards ───────────────────────────────────────────────── */
html[data-theme="dark"] .hp-card,
html[data-theme="dark"] .ls-list-item,
html[data-theme="dark"] .note-item,
html[data-theme="dark"] .auth-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .hp-card-title,
html[data-theme="dark"] .ls-list-title,
html[data-theme="dark"] .note-item-title { color: var(--text-main) !important; }

/* ── Auth page ───────────────────────────────────────────── */
html[data-theme="dark"] .auth-input {
  background: #241d40 !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .auth-label  { color: var(--text-main) !important; }
html[data-theme="dark"] .auth-hint,
html[data-theme="dark"] .auth-terms,
html[data-theme="dark"] .auth-footer { color: var(--text-muted) !important; background: #16102b !important; }
html[data-theme="dark"] .auth-tabs   { border-bottom-color: var(--border) !important; }
html[data-theme="dark"] .auth-tab    { color: var(--text-muted) !important; }
html[data-theme="dark"] .auth-tab.active { color: var(--gold) !important; border-bottom-color: var(--gold) !important; }
html[data-theme="dark"] .auth-divider { color: var(--text-muted) !important; }
html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after { background: var(--border) !important; }

/* ── Sections & text ─────────────────────────────────────── */
html[data-theme="dark"] .notes-intro p,
html[data-theme="dark"] .hp-about-text p { color: var(--text-muted) !important; }
html[data-theme="dark"] .ls-divider       { border-top-color: var(--border) !important; }
html[data-theme="dark"] .ls-section-title h2 { color: var(--primary-light) !important; }
html[data-theme="dark"] .err-link         { background: var(--white) !important; color: var(--primary-light) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .err-link:hover   { background: var(--primary) !important; color: #fff !important; }

/* ── النصوص التي تستخدم --primary كلون نص (غير مرئي في الداكن) ── */
html[data-theme="dark"] .hp-browse-text,
html[data-theme="dark"] .cou-list-title h2,
html[data-theme="dark"] .live-groups-title h2,
html[data-theme="dark"] .cou-box-title,
html[data-theme="dark"] .lg-box-title,
html[data-theme="dark"] .cou-extra p { color: var(--primary-light) !important; }

html[data-theme="dark"] .live-intro p,
html[data-theme="dark"] .live-intro-extra p,
html[data-theme="dark"] .qz-intro p,
html[data-theme="dark"] .qz-extra p { color: rgba(255,255,255,.8) !important; }

html[data-theme="dark"] .toggle-btn,
html[data-theme="dark"] .intro-toggle-btn,
html[data-theme="dark"] .ls-toggle-btn { color: #ffd700 !important; }

/* Boxes خلفية فاتحة في الداكن */
html[data-theme="dark"] .cou-box,
html[data-theme="dark"] .lg-box {
  background: var(--white) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .cou-idk-box,
html[data-theme="dark"] .lg-idk-box {
  background: linear-gradient(135deg,#1a0d2e,#1c1040) !important;
}
html[data-theme="dark"] .idk-value {
  color: #ffd700 !important;
}
html[data-theme="dark"] .cou-instructions,
html[data-theme="dark"] .lg-instructions {
  background: #16102b !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .cou-instructions p,
html[data-theme="dark"] .lg-instructions p { color: var(--text-muted) !important; }
html[data-theme="dark"] .cou-cta-mr,
html[data-theme="dark"] .lg-cta-mr {
  background: linear-gradient(135deg,#1a0d2e,#1c1040) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .idk-desc-inner { color: var(--text-muted) !important; }
html[data-theme="dark"] .cou-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .cou-card-name,
html[data-theme="dark"] .live-group-name { color: var(--text-main) !important; }
html[data-theme="dark"] .live-group-card {
  background: var(--white) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .hp-browse::before,
html[data-theme="dark"] .hp-browse::after { background: var(--border) !important; }

html[data-theme="dark"] .share-btn-icon.copy-link {
  background: #241d40 !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .share-btn-icon.copy-link img { filter: invert(1) brightness(2) !important; }
html[data-theme="dark"] .cou-intro p,
html[data-theme="dark"] .cou-extra p,
html[data-theme="dark"] .lg-notes-box p { color: var(--text-muted) !important; }
html[data-theme="dark"] .lg-notes-box {
  background: linear-gradient(135deg,#1a0d2e,#1c1040) !important;
  border-color: var(--primary-light) !important;
}
html[data-theme="dark"] .lg-telegram,
html[data-theme="dark"] .lg-posts-box {
  background: #0d1a26 !important;
  border-color: #1a3a52 !important;
}
html[data-theme="dark"] .lg-lecture-post {
  background: rgba(33,150,243,.1) !important;
  border-color: #1a3a52 !important;
}
html[data-theme="dark"] .cou-telegram {
  background: #0d1a26 !important;
  border-color: #1a3a52 !important;
}

/* ── Footer ──────────────────────────────────────────────── */
/* الفوتر داكن فاخر في الوضعين (مُعرّف في footer.php) —
   في الوضع الليلي نعمّقه فقط ليلتحم مع خلفية الصفحة */
html[data-theme="dark"] .ls-footer {
  background: linear-gradient(165deg,#150528 0%,#2a0a52 55%,#120623 100%) !important;
}

/* ── Dark toggle button ──────────────────────────────────── */
#ls-dark-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
#ls-dark-toggle:hover {
  background: var(--primary); color: #fff;
  border-color: var(--primary); transform: rotate(20deg);
}
#ls-dark-toggle svg {
  width: 18px; height: 18px;
  fill: currentColor;
}
#ls-dark-toggle .icon-moon { display: block; }
#ls-dark-toggle .icon-sun  { display: none;  }
html[data-theme="dark"] #ls-dark-toggle .icon-moon { display: none;  }

/* ── Theme switch animation ──────────────────────────────────── */
/* دوران الأيقونة عند الضغط */
#ls-dark-toggle.ls-spin { animation: ls-toggle-spin .6s cubic-bezier(.25,.8,.25,1); }
@keyframes ls-toggle-spin {
  from { transform: rotate(0deg)   scale(1);   }
  50%  { transform: rotate(180deg) scale(.85); }
  to   { transform: rotate(360deg) scale(1);   }
}

/* View Transitions — عطّل الـ cross-fade الافتراضي،
   الدائرة المتسعة (clip-path من JS) هي التي تكشف المظهر الجديد */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* Fallback للمتصفحات بدون View Transitions — تلاشٍ سلس مؤقت */
html.ls-theme-fade,
html.ls-theme-fade body,
html.ls-theme-fade *,
html.ls-theme-fade *::before,
html.ls-theme-fade *::after {
  transition: background-color .45s ease, color .45s ease,
              border-color .45s ease, box-shadow .45s ease !important;
}

/* ── Scroll-triggered animations ─────────────────────────────── */
/* Progressive enhancement: opacity:0 يُطبَّق فقط إذا كان JS مفعّلاً
   لو فشل JS لأي سبب، يبقى المحتوى مرئياً */
.ls-fade-up,
.ls-fade-down {
  transition: opacity .55s ease, transform .55s ease;
}
html.js-ready .ls-fade-up:not(.ls-animated) {
  opacity: 0;
  transform: translateY(28px);
}
html.js-ready .ls-fade-down:not(.ls-animated) {
  opacity: 0;
  transform: translateY(-28px);
}
.ls-animated {
  opacity: 1 !important;
  transform: none !important;
}
html[data-theme="dark"] #ls-dark-toggle .icon-sun  { display: block; }

/* ── Custom Scrollbar — هوية بنفسجية حتى في شريط التمرير ─────── */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #f0ecfa; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  border-radius: 10px;
  border: 2px solid #f0ecfa;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
html { scrollbar-color: var(--primary-light) #f0ecfa; scrollbar-width: thin; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #14101f; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { border-color: #14101f; }
html[data-theme="dark"] { scrollbar-color: var(--primary-light) #14101f; }

/* ── Page Transitions — تلاشٍ ناعم بين صفحات الموقع ──────────── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── Cursor Trail — أثر بنفسجي يتبع المؤشر (سطح المكتب فقط) ──── */
.ls-cursor-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
}
.ls-cursor-trail span {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,.9) 0%, rgba(124,67,189,.75) 55%, transparent 75%);
  opacity: 0;
  transform: scale(.4);
}
.ls-cursor-trail span.on {
  animation: ls-trail-fade .7s ease-out forwards;
}
@keyframes ls-trail-fade {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0;   transform: scale(.15); }
}

/* ============================================================
   v2.0 FX Layer — هوية بصرية موحّدة لكل الصفحات الداخلية
   (طبقة مركزية — تتجاوز أنماط الصفحات الـ inline بـ !important)
   ============================================================ */

/* ── ① Shimmer ذهبي لعناوين الهيرو في كل الصفحات ───────────── */
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .ls-hero-overlay h1,
  .start-hero-overlay h1,
  .qz-hero-overlay h1,
  .lec-hero-overlay h1,
  .apps-hero-overlay h1,
  .contact-hero-overlay h1,
  .share-hero-overlay h1,
  .cou-hero-overlay h1,
  .live-hero-title {
    background: linear-gradient(110deg,#ffd700 0%,#ffd700 38%,#fff6c8 50%,#ffd700 62%,#ffd700 100%) !important;
    background-size: 220% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,.45));
    animation: ls-gold-shimmer 4.5s linear infinite;
  }
}
@keyframes ls-gold-shimmer { to { background-position: -220% center; } }

/* ── ② Glow نابض لأزرار الـ CTA الرئيسية ───────────────────── */
/* أزرار بنفسجية */
.qz-hero-btn, .live-hero-btn, .cou-hero-btn, .cf-submit {
  animation: ls-glow-purple 2.4s ease-in-out infinite;
}
@keyframes ls-glow-purple {
  0%,100% { box-shadow: 0 6px 22px rgba(74,20,140,.4), 0 0 0 0 rgba(124,67,189,.5); }
  50%     { box-shadow: 0 6px 22px rgba(74,20,140,.4), 0 0 0 13px rgba(124,67,189,0); }
}
/* أزرار ذهبية */
.start-cta-btn, .ls-cta-btn, .share-native-btn {
  animation: ls-glow-gold 2.4s ease-in-out infinite;
}
@keyframes ls-glow-gold {
  0%,100% { box-shadow: 0 5px 18px rgba(0,0,0,.18), 0 0 0 0 rgba(255,200,0,.5); }
  50%     { box-shadow: 0 5px 18px rgba(0,0,0,.18), 0 0 0 13px rgba(255,200,0,0); }
}
.qz-hero-btn:hover, .live-hero-btn:hover, .cou-hero-btn:hover, .cf-submit:hover,
.start-cta-btn:hover, .ls-cta-btn:hover, .share-native-btn:hover {
  animation-play-state: paused;
}

/* ── ③ 3D Tilt لبطاقات الصفحات الداخلية ────────────────────── */
.lec-cards, .apps-grid, .share-grid { perspective: 1400px; }
@media (hover:hover) {
  .lec-card, .app-card, .share-btn, .contact-card {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s !important;
  }
  .lec-card:hover, .app-card:hover {
    transform: translateY(-8px) rotateX(3deg) rotateY(-3deg) !important;
  }
  .share-btn:hover, .contact-card:hover {
    transform: translateY(-6px) rotateX(2.5deg) rotateY(2.5deg) !important;
  }
}

/* ── إيقاف كل حركة الطبقة عند تفضيل تقليل الحركة ───────────── */
@media (prefers-reduced-motion: reduce) {
  .ls-hero-overlay h1, .start-hero-overlay h1, .qz-hero-overlay h1,
  .lec-hero-overlay h1, .apps-hero-overlay h1, .contact-hero-overlay h1,
  .share-hero-overlay h1, .cou-hero-overlay h1, .live-hero-title,
  .qz-hero-btn, .live-hero-btn, .cou-hero-btn, .cf-submit,
  .start-cta-btn, .ls-cta-btn, .share-native-btn {
    animation: none !important;
  }
}