/* ===========================================================
   Vaïshnavi Ravikoumar — Navilys · Portfolio
   Light · pastel · playful — elegant serif
   =========================================================== */
:root{
  --paper:#f7f1e9; --paper2:#fffdf9; --panel:#efe6da; --panel2:#eaddcc;
  --ink:#191613; --ink-dim:rgba(25,22,19,.62); --ink-faint:rgba(25,22,19,.12);
  --coral:#ec8a66; --coral-deep:#df6f48;
  --lav:#cdb6ee; --peach:#f6c2a2; --butter:#f6d488; --mint:#b9ddc9; --sky:#bcd3f2;
  --display:"Archivo", "Space Grotesk", system-ui, sans-serif;
  --sans:"Space Grotesk", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sticker:6px 8px 22px -8px rgba(25,22,19,.42);
  --bd:1.5px solid var(--ink);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--coral);color:#fff;}

/* generic kicker / labels */
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--coral-deep);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);}
.section{max-width:var(--maxw);margin:0 auto;padding:0 48px;}

/* ============================ NAV ============================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:22px 48px;transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);}
.nav.scrolled{background:rgba(247,241,233,.82);backdrop-filter:blur(14px);padding:14px 48px;
  box-shadow:0 1px 0 var(--ink-faint);}
.brand{display:flex;flex-direction:column;line-height:1.05;flex:none;}
.brand-name{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;text-transform:uppercase;}
.brand-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--coral-deep);margin-top:4px;}
.nav-right{display:flex;align-items:center;gap:30px;}
.links{display:flex;align-items:center;gap:28px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
.links a{position:relative;opacity:.78;transition:opacity .25s;}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--coral-deep);transition:right .3s var(--ease);}
.links a:hover{opacity:1;}
.links a:hover::after{right:0;}
.langtog{display:flex;font-family:var(--mono);font-size:11px;letter-spacing:.08em;border:1px solid var(--ink-faint);
  border-radius:999px;overflow:hidden;cursor:pointer;}
.langtog button{font:inherit;letter-spacing:inherit;border:0;background:none;color:var(--ink-dim);padding:6px 12px;cursor:pointer;transition:color .2s,background .2s;}
.langtog button.on{background:var(--coral);color:#fff;}
.nav-cv{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:7px 14px;
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);white-space:nowrap;}
.nav-cv svg{flex:none;transition:transform .22s var(--ease);}
.nav-cv:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.nav-cv:hover svg{transform:translateY(2px);}
.nav.scrolled .nav-cv{border-color:var(--ink-faint);}
.contact-actions{margin-top:30px;display:flex;justify-content:center;}
.nav-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;}
.nav-burger span{width:24px;height:2px;background:var(--ink);display:block;}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 48px 96px;overflow:hidden;}
.hero-inner{max-width:var(--maxw);margin:0 auto;width:100%;position:relative;z-index:4;}
.blob{position:absolute;border-radius:50%;z-index:1;pointer-events:none;will-change:transform;}
.blob-o{width:min(46vw,520px);aspect-ratio:1;background:radial-gradient(circle at 36% 32%,var(--peach),var(--coral));
  right:2vw;top:14vh;opacity:.9;animation:floatA 16s var(--ease) infinite;}
.blob-l{width:min(24vw,270px);aspect-ratio:1;background:var(--lav);right:22vw;top:42vh;opacity:.5;mix-blend-mode:multiply;animation:floatB 13s var(--ease) infinite;}
.blob-y{width:min(13vw,140px);aspect-ratio:1;background:var(--butter);left:42%;bottom:20vh;animation:floatC 11s var(--ease) infinite;}
@keyframes floatA{50%{transform:translate(-26px,30px) scale(1.04);}}
@keyframes floatB{50%{transform:translate(34px,-24px) scale(1.07);}}
@keyframes floatC{50%{transform:translate(-18px,-22px) scale(.92);}}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(46px,8vw,112px);line-height:.96;
  letter-spacing:-.03em;margin:22px 0 26px;max-width:15ch;text-transform:uppercase;}
.hero h1 em{font-style:normal;color:var(--ink);background:var(--lav);padding:.01em .14em;border-radius:.09em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.hero .lede{max-width:46ch;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--ink-dim);}
.avail-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3fae6e;margin-right:9px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(63,174,110,.55);animation:pulse 2.4s var(--ease) infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,174,110,.5);}70%{box-shadow:0 0 0 7px rgba(63,174,110,0);}100%{box-shadow:0 0 0 0 rgba(63,174,110,0);}}
.hero-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;}
.hp{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;padding:7px 14px;border-radius:999px;
  border:1.5px solid var(--ink);color:var(--ink);}
.hp-sky{background:var(--sky);}
.hp-mint{background:var(--mint);}
.hp-butter{background:var(--butter);}
.hp-peach{background:var(--peach);}
.hp-lav{background:var(--lav);}
.about-card .about-lead{margin:0;}
.about-card .about-body{color:var(--ink);opacity:.78;}
.hero-cta{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:15px 24px;border-radius:999px;transition:transform .25s var(--ease),background .25s;cursor:pointer;}
.btn-primary{background:var(--coral);color:#fff;}
.btn-primary:hover{transform:translateY(-3px);background:var(--coral-deep);}
.btn-ghost{border:1px solid var(--ink-faint);color:var(--ink);}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--ink);}

/* marquee */
.marquee{position:relative;margin-top:84px;border-top:1px solid var(--ink-faint);border-bottom:1px solid var(--ink-faint);
  overflow:hidden;padding:16px 0;}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:scrollx 32s linear infinite;
  font-family:var(--mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);}
