/* ============================================================
   Anjali Devi — v7 "Flux"
   WebGL particle-morph scroll experience
   ============================================================ */

:root{
  --bg:        #05050c;
  --bg-2:      #0b0a1a;
  --ink:       #f3f1ff;
  --muted:     rgba(243,241,255,.58);
  --faint:     rgba(243,241,255,.12);
  --indigo:    #6366f1;
  --violet:    #a855f7;
  --pink:      #ec4899;
  --amber:     #f59e0b;
  --accent:    #a855f7;
  --display:   "Fraunces", Georgia, serif;
  --sans:      "Plus Jakarta Sans", system-ui, sans-serif;
  --ease:      cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--sans);
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(110% 90% at 0% 110%, rgba(99,102,241,.16), transparent 55%),
    var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:780px){ body{ cursor:auto; } }

a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
::selection{ background:var(--pink); color:#fff; }

/* ---------- WebGL canvas ---------- */
#gl{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:0;
  pointer-events:none;
}

/* ---------- grain + vignette ---------- */
.grain{
  position:fixed; inset:-50%;
  width:200%; height:200%;
  z-index:2; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)}
  30%{transform:translate(3%,-2%)} 50%{transform:translate(-2%,3%)}
  70%{transform:translate(4%,2%)} 90%{transform:translate(-3%,4%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ---------- cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; width:38px; height:38px;
  border:1px solid rgba(243,241,255,.5); border-radius:50%;
  transform:translate(-50%,-50%); z-index:90; pointer-events:none;
  transition:width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s;
  mix-blend-mode:difference;
}
.cursor-dot{
  position:fixed; top:0; left:0; width:5px; height:5px;
  background:var(--ink); border-radius:50%;
  transform:translate(-50%,-50%); z-index:91; pointer-events:none;
}
.cursor.is-hover{ width:62px; height:62px; background:rgba(243,241,255,.1); border-color:transparent; }
@media (max-width:780px){ .cursor,.cursor-dot{ display:none; } }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  background:var(--bg);
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__ring{
  width:54px; height:54px; border-radius:50%;
  border:2px solid var(--faint); border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader__txt{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---------- progress + nav ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--indigo),var(--violet),var(--pink),var(--amber));
  z-index:80;
}
.nav{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem clamp(1.2rem,4vw,3rem);
}
.nav__brand{
  font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.4rem;
}
.nav__brand span{ color:var(--accent); font-size:.8rem; }
.nav__menu{ display:flex; align-items:center; gap:1.8rem; font-size:.9rem; }
.nav__menu a{ color:var(--muted); transition:color .3s; position:relative; }
.nav__menu a:hover{ color:var(--ink); }
.nav__cta{
  border:1px solid var(--faint); padding:.55rem 1.1rem; border-radius:100px;
  color:var(--ink)!important; background:rgba(255,255,255,.03);
}
.nav__cta:hover{ background:var(--ink); color:var(--bg)!important; }
@media (max-width:680px){ .nav__menu a:not(.nav__cta){ display:none; } }

