/* ================================================
   OMER TITO — PORTFOLIO  |  styles.css
   ================================================ */

/* ---------- VARIABLES ---------- */
:root {
  --bg:       #000000;
  --bg2:      #080808;
  --bg3:      #0e0e0e;
  --card:     #0b0b0b;
  --border:   #1c1c28;
  --bglw:     rgba(205,208,222,.05);

  --cyan:     #c7cad9;
  --cyan-dim: rgba(199,202,217,.12);
  --cyan-glow:0 0 14px rgba(199,202,217,.22), 0 0 34px rgba(199,202,217,.08);

  --purple:   #5e5f78;
  --pur-dim:  rgba(94,95,120,.18);

  --warm:      #e0935f;
  --warm-dim:  rgba(224,147,95,.18);
  --warm-glow: 0 0 14px rgba(224,147,95,.25), 0 0 34px rgba(224,147,95,.1);

  --green:    #00ff99;
  --white:    #ffffff;
  --muted:    #666677;
  --dim:      #333344;

  --mist:     rgba(180,184,202,.06);

  --fh: 'Space Grotesk', sans-serif;
  --fb: 'Exo 2', sans-serif;

  --nav-h:    68px;
  --nav-w:    88px;
  --ease:     cubic-bezier(.4,0,.2,1);
  --t:        .3s;
  --ts:       .6s;
  --radius:   6px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar { display:none; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--fb);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
input, textarea, .ci-item a, .ci-item p {
  user-select: text; -webkit-user-select: text; -ms-user-select: text;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button, input, textarea { font-family:inherit; border:none; background:none; outline:none; }
button { cursor:none; }

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
  position: fixed; top:0; right:0; width:3px; z-index:9999;
  background: linear-gradient(180deg, var(--cyan), var(--purple));
  height: 0%;
  box-shadow: 0 0 8px var(--cyan);
  transition: height .08s linear;
  pointer-events: none;
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor-dot {
  position: fixed; width:5px; height:5px; border-radius:50%;
  background: var(--cyan); pointer-events:none; z-index:100010;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 5px rgba(199,202,217,.6);
  transition: opacity .2s;
}
.cursor-ring {
  position: fixed; width:24px; height:24px; border-radius:50%;
  border: 1px solid rgba(199,202,217,.28); pointer-events:none; z-index:100009;
  transform: translate(-50%,-50%);
  transition: width .18s var(--ease), height .18s var(--ease),
              border-color .18s, opacity .18s;
}
.cursor-ring.active { width:30px; height:30px; border-color:rgba(199,202,217,.55); opacity:.8; }

.cursor-dot.weapon-lock { background:#ff2d2d; box-shadow:0 0 8px rgba(255,45,45,.8); }
.cursor-ring.weapon-lock {
  width:38px; height:38px;
  border-color:#ff2d2d; box-shadow:0 0 14px rgba(255,45,45,.55);
  animation: weaponBlink .5s steps(2,start) infinite;
}
.cursor-ring.weapon-lock::before,
.cursor-ring.weapon-lock::after {
  content:''; position:absolute; left:50%; top:50%; background:#ff2d2d;
  box-shadow:0 0 6px rgba(255,45,45,.8);
}
.cursor-ring.weapon-lock::before { width:1px; height:54px; transform:translate(-50%,-50%); }
.cursor-ring.weapon-lock::after  { width:54px; height:1px; transform:translate(-50%,-50%); }
@keyframes weaponBlink { 0%,49% { opacity:1; } 50%,100% { opacity:.2; } }

/* ---------- PRELOADER ---------- */
body.loading { overflow:hidden; }

#preloader {
  position:fixed; inset:0; z-index:100000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.7rem; background:var(--bg); overflow:hidden;
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
#preloader::before {
  content:''; position:absolute; inset:-10%; pointer-events:none;
  background: radial-gradient(ellipse 50% 40% at 50% 45%, var(--mist) 0%, transparent 70%);
  filter: blur(20px);
  animation: mistDrift 22s ease-in-out infinite;
}
#preloader.exit {
  opacity:0; transform:scale(1.06); filter:blur(16px);
  pointer-events:none;
}

.pl-ring-wrap { position:relative; width:118px; height:118px; display:flex; align-items:center; justify-content:center; }
.pl-ring { position:absolute; inset:0; border-radius:50%; border:1px solid var(--border); }
.pl-ring::before {
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid transparent; border-top-color:var(--cyan); border-right-color:var(--warm);
  box-shadow: 0 0 18px rgba(199,202,217,.3), 0 0 18px rgba(224,147,95,.2);
  animation: plSpin 1.5s linear infinite;
}
@keyframes plSpin { to { transform:rotate(360deg); } }

.pl-mark {
  font-family:var(--fh); font-size:1.5rem; font-weight:600; letter-spacing:3px;
  color:var(--cyan); opacity:.2;
  animation: plPulse 2s var(--ease) forwards;
}
@keyframes plPulse {
  0%   { opacity:.18; text-shadow:0 0 0 rgba(199,202,217,0); }
  55%  { opacity:.65; text-shadow:0 0 16px rgba(199,202,217,.3); }
  100% { opacity:1;   text-shadow:0 0 26px rgba(199,202,217,.5), 0 0 30px rgba(224,147,95,.35), 0 0 48px rgba(199,202,217,.2); }
}

.pl-bar { width:180px; height:1px; background:var(--border); position:relative; overflow:hidden; }
.pl-bar-fill {
  position:absolute; top:0; left:0; height:100%; width:100%;
  background:linear-gradient(90deg, var(--cyan), var(--warm));
  box-shadow:0 0 10px var(--warm);
  transform-origin:left; transform:scaleX(0);
  animation: plFill 1.85s var(--ease) forwards;
}
@keyframes plFill { to { transform:scaleX(1); } }

.pl-status {
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--fh); font-size:.62rem; letter-spacing:3.5px; text-transform:uppercase;
  color:var(--muted); opacity:0;
  animation: fadeUp .6s .2s forwards;
}
.pl-pct { color:var(--cyan); min-width:2.2ch; text-align:right; }

