/* ============================================================
   AKAM — monochrome resonance. Black · graphite · bone.
   ============================================================ */

:root{
  --bg:#070707;
  --bg-2:#0c0c0d;
  --ink:#f3f1ec;          /* bone white */
  --ink-2:#b9b6af;        /* dimmed */
  --ink-3:#6f6d68;        /* faint */
  --line:rgba(243,241,236,.14);
  --line-2:rgba(243,241,236,.07);

  --font-display:'Cormorant Garamond', 'Gulzar', Georgia, serif;
  --font-body: 'Mirza','Space Grotesk', system-ui, sans-serif;
  /* --font-fa:'Vazirmatn', system-ui, sans-serif; */

  --maxw:1320px;
  --gut:clamp(20px, 5vw, 84px);
  --type-scale:1;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:350;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* html[dir="rtl"] body{ font-family:var(--font-fa); } */
::selection{ background:var(--ink); color:#000; }

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

/* ── language visibility ─────────────────────────────── */
html[data-lang="en"] .fa{ display:none !important; }
html[data-lang="fa"] .en{ display:none !important; }
.fa{ font-style:normal !important; }

/* ── WebGL canvas (fixed, full viewport) ─────────────── */
#gl{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block;
  transition:opacity 1.2s var(--ease);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── layout shell ────────────────────────────────────── */
main{ position:relative; z-index:2; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }

/* ── top nav ─────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  mix-blend-mode:difference; color:#fff;
}
.nav__mark{ display:flex; align-items:center; gap:12px; }
.nav__mark svg{ width:22px; height:22px; overflow:visible; }
.nav__name{
  font-family:var(--font-display); font-weight:500;
  font-size:18px; letter-spacing:.16em; text-transform:uppercase;
}
.nav__links{ display:flex; gap:clamp(14px,2.4vw,34px); align-items:center; }
.nav__links a{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; opacity:.78; transition:opacity .3s;
}
.nav__links a:hover{ opacity:1; }
.lang-toggle{
  display:flex; align-items:center; gap:6px; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  background:none; border:0; color:inherit; font-family:inherit; padding:0;
}
.lang-toggle b{ font-weight:700; }
.lang-toggle span{ opacity:.4; }
.lang-toggle .on{ opacity:1; }
@media(max-width:760px){
  .nav__links a:not(.lang-toggle){ display:none; }
}

/* ── HERO ────────────────────────────────────────────── */
.hero{
  min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:0 var(--gut);
}
.hero__eyebrow{
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:clamp(22px,4vh,46px);
}
.wordmark{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(76px, 20vw, 280px);
  line-height:.86;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}
.wordmark .fa{ font-style:normal; font-weight:600; letter-spacing:0; }
.hero__sub{
  margin-top:clamp(26px,5vh,52px);
  font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink-2);
}
.hero__sub b{ color:var(--ink); font-weight:600; }
.hero__sub .dot{ color:var(--ink-3); margin:0 .5em; }
html[dir="rtl"] .hero__eyebrow,
html[dir="rtl"] .hero__sub{ letter-spacing:.06em; }

.scrollcue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ── hero entrance: resting state is VISIBLE; animate only via .intro ── */
.hero__eyebrow,.wordmark,.hero__sub,.scrollcue{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  html.intro .hero__eyebrow{ animation:reveal 1.1s var(--ease) .05s both; }
  html.intro .wordmark{ animation:reveal 1.5s var(--ease) .15s both; }
  html.intro .hero__sub{ animation:reveal 1.2s var(--ease) .45s both; }
  html.intro .scrollcue{ animation:reveal 1s var(--ease) .7s both; }
}
@keyframes reveal{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.scrollcue i{
  width:1px; height:46px; background:linear-gradient(var(--ink-3), transparent);
  transform-origin:top; animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0)} 40%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }

/* ── generic section heading ─────────────────────────── */
.sec{ padding-block:clamp(90px,16vh,200px); }
.sec__index{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:26px;
  display:flex; align-items:center; gap:14px;
}
.sec__index::before{ content:""; width:34px; height:1px; background:var(--line); }
.sec__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,5.6vw,76px); line-height:1.02; letter-spacing:-.015em;
  margin:0 0 .5em; max-width:18ch;
}
.sec__lead{
  font-size:clamp(15px,1.5vw,19px); line-height:1.65; color:var(--ink-2);
  max-width:54ch; font-weight:350;
}

/* ── TRIO — triptych ─────────────────────────────────── */
.trio__grid{
  margin-top:clamp(46px,8vh,90px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.6vw,22px);
}
.bro{
  position:relative; display:flex; flex-direction:column;
}
.bro__img{
  position:relative; overflow:hidden; aspect-ratio:3/4;
  background:var(--bg-2); border:1px solid var(--line-2);
  filter:grayscale(1) contrast(1.04);
}
.bro__img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 1.1s var(--ease), filter 1.1s var(--ease);
  filter:brightness(.86);
}
.bro:hover .bro__img img{ transform:scale(1.0); filter:brightness(1); }
.bro__no{
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:var(--font-display); font-size:14px; letter-spacing:.2em; color:var(--ink-2);
}
.bro__meta{ padding:20px 2px 0; }
.bro__name{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(24px,2.6vw,34px); line-height:1; margin:0;
}
.bro__inst{
  margin-top:8px; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-2);
}
.bro__bio{
  margin-top:14px; font-size:14px; line-height:1.6; color:var(--ink-2);
  max-width:34ch;
}
html[dir="rtl"] .bro__inst{ letter-spacing:.08em; }
@media(max-width:820px){
  .trio__grid{ grid-template-columns:1fr; gap:48px; }
  .bro__img{ aspect-ratio:4/3; }
}

/* ── full-bleed cinematic interstitial ───────────────── */
.bleed{
  position:relative; height:clamp(64vh,90vh,100vh); overflow:hidden;
  display:flex; align-items:flex-end;
}
.bleed img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.7) contrast(1.05);
}
@media(max-width:900px) { .bleed{ height:clamp(48vh,60vh,80vh); background-color: #000; object-fit: contain;} }

.bleed::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,7,7,.55) 0%, rgba(7,7,7,0) 30%, rgba(7,7,7,.85) 100%);
}
.bleed__cap{
  position:relative; z-index:2; padding:0 var(--gut) clamp(40px,8vh,90px);
  max-width:var(--maxw); margin:0 auto; width:100%;
}
.bleed__quote{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(26px,4.2vw,58px); line-height:1.12; letter-spacing:-.01em;
  max-width:20ch; margin:0;
}
.bleed__by{ margin-top:18px; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-2); }

/* ── LISTEN ──────────────────────────────────────────── */
.listen__inner{
  margin-top:clamp(40px,7vh,80px);
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,80px);
  align-items:start;
}
@media(max-width:900px){ .listen__inner{ grid-template-columns:1fr; gap:44px; } }

.player{
  border:1px solid var(--line); background:rgba(12,12,13,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:clamp(22px,3vw,38px);
}
.player__now{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3); }
.player__title{
  font-family:var(--font-fa); font-weight:500;
  font-size:clamp(24px,3vw,38px); line-height:1.12; margin:12px 0 2px; min-height:1.1em;
}
.player__artist{ font-size:13px; color:var(--ink-2); letter-spacing:.04em; }

