/* Vanshika Soner — portfolio
   Editorial dark → light scroll inversion with scattered, settling project cards. */

:root{
  --bg:#08080a;
  --fg:#f3efe7;
  --muted:rgba(243,239,231,.55);
  --line:rgba(243,239,231,.14);
  --surface:#101014;
  --shadow:0 30px 70px -30px rgba(0,0,0,.85);
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

.skip{
  position:fixed;top:10px;left:10px;z-index:30;
  padding:10px 16px;border-radius:99px;
  background:var(--fg);color:var(--bg);font-size:13px;
  transform:translateY(-160%);transition:transform .3s var(--ease);
}
.skip:focus{transform:none}

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:12;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--fg);opacity:.28;pointer-events:none;
}

/* ---------- header ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:11;
  display:flex;align-items:center;gap:16px;
  padding:18px var(--pad);
  color:var(--fg);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.nav.is-hidden{opacity:0;transform:translateY(-14px);pointer-events:none}

.ident{display:inline-flex;align-items:center;gap:13px}
.avatar{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);
  box-shadow:0 6px 20px -8px rgba(0,0,0,.7);
  transition:transform .5s var(--ease);
}
.ident:hover .avatar{transform:scale(1.06)}
.ident-text{display:flex;flex-direction:column;line-height:1.25}
.ident-text strong{font-weight:500;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase}
.ident-text em{font-style:normal;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.nav-status{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.dot{width:6px;height:6px;border-radius:50%;background:#5be3a0;display:inline-block;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- hero ---------- */
.hero{
  position:relative;z-index:3;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);
  pointer-events:none;
}
.hero-inner{max-width:1100px;position:relative}
.hero-inner::before{
  content:"";position:absolute;inset:-16vh -20vw;
  background:radial-gradient(58% 52% at 30% 50%,var(--bg) 0%,rgba(0,0,0,0) 74%);
  opacity:.88;z-index:-1;
}
.display{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-size:clamp(3.4rem,12.5vw,11rem);
  line-height:.88;
  letter-spacing:-.025em;
  margin:0;
}
.display em{font-style:italic;opacity:.92}
.sub{
  margin:clamp(22px,3.4vw,38px) 0 0;
  font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

.scroll-cue{
  position:absolute;bottom:30px;left:var(--pad);
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.arrow{width:15px;height:22px;animation:bob 2.2s var(--ease) infinite}
@keyframes bob{
  0%,100%{transform:translateY(-3px);opacity:.45}
  50%{transform:translateY(5px);opacity:1}
}

/* ---------- work ---------- */
.work{position:relative;z-index:1;padding:clamp(40px,9vh,120px) var(--pad) clamp(60px,12vh,150px)}
/* While the cards are transformed up into the hero their layout position is
   far below the viewport, so Chrome culls them and paints empty plates. main.js
   gives the section its own compositing layer while the cards are scattered,
   which makes it rasterise past the viewport, and drops the hint once they
   settle. */
.work-head{border-top:1px solid var(--line);padding-top:22px;margin-bottom:clamp(40px,7vw,86px)}
.section-title{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,4vw,3.1rem);letter-spacing:-.02em;margin:0;
}

.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(40px,4.6vw,74px) clamp(20px,2.6vw,44px);
  align-items:start;
}
.card--web{grid-column:span 2}
.card--app{grid-column:span 1}
.card--web:nth-of-type(even){margin-top:clamp(18px,3.2vw,56px)}
.card--app{margin-top:clamp(10px,2vw,34px)}

/* The float is driven from the same rAF loop as the scatter (see main.js).
   A CSS transform animation here would promote each card to its own
   compositor layer, and because the cards' layout position sits far below the
   hero, Chrome then skips rasterising their images entirely. */