.marquee-track span{padding:0 6px;}
.marquee-track b{color:var(--coral-deep);}
@keyframes scrollx{to{transform:translateX(-50%);}}

/* ============================ SECTION HEADERS ============================ */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:28px;margin-bottom:56px;border-bottom:1px solid var(--ink-faint);}
.sec-head h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,58px);line-height:.98;letter-spacing:-.02em;margin:10px 0 0;text-transform:uppercase;}
.sec-head .num{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ink-dim);}

/* ============================ ABOUT ============================ */
.about{padding:120px 0;position:relative;}
.about-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible;}
.about-bubbles .bub{position:absolute;border-radius:50%;will-change:transform;}
.bub-lav{background:var(--lav);opacity:.42;mix-blend-mode:multiply;filter:blur(2px);animation:floatB 17s var(--ease) infinite;}
.bub-peach{background:radial-gradient(circle at 36% 32%,var(--peach),var(--coral));opacity:.5;animation:floatA 14s var(--ease) infinite;}
.bub-butter{background:var(--butter);opacity:.85;animation:floatC 11s var(--ease) infinite;}
.bub-coral{background:var(--coral);opacity:.8;animation:floatC 9s var(--ease) infinite;}
.bub-mint{background:var(--mint);opacity:.7;animation:floatA 12s var(--ease) infinite;}
.bub-ring{border:1.5px solid var(--coral);opacity:.5;animation:floatA 15s var(--ease) infinite;}
.bub-ring2{border:1.5px solid var(--lav);opacity:.7;animation:floatB 13s var(--ease) infinite;}
.about-grid,.about>.sec-head,.about .xp{position:relative;z-index:2;}
.about-grid>.reveal{position:relative;z-index:2;}
.about-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:72px;align-items:start;}
.about-lead{font-family:var(--sans);font-size:clamp(20px,2.4vw,28px);line-height:1.34;font-weight:500;letter-spacing:-.01em;}
.about-lead em{font-style:normal;color:var(--ink);background:var(--butter);padding:.01em .12em;border-radius:.08em;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.about-body{margin-top:26px;color:var(--ink-dim);font-size:16.5px;max-width:54ch;}
.about-body p+p{margin-top:16px;}
.about-side{display:flex;flex-direction:column;gap:26px;}
.panelcard{background:var(--paper2);border:var(--bd);border-radius:16px;padding:24px 24px 28px;box-shadow:var(--sticker);}
.panelcard.card-mint{background:var(--mint);}
.panelcard.card-peach{background:var(--peach);}
.panelcard.card-lav{background:var(--lav);}
.panelcard h3{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin:0 0 18px;font-weight:700;}
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;padding:6px 13px;border-radius:999px;
  background:var(--paper2);color:var(--ink);border:1.5px solid var(--ink);}
