/* ============================================================
   SHOTSBYZEESHAN — main.css
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
section[id], [id].about-page, #about{ scroll-margin-top:calc(var(--letterbox) + 74px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-ui);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.intro-lock{ overflow:hidden; height:100vh; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:1.5px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* Themed browser surfaces */
html{ caret-color:var(--gold); scrollbar-color:var(--gold-deep) var(--ink-1); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink-1); }
::-webkit-scrollbar-thumb{ background:var(--ink-3); border:2px solid var(--ink-1); border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-deep); }

/* Utility */
.u-label{
  font-family:var(--font-ui); font-weight:400;
  font-size:var(--fs-label); letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold);
}

/* ---------- Film grain (global) ---------- */
.grain{
  position:fixed; inset:-120%; z-index:60; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
  animation:grainShift 620ms steps(2) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 25%{transform:translate(-6%,4%)}
  50%{transform:translate(4%,-6%)} 75%{transform:translate(-3%,-3%)} 100%{transform:translate(5%,5%)}
}

/* ---------- Cinematic letterbox ---------- */
.letterbox{ position:fixed; left:0; right:0; height:var(--letterbox); z-index:55; pointer-events:none;
  background:#000; }
.letterbox--top{ top:0; box-shadow:0 1px 0 var(--line-gold); }
.letterbox--bottom{ bottom:0; box-shadow:0 -1px 0 var(--line-gold); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--letterbox) + .9rem) var(--gutter) .9rem;
  transition:opacity 1s var(--ease-cine);
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; }
.nav__brand img{ width:38px; height:38px; opacity:.96; }
.nav__brand span{
  font-family:var(--font-ui); font-weight:400; font-size:.72rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--paper);
}
.nav__links{ display:flex; align-items:center; gap:2.2rem; }
.nav__links a{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim);
  font-weight:400; position:relative; transition:color .4s var(--ease-cine);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-cine);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  border:1px solid var(--line-gold); color:var(--gold)!important;
  padding:.62rem 1.25rem; border-radius:100px; transition:all .5s var(--ease-cine);
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--gold); color:var(--ink)!important; border-color:var(--gold); }
@media (max-width:720px){ .nav__links a:not(.nav__cta){ display:none; } }

/* ============================================================
   HERO — "The Gallery Curtain"
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:var(--ink); }

/* drifting portrait columns */
.curtain{
  position:absolute; inset:0; display:grid; gap:clamp(10px,1.4vw,22px);
  grid-template-columns:repeat(3,1fr);
  padding:0 clamp(10px,1.4vw,22px);
  will-change:transform;
}
.col{ position:relative; overflow:hidden; }
.col__track{ display:flex; flex-direction:column; gap:clamp(10px,1.4vw,22px); will-change:transform; }
.col__track img{
  width:100%; aspect-ratio:2/3; object-fit:cover; object-position:center;
  filter:saturate(.92) brightness(.86) contrast(1.02);
}
/* seamless vertical drift; speeds & directions vary per column */
.col--1 .col__track{ animation:driftUp 44s linear infinite; }
.col--2 .col__track{ animation:driftDown 58s linear infinite; }
.col--3 .col__track{ animation:driftUp 50s linear infinite; }
@keyframes driftUp{ from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes driftDown{ from{transform:translateY(-50%)} to{transform:translateY(0)} }

/* film-strip gold hairlines at gutters */
.curtain::before,.curtain::after{
  content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--line-gold); z-index:3;
}
.curtain::before{ left:33.33%; } .curtain::after{ left:66.66%; }

/* scrim + vignette — cinematic, weighted to the lower-left title zone */
.hero__scrim{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    radial-gradient(150% 130% at 20% 92%, rgba(15,22,20,.92) 0%, rgba(15,22,20,.34) 40%, transparent 66%),
    radial-gradient(120% 92% at 62% 26%, transparent 0%, rgba(15,22,20,.30) 58%, rgba(15,22,20,.70) 100%),
    linear-gradient(180deg, rgba(15,22,20,.58) 0%, rgba(15,22,20,.12) 26%, rgba(15,22,20,.28) 58%, rgba(15,22,20,.90) 100%);
}

