/* ==================================================================
   Omar Ali · Digital CV — Stylesheet
   Design language: cinematic navy + clinical blue glow, glass cards
   ================================================================== */

:root{
  /* ---- Color tokens (derived from OA Physiotherapy brand) ---- */
  --navy-950:#060f1e;
  --navy-900:#0a1830;
  --navy-800:#0f2140;
  --navy-700:#16304f;
  --blue-accent:#4fa8da;
  --blue-soft:#8fd1ec;
  --cream:#ede7dc;
  --cream-dim:#b9c2cf;
  --white:#f7f6f3;

  --glass-bg: rgba(16, 33, 64, 0.46);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-bg-light: rgba(237, 231, 220, 0.08);

  /* ---- Type ---- */
  --font-latin: "IBM Plex Sans", -apple-system, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  --font-body: var(--font-latin);

  /* ---- Layout ---- */
  --container: 1180px;
  --nav-h: 84px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html[lang="ar"]{ --font-body: var(--font-arabic); }

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background: var(--navy-950);
  color: var(--white);
  font-family: var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
svg{ display:block; }

/* ================= Background cinematic layer ================= */
.bg-portrait{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:url("../img/portrait.jpg");
  background-position: center 20%;
  background-size:cover;
  opacity:0;
  filter: blur(18px) saturate(0.85) brightness(0.55);
  transform: scale(1.15) translateY(0);
  transition: opacity 1.1s var(--ease);
  pointer-events:none;
}
.bg-portrait.active{ opacity:0.32; }
.bg-portrait::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(6,15,30,0.15), rgba(6,15,30,0.85) 75%),
    linear-gradient(180deg, var(--navy-950) 0%, rgba(6,15,30,0.55) 12%, rgba(6,15,30,0.55) 88%, var(--navy-950) 100%);
}
.bg-noise{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:0.5;
}

main, .navbar, .footer{ position:relative; z-index:2; }

/* ================= Layout helpers ================= */
.section-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
.section{ padding:120px 0; }
.section-tint{ background: linear-gradient(180deg, transparent, rgba(15,33,64,0.35), transparent); }
.section-head{ margin-bottom:56px; max-width:640px; }

.eyebrow{
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--blue-soft);
  font-weight:600;
  margin:0 0 14px;
}
.section-title{
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight:700;
  margin:0 0 18px;
  letter-spacing:-0.01em;
}
.body-text{
  font-size:1.05rem;
  color:var(--cream-dim);
  max-width:60ch;
  margin:0;
}

/* ================= Reveal-on-scroll ================= */
.reveal{ opacity:0; transform:translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ================= Navbar ================= */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease), border-color 0.5s var(--ease), height 0.4s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  height:70px;
  background: rgba(6, 15, 30, 0.62);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom:1px solid var(--glass-border);
}
.navbar-inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height:40px; width:auto; }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:0.92rem; font-weight:500; color:var(--cream-dim);
  position:relative; padding:6px 0; transition: color 0.3s;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--white); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--blue-accent); transition:width 0.35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  padding:9px 20px !important;
  border:1px solid var(--glass-border);
  border-radius:100px;
  background:var(--glass-bg-light);
}
.nav-cta::after{ display:none; }
.lang-switch.lang-switch-mobile{ display:none; }