/* ---------- NAVBAR ---------- */
#navbar {
  position: fixed; top:0; left:0; right:0; height:var(--nav-h);
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 5%; z-index:1000;
  opacity:0; transform:scale(.95);
  transition: background var(--t) var(--ease), backdrop-filter var(--t);
}
#navbar.unfold { animation: navFadeScale .9s .1s var(--ease) forwards; }
@keyframes navFadeScale {
  from { opacity:0; transform:scale(.95); }
  to   { opacity:1; transform:scale(1);   }
}
#navbar.scrolled {
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-links { display:flex; gap:2.5rem; }
.nav-links a {
  font-size:.78rem; letter-spacing:2.5px; text-transform:uppercase;
  color: var(--muted); position:relative; transition:color var(--t);
}
.nav-links a::after {
  content:''; position:absolute; bottom:-5px; left:0; width:0; height:1px;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  transition: width var(--t) var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--cyan); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

.nav-controls { display:flex; align-items:center; gap:1.2rem; }
.lang-toggle {
  position:fixed; top:calc(var(--nav-h) / 2); right:1.5rem; transform:translateY(-50%);
  z-index:1001;
  font-family:var(--fh); font-size:.72rem; letter-spacing:1.5px;
  color:var(--muted); border:1px solid var(--border);
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px);
  padding:6px 16px; border-radius:var(--radius);
  transition: color var(--t), border-color var(--t), box-shadow var(--t);
  cursor:none;
}
.lang-toggle:hover { color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 16px var(--cyan-dim); }
@media (max-width:768px) { .lang-toggle { right:4.6rem; } }

.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:none; }
.nav-hamburger span {
  display:block; width:22px; height:2px; background:var(--muted);
  transition: transform var(--t), opacity var(--t), background var(--t);
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:var(--cyan); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:var(--cyan); }

/* ---------- NAVBAR — VERTICAL SIDEBAR (desktop) ---------- */
@media (min-width:769px) {
  body { padding-left: var(--nav-w); }

  #navbar {
    top:0; left:0; right:auto; bottom:0;
    height:auto; width:var(--nav-w);
    flex-direction:column; justify-content:space-between;
    padding: 2.6rem 0;
    border-right: 1px solid transparent;
    overflow-y:auto; scrollbar-width:none;
    transition: background var(--t) var(--ease), backdrop-filter var(--t), border-color var(--t);
  }
  #navbar::-webkit-scrollbar { display:none; }
  #navbar.scrolled { border-bottom:none; border-right:1px solid var(--border); }

  .nav-links { flex-direction:column; gap:2.4rem; }
  .nav-links a { writing-mode:horizontal-tb; }
  .nav-links a::after { left:50%; right:auto; transform:translateX(-50%); }

  .nav-controls { flex-direction:column; gap:1.1rem; }

  .hero-content { padding-top:2rem; }
}

