/* Custom Styles & Overrides for Zaineddin Portfolio */
/* Powered by bexa-mobile, bexa-motion, tailwind-design-system, uiux-designer & 3d-web-experience skills */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  touch-action: manipulation;
}

:root[data-theme="dark"] {
  --bg-color: #050505;
  --card-bg: #0a0a0c;
  --text-color: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.6);
  --border-color: rgba(255, 255, 255, 0.15);
  --primary-color: #ffffff;
}

:root[data-theme="light"] {
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --text-color: #0f172a;
  --text-muted: #475569;
  --border-color: #cbd5e1;
  --primary-color: #0f172a;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px !important;
}

a, button, [role="button"], .copy-btn, .cmd-chip, .pipeline-node {
  cursor: pointer;
  touch-action: manipulation;
}

/* 120 FPS / 120Hz Mobile GPU Hardware Compositor Acceleration */
.tilt-card, .magnetic-btn, #mobile-bottom-nav, #webgl-canvas {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Touch active scale effect for mobile (bexa-mobile skill) */
a:active, button:active, .cmd-chip:active, .pipeline-node:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* 3D WebGL Canvas Backdrop */
#webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* Light Mode Overrides for High Contrast & Visual Excellence */
[data-theme="light"] body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

[data-theme="light"] .bg-\[\#050505\],
[data-theme="light"] .bg-black {
  background-color: #f8fafc !important;
}

/* Card Containers */
[data-theme="light"] .bg-\[\#0a0a0c\],
[data-theme="light"] .bg-\[\#0c0c0e\] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
}

/* Terminal Card Exception: Keep Authentic Dark Terminal Styling */
[data-theme="light"] #terminal-card {
  background-color: #0c0c0e !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-theme="light"] #terminal-card .text-white {
  color: #ffffff !important;
}
[data-theme="light"] #terminal-card .text-white\/60 {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Hero Heading ZAINEDDIN Gradient Override for Light Mode */
[data-theme="light"] h1 {
  background-image: linear-gradient(to bottom, #0f172a, #1e293b, #475569) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

[data-theme="light"] #typing-text {
  color: #0f172a !important;
}

[data-theme="light"] .typing-cursor::after {
  color: #0f172a !important;
}

/* General Typography in Light Mode */
[data-theme="light"] .text-white {
  color: #0f172a !important;
}
[data-theme="light"] .text-white\/90,
[data-theme="light"] .text-white\/80,
[data-theme="light"] .text-white\/70,
[data-theme="light"] .text-white\/60 {
  color: #334155 !important;
}
[data-theme="light"] .text-white\/40,
[data-theme="light"] .text-white\/50 {
  color: #64748b !important;
}

/* Borders */
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/15,
[data-theme="light"] .border-white\/20 {
  border-color: #cbd5e1 !important;
}

/* Primary Capsule Buttons (In dark mode bg-white text-black; in light mode bg-slate-900 text-white) */
[data-theme="light"] .bg-white.text-black {
  background-color: #0f172a !important;
  color: #ffffff !important;
}
[data-theme="light"] .bg-white.text-black svg {
  color: #ffffff !important;
}

/* Secondary Buttons (In dark mode bg-black/70 border-white/20 text-white) */
[data-theme="light"] .bg-black\/70 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Background Opacity Overrides */
[data-theme="light"] .bg-black\/60,
[data-theme="light"] .bg-black\/85,
[data-theme="light"] .bg-black\/40,
[data-theme="light"] .bg-black\/50 {
  background-color: #f1f5f9 !important;
}

/* Input Fields in Light Mode */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] textarea {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}

/* Navigation Bars & Pills in Light Mode */
[data-theme="light"] #header-nav,
[data-theme="light"] #mobile-bottom-nav {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .nav-pill {
  color: #475569 !important;
}
[data-theme="light"] .nav-pill.active {
  background-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}
[data-theme="light"] .nav-pill.active svg {
  color: #ffffff !important;
}

/* 3D Card Tilt Effects + Mouse Cursor Dynamic Spotlight Glow (bexa-motion skill) */
.tilt-card {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

@media (min-width: 769px) {
  .tilt-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.08), transparent 80%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .tilt-card:hover::after {
    opacity: 1;
  }
  .tilt-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px -15px rgba(255, 255, 255, 0.12);
  }
}

/* Magnetic Button Animation (bexa-motion skill) */
@media (min-width: 769px) {
  .magnetic-btn {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
}

/* Typing Cursor */
.typing-cursor::after {
  content: '|';
  animation: blink 1s infinite;
  color: #ffffff;
  margin-left: 2px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Animated Mobile Swipe Tutorial Gesture */
@keyframes swipeGesture {
  0% { transform: translateX(-45px); }
  50% { transform: translateX(45px); }
  100% { transform: translateX(-45px); }
}

.animate-swipe {
  animation: swipeGesture 2s ease-in-out infinite;
}

/* Metric Box Responsive Title (Ensures EGX30/70/100 fits 100% cleanly inside mobile boxes) */
.metric-box-title {
  font-size: clamp(0.72rem, 3.5vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav Pill Active Glow */
.nav-pill {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.nav-pill:active {
  transform: scale(0.92);
}
.nav-pill.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Pipeline Node Hover Glow */
.pipeline-node.active {
  border-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Mobile Constraints */
@media (max-width: 768px) {
  #view-contact {
    min-height: 100svh;
    padding-top: 4rem;
    padding-bottom: 6rem;
  }
}

/* Animated Gesture Swipe Tutorial for Breakout Paddle */
@keyframes swipeGesture {
  0% {
    transform: translateX(-40px);
  }
  50% {
    transform: translateX(40px);
  }
  100% {
    transform: translateX(-40px);
  }
}

.animate-swipe {
  animation: swipeGesture 2.2s ease-in-out infinite;
}