/* viewfinder film-frame (cinema motif) */
.hero__frame{
  position:absolute; z-index:5; pointer-events:none;
  inset:calc(var(--letterbox) + 18px) 18px; border:1px solid var(--line-gold);
  opacity:0; transition:opacity 1.2s var(--ease-cine) .1s;
}
body.hero-in .hero__frame{ opacity:1; }
.hero__frame .tick{ position:absolute; width:15px; height:15px; border:0 solid var(--gold); opacity:.85; }
.hero__frame .tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.hero__frame .tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
.hero__frame .bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
.hero__frame .br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

/* cinematic lower-third — copy hugs the frame, the center stays open */
.hero__inner{
  position:absolute; inset:0; z-index:6;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:1.4rem clamp(1.5rem,5vw,4.5rem);
  padding:0 clamp(1.6rem,5vw,5rem) calc(var(--letterbox) + clamp(1.8rem,4.5vh,3rem));
}
.hero__lede{ min-width:0; }

.hero__eyebrow{
  display:flex; align-items:center; gap:.85rem; margin-bottom:clamp(.8rem,2vh,1.3rem);
  font-family:var(--font-ui); font-weight:400; font-size:var(--fs-label);
  letter-spacing:.36em; text-transform:uppercase; color:var(--gold);
  opacity:0; transform:translateY(12px);
  transition:opacity .9s var(--ease-cine) .22s, transform .9s var(--ease-cine) .22s;
}
.hero__eyebrow::before{ content:""; width:clamp(26px,4vw,50px); height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
body.hero-in .hero__eyebrow{ opacity:1; transform:none; }

.hero__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem, 1rem + 2.15vw, 3rem);
  line-height:1.14; letter-spacing:.012em; color:var(--paper);
  text-shadow:0 2px 34px rgba(0,0,0,.5);
}
.hero__title .line{ display:block; overflow:hidden; padding:0 .08em .14em; }
.hero__title .line > span{ display:block; transform:translateY(120%); transition:transform 1s var(--ease-expo); }
.hero__title .line:nth-child(1) > span{ transition-delay:.30s; }
.hero__title .line:nth-child(2) > span{ transition-delay:.42s; }
body.hero-in .hero__title .line > span{ transform:translateY(0); }
.hero__title em{ font-style:normal; font-weight:400; color:var(--gold-bright); }

.hero__aside{
  display:flex; flex-direction:column; align-items:flex-end; gap:clamp(1rem,2.4vh,1.5rem);
  text-align:right; padding-bottom:.15rem;
}
.hero__lead{
  max-width:32ch; color:var(--paper-dim);
  font-size:clamp(.9rem,.86rem + .2vw,1rem); font-weight:300; line-height:1.55;
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease-cine) .6s, transform .9s var(--ease-cine) .6s;
}
body.hero-in .hero__lead{ opacity:1; transform:none; }

.hero__actions{
  display:flex; gap:.85rem; align-items:center; flex-wrap:wrap; justify-content:flex-end;
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease-cine) .74s, transform .9s var(--ease-cine) .74s;
}
body.hero-in .hero__actions{ opacity:1; transform:none; }