/* ---------- HERO ---------- */
#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#heroCanvas {
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
}
.hero-scanlines {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.12) 3px, rgba(0,0,0,.12) 4px
  );
}
.hero-mist {
  position:absolute; inset:-10%; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 35% at 25% 30%, var(--mist) 0%, transparent 65%),
    radial-gradient(ellipse 45% 30% at 75% 70%, rgba(94,95,120,.07) 0%, transparent 65%);
  filter: blur(20px);
  animation: mistDrift 22s ease-in-out infinite;
}
@keyframes mistDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(2%,-2%) scale(1.05); }
}
.hero-content {
  position:relative; z-index:2; text-align:center;
  padding: calc(var(--nav-h) + 2rem) 2rem 4rem;
  max-width:960px; margin:0 auto;
}
.hero-eyebrow {
  font-family:var(--fh); font-size:.68rem; letter-spacing:4px; font-weight:500;
  color:var(--cyan); margin-bottom:1.8rem;
  opacity:0;
}
.hero-name {
  font-family:'Orbitron', var(--fh); font-size:clamp(2.8rem,9vw,6.6rem);
  font-weight:900; line-height:1.1; letter-spacing:1px;
  margin-bottom:1.8rem;
  opacity:0;
  position:relative;
  background-image: linear-gradient(90deg, var(--cyan), var(--warm), var(--purple), var(--cyan));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color:transparent; -webkit-text-fill-color: transparent;
}
@keyframes gradientShift { to { background-position: -300% 0; } }

/* SHADOWY MIST DRIFT (replaces hard RGB glitch with a soft fogged double-exposure) */
.glitch::before, .glitch::after {
  content: attr(data-text);
  position:absolute; top:0; left:0; width:100%; height:100%;
  font-family:inherit; font-weight:inherit; font-size:inherit; letter-spacing:inherit;
  filter: blur(7px); pointer-events:none; opacity:0;
}
.glitch::before {
  color:var(--cyan);
  animation: mistA 7s ease-in-out infinite;
}
.glitch::after {
  color:var(--purple);
  animation: mistB 8.5s ease-in-out infinite;
}
@keyframes mistA {
  0%,100% { opacity:0;   transform:translate(0,0); }
  45%     { opacity:.3;  transform:translate(-7px,-3px); }
  60%     { opacity:.15; transform:translate(5px,2px); }
}
@keyframes mistB {
  0%,100% { opacity:0;   transform:translate(0,0); }
  40%     { opacity:.22; transform:translate(6px,3px); }
  65%     { opacity:.12; transform:translate(-4px,-2px); }
}

.hero-sub {
  font-size:clamp(1rem,2.5vw,1.35rem); color:var(--muted);
  letter-spacing:2px; margin-bottom:1.4rem;
  opacity:0;
}
.typewriter { color:var(--warm); font-weight:600; }
.typewriter::after { content:'|'; animation:blink .65s step-end infinite; }
@keyframes blink { 50%{opacity:0} }

.hero-desc {
  font-size:1rem; color:var(--muted); line-height:1.9;
  max-width:560px; margin:0 auto 2.8rem;
  opacity:0;
}
.hero-cta {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  opacity:0;
}

/* Slow, elegant unfold — only plays once the preloader curtain lifts */
#hero.unfold .hero-eyebrow { animation: fadeUpBlur 1.1s .15s   var(--ease) forwards; }
#hero.unfold .hero-name    {
  animation: fadeUpBlur 1.3s .55s var(--ease) forwards,
             gradientShift 4s linear forwards;
}
#hero.unfold .hero-sub     { animation: fadeUpBlur 1.1s 1.05s  var(--ease) forwards; }
#hero.unfold .hero-desc    { animation: fadeUpBlur 1.1s 1.45s  var(--ease) forwards; }
#hero.unfold .hero-cta     { animation: fadeUpBlur 1.1s 1.85s  var(--ease) forwards; }
#hero.unfold .scroll-hint  { animation: fadeUp     .9s 2.4s    var(--ease) forwards; }

@keyframes fadeUpBlur {
  from { opacity:0; transform:translateY(34px); filter:blur(10px); }
  to   { opacity:1; transform:translateY(0);    filter:blur(0);    }
}

