:root {
  /* Colors */
  --text-primary: #000000;
  --text-secondary: #5a5a5a;
  --text-placeholder: #999999;
  --background-light: rgb(250, 250, 250);
  --background-grey: #f2f2f2;
  --background-dark-grey: #e0e0e0;
  --background-white: #ffffff;
  --background-white-smoke: #f5f5f5;
  --background-card: #fafafa; /* Unified card/header background */
  --border-color: #eaeaea;
  --dark-accent: #191919;
  --success-color: #178d00;
  --success-bg: #e1f9dc;
  --success-border: #caedc3;
  --success-shadow: rgba(23, 141, 0, 0.1);

  /* Error Colors */
  --error-color: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.03);
  --error-border: #dc2626;
  --error-shadow: rgba(220, 38, 38, 0.15);

  /* Status Colors */
  --status-online: #178d00;
  --status-online-bg: #e8f7e3;
  --status-online-text: #0d5f00;
  --status-busy: #f59e0b;
  --status-busy-bg: #fef3c7;
  --status-busy-text: #92400e;
  --status-away: #eab308;
  --status-away-bg: #fefce8;
  --status-away-text: #854d0e;
  --status-offline: #6b7280;
  --status-offline-bg: #f3f4f6;
  --status-offline-text: #374151;

  /* Text Colors */
  --text-white: #ffffff;
  --text-black: #000000;

  /* Highlight Color */
  --highlight-color: #35556e;
  /* --highlight-color: #dbf12e; */

  /* Selection Highlight - Elegant Grey */
  --selection-bg: #6b7280; /* Elegant grey */
  --selection-text: #ffffff; /* White text on grey */

  /* Layout */
  --vline-offset: 500px;
  --vline-width: 1px;
  --vline-color: #e0e0e0;
  --container-w: 582px;
  --container-pad: 20px;

  /* Micro UX Timing */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 400ms;
  --transition-slower: 600ms;

  /* Easing functions for smooth animations */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Shadow system */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Prevent image dragging */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================
   CUSTOM CURSOR - Smooth Black Circle
   ============================================ */

/* Hide default cursor only when custom cursor is active */
body.custom-cursor-active,
body.custom-cursor-active * {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transition:
    opacity 0.2s ease,
    background-color 0.3s ease;
  will-change: transform;
  opacity: 0;
  mix-blend-mode: normal;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  cursor: none !important;
}

.custom-cursor-outer {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition:
    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
  will-change: transform;
  opacity: 0;
  backdrop-filter: blur(2px);
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  cursor: none !important;
}

@keyframes cursorFadeIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Cursor hover states - Simple and elegant */
body.cursor-hover .custom-cursor-outer {
  width: 50px;
  height: 50px;
  border-color: rgba(0, 0, 0, 0.4);
}

/* Special cursor for primary buttons - Subtle */
body.cursor-button .custom-cursor-outer {
  width: 55px;
  height: 55px;
  border-color: rgba(0, 0, 0, 0.5);
}

/* Cursor for images and project cards - Subtle */
body.cursor-view .custom-cursor-outer {
  width: 50px;
  height: 50px;
  border-color: rgba(0, 0, 0, 0.4);
}

/* Cursor click state - Subtle */
body.cursor-click .custom-cursor-outer {
  width: 30px;
  height: 30px;
  border-color: rgba(0, 0, 0, 0.6);
}

/* Hide cursor when leaving window */
body.cursor-hidden .custom-cursor,
body.cursor-hidden .custom-cursor-outer {
  opacity: 0;
}

/* Text elements - no special cursor effect, keep it simple and elegant */

/* Hide custom cursor on mobile/tablet and touch devices */
@media (max-width: 1024px) {
  body.custom-cursor-active,
  body.custom-cursor-active * {
    cursor: auto !important;
  }

  .custom-cursor,
  .custom-cursor-outer {
    display: none !important;
  }
}

/* Hide custom cursor for touch devices */
@media (hover: none) and (pointer: coarse) {
  body.custom-cursor-active,
  body.custom-cursor-active * {
    cursor: auto !important;
  }

  .custom-cursor,
  .custom-cursor-outer {
    display: none !important;
  }
}

*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

/* Phones: CSS smooth-scroll fights native touch inertia — keep momentum fluid */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }
}