/* custom "leaf" buttons — asymmetric radius that flips orientation on hover */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  font-family:var(--font-ui); font-weight:500; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 1.85rem; min-height:50px; cursor:pointer; border:1px solid transparent;
  border-radius:3px 15px 3px 15px;
  transition:transform .35s var(--ease-cine), background .5s var(--ease-cine), color .5s var(--ease-cine),
             border-color .5s var(--ease-cine), border-radius .55s var(--ease-cine), box-shadow .5s var(--ease-cine);
  will-change:transform;
}
.btn:hover{ border-radius:15px 3px 15px 3px; }
.btn--primary{ background:var(--paper); color:var(--ink); box-shadow:0 10px 26px -12px rgba(0,0,0,.55); }
.btn--primary:hover{ background:#F6F2E7; box-shadow:0 14px 34px -14px rgba(0,0,0,.6); }
.btn--primary:active{ transform:translateY(1px) scale(.985); }
.btn--ghost{
  color:var(--paper); border-color:var(--line-gold);
  background:rgba(11,11,12,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(11,11,12,.5); }
.btn--ghost:active{ transform:translateY(1px) scale(.985); }
.btn__arrow{ font-size:1.1em; transition:transform .4s var(--ease-cine); }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn__play{ position:relative; width:20px; height:20px; border-radius:50%; border:1px solid currentColor; flex:none; }
.btn__play::after{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; }

@media (prefers-reduced-transparency:reduce){
  .btn--ghost{ background:rgba(11,11,12,.82); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

@media (max-width:900px){
  .curtain{ grid-template-columns:repeat(2,1fr); }
  .curtain::after{ display:none; } .curtain::before{ left:50%; }
  .col--3{ display:none; }
}
/* tablet/mobile: stack the lower-third at bottom-left */
@media (max-width:820px){
  .hero__inner{
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:1.3rem;
  }
  .hero__aside{ align-items:flex-start; text-align:left; }
  .hero__actions{ justify-content:flex-start; }
}
@media (max-width:560px){
  .hero__inner{ padding-inline:1.35rem; }
  .hero__eyebrow{ letter-spacing:.24em; font-size:.6rem; gap:.55rem; }
  .hero__eyebrow::before{ width:24px; }
  .hero__lead{ font-size:.94rem; max-width:34ch; }
  .hero__frame{ inset:calc(var(--letterbox) + 12px) 12px; }
}

/* ============================================================
   SECTION SCAFFOLD (foundation for later pages)
   ============================================================ */
.section{ padding:clamp(4rem,10vh,9rem) var(--gutter); position:relative; }
.section__head{ max-width:60ch; }
.section__head h2{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-h2); line-height:1.14; letter-spacing:.01em; margin-top:1rem; }
.section__head p{ color:var(--paper-dim); margin-top:1.1rem; max-width:52ch; }
.placeholder-note{ margin-top:2rem; color:var(--paper-soft); font-size:.8rem; letter-spacing:.04em; }
.footer{ border-top:1px solid var(--line-soft); padding:3rem var(--gutter) calc(var(--letterbox) + 2rem); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; color:var(--paper-soft); font-size:.78rem; letter-spacing:.06em; }

/* ============================================================
   INTRO (shared base) — modules add their own layers
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:100; background:var(--ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.intro[hidden]{ display:none; }
.intro__grain{
  position:absolute; inset:-60%; pointer-events:none; opacity:0;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; animation:grainShift 560ms steps(2) infinite;
}
.intro__bloom{
  position:absolute; width:min(78vmin,780px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(238,232,216,.28) 0%, rgba(125,159,144,.16) 34%, transparent 66%);
  filter:blur(24px); opacity:0; transform:scale(.6);
}
.intro__stage{ position:relative; width:min(72vmin,620px); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.intro__skip{
  position:absolute; right:var(--gutter); bottom:calc(var(--letterbox) + 1.2rem); z-index:110;
  background:none; border:1px solid var(--line-soft); color:var(--paper-soft); cursor:pointer;
  font-family:var(--font-ui); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  padding:.6rem 1.1rem; border-radius:100px; transition:all .4s var(--ease-cine);
}
.intro__skip:hover{ color:var(--paper); border-color:var(--line-gold); }

/* develop reveal */
.intro__logo{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; will-change:opacity,filter,transform; }
.dev-flare{
  position:absolute; top:50%; left:0; width:60%; height:3px; transform:translate(-60%,-50%);
  background:radial-gradient(closest-side, rgba(245,241,229,.95), rgba(190,207,200,.5) 40%, transparent 75%);
  filter:blur(1px); opacity:0; mix-blend-mode:screen; pointer-events:none;
  box-shadow:0 0 24px 6px rgba(190,207,200,.5);
}
.dev-flare::before{
  content:""; position:absolute; left:50%; top:50%; width:5px; height:150px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(245,241,229,.82), transparent 72%); filter:blur(2px);
}
.dev-scan{
  position:absolute; left:0; right:0; top:0; height:2px; opacity:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(90deg, transparent, rgba(190,207,200,.55) 20%, rgba(245,241,229,.85) 50%, rgba(190,207,200,.55) 80%, transparent);
  filter:blur(1px);
}
.intro__iris{
  position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; opacity:0;
  box-shadow:0 0 0 2px rgba(238,232,216,.85), 0 0 40px 6px rgba(125,159,144,.30);
}
.intro--iris{ clip-path:circle(150% at 50% 50%); }

/* signature reveal */
.intro__svg{ width:100%; height:100%; overflow:visible; }

/* start state: hero + nav dimmed under intro until handoff */
body.intro-active .nav{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .col--1 .col__track,.col--2 .col__track,.col--3 .col__track{ animation:none; }
  .grain,.intro__grain{ animation:none; }
  .hero__eyebrow,.hero__lead,.hero__actions{ opacity:1; transform:none; transition:none; }
  .hero__title .line > span{ transform:none; transition:none; }
  .hero__frame{ opacity:1; transition:none; }
}