.scroll-hint {
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2;
  opacity:0;
}
.scroll-mouse {
  width:24px; height:40px; border:2px solid var(--border);
  border-radius:12px; position:relative; margin:0 auto;
}
.scroll-wheel {
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation: scrollDown 2s infinite;
}
@keyframes scrollDown {
  0%   { top:6px; opacity:1; }
  100% { top:22px; opacity:0; }
}
.scroll-arrow {
  margin-top:.6rem; text-align:center;
  color:var(--cyan); font-size:.8rem;
  animation: arrowBounce 2s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%,100% { transform:translateY(0);   opacity:.5; }
  50%     { transform:translateY(5px); opacity:1;  }
}

/* ---------- EASTER EGG: SPACESHIP ---------- */
.spaceship {
  position:absolute; z-index:2; font-size:1.6rem; color:var(--cyan);
  filter: drop-shadow(0 0 8px rgba(199,202,217,.6));
  pointer-events:auto; cursor:none;
  transform: rotate(45deg);
  transition: filter .2s, color .3s;
}
.spaceship:hover { filter: drop-shadow(0 0 16px rgba(199,202,217,.95)); }
.spaceship.crashing { color:var(--warm); filter:drop-shadow(0 0 16px rgba(224,147,95,.85)); }

.flame-particle {
  position:absolute; width:10px; height:10px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, #ffd27a 0%, #ff7a3d 45%, transparent 80%);
  z-index:2;
  animation: flameFade .65s ease-out forwards;
}
@keyframes flameFade {
  from { opacity:.95; transform:scale(1); }
  to   { opacity:0;   transform:scale(.2) translateY(12px); }
}
.flame-particle.explosion {
  width:14px; height:14px;
  animation: explodeFade .75s ease-out forwards;
}
@keyframes explodeFade {
  from { opacity:1; transform:translate(0,0) scale(1); }
  to   { opacity:0; transform:translate(var(--dx),var(--dy)) scale(.25); }
}