.card{position:relative}
.card-inner{
  transform-origin:0 0;
  display:block;color:inherit;text-decoration:none;
}
.card-inner:focus-visible{outline:2px solid currentColor;outline-offset:8px;border-radius:14px}
/* every card links out to the live product */
.meta h3::after{
  content:"↗";
  font-family:"Inter",sans-serif;font-size:.46em;margin-left:.5em;
  display:inline-block;vertical-align:.42em;opacity:.35;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.card-inner:hover h3::after,.card-inner:focus-visible h3::after{
  opacity:1;transform:translate(2px,-2px);
}

/* desktop shot */
.shot{
  position:relative;overflow:hidden;border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow);
  aspect-ratio:1200/616;
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .shot img{transform:scale(1.045)}

/* iphone frame */
.phone{
  position:relative;
  max-width:258px;
  aspect-ratio:9/19.5;
  border-radius:13% / 6%;
  padding:3.1%;
  background:linear-gradient(150deg,#4a4a50 0%,#17171a 34%,#0e0e10 62%,#3a3a40 100%);
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.06) inset;
  transition:transform .7s var(--ease);
}
.card:hover .phone{transform:translateY(-6px)}
.phone-screen{
  position:relative;height:100%;width:100%;overflow:hidden;
  border-radius:11% / 5.2%;
  background:#000;
}
.phone-screen img{width:100%;height:100%;object-fit:cover}
.island{
  position:absolute;top:5.4%;left:50%;transform:translateX(-50%);
  width:29%;height:2.9%;border-radius:99px;
  background:#08080a;z-index:2;
}
/* side buttons */
.phone::before,.phone::after{
  content:"";position:absolute;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#4c4c53,#2a2a2f);
}
.phone::before{left:-2px;top:22%;height:13%;box-shadow:0 -6% 0 0 #3c3c42}
.phone::after{right:-2px;top:26%;height:17%}

.meta{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:16px 2px 0}
.idx{grid-row:1 / span 3;font-size:11px;letter-spacing:.1em;color:var(--muted);padding-top:6px}
.meta h3{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(1.15rem,2vw,1.7rem);letter-spacing:-.01em;margin:0;line-height:1.15;
}
.desc{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--fg);opacity:.78;max-width:34ch}
.tag{margin:9px 0 0;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.card--app .desc{font-size:13px}

/* ---------- about ---------- */
.about{padding:clamp(52px,9vh,120px) var(--pad);border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px)}
.about-lead{
  font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.02em;margin:0;max-width:16ch;
}
.beliefs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vw,38px)}
.beliefs li{display:grid;grid-template-columns:auto 1fr;gap:18px;border-top:1px solid var(--line);padding-top:16px}
.beliefs span{font-size:11px;letter-spacing:.1em;color:var(--muted);padding-top:4px}
.beliefs p{margin:0;font-size:clamp(15px,1.5vw,19px);line-height:1.5;max-width:40ch}

/* ---------- contact ---------- */
.contact{padding:clamp(56px,11vh,140px) var(--pad) 40px;text-align:center}
.contact-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}
.contact-head{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(2.6rem,8.5vw,7rem);line-height:.95;letter-spacing:-.025em;margin:0;
}
.contact-head em{font-style:italic}

.links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(30px,5vw,54px)}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:99px;
  border:1px solid var(--line);
  font-size:14px;letter-spacing:.01em;
  transition:border-color .4s var(--ease),transform .4s var(--ease),background-color .4s var(--ease);
}
.pill svg{flex:none;opacity:.75;transition:opacity .4s var(--ease)}
.pill:hover{border-color:currentColor;transform:translateY(-2px)}
.pill:hover svg{opacity:1}

.foot-row{
  margin-top:clamp(56px,11vh,130px);padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.foot-links{display:flex;gap:18px}
.foot-links a:hover{color:var(--fg)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,6vw,60px) clamp(18px,3vw,36px)}
  .card--web{grid-column:span 2}
  .card--app{grid-column:span 1}
  .card--web:nth-of-type(even),.card--app{margin-top:0}
  .about-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .ident-text em{display:none}
  .nav-status{font-size:10px;letter-spacing:.08em}
  .avatar{width:40px;height:40px}
  .hero-inner::before{
    inset:-16vh -40vw;
    background:radial-gradient(74% 42% at 50% 50%,var(--bg) 0%,rgba(0,0,0,0) 76%);
    opacity:.94;
  }
  .desc{font-size:13px}
  .foot-row{justify-content:center;text-align:center}
}
@media (max-width:420px){
  .nav-status{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .arrow,.dot{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
}