/* =========================================================
   IMMERSIVE HOMEPAGE — layers over home.css base tokens
   Cinematic / kinetic. Stone & sage. Anirudh Kapoor.
   ========================================================= */

/* ---------- intro / preloader ---------- */
html.lock, html.lock body{ overflow:hidden; height:100%; }
#intro{
  position:fixed; inset:0; z-index:300; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
}
#intro.done{ transform:translateY(-101%); }
#intro .mark-wrap{ width:84px; }
#intro .mark-wrap img{ display:block; width:100%; height:auto; clip-path:inset(0 0 100% 0); }
#intro .iwm{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.5em;
  text-transform:uppercase; color:var(--ink); opacity:0; padding-left:.5em;
}
#intro .iline{ width:0; height:1px; background:var(--line-strong); }
html.anim #intro .mark-wrap img{ animation:markDraw 1.15s cubic-bezier(.76,0,.24,1) .25s forwards; }
html.anim #intro .iwm{ animation:fadeUp 1s ease 1s forwards; }
html.anim #intro .iline{ animation:lineGrow 1s cubic-bezier(.76,0,.24,1) 1.05s forwards; }
@keyframes markDraw{ to{ clip-path:inset(0 0 0% 0); } }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:.85; transform:none;} }
@keyframes lineGrow{ to{ width:130px; } }

/* ---------- nav over hero ---------- */
.nav{ background:transparent; backdrop-filter:none; }
.nav.scrolled{ background:color-mix(in oklch, var(--paper) 82%, transparent); backdrop-filter:blur(12px); }

/* ---------- hero ---------- */
.ihero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(118px,15vh,190px); padding-bottom:64px; overflow:hidden;
}
.ihero-mark{
  position:absolute; right:-12vw; top:50%; width:min(64vw,860px); transform:translateY(-50%);
  opacity:.055; pointer-events:none; z-index:0; will-change:transform;
}
.ihero .wrap{ position:relative; z-index:1; width:100%; }
.ihero .kick{ overflow:hidden; }
.ihero .kick span{ display:inline-block; }
.ihero h1{ font-family:var(--display); font-weight:300; font-size:clamp(72px,15.5vw,240px); line-height:1.0; letter-spacing:-.022em; margin:clamp(22px,4vh,46px) 0 0; }
.ihero h1 em{ font-style:italic; }
.mask{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.04em; }
.mask > span{ display:block; transform:translateY(116%); }
html.js .mask > span{ transition:transform 1.15s cubic-bezier(.16,1,.3,1); }
html.ready .mask > span,
.revealed .mask > span{ transform:none; }
.mask:nth-child(2) > span{ transition-delay:.08s; }
.ihero .sub{ font-family:var(--serif); font-weight:300; font-size:clamp(19px,2.1vw,25px); line-height:1.5; color:var(--ink-2); max-width:42ch; margin-top:clamp(34px,5vh,60px); }
.ihero .kick, .ihero .sub, .ihero .rail{ opacity:0; transform:translateY(14px); }
html.js .ihero .kick, html.js .ihero .sub, html.js .ihero .rail{ transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1); }
html.ready .ihero .kick{ opacity:1; transform:none; transition-delay:.2s; }
html.ready .ihero .sub{ opacity:1; transform:none; transition-delay:.5s; }
html.ready .ihero .rail{ opacity:1; transform:none; transition-delay:.65s; }
.ihero .rail{ display:flex; gap:clamp(24px,4vw,52px); flex-wrap:wrap; margin-top:auto; padding-top:clamp(40px,7vh,76px); }
.ihero .rail span{ font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); }
.ihero .rail b{ color:var(--ink); font-weight:500; }
.scrollcue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; }
html.ready .scrollcue{ opacity:1; transition:opacity 1s ease 1.3s; }
.scrollcue .ln{ width:1px; height:42px; background:var(--line-strong); position:relative; overflow:hidden; }
.scrollcue .ln::after{ content:""; position:absolute; inset:0; background:var(--sage); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%{transform:translateY(-100%);} 50%{transform:translateY(0);} 100%{transform:translateY(100%);} }

/* ---------- generic reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); }
html.js .rv{ transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- manifesto ---------- */
.manifesto{ padding:clamp(110px,20vh,220px) 0; }
.manifesto .big{ font-family:var(--display); font-weight:300; font-size:clamp(34px,6vw,86px); line-height:1.04; letter-spacing:-.015em; max-width:18ch; }
.manifesto .big em{ font-style:italic; color:var(--sage); }
.manifesto .word{ display:inline; opacity:.14; transition:opacity .6s ease; }
.manifesto .word.lit{ opacity:1; }
.manifesto .foot{ display:flex; gap:48px; flex-wrap:wrap; margin-top:64px; padding-top:26px; border-top:1px solid var(--line); }
.manifesto .foot div{ max-width:34ch; }
.manifesto .foot .t{ font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); margin-bottom:10px; }
.manifesto .foot p{ font-size:16px; color:var(--ink-soft); margin:0; }