.chip.learn{background:transparent;border-style:dashed;color:var(--ink-dim);}
.chip.soft{background:transparent;border:1px solid var(--ink-faint);color:var(--ink-dim);}
/* competencies rows (CV style) */
.comp{display:flex;flex-direction:column;gap:16px;}
.comp-row{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;}
.comp-row .code{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink);}
.comp-row .body{display:flex;align-items:center;gap:12px;}
.comp-row .nm{font-size:13.5px;white-space:nowrap;}
.comp-row .ln{flex:1;height:2px;background:rgba(25,22,19,.28);border-radius:2px;position:relative;}
.comp-row .ln::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,80%);background:var(--ink);border-radius:2px;}
.langs{display:flex;flex-direction:column;gap:14px;}
.lang-row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.lang-row .l{font-size:15px;font-weight:500;}
.bars{display:flex;gap:5px;}
.bars i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;}
.bars i.on{background:var(--ink);}

/* experience timeline */
.xp{margin-top:96px;}
.xp-list{display:flex;flex-direction:column;}
.xp-row{display:grid;grid-template-columns:170px 1fr auto;gap:28px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--ink-faint);transition:padding-left .35s var(--ease);}
.xp-row:last-child{border-bottom:1px solid var(--ink-faint);}
.xp-row:hover{padding-left:14px;}
.xp-row .when{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}
.xp-row .role{font-family:var(--display);font-size:clamp(18px,2vw,25px);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;}
.xp-row .role small{display:block;font-family:var(--sans);font-size:14px;font-weight:400;color:var(--ink-dim);margin-top:6px;max-width:60ch;}
.xp-row .org{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);text-align:right;}

/* ============================ WORK ============================ */
.work{padding:120px 0 40px;}
.work-group{display:flex;align-items:center;gap:18px;margin:8px 0 6px;padding-top:18px;}
.work-group .wg-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#fff;background:var(--coral);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
.work-group .wg-t{font-family:var(--display);font-size:clamp(18px,2.2vw,28px);font-weight:800;letter-spacing:-.02em;text-transform:uppercase;}
.work-group .wg-line{flex:1;height:1px;background:var(--ink-faint);}
.work-group .wg-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-dim);flex:none;}
.proj{padding:78px 0;border-top:1px solid var(--ink-faint);}
.proj:first-of-type{border-top:0;}
.work-group + .proj{border-top:0;padding-top:40px;}
.proj-grid{display:grid;gap:56px;align-items:center;}
.proj-grid.split{grid-template-columns:0.92fr 1.08fr;}
.proj-grid.split.flip{grid-template-columns:1.08fr 0.92fr;}
.proj-grid.split.flip .proj-media{order:-1;}
.proj-head .pn{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--coral-deep);}
.proj-head h3{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.8vw,52px);line-height:1.0;letter-spacing:-.025em;margin:14px 0 16px;text-transform:uppercase;}
.proj-head h3 em{font-style:normal;}
.proj-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.proj-tags .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);background:var(--paper2);}
.proj-tags .t:nth-child(1){background:var(--sky);}
.proj-tags .t:nth-child(2){background:var(--butter);}
.proj-tags .t:nth-child(3){background:var(--mint);}
.proj-copy{color:var(--ink-dim);font-size:16px;max-width:50ch;}
.proj-copy .ps{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-deep);margin:18px 0 6px;}
.proj-copy .ps:first-child{margin-top:0;}
.proj-media{position:relative;}
.media-frame{border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 30px 60px -30px rgba(44,38,34,.45);
  transition:transform .6s var(--ease);}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.proj:hover .media-frame{transform:translateY(-6px);}
.media-badge{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--ink-faint);border-radius:999px;padding:7px 13px;z-index:3;}

/* feature (Econgruity) */
.proj.feature{background:var(--panel);border-radius:28px;border-top:0;margin:40px 0;padding:64px 56px 70px;}
.feature-top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:46px;}
.feature-top h3{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,60px);line-height:1;margin:14px 0 0;letter-spacing:-.025em;text-transform:uppercase;}
.feature-top h3 em{font-style:normal;color:var(--ink);background:var(--lav);padding:.01em .12em;border-radius:.08em;}
.devices{display:grid;grid-template-columns:1.62fr .82fr;gap:30px;align-items:end;}
/* browser frame */
.browser{margin:0;border-radius:14px;border:1px solid var(--ink-faint);background:var(--paper2);overflow:hidden;
  box-shadow:0 34px 64px -34px rgba(44,38,34,.5);}