.navbar-actions{ display:flex; align-items:center; gap:16px; }
.lang-switch{
  display:flex; align-items:center; gap:2px;
  background:var(--glass-bg-light);
  border:1px solid var(--glass-border);
  border-radius:100px; padding:3px;
}
.lang-btn{
  border:none; background:transparent; color:var(--cream-dim);
  font-size:0.72rem; font-weight:600; letter-spacing:0.03em;
  padding:6px 11px; border-radius:100px; transition: all 0.3s var(--ease);
}
.lang-btn.active{ background:var(--blue-accent); color:var(--navy-950); }
.lang-btn:not(.active):hover{ color:var(--white); }

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:none; background:none; padding:0;
}
.menu-toggle span{
  display:block; height:1.6px; width:100%; background:var(--white); border-radius:2px;
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}
.menu-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border-radius:100px;
  font-size:0.92rem; font-weight:600;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  border:1px solid transparent;
}
.btn-primary{
  background: linear-gradient(135deg, var(--blue-accent), #3a86b8);
  color:var(--navy-950);
  box-shadow: 0 8px 30px -8px rgba(79,168,218,0.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 36px -6px rgba(79,168,218,0.7); }
.btn-ghost{
  background:var(--glass-bg-light);
  border-color:var(--glass-border);
  color:var(--white);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{ border-color:var(--blue-accent); transform:translateY(-2px); }
.btn-lg{ padding:16px 34px; font-size:1rem; }

/* ================= Hero ================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:var(--nav-h);
  overflow:hidden;
}
.hero-inner{
  max-width:var(--container);
  margin:0 auto;
  width:100%;
  padding:60px 28px;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap:40px;
}
.hero-copy{ position:relative; z-index:3; }
.eyebrow{ display:block; }
.hero-name{
  font-size:clamp(3rem, 6.4vw, 5.4rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0 0 6px;
  background: linear-gradient(135deg, var(--white) 40%, var(--blue-soft) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-title{
  font-size:clamp(1.15rem, 2vw, 1.5rem);
  font-weight:500;
  color:var(--blue-soft);
  margin:0 0 22px;
}
.hero-tagline{
  font-size:1.08rem;
  color:var(--cream-dim);
  max-width:46ch;
  margin:0 0 30px;
}
.hero-meta{ margin-bottom:32px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:100px;
  background:var(--glass-bg-light); border:1px solid var(--glass-border);
  font-size:0.85rem; color:var(--cream-dim);
}
.pill svg{ color:var(--blue-accent); }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:100%;
}
.portrait-frame{
  position:relative;
  width:min(100%, 400px);
  aspect-ratio: 3/4.35;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--glass-border);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7);
}
.portrait-img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.portrait-glow{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,15,30,0.85) 100%),
              radial-gradient(120% 60% at 50% 0%, rgba(79,168,218,0.25), transparent 60%);
  mix-blend-mode:normal;
}
.brand-curve{
  position:absolute; right:-10%; top:0; height:100%; width:60%;
  z-index:-1; opacity:0.9;
}
html[dir="rtl"] .brand-curve{ right:auto; left:-10%; transform:scaleX(-1); }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:none; color:var(--cream-dim);
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  z-index:3;
}
.scroll-dot{ animation: scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(5px); opacity:0.4; } }

/* ================= About ================= */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}
.quote-card{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  border-radius:var(--radius-lg);
  padding:44px 36px;
  overflow:hidden;
}
.quote-mark{
  font-family:Georgia, serif;
  font-size:4rem; line-height:1;
  color:var(--blue-accent); opacity:0.6;
  display:block; margin-bottom:6px;
}
.quote-text{
  font-size:1.3rem; font-weight:500; line-height:1.5;
  color:var(--white); margin:0 0 26px;
}
.avatar-circle{
  width:56px; height:56px; border-radius:50%;
  object-fit:cover; border:2px solid var(--glass-border);
}

/* ================= Expertise ================= */
.expertise-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.expertise-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  border-radius:var(--radius-md);
  padding:30px 26px;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.expertise-card:hover{
  transform:translateY(-6px);
  border-color:rgba(79,168,218,0.45);
  background: rgba(16,33,64,0.65);
}
.expertise-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(79,168,218,0.22), rgba(79,168,218,0.05));
  color:var(--blue-soft);
  margin-bottom:18px;
}
.expertise-card h3{ font-size:1.05rem; font-weight:600; margin:0 0 8px; }
.expertise-card p{ font-size:0.92rem; color:var(--cream-dim); margin:0; line-height:1.55; }

/* ================= Vision band ================= */
.vision-band{
  position:relative;
  padding:150px 0;
  text-align:center;
  background:
    radial-gradient(60% 90% at 50% 40%, rgba(79,168,218,0.14), transparent 70%);
}
.vision-band .section-inner{ max-width:760px; }
.vision-band .eyebrow, .vision-band .section-title{ }
.vision-text{
  font-size:clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight:400;
  color:var(--cream);
  line-height:1.65;
}

