/* =========================================================
   Badr Aadou — Portfolio | style.css
   Theme: Futuristic Dark Mode + Glassmorphism + Neon Accents
   ========================================================= */

/* ── 0. CSS Custom Properties ─────────────────────────────── */
:root {
  --clr-bg:          #050811;
  --clr-bg-2:        #0a0f1e;
  --clr-surface:     rgba(255,255,255,.04);
  --clr-surface-alt: rgba(255,255,255,.07);
  --clr-border:      rgba(255,255,255,.10);
  --clr-cyan:        #00f5ff;
  --clr-purple:      #a855f7;
  --clr-pink:        #ec4899;
  --clr-green:       #22d3ee;
  --glow-cyan:   0 0 18px rgba(0,245,255,.45), 0 0 40px rgba(0,245,255,.15);
  --glow-purple: 0 0 18px rgba(168,85,247,.45), 0 0 40px rgba(168,85,247,.15);
  --glow-pink:   0 0 18px rgba(236,72,153,.40);
  --ff-body:   'Inter', system-ui, sans-serif;
  --ff-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  900;
  --sp-xs: .5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 7rem;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 9999px;
  --t-fast: 150ms ease;
  --t-base: 300ms ease;
  --t-slow: 600ms cubic-bezier(.22,.61,.36,1);
  --glass-bg:     rgba(255,255,255,.05);
  --glass-blur:   16px;
  --glass-border: 1px solid rgba(255,255,255,.10);
}

/* ── 1. Reset / Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--ff-body);
  background: var(--clr-bg);
  color: #e2e8f0;
  line-height: 1.7;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ── 2. Typography ────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--clr-cyan) 0%, var(--clr-purple) 55%, var(--clr-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: var(--fw-black);
  letter-spacing: -.02em;
  margin-bottom: var(--sp-md);
}
.section-subtitle {
  font-size: 1.1rem;
  color: rgba(226,232,240,.6);
  margin-bottom: var(--sp-lg);
  max-width: 600px;
}

/* ── 3. Layout ────────────────────────────────────────────── */
.container { width: min(1200px, 100% - 2rem); margin-inline: auto; }
.section { padding-block: var(--sp-xl); position: relative; z-index: 1; }

/* ── 4. Glassmorphism ─────────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius-md);
  transition: transform var(--t-slow), box-shadow var(--t-base), border-color var(--t-base);
}
.glass-card:hover {
  border-color: rgba(0,245,255,.30);
  box-shadow: var(--glow-cyan);
}

/* ── 5. Navigation ────────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1rem var(--sp-md);
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--t-base), box-shadow var(--t-base);
}
#navbar.scrolled {
  background: rgba(5,8,17,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,245,255,.12);
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.nav-brand {
  font-family: var(--ff-mono);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
}
.nav-brand span { color: var(--clr-cyan); }
.nav-links { display: flex; gap: var(--sp-md); align-items: center; }
.nav-links a {
  font-size: .9rem; font-weight: var(--fw-medium);
  color: rgba(226,232,240,.75);
  letter-spacing: .03em; padding: .25rem 0;
  position: relative; transition: color var(--t-fast);
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px; background: var(--clr-cyan);
  border-radius: var(--radius-full); transition: width var(--t-base);
}
.nav-links a:hover { color: var(--clr-cyan); }
.nav-links a:hover::after { width: 100%; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--clr-cyan); border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}

/* ── 6. Hero ──────────────────────────────────────────────── */
#hero {
  min-height: 100dvh; display: grid; place-items: center;
  text-align: center; padding-block: 120px var(--sp-xl);
  position: relative; overflow: hidden;
}
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  pointer-events: none; animation: orb-pulse 8s ease-in-out infinite;
}
.hero-orb--1 { width:500px; height:500px; background:radial-gradient(circle,rgba(0,245,255,.18) 0%,transparent 70%); top:-100px; right:-100px; animation-delay:0s; }
.hero-orb--2 { width:400px; height:400px; background:radial-gradient(circle,rgba(168,85,247,.15) 0%,transparent 70%); bottom:-50px; left:-80px; animation-delay:-4s; }
.hero-orb--3 { width:300px; height:300px; background:radial-gradient(circle,rgba(236,72,153,.12) 0%,transparent 70%); top:40%; left:50%; transform:translateX(-50%); animation-delay:-2s; }
@keyframes orb-pulse { 0%,100%{opacity:.8;transform:scale(1);} 50%{opacity:1;transform:scale(1.1);} }
.hero-orb--3 { animation: orb-pulse-centered 8s ease-in-out infinite; animation-delay:-2s; }
@keyframes orb-pulse-centered { 0%,100%{opacity:.8;transform:translateX(-50%) scale(1);} 50%{opacity:1;transform:translateX(-50%) scale(1.1);} }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-mono); font-size: .85rem; color: var(--clr-cyan);
  background: rgba(0,245,255,.08); border: 1px solid rgba(0,245,255,.25);
  border-radius: var(--radius-full); padding: .4rem 1rem;
  margin-bottom: 1.5rem; letter-spacing: .05em;
}
.hero-eyebrow::before {
  content: ''; width: 8px; height: 8px; background: var(--clr-cyan);
  border-radius: 50%; box-shadow: var(--glow-cyan);
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.2;} }