.ship-trail {
  position:absolute; width:8px; height:8px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(199,202,217,.55) 0%, rgba(199,202,217,.15) 50%, transparent 80%);
  z-index:2;
  animation: trailFade .9s ease-out forwards;
}
@keyframes trailFade {
  from { opacity:.65; transform:scale(1); }
  to   { opacity:0;   transform:scale(.3); }
}

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:14px 34px; font-family:var(--fh);
  font-size:.72rem; letter-spacing:2px; text-transform:uppercase;
  border-radius:var(--radius); transition:all var(--t) var(--ease); cursor:none;
}
.btn-primary {
  background:var(--warm); color:var(--bg); font-weight:700;
  border:1px solid var(--warm);
  box-shadow: 0 0 24px var(--warm-dim);
}
.btn-primary:hover {
  background:transparent; color:var(--warm);
  box-shadow:var(--warm-glow);
}
.btn-outline {
  position:relative; z-index:0; overflow:hidden;
  border:1px solid var(--cyan); color:var(--cyan);
  transition: color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.btn-outline::before {
  content:''; position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; z-index:-1;
  background: linear-gradient(120deg, var(--cyan) 0%, var(--purple) 100%);
  transform: scaleX(0); transform-origin:left;
  transition: transform .6s cubic-bezier(.65,0,.35,1);
}
.btn-outline:hover {
  color:var(--bg); border-color:transparent;
  box-shadow: 0 0 30px rgba(199,202,217,.4), 0 0 64px rgba(94,95,120,.3);
}
.btn-outline:hover::before { transform:scaleX(1); }
.btn-ghost   { border:1px solid var(--border); color:var(--muted); }
.btn-ghost:hover { border-color:var(--muted); color:var(--white); }
.btn-block   { width:100%; justify-content:center; }

/* ---------- LAYOUT HELPERS ---------- */
.container { max-width:1200px; margin:0 auto; padding:0 5%; }
section { padding:110px 0; }

.section-header { text-align:center; margin-bottom:4.5rem; }
.section-tag {
  display:block; font-family:var(--fh); font-size:.65rem;
  letter-spacing:4px; color:var(--cyan); margin-bottom:1rem;
}
.section-title {
  font-family:var(--fh); font-size:clamp(1.8rem,4vw,3.2rem);
  font-weight:600; letter-spacing:-.5px; line-height:1.15; color:var(--white); margin-bottom:.8rem;
}
.section-sub { font-size:.97rem; color:var(--muted); max-width:600px; margin:0 auto; line-height:1.8; }

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal { opacity:0; transform:translateY(36px); transition:opacity var(--ts) var(--ease), transform var(--ts) var(--ease); }
.reveal.in  { opacity:1; transform:translateY(0); }

.reveal-card { opacity:0; transform:translateY(30px); transition:opacity .55s var(--ease), transform .55s var(--ease), border-color var(--t), box-shadow var(--t); }
.reveal-card.in { opacity:1; transform:translateY(0); }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ---------- ABOUT ---------- */
#about { background:var(--bg); }
.about-grid {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:6rem; align-items:center;
}
.about-photo, .about-body { min-width:0; }

/* Photo frame */
.about-photo { display:flex; justify-content:center; }
.photo-frame {
  position:relative; width:min(300px,100%); aspect-ratio:1/1; flex-shrink:1;
}
.photo-frame img, .photo-fallback {
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  position:relative; z-index:2;
}
.photo-fallback {
  display:none; align-items:center; justify-content:center;
  background:var(--bg3); font-size:5rem; color:var(--dim);
  position:absolute; inset:0;
}
.photo-ring-orbit {
  position:absolute; inset:-12px; border-radius:50%;
  border:2px solid transparent;
  background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    linear-gradient(135deg, var(--cyan), var(--purple)) border-box;
  z-index:1;
  animation: orbit 8s linear infinite;
}
@keyframes orbit { to { transform:rotate(360deg); } }

.photo-corner {
  position:absolute; width:18px; height:18px; z-index:3;
  border-color:var(--cyan); border-style:solid;
}
.photo-corner.tl { top:-16px; left:-16px; border-width:2px 0 0 2px; }
.photo-corner.tr { top:-16px; right:-16px; border-width:2px 2px 0 0; }
.photo-corner.bl { bottom:-16px; left:-16px; border-width:0 0 2px 2px; }
.photo-corner.br { bottom:-16px; right:-16px; border-width:0 2px 2px 0; }

/* Photo glow */
.photo-frame::before {
  content:''; position:absolute; inset:-40px; border-radius:50%;
  background:radial-gradient(circle, rgba(199,202,217,.12) 0%, transparent 70%);
  z-index:0; animation: breathe 3.5s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { transform:scale(1);   opacity:.6; }
  50%     { transform:scale(1.06); opacity:1; }
}

.about-text {
  color:var(--muted); line-height:1.95; margin-bottom:1.2rem; font-size:1.02rem;
  transition: color var(--t) var(--ease), text-shadow var(--t) var(--ease);
}
.about-body:hover .about-text { color:var(--white); text-shadow:0 0 1px rgba(255,255,255,.25); }
.about-stats {
  display:flex; gap:3rem; margin:2.5rem 0;
  padding:2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stat { display:flex; flex-direction:column; }
.stat-num {
  font-family:var(--fh); font-size:2.6rem; font-weight:600;
  color:var(--warm); line-height:1;
  text-shadow: 0 0 16px rgba(224,147,95,.25);
}
.stat-sym { font-family:var(--fh); font-size:1.4rem; color:var(--warm); vertical-align:super; }
.stat-lbl { font-size:.72rem; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; margin-top:.3rem; }
.about-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- SKILLS ---------- */
#skills { background:var(--bg2); position:relative; overflow:hidden; }
.skills-bg-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:.4; pointer-events:none;
}
.skills-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.skill-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem;
  position:relative; overflow:hidden;
}
.skill-card::before {
  content:''; position:absolute; top:0; left:0;
  width:100%; height:2px;
  background:linear-gradient(90deg, var(--warm), var(--purple));
  transform:scaleX(0); transform-origin:left;
  transition: transform var(--t) var(--ease);
}
.skill-card:hover::before  { transform:scaleX(1); }
.skill-card:hover {
  border-color:rgba(199,202,217,.25);
  box-shadow: 0 0 36px rgba(199,202,217,.07), inset 0 0 24px rgba(199,202,217,.02);
  transform: translateY(-5px);
}
.skill-icon { font-size:2.1rem; color:var(--warm); margin-bottom:.9rem; text-shadow:0 0 16px var(--warm); }
.skill-card h3 { font-family:var(--fh); font-size:.82rem; letter-spacing:2px; text-transform:uppercase; color:var(--white); margin-bottom:.7rem; }
.skill-card p  { font-size:.84rem; color:var(--muted); line-height:1.75; margin-bottom:1.2rem; }
.skill-bar     { height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.skill-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--warm), var(--purple));
  border-radius:2px;
  transition: width 1.6s cubic-bezier(.4,0,.2,1) .2s;
}

