/* ============================================================
   HOSSEIN NILI — Director of Photography / Director
   Design system. Tungsten light against deep dark.
   Vanilla CSS, no build step.
   ============================================================ */

/* ---- Font ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&display=swap');

/* ---- Tokens ---- */
:root{
  --bg:        #14110F;
  --bg-2:      #100D0C;
  --surface:   #1E1A16;
  --cream:     #EDE6DA;
  --muted:     #8A8076;
  --muted-dim: #5A534B;
  --amber:     #C9962E;
  --amber-soft:#D8AE55;

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);

  --font: 'Space Grotesk', system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 76px;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font);
  font-weight:300;
  background:var(--bg);
  color:var(--cream);
  line-height:1.5;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:none; }
::selection{ background:var(--amber); color:var(--bg-2); }

/* ============================================================
   FIXED OVERLAYS
   ============================================================ */

/* Film grain */
.grain{
  position:fixed; top:-60%; left:-60%;
  width:220%; height:220%;
  z-index:9000; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .42s steps(3) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); }
  33%{ transform:translate(-3%,2%); }
  66%{ transform:translate(2%,-2%); }
  100%{ transform:translate(-1%,1%); }
}

/* Vignette */
.vignette{
  position:fixed; inset:0;
  z-index:8000; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%,
              transparent 38%, rgba(16,13,12,.42) 78%, rgba(16,13,12,.86) 100%);
}

/* Custom cursor */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0;
  z-index:9500; pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  width:6px; height:6px;
  background:var(--cream);
}
.cursor-ring{
  width:38px; height:38px;
  border:1px solid var(--muted);
  transition:width .4s var(--ease), height .4s var(--ease),
             border-color .4s var(--ease), background-color .4s var(--ease);
}
.cursor-ring.is-hover{
  width:62px; height:62px;
  border-color:var(--amber);
  background:rgba(201,150,46,.06);
}
.cursor-dot.is-hover{ background:var(--amber-soft); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg-2);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:26px;
  transition:opacity .9s var(--ease), visibility .9s;
}
.preloader.done{ opacity:0; visibility:hidden; }
.pre__count{
  font-size:clamp(3.4rem,11vw,7rem);
  font-weight:300; letter-spacing:-.03em; line-height:.9;
  color:var(--cream);
}
.pre__bar{
  width:min(240px,52vw); height:1px;
  background:rgba(138,128,118,.22);
  overflow:hidden;
}
.pre__bar i{
  display:block; height:100%; width:0%;
  background:var(--amber);
  transition:width .2s linear;
}
.pre__label{
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted-dim);
}

/* ============================================================
   PAGE ENTRANCE / TRANSITION
   ============================================================ */
