/* ============================================================
   SURYA.DEV — Portfolio Stylesheet
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --cyan:#22d3ee;
  --indigo:#6366f1;
  --violet:#a855f7;
  --emerald:#34d399;
  --bg:#020617;
  --card:rgba(15,23,42,.72);
}

/* ---------- 2. BASE ---------- */
*{ -webkit-tap-highlight-color: transparent; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:#020617;
  color:#e2e8f0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-display{ font-family:'Sora','Plus Jakarta Sans',sans-serif; }
.font-mono{ font-family:'JetBrains Mono',monospace; }

/* Scrollbar */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#020617; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(#1e293b,#0f172a);
  border-radius:9px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(#0891b2,#4f46e5);
}

::selection{ background:var(--cyan); color:#020617; }

/* ---------- 3. ANIMATED BACKGROUND ---------- */
.bg-stage{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}

.orb{
  position:absolute; border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  will-change:transform;
  mix-blend-mode:screen;
}

.orb-1{
  width:min(620px,85vw); height:min(620px,85vw);
  background:radial-gradient(circle at 30% 30%, rgba(34,211,238,.55), rgba(34,211,238,0) 70%);
  top:-14%; left:-12%;
  animation:drift1 22s ease-in-out infinite;
}
.orb-2{
  width:min(700px,95vw); height:min(700px,95vw);
  background:radial-gradient(circle at 60% 40%, rgba(99,102,241,.5), rgba(99,102,241,0) 70%);
  bottom:-20%; right:-15%;
  animation:drift2 26s ease-in-out infinite;
}
.orb-3{
  width:min(520px,75vw); height:min(520px,75vw);
  background:radial-gradient(circle at 50% 50%, rgba(168,85,247,.42), rgba(168,85,247,0) 70%);
  top:38%; left:52%;
  animation:drift3 30s ease-in-out infinite;
}
.orb-4{
  width:min(420px,65vw); height:min(420px,65vw);
  background:radial-gradient(circle at 50% 50%, rgba(52,211,153,.3), rgba(52,211,153,0) 70%);
  top:8%; right:18%;
  animation:drift1 34s ease-in-out infinite reverse;
}

@keyframes drift1{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%   { transform:translate3d(90px,-70px,0) scale(1.16); }
  66%   { transform:translate3d(-70px,55px,0) scale(.92); }
}
@keyframes drift2{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  40%   { transform:translate3d(-110px,-60px,0) scale(1.2); }
  75%   { transform:translate3d(60px,70px,0) scale(.9); }
}
@keyframes drift3{
  0%,100%{ transform:translate3d(-50%,-50%,0) scale(1); }
  50%   { transform:translate3d(-58%,-42%,0) scale(1.25); }
}

.grid-overlay{
  position:absolute; inset:-50%;
  background-image:
    linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
  animation:gridPan 40s linear infinite;
}
@keyframes gridPan{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(64px,64px,0); }
}

.particles{ position:absolute; inset:0; }
.particle{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(34,211,238,.75);
  box-shadow:0 0 8px rgba(34,211,238,.9);
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%  { transform:translateY(0) scale(.6); opacity:0; }
  12% { opacity:.9; }
  85% { opacity:.7; }
  100%{ transform:translateY(-105vh) scale(1.15); opacity:0; }
}

.bg-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, transparent 30%, rgba(2,6,23,.75) 100%);
}

/* ---------- 4. SCROLL PROGRESS ---------- */
#progressBar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,#22d3ee,#6366f1,#a855f7);
  z-index:100; box-shadow:0 0 14px rgba(34,211,238,.7);
  transition:width .08s linear;
}

/* ---------- 5. NAV ---------- */
.nav-shell{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:rgba(2,6,23,.72);
  border-bottom:1px solid rgba(30,41,59,.85);
  transition:background .35s ease, box-shadow .35s ease;
}
.nav-shell.scrolled{
  background:rgba(2,6,23,.92);
  box-shadow:0 10px 40px -18px rgba(34,211,238,.35);
}