.browser-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--paper);border-bottom:1px solid var(--ink-faint);}
.browser-bar .dots{display:flex;gap:7px;flex:none;}
.browser-bar .dots i{width:11px;height:11px;border-radius:50%;background:var(--ink-faint);}
.browser-bar .url{flex:1;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-dim);
  background:var(--panel);border-radius:999px;padding:5px 14px;max-width:260px;margin:0 auto;}
.browser-view{display:block;background:#14241a;}
.browser-view img{width:100%;display:block;}
/* phone frame */
.phone{margin:0;position:relative;border-radius:30px;padding:9px;background:#16130f;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 34px 60px -30px rgba(44,38,34,.55);}
.phone-cam{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:46px;height:6px;border-radius:99px;background:#000;opacity:.55;z-index:2;}
.phone-view{border-radius:22px;overflow:hidden;background:#14241a;height:430px;}
.phone-view img{width:100%;display:block;}
.feature-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px;}
.feature-meta div{border-top:1px solid var(--ink-faint);padding-top:14px;}
.feature-meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-deep);}
.feature-meta .v{margin-top:7px;font-size:15px;color:var(--ink);}

/* korean / illustration block */
.proj.illus .proj-grid{grid-template-columns:0.85fr 1.15fr;}
.proj.illus .media-frame{background:#2f7d8a;}
.proj.illus .media-frame img{object-fit:contain;}

/* ============================ CONTACT ============================ */
.contact{position:relative;padding:130px 0 60px;overflow:hidden;}
.contact .blob{opacity:.5;}
.contact-blob1{width:min(40vw,440px);aspect-ratio:1;background:radial-gradient(circle at 40% 35%,var(--lav),#b79be0);left:-8vw;top:8vh;animation:floatB 15s var(--ease) infinite;}
.contact-blob2{width:min(20vw,220px);aspect-ratio:1;background:var(--butter);right:6vw;bottom:18vh;animation:floatC 12s var(--ease) infinite;}
.contact-inner{position:relative;z-index:4;text-align:center;}
.contact h2{font-family:var(--display);font-weight:800;font-size:clamp(40px,7vw,100px);line-height:.96;letter-spacing:-.03em;margin:18px 0 0;text-transform:uppercase;}
.contact h2 em{font-style:normal;color:var(--ink);background:var(--lav);padding:.01em .12em;border-radius:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.contact .mail{display:inline-block;margin-top:34px;font-family:var(--mono);
  font-size:clamp(16px,2.2vw,26px);border-bottom:2px solid var(--coral);padding-bottom:6px;transition:color .25s;letter-spacing:-.01em;}
.contact .mail:hover{color:var(--coral-deep);}
.contact-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 46px;margin-top:50px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}
.contact-meta a:hover{color:var(--coral-deep);}
.contact-meta b{color:var(--ink);font-weight:400;}

footer{max-width:var(--maxw);margin:90px auto 0;padding:30px 48px 40px;border-top:1px solid var(--ink-faint);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}

/* ============================ REVEAL ============================
   Content is visible by DEFAULT. The hidden/animated start state is
   gated behind html.nv-anim, which JS only adds when motion is wanted
   AND it can guarantee the reveal will run — so the page is never
   stuck blank if JS, IntersectionObserver, or transitions don't fire. */
html.nv-anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
html.nv-anim .reveal.in{opacity:1;transform:none;}
html.nv-anim .reveal.d1{transition-delay:.08s;}
html.nv-anim .reveal.d2{transition-delay:.16s;}
html.nv-anim .reveal.d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .blob,.marquee-track,.bub{animation:none !important;}
  html{scroll-behavior:auto;}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:920px){
  .nav-cv span{display:none;}
  .nav-cv{padding:8px 10px;}
  .section{padding:0 28px;}
  .nav{padding:18px 28px;}
  .nav.scrolled{padding:12px 28px;}
  .links{display:none;}
  .about-grid{grid-template-columns:1fr;gap:46px;}
  .proj-grid.split,.proj-grid.split.flip,.proj.illus .proj-grid{grid-template-columns:1fr;gap:34px;}
  .proj-grid.split.flip .proj-media{order:0;}
  .devices{grid-template-columns:1fr;}
  .feature-meta{grid-template-columns:1fr;}
  .xp-row{grid-template-columns:1fr;gap:8px;}
  .xp-row .org{text-align:left;}
  .proj.feature{padding:44px 26px 50px;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .hero{padding:110px 28px 70px;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .btn{justify-content:center;}
  .contact-meta{flex-direction:column;gap:12px;}
}