/* ================= Education ================= */
.edu-card{
  display:flex; align-items:flex-start; gap:22px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  border-radius:var(--radius-md);
  padding:34px;
  max-width:640px;
}
.edu-mark{
  flex:none;
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(79,168,218,0.25), rgba(79,168,218,0.05));
  color:var(--blue-soft);
}
.edu-degree{ font-size:1.15rem; font-weight:600; margin:0 0 8px; }
.edu-school{ font-size:1rem; color:var(--blue-soft); margin:0 0 4px; font-weight:500; }
.edu-place{ font-size:0.9rem; color:var(--cream-dim); margin:0; }

/* ================= Social / Instagram ================= */
.ig-card{
  display:flex; align-items:center; gap:20px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  border-radius:var(--radius-md);
  padding:24px 28px;
  max-width:560px;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ig-card:hover{ transform:translateY(-4px); border-color:rgba(79,168,218,0.5); }
.ig-avatar{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; }
.ig-info{ flex:1; min-width:0; }
.ig-handle{ font-size:1.08rem; font-weight:600; margin:0 0 3px; }
.ig-role{ font-size:0.88rem; color:var(--cream-dim); margin:0; }
.ig-cta{
  flex:none;
  display:flex; align-items:center; gap:8px;
  font-size:0.85rem; font-weight:600; color:var(--blue-soft);
  padding:10px 16px; border:1px solid var(--glass-border); border-radius:100px;
}

/* ================= Contact ================= */
.contact-section{ text-align:center; }
.contact-inner{ display:flex; flex-direction:column; align-items:center; max-width:600px; }
.contact-inner .body-text{ margin-bottom:34px; }

/* ================= Footer ================= */
.footer{
  padding:60px 0 36px;
  border-top:1px solid var(--glass-border);
  text-align:center;
}
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.footer-logo{ height:38px; width:auto; opacity:0.9; margin-bottom:6px; }
.footer-tagline{ font-size:0.88rem; color:var(--cream-dim); margin:0; }
.footer-ig{ font-size:0.9rem; color:var(--blue-soft); font-weight:600; margin:4px 0; }
.footer-rights{ font-size:0.78rem; color:rgba(185,194,207,0.55); margin:8px 0 0; }

/* ==================================================================
   Responsive
   ================================================================== */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .menu-toggle{ display:flex; }
  .nav-links.mobile-open{
    display:flex; flex-direction:column; align-items:flex-start;
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(6,15,30,0.92); backdrop-filter:blur(24px);
    padding:26px 28px 34px; gap:22px;
    border-bottom:1px solid var(--glass-border);
  }
  .nav-links.mobile-open a{ font-size:1.05rem; }
  .nav-links.mobile-open .lang-switch.lang-switch-mobile{
    display:flex; margin-top:4px;
  }

  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{
    position:absolute; inset:0; z-index:1; height:100%;
    opacity:0.28; filter:blur(2px);
  }
  .hero-visual .portrait-frame{
    width:100%; height:100%; max-width:none; border-radius:0; border:none;
    aspect-ratio:auto;
  }
  .hero-visual .portrait-glow{
    background: linear-gradient(180deg, rgba(6,15,30,0.4) 0%, var(--navy-950) 92%),
                radial-gradient(90% 60% at 50% 10%, rgba(79,168,218,0.2), transparent 60%);
  }
  .brand-curve{ display:none; }
  .hero-copy{ z-index:2; }
  .hero{ min-height:92vh; }

  .about-grid{ grid-template-columns:1fr; gap:34px; }
  .expertise-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 640px){
  .section{ padding:88px 0; }
  .section-inner{ padding:0 20px; }
  .navbar-inner{ padding:0 20px; }
  .hero-inner{ padding:40px 20px 90px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .expertise-grid{ grid-template-columns:1fr; }
  .lang-switch:not(.lang-switch-mobile){ display:none; }
  .nav-links.mobile-open{ padding-top:22px; }
  .edu-card{ flex-direction:column; padding:28px; }
  .ig-card{ flex-wrap:wrap; }
  .vision-band{ padding:110px 0; }
}

/* ================= RTL adjustments ================= */
html[dir="rtl"] .nav-links a::after{ left:auto; right:0; }
html[dir="rtl"] .scroll-cue{ letter-spacing:0; }
html[dir="rtl"] .hero-name,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero-tagline{ letter-spacing:0; }
html[dir="rtl"] .expertise-icon,
html[dir="rtl"] .edu-mark{ transform:scaleX(-1); }