/* ---------- cinematic work ---------- */
.cwork{ padding:40px 0 0; }
.cwork-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:14px; margin-bottom:50px; }
.cwork-head a{ font-family:var(--mono); font-size:13px; color:var(--sage); }
.cfig{ position:relative; height:92svh; min-height:560px; overflow:hidden; display:block; }
.cfig + .cfig{ margin-top:8px; }
.cfig .media{ position:absolute; inset:-12% 0; height:124%; will-change:transform; }
.cfig .media .cap{ display:none; }
.cfig .scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,22,18,.62) 0%, rgba(20,22,18,.12) 42%, transparent 70%); z-index:1; }
.cfig .info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(28px,5vw,64px); color:var(--paper); display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.cfig .info .num{ font-family:var(--mono); font-size:13px; color:var(--sage-pale); }
.cfig .info h3{ font-family:var(--display); font-weight:400; font-size:clamp(38px,5.2vw,74px); line-height:.98; letter-spacing:-.015em; margin:12px 0 0; }
.cfig .info h3 em{ font-style:italic; }
.cfig .info .meta{ margin-top:14px; }
.cfig .info .meta{ font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(236,233,227,.8); }
.cfig .info .view{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--paper); border:1px solid rgba(236,233,227,.5); border-radius:100px; padding:11px 20px; transition:background .3s, color .3s, border-color .3s; white-space:nowrap; }
.cfig:hover .view{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cfig .media .plate{ height:100%; }

/* ---------- index w/ hover preview ---------- */
.windex{ padding:clamp(110px,18vh,200px) 0; }
.windex .opener{ margin-bottom:36px; }
.wrow{ display:grid; grid-template-columns:64px 1fr auto; gap:24px; align-items:baseline; padding:clamp(18px,2.4vw,30px) 4px; border-top:1px solid var(--line); position:relative; }
.wrow:last-child{ border-bottom:1px solid var(--line); }
.wrow .n{ font-family:var(--mono); font-size:12.5px; color:var(--sage); }
.wrow .t{ font-family:var(--display); font-weight:400; font-size:clamp(28px,4.4vw,58px); line-height:1; letter-spacing:-.01em; transition:transform .5s cubic-bezier(.16,1,.3,1), color .4s; }
.wrow .t em{ font-style:italic; }
.wrow .d{ font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
@media (hover:hover){
  .wrow:hover .t{ transform:translateX(28px); color:var(--sage); }
  .windex.has-hover .wrow:not(:hover) .t{ color:var(--line-strong); }
}
.float-preview{
  position:fixed; top:0; left:0; width:300px; height:380px; z-index:90; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.86) rotate(-3deg); transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
  will-change:transform; box-shadow:0 40px 80px -40px rgba(20,22,18,.5);
}
.float-preview.show{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-2deg); }
.float-preview .plate{ height:100%; }

/* ---------- disciplines marquee ---------- */
.marquee{ padding:clamp(40px,7vh,90px) 0; border-block:1px solid var(--line); overflow:hidden; background:var(--paper-deep); }
.mrow{ display:flex; white-space:nowrap; width:max-content; }
.mrow.r1{ animation:march 48s linear infinite; }
.mrow.r2{ animation:march 60s linear infinite reverse; margin-top:14px; }
.mrow .it{ font-family:var(--display); font-weight:300; font-size:clamp(34px,5vw,68px); letter-spacing:-.01em; color:var(--ink); padding:0 .35em; }
.mrow .it .dot{ color:var(--sage); padding:0 .35em; font-style:normal; }
.mrow .it em{ font-style:italic; color:var(--sage-2); }
@keyframes march{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- the witness (full screen) ---------- */
.iwitness{ background:var(--ink); color:var(--paper); min-height:100svh; display:flex; align-items:center; padding:clamp(90px,14vh,160px) 0; }
.iwitness .opener{ color:var(--sage-2); }
.iwitness .opener .num{ color:#8a8f82; }
.iwitness .wbar{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--sage-2); border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:18px; margin-top:44px; }
.iwitness blockquote{ margin:48px 0; font-family:var(--serif); font-weight:300; font-size:clamp(28px,4.6vw,62px); line-height:1.26; letter-spacing:-.008em; color:var(--paper); max-width:20ch; }
.iwitness blockquote em{ font-style:italic; color:#aeb6a4; }
.iwitness .wprov{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:#8a8f82; border-top:1px solid rgba(255,255,255,.16); padding-top:20px; }

/* ---------- cv band ---------- */
.cvband{ padding:clamp(100px,16vh,180px) 0; }
.cvband .inner{ display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center; }
.cvband h2{ font-family:var(--display); font-weight:300; font-size:clamp(40px,6vw,84px); line-height:.98; letter-spacing:-.015em; }
.cvband h2 em{ font-style:italic; color:var(--sage); }
.cvband p{ font-size:18px; color:var(--ink-2); max-width:48ch; margin-top:22px; }
.cvband .acts{ display:flex; flex-direction:column; gap:14px; }
.btn{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:17px 30px; border:1px solid var(--ink); border-radius:100px; text-align:center; transition:background .3s,color .3s; white-space:nowrap; }
.btn.solid{ background:var(--ink); color:var(--paper); }
.btn.solid:hover{ background:var(--sage); border-color:var(--sage); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- reduced motion + safety ---------- */
@media (prefers-reduced-motion:reduce){
  #intro{ display:none !important; }
  html.lock, html.lock body{ overflow:auto; height:auto; }
  .mask > span{ transform:none !important; }
  .ihero .kick, .ihero .sub, .ihero .rail{ opacity:1 !important; transform:none !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .mrow.r1,.mrow.r2{ animation:none; }
  .scrollcue .ln::after{ animation:none; }
  .ihero-mark{ transform:translateY(-50%) !important; }
}

@media (max-width:980px){
  .cvband .inner{ grid-template-columns:1fr; gap:32px; }
  .cvband .acts{ flex-direction:row; flex-wrap:wrap; }
  .wrow{ grid-template-columns:40px 1fr; }
  .wrow .d{ display:none; }
  .float-preview{ display:none; }
  .cfig{ height:64svh; min-height:420px; }
  .iwitness{ min-height:auto; }
}