/* Fewer promoted layers on phones — smoother scroll with many animated sections */
@media (max-width: 768px) {
  .reveal {
    will-change: auto;
  }

  .btn-secondary svg {
    will-change: auto;
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Switzer", sans-serif;
  color: var(--text-primary);
  margin: 0;
  gap: 32px;
  background:
    linear-gradient(var(--vline-color), var(--vline-color))
      calc(50% - var(--vline-offset)) 0 / var(--vline-width) 100% no-repeat,
    linear-gradient(var(--vline-color), var(--vline-color))
      calc(50% + var(--vline-offset)) 0 / var(--vline-width) 100% no-repeat,
    var(--background-white);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Optional: tighten vertical line offset on smaller viewports */
@media (max-width: 1024px) {
  :root {
    --vline-offset: 300px;
  }
}

section {
  width: 100%;
  padding: 46px 0;
  position: relative;
  z-index: 1;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  overflow-x: clip;
}

.content-wrapper {
  max-width: 530px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Focus visible for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--dark-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove blue highlight on focus (for smooth scroll navigation) */
*:focus {
  outline: none !important;
}

/* Keep accessibility for keyboard users */
*:focus-visible {
  outline: 2px solid var(--dark-accent) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove selection highlight on sections after scroll */
section:target {
  animation: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove all focus/selection effects on sections */
section {
  outline: none !important;
}

section:focus {
  outline: none !important;
}

/* Smooth focus removal after navigation */
.nav-icon-link:focus:not(:focus-visible) {
  outline: none;
}

/* Prevent selection box on any element after navigation */
*:target {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove user selection on navigation */
.nav-icon-link::selection {
  background: transparent;
}

.nav-icon-link::-moz-selection {
  background: transparent;
}

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Allow text selection for content */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
li,
td {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Allow selection in inputs */
input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ============================================
   TEXT SELECTION - Elegant Blue Highlight
   ============================================ */

/* Selection styles for all selectable text */
::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

/* Selection for headings - slightly darker grey */
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
  background-color: #4b5563; /* Slightly darker grey for headings */
  color: var(--selection-text);
}

h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
h4::-moz-selection,
h5::-moz-selection,
h6::-moz-selection {
  background-color: #4b5563;
  color: var(--selection-text);
}

/* Selection for inputs and textareas */
input::selection,
textarea::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

input::-moz-selection,
textarea::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

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

/* Image Loading Optimization - Ultra Fast */
img {
  /* Force hardware acceleration */
  transform: translateZ(0);
  /* Optimize rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

img[loading="lazy"] {
  background: var(--background-grey);
  transition: opacity 0.3s ease-out;
}

img.lazy-loading {
  opacity: 0.9;
}

img.lazy-loaded {
  opacity: 1;
  animation: imageFadeIn 0.3s ease-out;
}

/* Faster fade animation */
@keyframes imageFadeIn {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 1;
  }
}

/* Optimize hero image */
.profile-pic {
  image-rendering: auto;
  will-change: auto;
}

/* Optimize marquee images */
.marquee-item img {
  /* Reduce quality slightly for faster load */
  image-rendering: -webkit-optimize-contrast;
  /* Force GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* Prevent font synthesis and enforce loaded weights */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
textarea,
span {
  font-synthesis-weight: none;
  font-synthesis-style: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force font loading - prevent FOUT (Flash of Unstyled Text) */
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src:
    local("Kalam"),
    local("Kalam-Regular"),
    url(https://fonts.gstatic.com/s/kalam/v16/YA9Qr0Wd4kDdMtD6GgLLmCUItqGt.woff2)
      format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src:
    local("Kalam Bold"),
    local("Kalam-Bold"),
    url(https://fonts.gstatic.com/s/kalam/v16/YA9dr0Wd4kDdMuhWMibDszkB.woff2)
      format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

/* Tajawal — local Arabic font */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src:
    url("../fonts/tajawal/tajawal-extralight-webfont.woff2") format("woff2"),
    url("../fonts/tajawal/tajawal-extralight-webfont.woff") format("woff");
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    url("../fonts/tajawal/tajawal-light-webfont.woff2") format("woff2"),
    url("../fonts/tajawal/tajawal-light-webfont.woff") format("woff");
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("../fonts/tajawal/tajawal-regular-webfont.woff2") format("woff2"),
    url("../fonts/tajawal/tajawal-regular-webfont.woff") format("woff");
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    url("../fonts/tajawal/tajawal-medium-webfont.woff2") format("woff2"),
    url("../fonts/tajawal/tajawal-medium-webfont.woff") format("woff");
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    url("../fonts/tajawal/tajawal-medium-webfont.woff2") format("woff2"),
    url("../fonts/tajawal/tajawal-medium-webfont.woff") format("woff");
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("../fonts/tajawal/tajawal-bold-webfont.woff2") format("woff2"),
    url("../fonts/tajawal/tajawal-bold-webfont.woff") format("woff");
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src:
    url("../fonts/tajawal/tajawal-extrabold-webfont.woff2") format("woff2"),
    url("../fonts/tajawal/tajawal-extrabold-webfont.woff") format("woff");
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src:
    url("../fonts/tajawal/tajawal-black-webfont.woff2") format("woff2"),
    url("../fonts/tajawal/tajawal-black-webfont.woff") format("woff");
}

section {
  width: 100%;
}

@media (max-width: 768px) {
  body {
    padding: 20px 0;
  }
  .page-wrapper {
    gap: 30px;
  }
}

/* ============================================
   HEADER & NAVIGATION - Classy with Mobile Tab Bar
   ============================================ */

.header-container {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 46px 0;
  transition: padding var(--transition-base) var(--ease-out-expo);
}

.nav-wrapper {
  position: relative;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Same style as tool-item */
  background: var(--background-card);
  border: 1px solid var(--background-dark-grey);
  border-radius: 100px; /* Pill shape */
  padding: 14px 24px;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition:
    box-shadow var(--transition-base) var(--ease-out-expo),
    border-color var(--transition-base) var(--ease-out-expo),
    background-color var(--transition-base) var(--ease-out-expo);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 1px 4px rgba(0, 0, 0, 0.02);
}

/* Slightly stronger on scroll */
.scrolled .main-nav {
  background: var(--background-card);
  border-color: var(--background-dark-grey);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.03);
}

/* Mobile - Dynamic Tab Bar with Smooth Animation */
@media (max-width: 768px) {
  .header-container {
    position: fixed;
    left: 0;
    right: 0;
    padding: 16px;
    background: transparent;
    z-index: 100;
    /* Avoid will-change: transform here — keeps scroll compositing lighter on GPU */
    /* Start at top by default */
    top: 0;
    bottom: auto;
  }

  /* Tab bar at bottom */
  .header-container.tab-bar-mode {
    top: auto !important;
    bottom: 0 !important;
  }

  .header-container.scrolled {
    padding: 16px;
  }

  .nav-wrapper {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 56px;
    display: flex;
    align-items: center;
  }

  .main-nav {
    width: 100%;
    justify-content: space-around;
    padding: 10px 16px;
    border-radius: 28px;
    gap: 8px;
    /* Same style as tool-item for mobile */
    background: var(--background-card);
    border: 1px solid var(--background-dark-grey);
    /* backdrop-filter forces expensive repaints over scrolling content — solid bar on phones */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    min-height: 56px;
    display: flex;
    align-items: center;
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.04),
      0 1px 4px rgba(0, 0, 0, 0.02);
  }

  .scrolled .main-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Nav icons - consistent sizing */
  .main-nav .nav-icon-link {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-nav .nav-icon-link svg,
  .main-nav .nav-icon-link img {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    flex-shrink: 0;
  }

  .main-nav > * {
    flex-shrink: 0;
  }

  /* Hide elements on mobile */
  .main-nav .btn-primary,
  .main-nav .nav-divider {
    display: none;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  /* Spacing for dynamic tab bar */
  body {
    padding-top: 120px;
    padding-bottom: 88px; /* Space for bottom tab bar */
  }
  .body-project-page {
    padding-top: 0;
    /* Space for fixed bottom nav on project / all-projects pages (was 0 and hid content under bar on iOS) */
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  .header-container.project-page-header {
    pointer-events: none;
  }

  .header-container.project-page-header .nav-wrapper,
  .header-container.project-page-header .main-nav {
    pointer-events: auto;
  }
  /* Ensure sections are visible */
  section {
    position: relative;
    z-index: 1;
  }

  .hero-section {
    padding-top: 48px;
  }
}

/* Desktop adjustments */
@media (min-width: 769px) {
  body {
    padding-bottom: 0;
    padding-top: 0;
  }

  section {
    position: relative;
    z-index: 1;
  }

  .hero-section {
    padding-top: 0;
  }
}

.nav-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  transition:
    transform var(--transition-fast) var(--ease-out-expo),
    background-color var(--transition-base) var(--ease-out-expo);
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Micro interaction: subtle background on hover */
.nav-icon-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  opacity: 0;
  transition: opacity var(--transition-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .nav-icon-link:hover::before {
    opacity: 1;
  }

  .nav-icon-link:hover {
    transform: scale(1.05);
  }
}

.nav-icon-link:active {
  transform: scale(0.98);
  transition-duration: var(--transition-fast);
}

/* Lucide Icons Styling */
.nav-icon-link .nav-icon,
.nav-icon-link svg {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  opacity: 0.7;
  stroke-width: 2;
  transition:
    opacity var(--transition-base) var(--ease-out-expo),
    transform var(--transition-base) var(--ease-out-expo);
}

.nav-icon-link:hover .nav-icon,
.nav-icon-link:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

/* Click animation */
.nav-icon-link:active .nav-icon,
.nav-icon-link:active svg {
  transform: scale(0.9);
  transition-duration: 100ms;
}

/* Active state for current section */
.nav-icon-link.active {
  background-color: rgba(0, 0, 0, 0.04);
}

.nav-icon-link.active .nav-icon,
.nav-icon-link.active svg {
  opacity: 1;
}

.nav-divider {
  width: 1px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.08);
  margin: 0 4px;
}

.nav-button {
  background-color: var(--accent-dark);
  color: var(--background-primary);
  font-family: "Switzer", sans-serif;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 14px;
  transition: opacity 0.3s;
}

.nav-button:hover {
  opacity: 0.9;
}

/* Tab Bar Labels - Micro UX */
@media (max-width: 768px) {
  .nav-icon-link {
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 8px 12px;
    min-width: 60px;
  }

  .nav-icon-link.active {
    color: var(--dark-accent);
    background-color: rgba(0, 0, 0, 0.04);
  }

  .nav-icon-link img {
    margin-bottom: 2px;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 16px;
  }

  .nav-icon-link {
    min-width: 50px;
    padding: 6px 8px;
  }
}

/* CSS for section section:footer */
.site-footer {
  padding-top: 80px;
  padding-bottom: 60px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
}

.copyright-text {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.16px;
  text-align: center;
  margin: 0;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: transform 0.3s;
}

.footer-social-links a:hover {
  transform: scale(1.1);
}

.footer-social-links img {
  width: 20px;
  height: 20px;
}

/* Lucide in footer: not inside .nav-icon-link, so size/color must be set here */
.footer-social-links svg,
.footer-social-links .nav-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* ============================================
   BUTTON SYSTEM - Professional Micro UX
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font:
    600 15px/1 "Switzer",
    sans-serif;
  padding: 14px 24px;
  border-radius: 12px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform var(--transition-fast) var(--ease-out-expo),
    box-shadow var(--transition-base) var(--ease-out-expo),
    background-color var(--transition-base) var(--ease-out-expo),
    color var(--transition-base) var(--ease-out-expo);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Size variants */
.btn-small {
  padding: 10px 18px;
  font-size: 14px;
}

.btn-medium {
  padding: 14px 24px;
  font-size: 15px;
}

.btn-large {
  padding: 18px 32px;
  font-size: 16px;
}

/* Primary Button with enhanced micro interactions */
.btn-primary {
  background: var(--dark-accent);
  color: var(--text-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 12px;
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--transition-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  }

  .btn-primary:hover::before {
    opacity: 1;
  }

  .btn-secondary:hover {
    padding-inline-end: 36px;
  }

  .btn-secondary:hover::before {
    width: 100%;
  }

  .project-card:hover .btn-secondary {
    transform: scale(1.05);
    transform-origin: center;
  }

  .btn-ghost:hover {
    background: var(--background-grey);
    border-color: var(--border-color);
  }

  .btn:hover svg,
  .btn:hover .btn-icon {
    transform: translateX(3px);
  }

  .btn-secondary:hover svg {
    transform: translateX(12px);
  }

  .btn.icon-left:hover svg {
    transform: translateX(-3px);
  }
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  transition-duration: var(--transition-fast);
}

/* Secondary Button */
.btn-secondary {
  background: var(--dark-accent);
  color: var(--text-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  overflow: hidden;
  position: relative;
  transition:
    padding-inline-end 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wipe grows from inline-end = arrow side (right in LTR, left in RTL) */
.btn-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
  width: 0;
  background: rgba(255, 255, 255, 0.15);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}

.btn-secondary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  transition-duration: var(--transition-fast);
}

/* Ensure text and icon are above the overlay */
.btn-secondary span,
.btn-secondary svg {
  position: relative;
  z-index: 1;
}

/* Ghost/Tertiary Button */
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid transparent;
}

/* Icon animations */
.btn svg,
.btn .btn-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* Secondary button icon - heavier, smoother animation - synchronized with button */
.btn-secondary svg {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* Icon on left side */
.btn.icon-left svg {
  order: -1;
  margin-left: 0;
  margin-right: 6px;
}

/* Old status button styles removed - now using modern status indicator in index.css */

/* Full-width form button */
.btn-block {
  width: 100%;
  border-radius: 16px;
}

/* Loading state */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

/* Spinner */
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--text-white);
  animation: spin 0.9s linear infinite;
}

/* Light secondary: darker spinner ring */
.btn-secondary.is-loading::after {
  border-color: rgba(0, 0, 0, 0.25);
  border-top-color: #000;
}

/* Success */
.btn.is-success {
  background: var(--success-color) !important;
  color: var(--text-white) !important;
  pointer-events: none;
}

/* Send failure: calm red, no playful animation */
.btn.is-failed {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  color: var(--text-white) !important;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.35);
}

/* Spinner rotation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button Shake - Micro UX for validation */
.btn.shake {
  animation: btnShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes btnShake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateX(-8px);
  }
  20%,
  40%,
  60% {
    transform: translateX(8px);
  }
  80% {
    transform: translateX(-4px);
  }
  90% {
    transform: translateX(4px);
  }
}

/* ============================================
   Multi-click send guard (button states)
   ============================================ */

/* Phase 1 */
.btn.is-smoking {
  background: linear-gradient(180deg, #555 0%, #333 100%) !important;
  color: var(--text-white) !important;
  pointer-events: none;
  animation: thinking 0.8s ease-in-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes thinking {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Phase 2 */
.btn.is-confused {
  background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%) !important;
  color: var(--text-white) !important;
  pointer-events: none;
  animation: confusedWiggle 0.2s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);
}

@keyframes confusedWiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

/* Phase 3 */
.btn.is-burning {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  color: var(--text-white) !important;
  pointer-events: none;
  animation: pointUp 0.4s ease-in-out infinite;
  box-shadow: 0 4px 25px rgba(239, 68, 68, 0.5);
}

@keyframes pointUp {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Phase 4 */
.btn.is-recovering {
  background: linear-gradient(
    180deg,
    #666 0%,
    var(--dark-accent) 100%
  ) !important;
  color: var(--text-white) !important;
  pointer-events: none;
  animation: coolDown 1s ease-out forwards;
}

@keyframes coolDown {
  0% {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: var(--dark-accent);
  }
}

/* animations */

/* Default state for .reveal before intersection */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Visible state */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.delay-1 {
  transition-delay: 0.1s;
}
.delay-2 {
  transition-delay: 0.2s;
}
.delay-3 {
  transition-delay: 0.3s;
}

/* Image reveal: slight pop-in */
.reveal-pop {
  opacity: 0;
  transform: translateY(10px);
  filter: none;
  transition:
    opacity 0.52s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.52s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-pop.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-pop {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Fallback: ensure content is visible if JS fails */
body.no-js .reveal,
body.no-js .reveal-pop {
  opacity: 1 !important;
  transform: none !important;
}

/* === Unify container width & alignment across all sections === */
:root {
  --container-w: 582px;
  --container-pad: 20px;
}

/* Shared max-width for main content blocks */
.hero-content,
.about-content,
.projects-container,
.tools-container,
.contact-container {
  width: 100%;
  max-width: var(--container-w) !important;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Section headings: start-aligned */
.projects-title,
.about-heading,
.contact-heading {
  text-align: left !important;
}

/* Hero: left-align content (override centered defaults) */
.hero-section {
  text-align: left !important;
}
.hero-content {
  max-width: var(--container-w) !important;
}

/* ============================================
   ENHANCED INPUT FIELDS - Micro UX Details
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  transition: all var(--transition-base) var(--ease-out-expo);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: transparent;
  background-color: var(--background-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Smooth placeholder transition */
input::placeholder,
textarea::placeholder {
  opacity: 0.6;
  transition: opacity var(--transition-base) ease;
}

input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.4;
}

/* Custom Validation Styles - Apple-style subtle feedback */
/* Placeholder error styling - simple without red colors */
input.placeholder-error::placeholder,
textarea.placeholder-error::placeholder {
  opacity: 1 !important;
}

/* Success state removed - using text hints instead */

/* Inline validation error list */
.error-messages {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: none;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 0;
  overflow: hidden;
}

.error-messages.show {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
  max-height: 200px;
  animation: errorMessagesSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes errorMessagesSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 200px;
  }
}

.error-messages li {
  color: var(--error-color);
  font-size: 13px;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
  display: flex;
  align-items: flex-start;
  font-family: "Switzer", sans-serif;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-8px);
  animation: errorItemFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.error-messages.show li {
  animation-delay: calc(var(--item-index, 0) * 0.1s);
}

.error-messages li:nth-child(1) {
  --item-index: 0;
}

.error-messages li:nth-child(2) {
  --item-index: 1;
}

.error-messages li:nth-child(3) {
  --item-index: 2;
}

@keyframes errorItemFadeIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.error-messages li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-size: 18px;
  color: var(--error-color);
  font-weight: bold;
  line-height: 1.2;
  top: 0;
  animation: bulletPulse 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--item-index, 0) * 0.1s + 0.2s);
  opacity: 0;
  transform: scale(0);
}

@keyframes bulletPulse {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Error label */
.error-label {
  display: none;
  color: var(--error-color);
  font-size: 13px;
  margin-top: 6px;
  animation: fadeInDown 0.3s ease;
}

.error-label.show {
  display: block;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   ENHANCED ANIMATIONS
   ============================================ */

/* Smooth page load fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subtle scale on appear */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Floating animation for interactive elements */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 640px) {
  :root {
    --container-w: 100%;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
  }
}

/* ============================================
   LANGUAGE SWITCH - smooth fade (fallback when no View Transition)
   ============================================ */

[data-i18n] {
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

html.i18n-fade-active [data-i18n] {
  opacity: 0 !important;
  pointer-events: none;
}

@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.i18n-fade-active [data-i18n] {
    opacity: 0 !important;
  }

  [data-i18n] {
    transition-duration: 0.05s;
    transition-timing-function: linear;
  }
}

/* ============================================
   LANGUAGE TOGGLE BUTTON
   ============================================ */

.lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Tajawal", "Switzer", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 8px;
  transition:
    color 0.2s var(--ease-out-expo),
    background-color 0.2s var(--ease-out-expo),
    transform 0.16s var(--ease-out-expo);
  line-height: 1;
  letter-spacing: 0;
}

@media (hover: hover) and (pointer: fine) {
  .lang-toggle:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
  }
}

.lang-toggle:active {
  transform: scale(0.97);
}

/* ============================================
   RTL SUPPORT
   ============================================ */

html[dir="rtl"] body {
  font-family:
    "Tajawal",
    "Switzer",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

html[dir="rtl"] .hero-heading,
html[dir="rtl"] .hero-subheading,
html[dir="rtl"] .about-heading,
html[dir="rtl"] .about-description,
html[dir="rtl"] .projects-title,
html[dir="rtl"] .project-info h3,
html[dir="rtl"] .project-info p,
html[dir="rtl"] .quote-text,
html[dir="rtl"] .tools-heading h2,
html[dir="rtl"] .tools-heading p,
html[dir="rtl"] .contact-heading h2,
html[dir="rtl"] .contact-heading p,
html[dir="rtl"] .copyright-text,
html[dir="rtl"] .info-section h4,
html[dir="rtl"] .info-text,
html[dir="rtl"] .info-list li,
html[dir="rtl"] .section-heading,
html[dir="rtl"] .project-name,
html[dir="rtl"] .project-subtitle,
html[dir="rtl"] .award-line,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .go-back-link,
html[dir="rtl"] .page-title,
html[dir="rtl"] .coming-soon-info h3,
html[dir="rtl"] .coming-soon-info p,
html[dir="rtl"] .coming-soon-badge,
html[dir="rtl"] .view-all-projects-link,
html[dir="rtl"] .btn,
html[dir="rtl"] input,
html[dir="rtl"] textarea {
  font-family: "Tajawal", "Switzer", sans-serif;
}

/* RTL Text Alignment Overrides */
html[dir="rtl"] .contact-heading h2 {
  text-align: right;
}

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

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

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

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

html[dir="rtl"] .hero-subheading,
html[dir="rtl"] .about-description,
html[dir="rtl"] .contact-heading p {
  text-align: right;
}

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

html[dir="rtl"] .page-title,
html[dir="rtl"] .coming-soon-info {
  text-align: right;
}

html[dir="rtl"] .contact-form input,
html[dir="rtl"] .contact-form textarea {
  text-align: right;
  direction: rtl;
}

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

/* RTL quote highlight — beat .quote-section … specificity from index.css */
html[dir="rtl"] .quote-section .slanted-highlight::before {
  transform-origin: right center;
  transform: skew(8deg) scaleX(0);
}

html[dir="rtl"] .quote-section .slanted-highlight.is-highlighted::before {
  transform: skew(8deg) scaleX(1);
  opacity: 0.45;
}

/* RTL Directional Overrides */
html[dir="rtl"] .go-back-link svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .go-back-link:hover svg {
  transform: scaleX(-1) translateX(-2px);
}

html[dir="rtl"] .go-back-link:hover {
  transform: translateX(4px);
}

/* scaleX then translate in the value → translate applies first (see transforms spec); chevron moves visually left */
html[dir="rtl"] .btn-secondary svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .btn-secondary:hover svg {
  transform: scaleX(-1) translateX(12px);
}

html[dir="rtl"] .info-list li {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .info-list li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .project-card:hover .btn:not(.btn-secondary) {
  transform: translateX(-4px);
}

/* RTL Status Indicator */
html[dir="rtl"] .status-indicator {
  right: auto;
  left: 2px;
}

/* RTL Tooltip */
html[dir="rtl"] .status-tooltip {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 12px;
}

/* RTL Breadcrumb */
html[dir="rtl"] .breadcrumb {
  direction: rtl;
}

/* RTL Tools Grid - keep items in same visual order */
html[dir="rtl"] .tools-grid {
  direction: ltr;
}

/* RTL Marquee - keep LTR so animation doesn't break */
html[dir="rtl"] .portfolio-marquee-section {
  direction: ltr;
}

html[dir="rtl"] .marquee-content {
  direction: ltr;
}

/* RTL View All Projects Link */
html[dir="rtl"] .view-all-projects-link::after {
  left: auto;
  right: 0;
}

/* RTL: nudge icon on hover — exclude .btn-secondary (separate rule above; same specificity would override if listed later) */
html[dir="rtl"] .btn:not(.btn-secondary):hover svg,
html[dir="rtl"] .btn:not(.btn-secondary):hover .btn-icon {
  transform: translateX(-3px);
}

/* RTL Mobile Screens Grid */
html[dir="rtl"] .mobile-screens-grid {
  padding-left: 32px;
  padding-right: 100px;
}

@media (max-width: 1024px) {
  html[dir="rtl"] .mobile-screens-grid {
    padding-left: 24px;
    padding-right: 60px;
  }
}

@media (max-width: 768px) {
  html[dir="rtl"] .mobile-screens-grid {
    padding-left: calc(50vw - 178px);
    padding-right: calc(50vw - 178px);
  }
}

@media (max-width: 480px) {
  html[dir="rtl"] .mobile-screens-grid {
    padding-left: calc(50vw - 174px);
    padding-right: calc(50vw - 174px);
  }
}