/* ---------- PORTFOLIO ---------- */
#portfolio { background:var(--bg); }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }

.proj-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.proj-card:hover {
  border-color:rgba(199,202,217,.25);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 32px rgba(199,202,217,.08);
  transform:translateY(-8px);
}
.proj-img {
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background: var(--bg3);
}
.proj-img.img-missing {
  display:flex; align-items:center; justify-content:center;
}
.proj-img.img-missing::after {
  content:'[ PREVIEW ]'; font-family:var(--fh); font-size:.6rem;
  letter-spacing:4px; color:var(--dim);
}
.proj-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease), filter .55s;
  filter:brightness(.75) saturate(.9);
}
.proj-card:hover .proj-img img { transform:scale(1.06); filter:brightness(.4); }

.proj-overlay {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  background:rgba(199,202,217,.03);
  opacity:0; transition:opacity var(--t);
}
.proj-card:hover .proj-overlay { opacity:1; }
.proj-links { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; }
.proj-link {
  display:flex; align-items:center; gap:.5rem;
  padding:.65rem 1.1rem; border:1px solid var(--cyan);
  border-radius:999px; color:var(--cyan); background:rgba(0,0,0,.35);
  font-family:var(--fh); font-size:.7rem; letter-spacing:.5px; white-space:nowrap;
  transition:all var(--t); cursor:none;
}
.proj-link i { font-size:.8rem; }
.proj-link:hover { background:var(--cyan); color:var(--bg); box-shadow:0 0 20px var(--cyan); }

.proj-body { padding:1.5rem; }
.proj-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem; }
.tag {
  font-family:var(--fh); font-size:.6rem; letter-spacing:1px;
  color:var(--warm); border:1px solid rgba(224,147,95,.35);
  padding:3px 10px; border-radius:2px; text-transform:uppercase;
}
.proj-body h3 { font-family:var(--fh); font-size:.9rem; letter-spacing:1px; color:var(--white); margin-bottom:.5rem; }
.proj-body p  { font-size:.84rem; color:var(--muted); line-height:1.75; }

/* ---------- CONTACT ---------- */
#contact { background:var(--bg2); position:relative; overflow:hidden; }
.contact-bg-glow {
  position:absolute; top:50%; left:30%; transform:translate(-50%,-50%);
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(199,202,217,.05) 0%, transparent 70%);
  pointer-events:none;
}
.contact-grid { display:grid; grid-template-columns:1fr 1.8fr; gap:5rem; align-items:start; }

.ci-item { display:flex; align-items:flex-start; gap:1.2rem; margin-bottom:2rem; }
.ci-icon {
  width:44px; height:44px; border:1px solid var(--border);
  border-radius:var(--radius); display:flex; align-items:center;
  justify-content:center; color:var(--cyan); font-size:.95rem; flex-shrink:0;
  transition: border-color var(--t), box-shadow var(--t);
}
.ci-item:hover .ci-icon { border-color:var(--cyan); box-shadow:0 0 18px var(--cyan-dim); }
.ci-item h4 { font-family:var(--fh); font-size:.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
.ci-item a, .ci-item p { font-size:.95rem; color:var(--white); transition:color var(--t); }
.ci-item a:hover { color:var(--cyan); }

.social-row { display:flex; gap:.8rem; margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--border); }
.soc-link {
  width:44px; height:44px; border:1px solid var(--border);
  border-radius:var(--radius); display:flex; align-items:center;
  justify-content:center; color:var(--muted); font-size:1rem;
  transition: all var(--t); cursor:none;
}
.soc-link:hover {
  border-color:var(--cyan); color:var(--cyan);
  box-shadow:0 0 18px var(--cyan-dim); transform:translateY(-3px);
}

/* Contact Form */
.contact-form {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:2.5rem;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label {
  display:block; font-family:var(--fh); font-size:.65rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem;
}
.form-group input,
.form-group textarea {
  width:100%; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 16px;
  color:var(--white); font-size:.9rem;
  transition: border-color var(--t), box-shadow var(--t);
  resize:none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--dim); }
