/* ================================================================
   Yogi Raghvani — portfolio
   Ink black, emerald accent, cream type, bold condensed display.
   ================================================================ */

:root{
  --ink:#0a0a0b;
  --ink-2:#101012;
  --ink-3:#17171a;
  --cream:#f4f1ea;
  --cream-dim:#8d8880;
  --emerald:#10d98a;
  --emerald-2:#4dedae;
  --line:rgba(244,241,234,.13);

  --disp:"Anton", "Arial Narrow", sans-serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;

  --pad:clamp(1.1rem,4.5vw,4.5rem);
  --maxw:1400px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--emerald); color:#04120c; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* --------------------------------------------------- film grain */
.grain{
  position:fixed; inset:-150%; z-index:9000; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 1.15s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}

/* ------------------------------------------------------- loader */
.loader{
  position:fixed; inset:0; z-index:9500; background:var(--ink);
  display:grid; place-items:center; transition:opacity .7s ease, visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }
.loader__mark{ font-family:var(--disp); font-size:1.3rem; letter-spacing:.32em; color:var(--cream); }
.loader__bar{ margin:1.3rem auto 0; width:min(40vw,240px); height:2px; background:#26262a; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--emerald); transition:width .25s ease; }

/* ---------------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem var(--pad); mix-blend-mode:difference;
}
.nav__mark{ font-family:var(--disp); font-size:1rem; letter-spacing:.2em; color:var(--cream); text-decoration:none; }
.nav__links{ display:flex; gap:1.8rem; align-items:center; }
.nav__links a{
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cream); text-decoration:none; opacity:.6; transition:opacity .35s ease;
}
.nav__links a:hover{ opacity:1; }
.nav__cta{ opacity:1 !important; border-bottom:1px solid var(--emerald); padding-bottom:2px; }
@media(max-width:760px){ .nav__links a:not(.nav__cta){ display:none; } }

/* ================================================== SCENE / PIN */
.scene{ position:relative; }
.scene--hero{  height:520vh; }
.scene--build{ height:460vh; }
.scene--work{  height:520vh; }
.scene__pin{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; background:#000; }
.scene__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 46%, transparent 34%, rgba(0,0,0,.68) 100%),
    linear-gradient(to bottom, rgba(10,10,11,.66) 0%, transparent 24%, transparent 66%, rgba(10,10,11,.94) 100%);
}
.vignette--soft{
  background:
    radial-gradient(132% 86% at 50% 50%, transparent 42%, rgba(0,0,0,.58) 100%),
    linear-gradient(to bottom, rgba(10,10,11,.62) 0%, transparent 28%, transparent 70%, rgba(10,10,11,.9) 100%);
}
/* sits over bright footage, so it carries its own plate */
.scene__kicker{
  position:absolute; left:var(--pad); top:14vh; margin:0;
  font-size:.55rem; letter-spacing:.42em; text-transform:uppercase; color:var(--emerald);
  background:rgba(6,6,7,.62); backdrop-filter:blur(6px);
  border-left:2px solid var(--emerald);
  padding:.55rem .85rem .55rem .7rem;
}

/* --------------------------------------------------------- hero */
.hero__type{
  position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; padding-inline:var(--pad); pointer-events:none;
}
.hero__title{
  margin:0; font-family:var(--disp); line-height:.86; letter-spacing:-.005em;
  font-size:min(15vw,19vh);
  display:flex; justify-content:center; flex-wrap:wrap;
  text-shadow:0 8px 70px rgba(0,0,0,.8);
}
.hero__title .ch{
  display:inline-block; opacity:0;
  transform:translateY(.44em) rotateX(-60deg);
  transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.hero__title .ch.sp{ width:.26em; }
.is-lit .hero__title .ch{ opacity:1; transform:none; }

.hero__sub{
  margin:1.8rem auto 0; max-width:44ch;
  font-size:clamp(.9rem,1.9vw,1.3rem); line-height:1.5; color:var(--cream);
  text-shadow:0 2px 26px rgba(0,0,0,.95);
  opacity:0; transform:translateY(12px);
  transition:opacity .9s ease 1.15s, transform .9s ease 1.15s;
}
.is-lit .hero__sub{ opacity:1; transform:none; }

.hero__cue{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.52rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cream-dim); transition:opacity .5s ease;
}
.hero__cue i{ width:1px; height:36px; background:linear-gradient(var(--emerald), transparent); }
.hero__cue.is-gone{ opacity:0; }
.hero__loc{
  position:absolute; left:var(--pad); bottom:2rem; margin:0;
  font-size:.54rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cream-dim);
}