.page{
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
body.ready .page{ opacity:1; }
body.leaving .page{ opacity:0; transition:opacity .48s var(--ease); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  z-index:7000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  mix-blend-mode:difference;
}
.nav__brand{
  font-weight:400; font-size:.92rem;
  letter-spacing:.04em; color:#fff;
}
.nav__brand b{ font-weight:400; }
.nav__links{
  display:flex; gap:34px; align-items:center;
}
.nav__link{
  position:relative;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:#cfcfcf;
  padding:6px 0;
  transition:color .5s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--amber);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__link:hover{ color:#fff; }
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.active{ color:var(--amber-soft); }
.nav__link.active::after{ transform:scaleX(1); }

.nav__toggle{
  display:none;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:#fff;
}

/* Mobile fullscreen menu */
.menu{
  position:fixed; inset:0; z-index:6900;
  background:var(--bg-2);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease), visibility .6s;
}
.menu.open{ opacity:1; visibility:visible; }
.menu a{
  font-size:clamp(2rem,9vw,3.4rem); font-weight:300;
  letter-spacing:-.02em; color:var(--cream);
  padding:8px 0;
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .4s var(--ease);
}
.menu.open a{ opacity:1; transform:none; }
.menu a:nth-child(1){ transition-delay:.08s; }
.menu a:nth-child(2){ transition-delay:.14s; }
.menu a:nth-child(3){ transition-delay:.20s; }
.menu a:nth-child(4){ transition-delay:.26s; }
.menu a.active{ color:var(--amber-soft); }
.menu__close{
  position:absolute; top:26px; right:var(--gutter);
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap{ padding-inline:var(--gutter); }
.section{ padding-block:clamp(70px,12vh,140px); }
.eyebrow{
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted-dim);
}
.display{
  font-weight:300; letter-spacing:-.02em; line-height:.92;
  font-size:clamp(2.1rem,5.4vw,4.2rem);
}
.lead{
  font-weight:300; letter-spacing:-.01em; line-height:1.16;
  font-size:clamp(1.5rem,3.1vw,2.5rem);
  color:var(--cream);
}
.muted{ color:var(--muted); }

/* ============================================================
   FRAME SYSTEM
   ============================================================ */
.frame{
  position:relative; overflow:hidden;
  background:var(--bg-2);
  isolation:isolate;
}
/* graded tungsten fill (decorative / fallback) */
.frame::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 120% at 78% 18%, rgba(201,150,46,.34), transparent 52%),
    radial-gradient(120% 120% at 18% 92%, rgba(16,13,12,.92), transparent 60%),
    linear-gradient(150deg, #241d15 0%, #14110F 58%, #0d0b0a 100%);
}
.frame::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 120px 18px rgba(16,13,12,.55);
}
.frame__img{
  position:relative; z-index:2;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 1.2s var(--ease), transform 1.4s var(--ease);
  filter:brightness(.62) contrast(1.06) saturate(.82) sepia(.14);
}
.frame__img.loaded{ opacity:1; transform:scale(1); }

/* clean frame — Hossein's real stills, true colour */
.frame--clean::before{ display:none; }
.frame--clean::after{
  box-shadow:inset 0 0 90px 10px rgba(16,13,12,.45);
}
.frame--clean .frame__img{ filter:none; }