.form-group input:focus,
.form-group textarea:focus {
  border-color:var(--cyan); box-shadow:0 0 22px rgba(199,202,217,.15);
}
.form-success {
  display:none; align-items:center; gap:.8rem; color:var(--green);
  font-size:.88rem; margin-top:1rem; padding:1rem 1.2rem;
  border:1px solid rgba(0,255,153,.3); border-radius:var(--radius);
  background:rgba(0,255,153,.04);
  animation:fadeUp .4s forwards;
}
.form-success.show { display:flex; }
.form-success.error {
  color:#ff6b6b; border-color:rgba(255,107,107,.3); background:rgba(255,107,107,.05);
}

/* ---------- WHATSAPP FAB ---------- */
.whatsapp-fab {
  position:fixed; bottom:2rem; right:2rem; z-index:9000;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.5);
  cursor:none; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  animation: waPulse 2.6s ease-out infinite;
}
.whatsapp-fab:hover { transform:scale(1.08); }
@keyframes waPulse {
  0%   { box-shadow:0 4px 18px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow:0 4px 18px rgba(0,0,0,.4), 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow:0 4px 18px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,0); }
}
[dir="rtl"] .whatsapp-fab { right:auto; left:2rem; }
@media (max-width:768px) {
  .whatsapp-fab { width:50px; height:50px; font-size:1.4rem; bottom:1.2rem; right:1.2rem; }
  [dir="rtl"] .whatsapp-fab { left:1.2rem; }
}

/* ---------- PROJECT GALLERY ---------- */
body.gallery-lock { overflow:hidden; }

.gallery-modal {
  position:fixed; inset:0; z-index:100001;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.gallery-modal.open { pointer-events:auto; }

.gallery-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(0px);
  opacity:0;
  transition: opacity .55s var(--ease), backdrop-filter .55s var(--ease);
}
.gallery-modal.open .gallery-backdrop { opacity:1; backdrop-filter:blur(16px); }

.gallery-close {
  position:absolute; top:2.2rem; right:2.2rem; z-index:2;
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--border); color:var(--cyan);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; cursor:none;
  background:rgba(0,0,0,.4);
  opacity:0; transform:scale(.6) rotate(-90deg);
  transition: opacity .4s var(--ease), transform .45s var(--ease),
              border-color var(--t), box-shadow var(--t);
}
.gallery-modal.open .gallery-close {
  opacity:1; transform:scale(1) rotate(0deg);
  transition-delay: .35s;
}
.gallery-close:hover { border-color:var(--cyan); box-shadow:0 0 20px var(--cyan-dim); }

.gallery-stage {
  position:relative; z-index:1;
  width:min(880px, 84vw); aspect-ratio:16/10; max-height:80vh;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--bg3);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 50px rgba(199,202,217,.12);
  opacity:0; transform:translateY(70px) scale(.85) rotateX(10deg);
  filter:blur(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
.gallery-modal.open .gallery-stage {
  opacity:1; transform:translateY(0) scale(1) rotateX(0deg); filter:blur(0);
}

.gallery-track {
  display:flex; height:100%; transition: transform .5s var(--ease);
}
.gallery-slide { flex:0 0 100%; height:100%; }
.gallery-slide img { width:100%; height:100%; object-fit:cover; display:block; }

.gallery-nav {
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--border); color:var(--cyan);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:none;
  background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none;
  transition: opacity .4s var(--ease), border-color var(--t), box-shadow var(--t);
}
.gallery-nav.prev { left:1rem; }
.gallery-nav.next { right:1rem; }
.gallery-modal.open .gallery-nav {
  opacity:1; pointer-events:auto; transition-delay:.35s;
}
.gallery-nav:hover { border-color:var(--cyan); box-shadow:0 0 20px var(--cyan-dim); }
.gallery-nav.is-hidden { display:none; }

.gallery-dots {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; gap:.6rem;
  opacity:0; transition: opacity .4s .4s var(--ease);
}
.gallery-modal.open .gallery-dots { opacity:1; }
.gallery-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--border); cursor:none;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.gallery-dot.active { background:var(--cyan); box-shadow:0 0 8px var(--cyan); transform:scale(1.25); }

