/* ═══════════════════════════════════════════════════════════
   YAHYA.DEV — CORE CSS
   Design System: Tech Luxury Dark
   Philosophy: Swiss Precision + Futuristic Depth
═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ── Design Tokens ── */
:root {
  /* Backgrounds */
  --bg-base:      #020208;
  --bg-deep:      #06060f;
  --bg-surface:   #0a0a18;
  --bg-card:      #0d0d1f;
  --bg-card-2:    #111128;
  --bg-glass:     rgba(13,13,31,0.7);

  /* Brand Colors */
  --indigo:       #6366f1;
  --indigo-l:     #818cf8;
  --indigo-d:     #4f46e5;
  --purple:       #a855f7;
  --purple-l:     #c084fc;
  --cyan:         #06b6d4;
  --cyan-l:       #22d3ee;
  --cyan-d:       #0891b2;

  /* Accent — warm amber, used sparingly */
  --amber:        #f59e0b;
  --amber-l:      #fbbf24;

  /* Text */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --text-faint:     #1e293b;

  /* Borders */
  --border:         rgba(99,102,241,0.12);
  --border-hover:   rgba(99,102,241,0.35);
  --border-glow:    rgba(6,182,212,0.3);

  /* Gradients */
  --grad-brand:     linear-gradient(135deg, var(--indigo), var(--purple));
  --grad-cyan:      linear-gradient(135deg, var(--cyan), var(--indigo));
  --grad-text:      linear-gradient(135deg, var(--indigo-l), var(--cyan-l));
  --grad-surface:   linear-gradient(180deg, var(--bg-surface), var(--bg-base));

  /* Glows */
  --glow-indigo:    0 0 40px rgba(99,102,241,0.25);
  --glow-cyan:      0 0 40px rgba(6,182,212,0.2);
  --glow-purple:    0 0 60px rgba(168,85,247,0.2);

  /* Typography */
  --font-display:   'Syne', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Spacing Scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   600ms;
  --dur-xl:     1000ms;

  /* Z-Index Scale */
  --z-base:    1;
  --z-float:   10;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   900;
  --z-cursor:  9999;

  /* Container */
  --container: 1280px;
  --container-pad: clamp(20px, 5vw, 80px);
}

/* ── Light Mode Tokens ── */
[data-theme="light"] {
  --bg-base:      #f8faff;
  --bg-deep:      #f0f4ff;
  --bg-surface:   #e8eeff;
  --bg-card:      #ffffff;
  --bg-card-2:    #f5f7ff;
  --bg-glass:     rgba(255,255,255,0.8);

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-faint:     #cbd5e1;

  --border:         rgba(99,102,241,0.15);
  --border-hover:   rgba(99,102,241,0.4);

  --glow-indigo:    0 4px 24px rgba(99,102,241,0.15);
  --glow-cyan:      0 4px 24px rgba(6,182,212,0.12);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  transition: background var(--dur-slow) var(--ease-smooth),
              color var(--dur-slow) var(--ease-smooth);
}

/* ── CSS-Only Starfield ──
   Lightweight ambient depth, replaces WebGL particle canvas.
   Two layers at different sizes/speeds for subtle parallax feel. */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.starfield::before,
.starfield::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-repeat: repeat;
  opacity: 0.5;
}
.starfield::before {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(165,180,252,0.7) 0%, transparent 60%),
    radial-gradient(1px 1px at 60% 70%, rgba(165,180,252,0.5) 0%, transparent 60%),
    radial-gradient(1px 1px at 80% 20%, rgba(103,232,249,0.6) 0%, transparent 60%),
    radial-gradient(1px 1px at 35% 85%, rgba(165,180,252,0.5) 0%, transparent 60%),
    radial-gradient(1px 1px at 90% 55%, rgba(216,180,254,0.5) 0%, transparent 60%),
    radial-gradient(1px 1px at 10% 60%, rgba(165,180,252,0.6) 0%, transparent 60%),
    radial-gradient(1px 1px at 50% 10%, rgba(103,232,249,0.5) 0%, transparent 60%),
    radial-gradient(1px 1px at 70% 90%, rgba(165,180,252,0.4) 0%, transparent 60%);
  background-size: 380px 380px;
  animation: starfield-drift 180s linear infinite;
}
.starfield::after {
  background-image:
    radial-gradient(1.5px 1.5px at 15% 50%, rgba(255,255,255,0.5) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 35%, rgba(255,255,255,0.4) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 75%, rgba(216,180,254,0.4) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(103,232,249,0.4) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 15%, rgba(255,255,255,0.35) 0%, transparent 60%);
  background-size: 560px 560px;
  animation: starfield-drift 260s linear infinite reverse;
}
@keyframes starfield-drift {
  from { transform: translate(0,0); }
  to   { transform: translate(-380px,-380px); }
}
@media (prefers-reduced-motion: reduce) {
  .starfield::before, .starfield::after { animation: none; }
}