/* -------------------------------------------------------- stats */
.stats{ padding:clamp(4rem,10vh,7rem) 0; border-bottom:1px solid var(--line); }
.stats__row{
  list-style:none; margin:0; padding:0; display:grid;
  gap:clamp(1.8rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); text-align:center;
}
.stats__n{
  display:block; font-family:var(--disp);
  font-size:clamp(2.4rem,6.5vw,5rem); line-height:1; color:var(--emerald);
  font-variant-numeric:tabular-nums;
}
.stats__l{
  display:block; margin-top:.7rem; font-size:.55rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--cream-dim);
}

/* -------------------------------------------------------- story */
.story{ padding:clamp(5rem,13vh,9rem) 0; border-bottom:1px solid var(--line); }
.kicker{
  margin:0 0 1.6rem; font-size:.55rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--emerald);
}
.story__lead{
  margin:0 0 clamp(2.6rem,6vw,4rem); max-width:24ch;
  font-family:var(--disp); font-size:clamp(1.7rem,5vw,3.6rem);
  line-height:1.02; letter-spacing:-.005em; color:var(--cream);
}
.story__grid{
  display:grid; gap:clamp(2.4rem,5vw,4.5rem); grid-template-columns:1fr;
}
@media(min-width:900px){ .story__grid{ grid-template-columns:1.5fr 1fr; } }
.story__body p{
  margin:0 0 1.4rem; max-width:60ch;
  font-size:clamp(.94rem,1.25vw,1.06rem); line-height:1.85; color:var(--cream-dim);
}
.story__body p:last-child{ margin-bottom:0; }
.story__body p strong{ color:var(--cream); font-weight:400; }

.miles{ list-style:none; margin:0; padding:0; align-self:start; }
.miles li{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.2rem;
  padding:1.1rem 0; border-top:1px solid var(--line);
}
.miles li:last-child{ border-bottom:1px solid var(--line); }
.miles__y{
  grid-row:1/3; font-family:var(--disp); font-size:1.6rem; line-height:1;
  color:var(--emerald); font-variant-numeric:tabular-nums;
}
.miles__l{ font-size:.88rem; color:var(--cream); line-height:1.4; }
.miles__w{
  font-size:.55rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-dim);
}