/* graded variations */
.grade-1::before{ background:
  radial-gradient(110% 110% at 82% 14%, rgba(216,174,85,.40), transparent 50%),
  radial-gradient(120% 120% at 12% 96%, rgba(13,11,10,.95), transparent 58%),
  linear-gradient(155deg,#271f16,#14110F 60%,#0c0a09); }
.grade-2::before{ background:
  radial-gradient(120% 120% at 50% 102%, rgba(201,150,46,.30), transparent 55%),
  radial-gradient(100% 100% at 14% 6%, rgba(58,66,78,.45), transparent 52%),
  linear-gradient(160deg,#1a1813,#14110F 62%,#0d0b0a); }
.grade-3::before{ background:
  radial-gradient(120% 120% at 96% 50%, rgba(216,174,85,.34), transparent 52%),
  radial-gradient(110% 110% at 8% 56%, rgba(74,30,30,.40), transparent 56%),
  linear-gradient(150deg,#241a15,#14110F 60%,#0c0a09); }
.grade-4::before{ background:
  radial-gradient(120% 120% at 72% 26%, rgba(201,150,46,.30), transparent 50%),
  radial-gradient(120% 120% at 24% 90%, rgba(13,11,10,.92), transparent 60%),
  linear-gradient(140deg,#1f1a14,#14110F 58%,#0d0b0a); }
.grade-5::before{ background:
  radial-gradient(130% 130% at 88% 88%, rgba(216,174,85,.28), transparent 52%),
  radial-gradient(100% 100% at 16% 14%, rgba(40,46,54,.40), transparent 50%),
  linear-gradient(165deg,#1c1813,#14110F 60%,#0c0a09); }
.grade-6::before{ background:
  radial-gradient(120% 120% at 50% 10%, rgba(201,150,46,.26), transparent 50%),
  radial-gradient(120% 120% at 50% 100%, rgba(13,11,10,.92), transparent 62%),
  linear-gradient(180deg,#211b14,#14110F 64%,#0d0b0a); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  height:100vh; min-height:560px;
  overflow:hidden;
}
.hero--project{ height:88vh; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media .frame{ width:100%; height:100%; }
/* Ken Burns */
.hero__media .frame__img{
  animation:kenburns 22s var(--ease) forwards;
}
@keyframes kenburns{
  from{ transform:scale(1.04); }
  to{ transform:scale(1.16); }
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(16,13,12,.82) 0%, rgba(16,13,12,.12) 42%, transparent 70%),
    linear-gradient(to right, rgba(16,13,12,.55) 0%, transparent 46%);
}
/* letterbox bars */
.hero__bar{
  position:absolute; left:0; right:0; height:0; z-index:2;
  background:var(--bg-2); pointer-events:none;
  transition:height 1.2s var(--ease);
}
.hero__bar--top{ top:0; }
.hero__bar--bot{ bottom:0; }
body.letterbox .hero__bar{ height:clamp(22px,4.5vh,52px); }

.hero__inner{
  position:absolute; z-index:3;
  left:var(--gutter); bottom:clamp(36px,7vh,80px);
  right:var(--gutter);
  will-change:transform;
}
.hero__name{
  font-weight:300; letter-spacing:-.02em; line-height:.86;
  font-size:clamp(3rem,12vw,10rem);
  color:var(--cream);
  text-wrap:balance;
}
.hero__name .ln{ display:block; overflow:hidden; }
.hero__name .ln span{ display:block; transform:translateY(105%); }
body.hero-in .hero__name .ln span{
  transform:translateY(0);
  transition:transform 1.1s var(--ease);
}
body.hero-in .hero__name .ln:nth-child(2) span{ transition-delay:.09s; }
.hero__meta{
  margin-top:22px;
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.hero__meta b{ color:var(--cream); font-weight:400; }
.hero__scroll{
  position:absolute; z-index:3; right:var(--gutter);
  bottom:clamp(36px,7vh,80px);
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted-dim);
  writing-mode:vertical-rl;
}
.hero--project .hero__meta{ margin-top:18px; }
.hero__title{
  font-weight:300; letter-spacing:-.02em; line-height:.9;
  font-size:clamp(2.6rem,9vw,7rem);
  color:var(--cream);
}

/* ============================================================
   SELECTED WORK / WORK GRID
   ============================================================ */
.work-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:clamp(28px,5vh,56px);
}
.grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.4vw,34px);
}
.tile{ position:relative; display:block; }
.tile__media{
  aspect-ratio:16/10; width:100%;
}
.tile .frame__img{ transition:opacity 1.2s var(--ease), transform 1.6s var(--ease); }
.tile:hover .frame__img.loaded{ transform:scale(1.045); }
.tile__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:22px 24px;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px;
  background:linear-gradient(to top, rgba(16,13,12,.86), transparent);
  transform:translateY(14px); opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.tile:hover .tile__meta{ transform:none; opacity:1; }
.tile__title{
  font-size:clamp(1.3rem,2.4vw,2rem); font-weight:300; letter-spacing:-.01em;
  line-height:1;
}
.tile__sub{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-top:8px;
}
.tile__idx{
  font-size:.66rem; letter-spacing:.22em; color:var(--muted-dim);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.about__portrait{ aspect-ratio:4/5; width:100%; position:sticky; top:var(--nav-h); }
.about__body{ max-width:54ch; }
.about__body .lead{ margin-bottom:30px; }
.about__body p{ color:var(--muted); margin-bottom:18px; font-size:1.02rem; }
.about__body p.cream{ color:var(--cream); }
.credits{
  margin-top:clamp(40px,7vh,80px);
  border-top:1px solid rgba(138,128,118,.16);
  padding-top:30px;
  display:flex; flex-wrap:wrap; gap:14px 56px;
}
.credits div{ display:flex; flex-direction:column; gap:7px; }
.credits dt{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted-dim);
}
.credits dd{ font-size:.92rem; color:var(--cream); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; gap:34px;
  padding:var(--nav-h) var(--gutter) 60px;
}
.contact .eyebrow{ margin-bottom:-8px; }
.contact__email{
  position:relative; display:inline-block;
  font-weight:300; letter-spacing:-.02em; line-height:1;
  font-size:clamp(1.7rem,6.6vw,5rem);
  color:var(--cream);
}
.contact__email::after{
  content:''; position:absolute; left:0; bottom:-.12em;
  width:100%; height:2px; background:var(--amber);
  transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease);
}
.contact__email:hover::after{ transform:scaleX(1); transform-origin:left; }
.socials{
  display:flex; gap:30px;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.socials a{ position:relative; transition:color .4s var(--ease); }
.socials a:hover{ color:var(--amber-soft); }

/* ============================================================
   PROJECT — SYNOPSIS + CREDITS
   ============================================================ */
.synopsis{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.synopsis__lead{ max-width:22ch; }
.synopsis__body{ color:var(--muted); max-width:50ch; margin-top:26px; }
.synopsis__body p{ margin-bottom:16px; }
.cred-grid{ display:flex; flex-direction:column; gap:0; }
.cred-grid div{
  display:flex; justify-content:space-between; gap:24px;
  padding:15px 0;
  border-top:1px solid rgba(138,128,118,.16);
}
.cred-grid div:last-child{ border-bottom:1px solid rgba(138,128,118,.16); }
.cred-grid dt{
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted-dim); white-space:nowrap;
}
.cred-grid dd{ font-size:.92rem; color:var(--cream); text-align:right; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{ display:flex; flex-direction:column; gap:clamp(14px,2.4vw,32px); }
.gallery__full .frame{ aspect-ratio:16/9; width:100%; }
.gallery__pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.4vw,32px);
}
.gallery__pair .frame{ aspect-ratio:16/10; width:100%; }
.shot{ cursor:none; display:block; width:100%; padding:0; border:0; text-align:left; }
.shot .frame__img{ transition:opacity 1.2s var(--ease), transform 1.8s var(--ease); }
.shot:hover .frame__img.loaded{ transform:scale(1.03); }
.cap{
  margin-top:12px;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-dim);
}

/* ============================================================
   NEXT PROJECT
   ============================================================ */
.next{
  display:block; position:relative;
  padding:clamp(56px,12vh,130px) var(--gutter);
  border-top:1px solid rgba(138,128,118,.16);
  text-align:center;
}
.next .eyebrow{ display:block; margin-bottom:18px; }
.next__title{
  font-weight:300; letter-spacing:-.02em; line-height:.9;
  font-size:clamp(2.4rem,8vw,6rem);
  color:var(--muted);
  transition:color .5s var(--ease);
}
.next:hover .next__title{ color:var(--cream); }
.next__arrow{ color:var(--amber); display:inline-block; margin-left:.2em;
  transform:translateX(0); transition:transform .5s var(--ease); }
.next:hover .next__arrow{ transform:translateX(14px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  border-top:1px solid rgba(138,128,118,.14);
  padding:46px var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-dim);
}
.footer a{ transition:color .4s var(--ease); }
.footer a:hover{ color:var(--amber-soft); }
.footer__nav{ display:flex; gap:26px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:9200;
  background:rgba(10,8,7,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:92vw; max-height:84vh;
  object-fit:contain;
  opacity:0; transform:scale(.98);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.lightbox.shown .lightbox__img{ opacity:1; transform:none; }
.lb-btn{
  position:absolute; z-index:2;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
  padding:14px;
  transition:color .4s var(--ease);
}
.lb-btn:hover{ color:var(--amber-soft); }
.lb-close{ top:24px; right:var(--gutter); }
.lb-prev{ left:var(--gutter); top:50%; transform:translateY(-50%); }
.lb-next{ right:var(--gutter); top:50%; transform:translateY(-50%); }
.lb-count{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  font-size:.62rem; letter-spacing:.24em; color:var(--muted-dim);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-block; }
  .grid{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about__portrait{ position:static; aspect-ratio:4/5; max-width:420px; }
  .synopsis{ grid-template-columns:1fr; }
  .gallery__pair{ grid-template-columns:1fr; }
  .tile__meta{ transform:none; opacity:1;
    background:linear-gradient(to top, rgba(16,13,12,.9), transparent); }
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
}
@media (pointer:coarse){
  body, button, a, .shot{ cursor:auto; }
  .cursor-dot,.cursor-ring{ display:none !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
  .frame__img{ opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; }
  .hero__name .ln span{ transform:none; }
}

/* focus accessibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--amber); outline-offset:4px;
}