/* ── Typography Scale ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}

.display-xl {
  font-size: clamp(3.5rem, 8vw + 1rem, 9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.display-lg {
  font-size: clamp(2.5rem, 5vw + 1rem, 6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
}
.display-md {
  font-size: clamp(1.8rem, 3vw + 1rem, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.display-sm {
  font-size: clamp(1.3rem, 2vw + 0.5rem, 2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.text-lg   { font-size: 1.125rem; line-height: 1.7; }
.text-base { font-size: 1rem;     line-height: 1.7; }
.text-sm   { font-size: 0.875rem; line-height: 1.6; }
.text-xs   { font-size: 0.75rem;  line-height: 1.5; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* Gradient text utility */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-brand {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Links ── */
a {
  color: inherit;
  text-decoration: none;
  cursor: none;
}

/* ── Images ── */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Lists ── */
ul, ol { list-style: none; }

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── Visually Hidden (Accessibility) ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Noise Texture Overlay ── */
.noise-overlay {
  position: fixed; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── Selection ── */
::selection {
  background: rgba(99,102,241,0.3);
  color: var(--text-primary);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--indigo);
  border-radius: var(--radius-full);
}

/* ── Focus ── */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    /* Do NOT override animation-fill-mode — elements must remain visible */
  }
}

/* ── Responsive Helpers ── */
@media (max-width: 768px) {
  :root { --container-pad: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   RTL SUPPORT — Arabic Direction
═══════════════════════════════════════════════════════════ */
[dir="rtl"] {
  font-family: 'Syne', 'Segoe UI', Tahoma, sans-serif;
  letter-spacing: 0;
}

/* Nav */
[dir="rtl"] .nav-inner        { flex-direction: row-reverse; }
[dir="rtl"] .nav-links        { flex-direction: row-reverse; }
[dir="rtl"] .nav-actions      { flex-direction: row-reverse; }
[dir="rtl"] .nav-logo         { flex-direction: row-reverse; }
[dir="rtl"] .nav-logo-home-link { margin-right: 0; margin-left: 0; }
[dir="rtl"] .nav-link::after  { left: auto; right: 0; }
[dir="rtl"] .logo-popup       { left: auto; right: 50%; transform: translateX(50%) translateY(-12px) scale(0.94); }
[dir="rtl"] .nav-logo.active .logo-popup { transform: translateX(50%) translateY(0) scale(1); }
[dir="rtl"] .logo-popup::before { left: auto; right: 50%; transform: translateX(50%) rotate(45deg); }
[dir="rtl"] .logo-popup-body  { text-align: right; }

/* Hero */
[dir="rtl"] .hero-content     { direction: rtl; }
[dir="rtl"] .hero-tag         { flex-direction: row-reverse; }
[dir="rtl"] .hero-tag::before { background: linear-gradient(270deg, var(--cyan), transparent); }
[dir="rtl"] .hero-cta         { flex-direction: row-reverse; }
[dir="rtl"] .hero-title .name-first,
[dir="rtl"] .hero-title .name-last { text-align: right; }

/* Section labels */
[dir="rtl"] .section-label    { flex-direction: row-reverse; }
[dir="rtl"] .section-label::before { background: linear-gradient(270deg, var(--cyan), transparent); }

/* About */
[dir="rtl"] .about-inner      { direction: rtl; }
[dir="rtl"] .about-text       { text-align: right; }
[dir="rtl"] .tech-stack-row   { justify-content: flex-end; }
[dir="rtl"] .about-quote      { border-left: none; border-right: 2px solid var(--indigo); border-radius: 8px 0 0 8px; }
[dir="rtl"] .about-quote::before { left: auto; right: 20px; }

/* Terminal — keep LTR */
[dir="rtl"] .about-terminal   { direction: ltr; text-align: left; }

/* Skills */
[dir="rtl"] .skill-bar-header { flex-direction: row-reverse; }
[dir="rtl"] .skill-bar-fill   { background: linear-gradient(270deg, var(--indigo), var(--cyan)); }
[dir="rtl"] .skill-bar-fill::after { right: auto; left: -2px; }
[dir="rtl"] .skill-cat-title  { text-align: right; }

/* Projects */
[dir="rtl"] .projects-header  { flex-direction: row-reverse; }
[dir="rtl"] .project-badges   { left: auto; right: 16px; }
[dir="rtl"] .project-body     { text-align: right; }
[dir="rtl"] .project-tags     { justify-content: flex-end; }
[dir="rtl"] .project-links    { flex-direction: row-reverse; }
[dir="rtl"] .view-all-link    { flex-direction: row-reverse; }
[dir="rtl"] .view-all-link::after { content: '←'; }

/* Filter */
[dir="rtl"] .filter-wrap      { direction: rtl; }

/* Contact */
[dir="rtl"] .contact-inner    { direction: rtl; }
[dir="rtl"] .contact-info     { text-align: right; }
[dir="rtl"] .contact-link     { flex-direction: row-reverse; }
[dir="rtl"] .contact-link:hover { transform: translateX(-8px); }
[dir="rtl"] .contact-link-text { text-align: right; }

/* Form */
[dir="rtl"] .form-label       { text-align: right; }
[dir="rtl"] .form-input,
[dir="rtl"] .form-textarea    { text-align: right; direction: rtl; }
[dir="rtl"] .form-submit      { align-self: flex-end; }

/* Footer */
[dir="rtl"] .footer-inner     { direction: rtl; }
[dir="rtl"] .footer-bottom    { flex-direction: row-reverse; }
[dir="rtl"] .footer-bottom-left { flex-direction: row-reverse; }
[dir="rtl"] .footer-socials   { flex-direction: row-reverse; }

/* Scroll indicator */
[dir="rtl"] .scroll-indicator-label { letter-spacing: 0; }

/* Mobile menu */
[dir="rtl"] .mobile-menu      { text-align: right; }
[dir="rtl"] .hamburger        { margin-right: auto; margin-left: 0; }

/* Marquee — reverse direction in RTL */
[dir="rtl"] .marquee-track    { animation-direction: reverse; }
[dir="rtl"] .marquee-wrap::before { left: 0; background: linear-gradient(to left, var(--bg-base), transparent); }
[dir="rtl"] .marquee-wrap::after  { right: 0; background: linear-gradient(to right, var(--bg-base), transparent); }

/* CTA strip */
[dir="rtl"] .cta-strip-inner  { flex-direction: row-reverse; }
[dir="rtl"] .cta-text         { text-align: right; }

/* Course cards */
[dir="rtl"] .c-footer         { flex-direction: row-reverse; }
[dir="rtl"] .c-cta::after     { content: '←'; }
[dir="rtl"] .track-header     { flex-direction: row-reverse; }
[dir="rtl"] .track-count      { margin-left: 0; margin-right: auto; }

/* Roadmap */
[dir="rtl"] .roadmap-grid::before {
  background: linear-gradient(270deg, var(--indigo), var(--cyan), #22c55e);
}

/* p-card features */
[dir="rtl"] .p-feature        { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .p-feature::before { margin-top: 1px; }
[dir="rtl"] .p-badges         { left: auto; right: 16px; }
[dir="rtl"] .p-body           { text-align: right; }
[dir="rtl"] .p-tags           { justify-content: flex-end; }
[dir="rtl"] .p-links          { flex-direction: row-reverse; }

/* Page hero */
[dir="rtl"] .page-hero-eyebrow { flex-direction: row-reverse; }
[dir="rtl"] .stats-bar-wrap   { direction: rtl; }

/* Preloader */
[dir="rtl"] .preloader-logo   { letter-spacing: 0; }

/* Scroll to top */
[dir="rtl"] #scroll-top       { right: auto; left: 32px; }

/* Nav hire badge — RTL */
[dir="rtl"] .nav-link-hire { flex-direction: row-reverse; }