/* ---------- FOOTER ---------- */
footer { background:var(--bg); border-top:1px solid var(--border); padding:3.5rem 0; }
.footer-top {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:2rem; margin-bottom:2rem;
}
.footer-logo {
  display:block; font-family:var(--fh); font-size:1.2rem; font-weight:500;
  color:var(--cyan); letter-spacing:1px; text-shadow:var(--cyan-glow); margin-bottom:.4rem;
}
.footer-brand p { font-size:.85rem; color:var(--muted); }
.footer-nav { display:flex; gap:2rem; flex-wrap:wrap; }
.footer-nav a { font-size:.82rem; color:var(--muted); letter-spacing:1px; transition:color var(--t); }
.footer-nav a:hover { color:var(--cyan); }

.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
  padding-top:2rem; border-top:1px solid var(--border);
}
.footer-bottom p { font-size:.78rem; color:var(--dim); letter-spacing:1px; }
.footer-credit { font-family:var(--fh); font-size:.65rem; letter-spacing:2px; }

/* ---------- RTL OVERRIDES ---------- */
[dir="rtl"] .nav-links a::after { left:auto; right:0; transform-origin:right; }
[dir="rtl"] .hero-content       { direction:rtl; }
[dir="rtl"] .about-grid         { direction:rtl; }
[dir="rtl"] .about-stats        { flex-direction:row-reverse; }
[dir="rtl"] .about-actions      { flex-direction:row-reverse; }
[dir="rtl"] .stat               { align-items:flex-end; }
[dir="rtl"] .skill-card         { direction:rtl; text-align:right; }
[dir="rtl"] .skill-card::before { transform-origin:right; }
[dir="rtl"] .proj-body          { direction:rtl; }
[dir="rtl"] .proj-tags          { flex-direction:row-reverse; }
[dir="rtl"] .contact-grid       { direction:rtl; }
[dir="rtl"] .ci-item            { flex-direction:row-reverse; }
[dir="rtl"] .social-row         { flex-direction:row-reverse; }
[dir="rtl"] .contact-form       { direction:rtl; }
[dir="rtl"] .form-group label   { text-align:right; }
[dir="rtl"] .form-row           { direction:rtl; }
[dir="rtl"] .footer-top         { flex-direction:row-reverse; }
[dir="rtl"] .footer-nav         { flex-direction:row-reverse; }
[dir="rtl"] .footer-bottom      { flex-direction:row-reverse; }
[dir="rtl"] .section-header     { direction:rtl; }
[dir="rtl"] .hero-cta           { flex-direction:row-reverse; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px) {
  .skills-grid    { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  section { padding:80px 0; }

  .nav-links {
    display:none; position:fixed;
    top:var(--nav-h); left:0; right:0;
    background:rgba(0,0,0,.97); backdrop-filter:blur(20px);
    flex-direction:column; padding:2rem 5%;
    gap:1.8rem; border-bottom:1px solid var(--border);
    z-index:999;
  }
  .nav-links.open { display:flex; }
  .nav-hamburger  { display:flex; }

  .about-grid   { grid-template-columns:1fr; gap:3rem; }
  .about-photo  { order:-1; }
  .contact-grid { grid-template-columns:1fr; }
  .form-row     { grid-template-columns:1fr; }
  .skills-grid  { grid-template-columns:1fr; }

  .photo-frame  { width:230px; height:230px; }
  .about-stats  { gap:1.8rem; }

  .footer-top, .footer-bottom { justify-content:center; text-align:center; }
  .footer-nav { justify-content:center; }

  .cursor-dot, .cursor-ring { display:none; }
  body, button, a, .btn, .proj-link, .soc-link, .lang-toggle { cursor:auto; }
}
@media (max-width:480px) {
  .hero-cta, [dir="rtl"] .hero-cta { flex-direction:column; align-items:center; }
  .about-stats, [dir="rtl"] .about-stats { flex-direction:column; gap:1.4rem; }
  .stat, [dir="rtl"] .stat { flex-direction:row; align-items:baseline; gap:.5rem; }
  .stat-lbl { margin-top:0; }
  .about-actions, [dir="rtl"] .about-actions { flex-direction:column; }
  .contact-form { padding:1.6rem; }

  .gallery-stage { width:92vw; }
  .gallery-close { top:1rem; right:1rem; width:40px; height:40px; font-size:.9rem; }
  .gallery-nav   { width:38px; height:38px; font-size:.85rem; }
  .gallery-nav.prev { left:.5rem; }
  .gallery-nav.next { right:.5rem; }
  .gallery-dots  { bottom:1rem; }
}