.player__bar{
  margin-top:26px; height:2px; background:var(--line); position:relative; cursor:pointer;
}
.player__bar i{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--ink); }
.player__bar b{
  position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--ink); transform:translate(-50%,-50%); left:0%;
}
.player__time{
  display:flex; justify-content:space-between; margin-top:10px;
  font-size:11px; letter-spacing:.06em; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.player__ctrls{ display:flex; align-items:center; gap:20px; margin-top:24px; }
.pbtn{
  appearance:none; border:0; background:none; color:var(--ink-2); cursor:pointer;
  padding:6px; display:grid; place-items:center; transition:color .3s, transform .3s;
}
.pbtn:hover{ color:var(--ink); }
.pbtn:active{ transform:scale(.92); }
.pbtn--play{
  width:60px; height:60px; border-radius:50%; border:1px solid var(--line);
  color:var(--ink);
}
.pbtn--play:hover{ border-color:var(--ink); background:rgba(243,241,236,.04); }

.tracklist{ display:flex; flex-direction:column; }
.tracklist h4{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 8px; font-weight:600;
}
.track{
  display:flex; align-items:center; gap:18px; padding:15px 4px;
  border-top:1px solid var(--line-2); cursor:pointer; transition:padding-left .35s var(--ease);
}
.track:hover{ padding-left:12px; }
.track[aria-current="true"]{ color:var(--ink); }
.track[aria-current="true"] .track__no{ color:var(--ink); }
.track__no{ font-family:var(--font-display); font-size:13px; color:var(--ink-3); width:24px; }
.track__name{ flex:1; font-size:15px; color:var(--ink); font-weight:400; font-family:var(--font-fa); }
.track[aria-current="false"] .track__name{ color:var(--ink-2); }
.track__len{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.track__eq{ display:flex; gap:2px; align-items:flex-end; height:13px; width:14px; opacity:0; }
.track[aria-current="true"] .track__eq{ opacity:1; }
.track__eq i{ width:2px; background:var(--ink); height:40%; animation:eq 1s ease-in-out infinite; }
.track__eq i:nth-child(2){ animation-delay:.2s; } .track__eq i:nth-child(3){ animation-delay:.4s; }
.paused .track__eq i{ animation-play-state:paused; }
@keyframes eq{ 0%,100%{height:30%} 50%{height:100%} }

/* ── FILM ────────────────────────────────────────────── */
.films{
  margin-top:clamp(40px,7vh,80px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px);
}
@media(max-width:760px){ .films{ grid-template-columns:1fr; } }
.film{
  position:relative; aspect-ratio:16/9; overflow:hidden; cursor:pointer;
  border:1px solid var(--line-2); background:var(--bg-2);
}
.film img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.6); transition:transform 1.1s var(--ease), filter .9s var(--ease);
}
.film:hover img{ transform:scale(1.04); filter:grayscale(1) brightness(.78); }
.film::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(7,7,7,.8)); }
.film__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:66px; height:66px; border-radius:50%; border:1px solid rgba(243,241,236,.5);
  display:grid; place-items:center; color:var(--ink);
  transition:transform .4s var(--ease), background .4s, border-color .4s;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.film:hover .film__play{ transform:translate(-50%,-50%) scale(1.08); border-color:var(--ink); background:rgba(243,241,236,.07); }
.film__meta{ position:absolute; left:20px; bottom:18px; z-index:3; }
.film__t{ font-family:var(--font-display); font-style:italic; font-size:clamp(18px,2vw,26px); }
.film__d{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin-top:5px; }

/* ── CONTACT / footer ────────────────────────────────── */
.contact{ padding-block:clamp(90px,16vh,180px); border-top:1px solid var(--line-2); }
.contact__big{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(40px,8vw,128px); line-height:.96; letter-spacing:-.02em; margin:0;
}
.contact__big a{ transition:opacity .3s; }
.contact__big a:hover{ opacity:.55; }
.contact__grid{
  margin-top:clamp(46px,8vh,84px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  border-top:1px solid var(--line-2); padding-top:36px;
}
@media(max-width:760px){ .contact__grid{ grid-template-columns:1fr 1fr; gap:30px 20px; } }
.cgroup h5{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 12px; font-weight:600;
}
.cgroup a, .cgroup p{ display:block; font-size:14px; color:var(--ink-2); margin:0 0 7px; transition:color .3s; }
.cgroup a:hover{ color:var(--ink); }

.foot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding:30px var(--gut); border-top:1px solid var(--line-2);
  font-size:11px; letter-spacing:.12em; color:var(--ink-3); position:relative; z-index:2;
}

/* ── reveal-on-scroll ────────────────────────────────── */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; } .rv.d3{ transition-delay:.24s; }
@media(prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; }
  *{ animation-duration:.001s !important; }
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

/* hidden SoundCloud iframe */
#sc-frame{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:-9999px; }