.nav-link{ position:relative; transition:color .25s ease; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px;
  height:2px; width:0%;
  background:linear-gradient(90deg,#22d3ee,#6366f1);
  border-radius:2px;
  transition:width .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after{ width:100%; }

/* ---------- 6. GLASS CARDS ---------- */
.card{
  position:relative;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             box-shadow .45s ease;
  will-change:transform;
}
.card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),
             rgba(34,211,238,.13), transparent 45%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.card:hover::before{ opacity:1; }

.card::after{
  content:'';
  position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
  transform:skewX(-20deg);
  transition:left .8s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.card:hover::after{ left:140%; }

.card:hover{
  transform:translateY(-8px);
  border-color:rgba(34,211,238,.4);
  box-shadow:0 26px 60px -28px rgba(34,211,238,.55);
}

.card-static:hover{ transform:none; }

/* Skill chips */
.chip{
  transition:transform .3s cubic-bezier(.16,1,.3,1),
             border-color .3s, background .3s, color .3s;
}
.chip:hover{
  transform:translateY(-5px) scale(1.05);
  border-color:rgba(34,211,238,.6);
  background:rgba(34,211,238,.1);
  color:#67e8f9;
}

/* ---------- 7. BUTTONS ---------- */
.btn-primary{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,#22d3ee,#6366f1,#a855f7);
  background-size:200% 100%;
  color:#020617; font-weight:700;
  transition:transform .3s cubic-bezier(.16,1,.3,1),
             box-shadow .3s ease,
             background-position .6s ease;
  box-shadow:0 12px 34px -14px rgba(34,211,238,.8);
}
.btn-primary:hover{
  transform:translateY(-3px);
  background-position:100% 0;
  box-shadow:0 20px 46px -16px rgba(99,102,241,.9);
}
.btn-primary:active{ transform:translateY(-1px) scale(.99); }
.btn-primary:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

.btn-ghost{
  border:1px solid rgba(51,65,85,.9);
  background:rgba(15,23,42,.55);
  transition:transform .3s cubic-bezier(.16,1,.3,1),
             border-color .3s, background .3s;
}
.btn-ghost:hover{
  transform:translateY(-3px);
  border-color:rgba(34,211,238,.6);
  background:rgba(34,211,238,.08);
}

/* ---------- 8. SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0s),
             transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s);
  will-change:opacity, transform;
}
.reveal.in-view{ opacity:1; transform:none; }

.reveal-left{ transform:translateX(-46px); }
.reveal-right{ transform:translateX(46px); }
.reveal-scale{ transform:scale(.92); }
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view{ transform:none; }

/* ---------- 9. GRADIENT TEXT ---------- */
.gradient-text{
  background:linear-gradient(120deg,#38bdf8 0%,#818cf8 45%,#c084fc 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}

/* ---------- 10. HERO EXTRAS ---------- */
.pulse-dot{
  width:8px; height:8px; border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.8);
  animation:pulseRing 2s infinite;
}
@keyframes pulseRing{
  0%  { box-shadow:0 0 0 0 rgba(52,211,153,.75); }
  70% { box-shadow:0 0 0 12px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
}

.float-slow{ animation:floatSlow 6s ease-in-out infinite; }
@keyframes floatSlow{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

/* ---------- 11. FORM CONTROLS ---------- */
.field{
  width:100%;
  padding:.85rem 1rem;
  border-radius:14px;
  background:rgba(2,6,23,.8);
  border:1px solid rgba(30,41,59,1);
  color:#e2e8f0;
  font-size:.94rem;
  transition:border-color .25s ease,
             box-shadow .25s ease,
             background .25s ease;
  outline:none;
}
.field::placeholder{ color:#475569; }
.field:focus{
  border-color:rgba(34,211,238,.85);
  box-shadow:0 0 0 4px rgba(34,211,238,.12);
  background:rgba(2,6,23,.95);
}
select.field option{ background:#0f172a; color:#e2e8f0; }

/* Drop zone */
.drop-zone{
  border:2px dashed rgba(51,65,85,1);
  border-radius:16px;
  padding:1.5rem 1rem;
  text-align:center;
  cursor:pointer;
  transition:border-color .3s ease,
             background .3s ease,
             transform .3s ease;
  background:rgba(2,6,23,.5);
}
.drop-zone:hover{
  border-color:rgba(34,211,238,.6);
  background:rgba(34,211,238,.05);
}
.drop-zone.dragover{
  border-color:#22d3ee;
  background:rgba(34,211,238,.12);
  transform:scale(1.015);
  box-shadow:0 0 0 6px rgba(34,211,238,.08);
}

.file-pill{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .8rem;
  border-radius:12px;
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.25);
  font-size:.78rem;
  animation:popIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes popIn{
  from{ opacity:0; transform:translateY(8px) scale(.96); }
  to  { opacity:1; transform:none; }
}

/* Spinner */
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(2,6,23,.35);
  border-top-color:#020617;
  animation:spin .7s linear infinite;
  display:inline-block;
  vertical-align:-3px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Success / error banner */
.banner-in{ animation:bannerIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes bannerIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* ---------- 12. TIMELINE ---------- */
.timeline-line{
  background:linear-gradient(180deg,#22d3ee,#6366f1,#a855f7);
  box-shadow:0 0 18px rgba(34,211,238,.55);
}

/* ---------- 13. ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- 14. MOBILE PERF ---------- */
@media (max-width:640px){
  .orb{ filter:blur(60px); opacity:.45; }
  .card{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
}