.hero-title {
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight: var(--fw-black); line-height: 1.05;
  letter-spacing: -.03em; margin-bottom: 1.5rem;
}
.hero-title span { display: block; }
.hero-bio {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(226,232,240,.65); max-width: 700px;
  margin-inline: auto; margin-bottom: var(--sp-md); line-height: 1.8;
}
.hero-cta {
  display: flex; gap: 1rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: var(--sp-lg);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: var(--radius-sm);
  font-weight: var(--fw-medium); font-size: .95rem;
  transition: transform var(--t-base), box-shadow var(--t-base);
  letter-spacing: .02em;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--clr-cyan), var(--clr-purple)); color: #050811; font-weight: var(--fw-bold); }
.btn-primary:hover { box-shadow: var(--glow-cyan); }
.btn-outline { border: 1px solid rgba(0,245,255,.40); color: var(--clr-cyan); background: rgba(0,245,255,.05); }
.btn-outline:hover { border-color: var(--clr-cyan); background: rgba(0,245,255,.12); box-shadow: var(--glow-cyan); }

.scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(226,232,240,.4); font-size: .75rem; font-family: var(--ff-mono);
  letter-spacing: .1em; text-transform: uppercase;
  animation: float 2s ease-in-out infinite;
}
.scroll-indicator::after {
  content: ''; width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--clr-cyan), transparent);
}
@keyframes float { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(6px);} }

/* ── 7. Tech Stack ────────────────────────────────────────── */
.tech-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.tech-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.2rem; border-radius: var(--radius-full);
  font-family: var(--ff-mono); font-size: .82rem; font-weight: var(--fw-medium);
  letter-spacing: .03em; border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04); transition: all var(--t-base); cursor: default;
}
.tech-badge:hover {
  border-color: var(--clr-cyan); background: rgba(0,245,255,.08);
  color: var(--clr-cyan); box-shadow: var(--glow-cyan); transform: translateY(-3px);
}
.tech-badge .badge-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── 8. Projects Grid ─────────────────────────────────────── */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; }
.project-card { border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.card-inner {
  height: 100%; display: flex; flex-direction: column;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-slow);
}
.project-card:hover .card-inner { box-shadow: var(--glow-cyan); border-color: rgba(0,245,255,.30); }
.card-banner { height: 200px; position: relative; overflow: hidden; }
.card-banner-bg { width: 100%; height: 100%; transition: transform 400ms ease; object-fit: cover; }
.project-card:hover .card-banner-bg { transform: scale(1.06); }
.card-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(5,8,17,.95) 100%); }
.card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.card-tag { font-family: var(--ff-mono); font-size: .72rem; color: var(--clr-cyan); text-transform: uppercase; letter-spacing: .08em; }
.card-title { font-size: 1.2rem; font-weight: var(--fw-bold); line-height: 1.3; }
.card-desc { font-size: .9rem; color: rgba(226,232,240,.65); line-height: 1.7; flex: 1; }
.card-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.pill { font-size: .72rem; padding: .2rem .65rem; border-radius: var(--radius-full); background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.25); color: var(--clr-purple); font-family: var(--ff-mono); }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,.07); display: flex; gap: .75rem; align-items: center; }
.card-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: var(--fw-medium); color: var(--clr-cyan); transition: gap var(--t-fast); }
.card-link:hover { gap: .65rem; }

/* ── 9. Contact Section ───────────────────────────────────── */
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-info h3 { font-size: 1.5rem; font-weight: var(--fw-bold); margin-bottom: 1rem; }
.contact-info p { color: rgba(226,232,240,.65); line-height: 1.8; margin-bottom: 1.5rem; }
.contact-links { display: flex; flex-direction: column; gap: .75rem; }
.contact-link-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  font-size: .9rem; color: rgba(226,232,240,.75); transition: all var(--t-base);
}
.contact-link-item:hover { border-color: rgba(0,245,255,.30); color: var(--clr-cyan); background: rgba(0,245,255,.06); transform: translateX(4px); }
.contact-link-item .icon { width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-sm); background:rgba(0,245,255,.10); color:var(--clr-cyan); flex-shrink:0; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .82rem; font-weight: var(--fw-medium); color: rgba(226,232,240,.7); letter-spacing: .03em; font-family: var(--ff-mono); }
.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-sm); padding: .75rem 1rem;
  color: #e2e8f0; font-family: var(--ff-body); font-size: .95rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  width: 100%; resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none; border-color: var(--clr-cyan);
  background: rgba(0,245,255,.04); box-shadow: 0 0 0 3px rgba(0,245,255,.12);
}
.form-group input:user-valid,.form-group textarea:user-valid { border-color: var(--clr-green); }
.form-group input:user-invalid,.form-group textarea:user-invalid { border-color: var(--clr-pink); }
.form-group textarea { min-height: 130px; }
.form-group select { appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f5ff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:2.5rem; }
.form-group select option { background:#0a0f1e; color:#e2e8f0; }
.btn-submit {
  position: relative; overflow: hidden; padding: .85rem 2rem;
  font-size: 1rem; font-weight: var(--fw-bold); border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--clr-cyan), var(--clr-purple));
  color: #050811; letter-spacing: .04em;
  transition: transform var(--t-base), box-shadow var(--t-base); align-self: flex-start;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: var(--glow-purple); }
