/* =========================
   TOKENS
========================= */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#8a8a8a;

  --pink-1:#ffd2ea;
  --pink-2:#ff5fb8;

  --card:#ffffff;
  --border:#e7e7e7;

  /* footer icons */
  --icon-bg: color-mix(in srgb, var(--pink-2) 18%, transparent);

  --transition-speed: 420ms;
}
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] .navLinks {
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero {
  text-align: right;
}

html[dir="rtl"] .aboutText {
  text-align: right;
}

html[dir="rtl"] .projectsHead {
  text-align: center; /* keep centered */
}
:root {
  --font-display-en: "Playfair Display", serif;
  --font-display-ar: "Cairo", sans-serif;
}

.title {
  font-family: var(--font-display-en);
}

.sectionTitle {
  font-family: var(--font-display-en);
}
html[dir="rtl"] .title {
  font-family: var(--font-display-ar);
}

html[dir="rtl"] .sectionTitle {
  font-family: var(--font-display-ar);
}

body.dark{
  --bg:#12040b;
  --text:#f7f2f5;
  --muted:#d3b8c6;

  --pink-1:#2b0f1d;
  --pink-2:#ff5fb8;

  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.14);

  --icon-bg: color-mix(in srgb, var(--pink-2) 22%, rgba(255,255,255,.06));
}

/* =========================
   BASE
========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.page{
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 24px 0 60px;
}

section{ scroll-margin-top: 110px; }

/* =========================
   GLOBAL TRANSITIONS
========================= */
body,
footer,
header,
.projectCard,
.pill,
button,
a{
  transition:
    background-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
    border-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
}

/* =========================
   Smooth theme fade overlay
========================= */
.themeOverlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  transition: opacity 260ms ease;
  z-index: 9999;
}
.themeOverlay.isOn{ opacity: 1; }

/* =========================
   SCROLL REVEAL
========================= */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity 700ms cubic-bezier(.2,.9,.2,1),
    transform 700ms cubic-bezier(.2,.9,.2,1),
    filter 700ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform, filter;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; filter:none; transform:none; opacity:1; }
}