/* ------------------------------------------------------ pillars */
.pillars{ position:absolute; inset:0; display:grid; place-items:center; padding-inline:var(--pad); pointer-events:none; }
.pillar{
  grid-area:1/1; width:min(92vw,720px); text-align:center;
  opacity:0; transform:translateY(28px) scale(.98); filter:blur(8px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}
.pillar.is-on{ opacity:1; transform:none; filter:none; }
.pillar__n{
  display:block; margin-bottom:1.1rem; font-family:var(--disp);
  font-size:.85rem; letter-spacing:.3em; color:var(--emerald);
}
.pillar__h{
  margin:0 0 1.2rem; font-family:var(--disp);
  font-size:clamp(2.2rem,7.5vw,5.4rem); line-height:.94; letter-spacing:-.005em;
  text-shadow:0 4px 44px rgba(0,0,0,.92);
}
.pillar__b{
  margin:0 auto; max-width:52ch;
  font-size:clamp(.92rem,1.5vw,1.1rem); line-height:1.75; color:var(--cream);
  text-shadow:0 2px 26px rgba(0,0,0,.95);
}

/* --------------------------------------------------------- work */
.workcards{
  position:absolute; inset:0; display:grid; place-items:center;
  padding-inline:var(--pad); pointer-events:none;
}
.wcards{
  display:grid; gap:clamp(.8rem,1.6vw,1.3rem);
  grid-template-columns:1fr; width:min(94vw,1180px); pointer-events:auto;
}
@media(min-width:860px){ .wcards{ grid-template-columns:repeat(3,1fr); } }
.wcard{
  display:block; text-decoration:none; color:inherit;
  padding:clamp(1.4rem,2.6vw,2rem);
  background:rgba(16,16,18,.62); border:1px solid var(--line);
  backdrop-filter:blur(14px);
  opacity:0; transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1),
             border-color .35s ease, background .35s ease;
}
.wcard.is-on{ opacity:1; transform:none; }
.wcard:hover{ transform:translateY(-10px); border-color:var(--emerald); background:rgba(23,23,26,.8); }
.wcard__n{ display:block; font-family:var(--disp); font-size:.75rem; letter-spacing:.3em; color:var(--emerald); margin-bottom:1rem; }
.wcard__h{
  margin:0 0 .5rem; font-family:var(--disp);
  font-size:clamp(1.2rem,2.4vw,1.75rem); line-height:1.02; letter-spacing:-.005em;
}
.wcard__m{ margin:0 0 .9rem; font-size:.55rem; letter-spacing:.24em; text-transform:uppercase; color:var(--emerald); }
.wcard__p{ margin:0; font-size:.9rem; line-height:1.65; color:var(--cream-dim); }
.wcard__go{
  display:inline-block; margin-top:1.2rem; font-size:.56rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--cream-dim); transition:color .3s ease, transform .3s ease;
}
.wcard:hover .wcard__go{ color:var(--emerald); transform:translateX(5px); }

/* ------------------------------------------------------- finale */
.finale{ padding:clamp(6rem,15vh,11rem) 0; text-align:center; background:var(--ink); }
.finale__h{
  margin:0; font-family:var(--disp);
  font-size:min(13vw,7.5rem); line-height:.88; letter-spacing:-.01em;
  white-space:pre-line;
}
.finale__s{ margin:1.6rem auto 2.8rem; max-width:44ch; font-size:.95rem; line-height:1.7; color:var(--cream-dim); }
.finale__cta{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; text-decoration:none; font-family:var(--sans);
  font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  padding:1.05rem 1.9rem; transition:all .3s ease;
}
.btn--solid{ background:var(--emerald); color:#04120c; }
.btn--solid:hover{ background:var(--emerald-2); transform:translateY(-3px); }
.btn--ghost{ border:1px solid var(--line); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--emerald); color:var(--emerald); transform:translateY(-3px); }

/* --------------------------------------------------------- foot */
.foot{ border-top:1px solid var(--line); padding:2.2rem 0; }
.foot__wrap{ display:flex; justify-content:space-between; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.foot__mail{
  font-family:var(--disp); font-size:clamp(.95rem,2vw,1.3rem); letter-spacing:.04em;
  color:var(--cream); text-decoration:none; border-bottom:1px solid var(--emerald); padding-bottom:2px;
}
.foot__mail:hover{ color:var(--emerald); }
.foot__social{ list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; flex-wrap:wrap; }
.foot__social a{
  font-size:.56rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none; transition:color .3s ease;
}
.foot__social a:hover{ color:var(--emerald); }
.foot__c{ font-size:.54rem; letter-spacing:.26em; color:var(--cream-dim); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .hero__title .ch,.hero__sub,.pillar,.wcard{ opacity:1; transform:none; filter:none; }
  .grain{ display:none; }
}