.btn-submit::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,transparent,rgba(255,255,255,.18),transparent); transform:translateX(-100%); transition:transform 500ms ease; }
.btn-submit:hover::after { transform:translateX(100%); }
#form-response { border-radius:var(--radius-sm); padding:.75rem 1rem; font-size:.9rem; display:none; }
#form-response.success { display:block; background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.30); color:var(--clr-green); }
#form-response.error   { display:block; background:rgba(236,72,153,.10); border:1px solid rgba(236,72,153,.30); color:var(--clr-pink); }

/* ── 10. Stats ────────────────────────────────────────────── */
.stats-row { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; padding-block:var(--sp-md); }
.stat-item { text-align:center; padding:1.5rem 2rem; border-radius:var(--radius-md); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); flex:1; min-width:150px; transition:border-color var(--t-base),transform var(--t-base); }
.stat-item:hover { border-color:rgba(0,245,255,.25); transform:translateY(-4px); }
.stat-number { font-size:2.5rem; font-weight:var(--fw-black); font-family:var(--ff-mono); line-height:1; margin-bottom:.25rem; }
.stat-label { font-size:.82rem; color:rgba(226,232,240,.55); letter-spacing:.04em; text-transform:uppercase; }

/* ── 11. Footer ───────────────────────────────────────────── */
#footer { border-top:1px solid rgba(255,255,255,.06); padding-block:var(--sp-md); position:relative; z-index:1; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:.85rem; color:rgba(226,232,240,.4); font-family:var(--ff-mono); }
.footer-copy span { color:var(--clr-cyan); }
.footer-socials { display:flex; gap:.75rem; }
.social-btn { width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.10); color:rgba(226,232,240,.6); font-size:1rem; transition:all var(--t-base); }
.social-btn:hover { border-color:var(--clr-cyan); color:var(--clr-cyan); box-shadow:var(--glow-cyan); transform:translateY(-2px); }

/* ── 12. Scroll Reveal ────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity var(--t-slow), transform var(--t-slow); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:100ms; }
.reveal-delay-2 { transition-delay:200ms; }
.reveal-delay-3 { transition-delay:300ms; }
.reveal-delay-4 { transition-delay:400ms; }

/* ── 13. Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar       { width:6px; }
::-webkit-scrollbar-track { background:var(--clr-bg); }
::-webkit-scrollbar-thumb { background:linear-gradient(to bottom,var(--clr-cyan),var(--clr-purple)); border-radius:3px; }

/* ── 14. Page Header ──────────────────────────────────────── */
.page-header { padding-top:calc(var(--sp-xl) + 80px); padding-bottom:var(--sp-md); text-align:center; }
.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:var(--sp-md); }
.filter-btn { padding:.45rem 1.1rem; border-radius:var(--radius-full); font-size:.82rem; font-family:var(--ff-mono); letter-spacing:.03em; border:1px solid rgba(255,255,255,.12); color:rgba(226,232,240,.65); background:rgba(255,255,255,.04); transition:all var(--t-base); }
.filter-btn:hover,.filter-btn.active { border-color:var(--clr-cyan); color:var(--clr-cyan); background:rgba(0,245,255,.08); }
.alert { padding:.9rem 1.25rem; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:1rem; }
.alert-success { background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25); color:var(--clr-green); }
.alert-error { background:rgba(236,72,153,.08); border:1px solid rgba(236,72,153,.25); color:var(--clr-pink); }

/* ── 15. Responsive ───────────────────────────────────────── */
@media (max-width:900px) { .contact-wrapper { grid-template-columns:1fr; } }
@media (max-width:768px) {
  .nav-links { display:none; position:fixed; inset:0; flex-direction:column; justify-content:center; background:rgba(5,8,17,.97); backdrop-filter:blur(20px); font-size:1.2rem; gap:2rem; z-index:999; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; z-index:1001; }
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .projects-grid { grid-template-columns:1fr; }
  .stats-row .stat-item { min-width:120px; }
}
@media (max-width:480px) {
  :root { --sp-xl:4rem; }
  .hero-cta { flex-direction:column; align-items:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero-orb,.scroll-indicator { animation:none; }
}