/* ---------- panels / layout ---------- */
main{ position:relative; z-index:10; }
.panel{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:7rem clamp(1.2rem,5vw,5rem);
}
.panel__inner{ width:100%; max-width:1180px; margin:0 auto; }
.panel__inner.left{ display:flex; flex-direction:column; align-items:flex-start; }
.panel__inner.right{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.panel__inner.center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
/* keep a clear lane so the morphing field stays visible */
@media (min-width:1024px){
  .panel__inner.left{ padding-right:46%; align-items:flex-start; }
  .panel__inner.right{ padding-left:46%; }
  .panel__inner.right .stats__grid,
  .panel__inner.right .jobs{ text-align:left; }
}

/* ---------- type ---------- */
.kicker{
  display:inline-block; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.6rem;
}
.eyebrow{
  display:inline-block; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.8rem;
}
.eyebrow::before{ content:""; display:inline-block; width:28px; height:1px; background:var(--accent); vertical-align:middle; margin-right:.7rem; opacity:.6; }

.hero__title{
  font-family:var(--display); font-weight:600; line-height:.95;
  font-size:clamp(3.4rem,13vw,11rem); letter-spacing:-.02em;
}
.hero__title .line{ display:block; }
.hero__title em{ background:linear-gradient(100deg,var(--indigo),var(--violet) 40%,var(--pink) 70%,var(--amber)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.lead{
  font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.6; color:var(--muted);
  max-width:42ch; margin-top:2rem;
}
.center .lead{ margin-left:auto; margin-right:auto; }
.big{
  font-family:var(--display); font-weight:400; line-height:1.22;
  font-size:clamp(1.7rem,3.6vw,3.1rem); letter-spacing:-.01em; max-width:18ch;
}
.big em{ color:var(--accent); }
.hl{ color:var(--ink); border-bottom:1px solid var(--accent); }

/* ---------- buttons ---------- */
.actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; }
.center .actions{ justify-content:center; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 1.7rem; border-radius:100px; font-weight:600; font-size:.95rem;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn i{ font-style:normal; transition:transform .3s var(--ease); }
.btn:hover i{ transform:translate(3px,-3px); }
.btn--solid{ background:var(--ink); color:var(--bg); }
.btn--solid:hover{ background:var(--accent); color:#fff; }
.btn--ghost{ border:1px solid var(--faint); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }

/* ---------- scrollcue ---------- */
.scrollcue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted);
}
.scrollcue i{ width:1px; height:42px; background:linear-gradient(var(--accent),transparent); animation:cue 2s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{transform:scaleY(0)} 40%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }

/* ---------- marquee ---------- */
.strip{ position:relative; z-index:10; overflow:hidden; padding:1.4rem 0; border-block:1px solid var(--faint); background:rgba(5,5,12,.4); backdrop-filter:blur(4px); }
.strip__track{ display:flex; gap:2rem; align-items:center; white-space:nowrap; width:max-content; animation:marq 28s linear infinite; }
.strip span{ font-family:var(--display); font-size:clamp(1.3rem,3vw,2.2rem); font-weight:500; }
.strip i{ color:var(--accent); font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- glass cols ---------- */
.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.6rem; width:100%; }
.glass{
  padding:1.6rem; border-radius:18px; border:1px solid var(--faint);
  background:rgba(255,255,255,.025); backdrop-filter:blur(8px);
  transition:transform .4s var(--ease), border-color .4s;
}
.glass:hover{ transform:translateY(-5px); border-color:rgba(168,85,247,.4); }
.glass h4{ font-size:.95rem; margin-bottom:.6rem; }
.glass p{ font-size:.9rem; color:var(--muted); line-height:1.55; }
@media (max-width:760px){ .cols{ grid-template-columns:1fr; } }

/* ---------- stats ---------- */
.stats__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.4rem 3rem; margin-top:1rem; }
.stat__num{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(3rem,7vw,5.4rem); line-height:1; background:linear-gradient(120deg,var(--violet),var(--pink),var(--amber)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat__label{ display:block; margin-top:.6rem; font-size:.9rem; color:var(--muted); max-width:18ch; }
@media (max-width:560px){ .stats__grid{ grid-template-columns:1fr; gap:1.8rem; } }

/* ---------- expertise cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.4rem; width:100%; }
.card{
  position:relative; padding:1.7rem 1.5rem 1.5rem; border-radius:18px;
  border:1px solid var(--faint); background:rgba(255,255,255,.025); backdrop-filter:blur(8px);
  min-height:190px; transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(168,85,247,.45); background:rgba(168,85,247,.06); }
.card__no{ font-family:var(--display); font-size:.85rem; color:var(--accent); opacity:.8; }
.card h3{ font-family:var(--display); font-weight:600; font-size:1.25rem; margin:.7rem 0 .6rem; }
.card p{ font-size:.86rem; color:var(--muted); line-height:1.55; }
.card--hot{ background:linear-gradient(160deg,rgba(168,85,247,.16),rgba(236,72,153,.08)); border-color:rgba(168,85,247,.4); }
.card--tools .cloud{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.card--tools .cloud span{ font-size:.72rem; padding:.3rem .6rem; border:1px solid var(--faint); border-radius:100px; color:var(--muted); }
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }

/* ---------- jobs ---------- */
.jobs{ list-style:none; margin-top:1.4rem; width:100%; max-width:620px; }
.job{ padding:1.6rem 0; border-top:1px solid var(--faint); display:grid; grid-template-columns:1fr; gap:.8rem; }
.job__period{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.job__meta h3{ font-family:var(--display); font-weight:600; font-size:1.4rem; margin:.3rem 0 .1rem; }
.job__co{ font-size:.9rem; color:var(--muted); }
.job__points{ list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.job__points li{ font-size:.92rem; color:var(--muted); line-height:1.5; padding-left:1.1rem; position:relative; }
.job__points li::before{ content:"›"; position:absolute; left:0; color:var(--accent); }
.job__points b{ color:var(--ink); }
@media (min-width:680px){ .job{ grid-template-columns:.8fr 1.2fr; gap:2rem; } }

/* ---------- certs ---------- */
.certs__row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.certs__row span{
  font-size:.9rem; padding:.6rem 1.1rem; border:1px solid var(--faint); border-radius:100px;
  color:var(--muted); transition:color .3s, border-color .3s, background .3s;
}
.certs__row span:hover{ color:var(--ink); border-color:var(--accent); background:rgba(168,85,247,.08); }

/* ---------- contact ---------- */
.contact{ text-align:center; }
.contact__big{ font-family:var(--display); font-weight:600; line-height:1; font-size:clamp(2.6rem,9vw,7rem); letter-spacing:-.02em; }
.contact__big .line{ display:block; }
.contact__big em{ background:linear-gradient(100deg,var(--indigo),var(--pink),var(--amber)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.contact__mail{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:2.4rem;
  font-family:var(--display); font-size:clamp(1.1rem,3vw,1.9rem); font-weight:500;
  padding-bottom:.3rem; border-bottom:1px solid var(--faint); transition:border-color .3s;
}
.contact__mail i{ font-style:normal; }
.contact__mail:hover{ border-color:var(--accent); }
.contact__links{ display:flex; justify-content:center; gap:1.8rem; margin-top:2.2rem; font-size:.9rem; color:var(--muted); }
.contact__links a{ position:relative; transition:color .3s; }
.contact__links a:hover{ color:var(--ink); }

/* ---------- footer ---------- */
.footer{
  position:relative; z-index:10;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding:2.4rem clamp(1.2rem,5vw,5rem); border-top:1px solid var(--faint);
  font-size:.85rem; color:var(--muted); background:rgba(5,5,12,.6); backdrop-filter:blur(6px);
}
.footer__versions{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; }
.footer__vlabel{ opacity:.6; }
.footer__versions a{ color:var(--muted); transition:color .3s; }
.footer__versions a:hover{ color:var(--ink); }
.footer__versions a.is-current{ color:var(--accent); font-weight:600; }
#toTop{ background:none; border:1px solid var(--faint); color:var(--muted); padding:.5rem 1rem; border-radius:100px; font-family:var(--sans); font-size:.82rem; cursor:none; transition:color .3s, border-color .3s; }
#toTop:hover{ color:var(--ink); border-color:var(--ink); }

/* ---------- reveal states ---------- */
.reveal, .reveal-text .word{ will-change:transform,opacity; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
}