/* ==========================================================================
   Nabil Khamis Portfolio — Production Design System Styles
   Phase 1–4 consolidated. Phase comment markers removed; all rules active.
   ========================================================================== */

/* ── 1. Global Reset & Core Styling ──────────────────────────────────────── */
html {
  /* Lenis handles smooth scroll — native override disabled */
  scroll-behavior: auto;
  background-color: #0B0B0B;
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #0B0B0B;
  overflow-x: hidden;
  position: relative;
}

/* ── 2. Cinematic Film Grain Overlay ─────────────────────────────────────── */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  /* Composited on its own layer — no repaints from scrolling */
  will-change: transform;
}

/* ── 3. Typography ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Arabic Typography Overrides */
html[lang="ar"] {
  font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6, html[lang="ar"] .font-bebas {
  font-family: 'Cairo', sans-serif;
  letter-spacing: normal;
}

html[lang="ar"] .tracking-cinematic, html[lang="ar"] .tracking-cinematic-wide {
  letter-spacing: normal;
}

.tracking-cinematic      { letter-spacing: 0.15em; }
.tracking-cinematic-wide { letter-spacing: 0.25em; }

/* ── 4. Custom Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: #0B0B0B; }
::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #FF6A00; }

/* ── 5. Button Styles ────────────────────────────────────────────────────── */
.btn-cinematic-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  color: #FFFFFF;
  background-color: #FF6A00;
  border: 1px solid #FF6A00;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.btn-cinematic-primary:hover  { background-color: transparent; color: #FF6A00; border-color: #FF6A00; transform: translateY(-2px); }
.btn-cinematic-primary:active { transform: translateY(0); }

.btn-cinematic-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  color: #FFFFFF;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-cinematic-secondary:hover  { border-color: #FF6A00; color: #FF6A00; transform: translateY(-2px); }
.btn-cinematic-secondary:active { transform: translateY(0); }

/* ── 6. Project Cards ────────────────────────────────────────────────────── */
.project-card {
  position: relative;
  overflow: hidden;
  background-color: #141414;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.4s ease;
  cursor: pointer;
}
.project-card:hover          { border-color: rgba(255, 106, 0, 0.4); }
.project-card:focus-visible  { outline: 2px solid #FF6A00; outline-offset: 4px; }

.project-card-image-container { position: relative; overflow: hidden; }

.project-card-image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* Promote to GPU layer to prevent repaint during scale transform */
  will-change: transform;
}
.project-card:hover .project-card-image { transform: scale(1.05); }

/* Card gradient overlay */
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 11, 11, 0.9) 0%, rgba(11, 11, 11, 0.2) 60%, rgba(11, 11, 11, 0) 100%);
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.project-card:hover .project-overlay { opacity: 0.95; }

/* ── 7. Accessibility — Focus Indicators ─────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #FF6A00;
  outline-offset: 4px;
}

/* ── 8. Text Selection ───────────────────────────────────────────────────── */
::selection { background-color: #FF6A00; color: #FFFFFF; }

/* ── 9. Sticky Navigation Scroll State ───────────────────────────────────── */
/* Applied by navigation.js when window.scrollY > 60 */
header.nav-scrolled {
  background-color: rgba(11, 11, 11, 0.97);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.6);
}

/* ── 10. Active Navigation Link ─────────────────────────────────────────── */
/* Applied by navigation.js based on the in-view section */
[data-nav-link].nav-link-active      { color: #FFFFFF; }
[data-nav-link].nav-link-active::after { width: 100% !important; }

/* ── 11. Project Modal ───────────────────────────────────────────────────── */
#project-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(11, 11, 11, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* display: flex is set programmatically by modal.js */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem 1rem;
}

/* Modal inner panel */
#modal-inner {
  position: relative;
  width: 100%;
  max-width: 64rem;
  margin: auto;
  background-color: #141414;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

/* Modal close button */
#modal-close {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  color: #9E9E9E;
  transition: background-color 0.25s ease, color 0.25s ease;
}
#modal-close:hover      { background-color: #FF6A00; border-color: #FF6A00; color: #FFFFFF; }
#modal-close:focus-visible { outline: 2px solid #FF6A00; outline-offset: 3px; }

/* Modal video area */
#modal-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0B0B0B;
  overflow: hidden;
}
#modal-video-wrap video { width: 100%; height: 100%; display: block; }

/* ── 12. Content-visibility — rendering performance ─────────────────────── */
/* Browser skips layout + paint for off-screen sections. Contains-intrinsic-size
   reserves approximate space to prevent CLS when sections come into view. */
#about, #stats, #work, #services, #workflow, #testimonials, #contact {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}