/* ============================================================
   BENYAMIN KHODABANDEH — PORTFOLIO
   Design system: "The Aperture" — one iris motif, four worlds.
   ============================================================ */

:root{
  /* base */
  --void: #0a0d0f;
  --ink: #12161a;
  --ink-2: #1a2024;
  --bone: #f2efe6;
  --bone-2: #e8e3d5;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.22);
  --text-hi: #f4f2ec;
  --text-lo: rgba(244,242,236,0.62);

  /* world accents */
  --ember: #e35a2b;
  --ember-dim: #7a3018;
  --signal: #2be6b8;
  --indigo: #6e5bff;
  --iris: #6f9bc7;
  --iris-dim: #2c4a68;
  --signet: #7a2233;

  --accent: var(--ember);
  --accent-2: var(--indigo);

  --serif: "Fraunces", "Iowan Old Style", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background: var(--void);
  color: var(--text-hi);
  font-family: var(--sans);
  overflow-x:hidden;
  cursor: none;
}
@media (hover:none){ body{ cursor:auto; } }

::selection{ background: var(--accent); color:#08090a; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:inherit; }

.mono{ font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

#bg-canvas{
  position: fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.55;
}

/* ---------------- scroller / snap ---------------- */
#scroller{
  position: relative; z-index:1;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.world{
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 0 clamp(24px, 6vw, 96px);
  transition: background 1.1s var(--ease-soft), color .8s var(--ease-soft);
  overflow: hidden;
}
.world-inner{ position:relative; z-index:2; width:100%; max-width:1360px; margin: 0 auto; }

/* ---------------- theming per world ---------------- */
.world[data-theme="intro"]{ background: var(--void); }
.world[data-theme="film"]{ background: linear-gradient(160deg,#150c09,#0a0d0f 60%); }
.world[data-theme="bave"]{ background: radial-gradient(circle at 80% 20%, #0d1a22, #070a0c 70%); }
.world[data-theme="photo"]{ background: linear-gradient(160deg,#0b1218,#0a0d0f 55%); }
.world[data-theme="prestige"]{ background: var(--bone); color: var(--void); }

.world[data-theme="film"] { --accent: var(--ember); --accent-2: var(--ember-dim); }
.world[data-theme="bave"] { --accent: var(--signal); --accent-2: var(--indigo); }
.world[data-theme="photo"]{ --accent: var(--iris); --accent-2: var(--iris-dim); }
.world[data-theme="prestige"]{ --accent: var(--signet); --accent-2: var(--signet); }

/* ---------------- chrome: logo + rail ---------------- */
.chrome{
  position: fixed; inset:0; z-index: 50; pointer-events:none;
}
.mark{
  position: absolute; top: 28px; left: clamp(20px,4vw,48px);
  width: 46px; height:46px; pointer-events:auto;
}
.mark-iris{ width:100%; height:100%; color: var(--accent); transition: color .6s var(--ease-soft); }
.mark-core{ fill: var(--accent); transition: fill .6s var(--ease-soft); }
.blades path{ fill:none; stroke:currentColor; stroke-width:2.2; transition: stroke .6s var(--ease-soft); }

.rail{
  position: absolute; top:50%; right: clamp(16px,3vw,40px); transform: translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  pointer-events:auto;
}
.rail-dot{
  display:flex; align-items:center; gap:10px;
  opacity:.45; transition: opacity .4s var(--ease-soft);
}
.rail-dot .rail-num{ font-size:10px; color: var(--text-lo); }
.rail-dot .rail-label{
  font-family: var(--mono); font-size: 10px; letter-spacing:.08em; text-transform:uppercase;
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition: max-width .4s var(--ease-soft), opacity .3s var(--ease-soft);
}
.rail-dot::after{
  content:""; width:7px; height:7px; border-radius:50%; border:1.4px solid currentColor;
  transition: background .3s, transform .3s var(--ease-soft);
}
.rail-dot.is-active{ opacity:1; }
.rail-dot.is-active::after{ background: var(--accent); transform: scale(1.3); border-color: var(--accent); }
.rail:hover .rail-label{ max-width:140px; opacity:1; }
.rail-progress{
  position:absolute; top:0; bottom:0; right:-16px; width:1px; background: var(--line);
}
.rail-progress-fill{
  position:absolute; top:0; left:0; width:100%; background: var(--accent);
  height:0%; transition: height .2s linear, background .6s var(--ease-soft);
}

.menu-toggle{ display:none; }

/* chrome adapts when the active world is the light "prestige" theme */
body.on-light .rail-dot{ color: rgba(10,13,15,0.55); }
body.on-light .rail-dot .rail-num{ color: rgba(10,13,15,0.45); }
body.on-light .rail-progress{ background: rgba(10,13,15,0.14); }
body.on-light .cursor-ring{ border-color: rgba(10,13,15,0.25); }
body.on-light .menu-toggle{ color: var(--void); }

/* ---------------- generic world heading ---------------- */
.world-head{ max-width: 780px; margin-bottom: clamp(28px,4vw,56px); }
.world-index{ font-size:11px; color: var(--accent); display:inline-block; margin-bottom:14px; }
.world-title{
  font-family: var(--serif); font-weight:600; font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height:1.02; margin:0 0 16px 0; letter-spacing:-0.01em;
}
.world-dek{ font-size: clamp(15px,1.6vw,18px); color: var(--text-lo); max-width:620px; line-height:1.55; margin:0; }
.world[data-theme="prestige"] .world-dek{ color: rgba(10,13,15,.62); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px; border-radius: 999px; font-size:14px; font-weight:600;
  border: 1.4px solid currentColor;
  transition: transform .35s var(--ease), background .35s, color .35s;
}
.btn:hover{ transform: translateY(-2px); }
.btn span{ transition: transform .3s var(--ease); }
.btn:hover span{ transform: translateX(3px); }

/* ================= INTRO ================= */
.intro-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.intro-rings{
  position:absolute; top:50%; left:50%; width: min(900px, 140vw); height:min(900px,140vw);
  transform: translate(-50%,-50%); z-index:0; pointer-events:none; opacity:.35;
}
.intro-rings .ring{ fill:none; stroke: var(--line-strong); stroke-width:.6; }
.intro-rings .r1{ animation: spin 70s linear infinite; }
.intro-rings .r2{ animation: spin 100s linear infinite reverse; }
.intro-rings .r3{ animation: spin 140s linear infinite; }
.intro-rings .r4{ animation: spin 190s linear infinite reverse; stroke-dasharray: 2 10; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.eyebrow{ font-size:11px; color: var(--text-lo); margin-bottom: 26px; }
.intro-name{
  font-family: var(--serif); font-weight:600; margin:0; line-height:.96;
  font-size: clamp(3.2rem, 10vw, 8.4rem); letter-spacing:-0.01em;
}
.intro-name .line{ display:block; overflow:hidden; }
.intro-name .accent-word{ font-style:italic; font-weight:500; color: var(--ember); }

.role-ticker{ height: 22px; overflow:hidden; margin: 30px 0 20px; font-size:12px; color: var(--text-lo); }
.role-ticker ul{ list-style:none; margin:0; padding:0; animation: ticker 8s var(--ease-soft) infinite; }
.role-ticker li{ height:22px; display:flex; align-items:center; justify-content:center; }
@keyframes ticker{
  0%,20%{ transform: translateY(0); }
  25%,45%{ transform: translateY(-22px); }
  50%,70%{ transform: translateY(-44px); }
  75%,95%{ transform: translateY(-66px); }
  100%{ transform: translateY(-88px); }
}

.intro-sub{ max-width: 520px; color: var(--text-lo); font-size:16px; line-height:1.6; margin: 0 0 28px; }
.intro-meta{ font-size:11px; color: var(--text-lo); display:flex; gap:10px; align-items:center; }
.intro-meta .dot{ opacity:.5; }

.scrollcue{ position:absolute; bottom: 36px; left:50%; transform:translateX(-50%); text-align:center; z-index:2;}
.scrollcue .mono{ font-size:10px; color: var(--text-lo); display:block; margin-bottom:10px; }
.scrollcue-track{ width:1px; height:46px; background: var(--line-strong); margin:0 auto; position:relative; overflow:hidden;}
.scrollcue-dot{ position:absolute; top:0; left:-1.5px; width:4px; height:4px; border-radius:50%; background: var(--ember); animation: scrollcue 2.4s var(--ease-soft) infinite; }
@keyframes scrollcue{ 0%{ transform: translateY(-6px); opacity:0;} 30%{opacity:1;} 100%{ transform: translateY(46px); opacity:0; } }

/* ================= FILMOGRAPHY ================= */
.filmstrip-rail{
  position:absolute; top:0; bottom:0; width:34px; z-index:1; opacity:.5;
  background-image: repeating-linear-gradient(to bottom, transparent 0 18px, var(--ember-dim) 18px 20px);
  background-size: 2px 40px; background-repeat:repeat-y;
  background-position: center;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.filmstrip-rail.left{ left:0; }
.filmstrip-rail.right{ right:0; }
.filmstrip-rail::before, .filmstrip-rail::after{ content:""; }

.film-inner{ padding: 40px 0; }

.slate-deck{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-bottom:48px; }
.slate-card{
  position:relative; padding: 28px 24px 26px; border:1px solid var(--line);
  border-radius: 4px; background: rgba(255,255,255,0.02);
  opacity:0; transform: translateY(36px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .3s, background .3s;
}
.slate-card.is-in{ opacity:1; transform:translateY(0); }
.slate-card:hover, .slate-card:focus-visible{
  border-color: var(--ember); background: rgba(227,90,43,0.06);
  transform: translateY(-6px);
}
.slate-top{ display:flex; justify-content:space-between; font-size:10px; color: var(--text-lo); margin-bottom:18px; }
.slate-title{ font-family: var(--serif); font-size: clamp(1.5rem,2.4vw,1.9rem); margin:0 0 6px; font-weight:600; }
.slate-role{ font-size:10px; color: var(--ember); margin:0 0 16px; }
.slate-syn{ font-size:14.5px; color: var(--text-lo); line-height:1.6; margin:0 0 20px; min-height: 66px; }
.slate-tags{ display:flex; gap:8px; font-size:9.5px; color: var(--text-lo); margin-bottom: 22px; }
.slate-tags span{ border:1px solid var(--line); padding:4px 9px; border-radius:20px; }
.slate-link{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color: var(--text-hi); }
.slate-link svg{ transition: transform .3s var(--ease); }
.slate-link:hover svg{ transform: translate(3px,-3px); }

.credits-marquee{ overflow:hidden; border-top:1px solid var(--line); padding-top:22px; font-size:11px; color: var(--text-lo); }
.marquee-track{ display:inline-flex; white-space:nowrap; animation: marquee 34s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform: translateX(-50%); } }

/* ================= BAVE ================= */
.bave-inner{ padding: 40px 0; }
.bave-sub{ display:block; font-size: .38em; font-style:italic; font-weight:400; color: var(--signal); margin-top:6px; }

.bave-visual{
  position:relative; height: 160px; border:1px solid var(--line); border-radius:6px; margin-bottom:40px;
  overflow:hidden; background: rgba(255,255,255,0.02);
}
.bave-bars{ position:absolute; inset:0; display:flex; align-items:flex-end; gap:3px; padding: 14px; }
.bave-bars span{
  flex:1; background: linear-gradient(to top, var(--indigo), var(--signal));
  border-radius: 2px 2px 0 0; opacity:.8;
}
.bave-scan{
  position:absolute; top:0; left:-30%; width:30%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(43,230,184,0.12), transparent);
  animation: scan 4.5s linear infinite;
}
@keyframes scan{ from{ left:-30%; } to{ left:100%; } }

.bave-stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-bottom:56px; }
.stat{ border-top:1px solid var(--line); padding-top:16px; }
.stat-num{ display:block; font-size: clamp(1.8rem,3vw,2.6rem); color: var(--signal); font-weight:500; }
.stat-label{ font-size:10.5px; color: var(--text-lo); }

.bave-features{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); margin-bottom:44px; }
.feature-card{ border-bottom:1px solid var(--line); }
.feature-head{
  width:100%; display:flex; align-items:center; gap:20px; padding: 20px 4px;
  text-align:left; cursor:inherit;
}
.feature-index{ font-size:11px; color: var(--signal); width:24px; }
.feature-name{ flex:1; font-family: var(--serif); font-size: clamp(1.05rem,1.6vw,1.3rem); font-weight:500; }
.feature-plus{ position:relative; width:16px; height:16px; }
.feature-plus span{ position:absolute; background:currentColor; transition: transform .35s var(--ease); }
.feature-plus span:first-child{ top:50%; left:0; width:100%; height:1.4px; transform:translateY(-50%); }
.feature-plus span:last-child{ left:50%; top:0; width:1.4px; height:100%; transform:translateX(-50%); }
.feature-card[data-open="true"] .feature-plus span:last-child{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.feature-body{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); }
.feature-body p{ padding: 0 4px 22px 44px; color: var(--text-lo); font-size:14.5px; line-height:1.65; max-width:680px; }
.feature-body code{ background: rgba(255,255,255,0.08); padding:2px 6px; border-radius:4px; font-family:var(--mono); font-size:.92em; }

.bave-cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.bave-cta p{ color: var(--text-lo); font-size:12px; margin:0; }
.btn-bave{ border-color: var(--signal); color: var(--signal); }
.btn-bave:hover{ background: var(--signal); color:#06110c; }

/* ================= PHOTOGRAPHY ================= */
.photo-inner{ padding: 40px 0; }
.reel-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 26px; }
.reel-tab{
  font-size:10.5px; padding:9px 16px; border:1px solid var(--line); border-radius:20px;
  color: var(--text-lo); transition: all .3s var(--ease-soft); white-space:nowrap;
}
.reel-tab:hover{ color: var(--text-hi); border-color: var(--iris); }
.reel-tab.is-active{ background: var(--iris); border-color: var(--iris); color:#08131c; }

.reel-frame{ position:relative; }
.reel-sprockets{ height:10px; background-image: radial-gradient(circle, var(--line-strong) 2px, transparent 2.4px); background-size: 22px 10px; opacity:.6; margin: 4px 0; }

.reel-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr));
  gap:12px; max-height: 46vh; overflow-y:auto; padding: 4px 4px 14px;
  scrollbar-width: thin;
}
.reel-grid::-webkit-scrollbar{ width:6px; }
.reel-grid::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius:3px; }

.reel-item{
  position:relative; aspect-ratio: 2/3; overflow:hidden; border-radius:3px; cursor:inherit;
  opacity:0; transform: scale(.94); transition: opacity .6s var(--ease), transform .6s var(--ease);
  background: var(--ink);
}
.reel-item.is-in{ opacity:1; transform:scale(1); }
.reel-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease), filter .4s; filter: saturate(.94); }
.reel-item:hover img{ transform: scale(1.06); filter: saturate(1.1); }
.reel-item::after{
  content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,0.14);
  pointer-events:none; transition: border-color .3s;
}
.reel-item:hover::after{ border-color: var(--iris); }

/* ================= CONTACT / PRESTIGE ================= */
.contact-inner{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items:center; padding: 60px 0 40px; }
.contact-left .world-title{ font-size: clamp(2.4rem,4.6vw,3.8rem); }
.contact-bio{ font-size:16px; line-height:1.65; color: rgba(10,13,15,.72); max-width:520px; margin: 0 0 30px; }
.contact-roles{ list-style:none; padding:0; margin:0 0 34px; border-top:1px solid rgba(10,13,15,.16); }
.contact-roles li{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(10,13,15,.16); font-size:11px; }
.contact-roles li span:first-child{ color: var(--void); font-weight:600; }
.contact-roles li span:last-child{ color: rgba(10,13,15,.5); }

.contact-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 26px; }
.btn-prestige{ border-color: var(--signet); color: var(--signet); }
.btn-prestige:hover{ background: var(--signet); color: var(--bone); }
.btn-ghost{ border-color: transparent; color: rgba(10,13,15,.55); font-weight:500; }
.btn-ghost:hover{ color: var(--void); transform:none; }

.contact-socials{ display:flex; gap:16px; }
.contact-socials a{ color: rgba(10,13,15,.6); transition: color .3s; }
.contact-socials a:hover{ color: var(--signet); }

.contact-right{ display:flex; justify-content:center; }
.portrait-frame{ position:relative; width: min(340px, 100%); }
.portrait-img{ width:100%; display:block; border-radius:4px; filter: grayscale(.15) contrast(1.04); }
.seal{
  position:absolute; width: 130px; height:130px; top:-30px; right:-30px; color: var(--signet);
  animation: sealspin 40s linear infinite;
}
@keyframes sealspin{ to{ transform: rotate(360deg); } }
.seal-text{ font-size: 6.6px; letter-spacing:.05em; fill: var(--signet); font-family: var(--mono); }
.seal-initials{ font-family: var(--serif); font-size: 30px; font-weight:600; fill: var(--signet); }

.site-footer{
  display:flex; justify-content:space-between; font-size:10px; color: rgba(10,13,15,.45);
  padding: 20px 0 6px; margin-top: 20px;
}

/* ================= lightbox ================= */
.lightbox{
  position:fixed; inset:0; background: rgba(6,7,8,0.94); z-index:200;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition: opacity .4s var(--ease-soft);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(88vw,900px); max-height:80vh; object-fit:contain; border-radius:4px; }
.lightbox-close, .lightbox-nav{
  position:absolute; color:#f2efe6; font-size:22px; width:44px; height:44px;
  border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:inherit; transition: background .3s, border-color .3s;
}
.lightbox-close{ top:24px; right:24px; }
.lightbox-nav.prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:24px; top:50%; transform:translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }
.lightbox-caption{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-size:10px; color: var(--text-lo); }

/* ================= custom cursor ================= */
.cursor{ position:fixed; top:0; left:0; z-index:999; pointer-events:none; }
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; transform: translate(-50%,-50%); }
.cursor-dot{ width:5px; height:5px; background: var(--ember); transition: background .3s; }
.cursor-ring{ width:32px; height:32px; border:1px solid var(--line-strong); transition: width .25s var(--ease), height .25s var(--ease), border-color .3s, transform .1s linear; }
body.cursor-hover .cursor-ring{ width:52px; height:52px; border-color: var(--ember); }
@media (hover:none){ .cursor{ display:none; } }

/* ================= misc / reveal ================= */
[data-reveal]{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ================= responsive ================= */
@media (max-width: 980px){
  .slate-deck{ grid-template-columns: 1fr; }
  .bave-stats{ grid-template-columns: repeat(2,1fr); }
  .contact-inner{ grid-template-columns: 1fr; gap: 40px; }
  .contact-right{ order:-1; }
  .rail-label{ display:none; }
}
@media (max-width: 640px){
  .world{ padding: 0 20px; }
  .intro-name{ font-size: clamp(2.6rem, 14vw, 4rem); }
  .rail{ display:none; }
  .menu-toggle{ display:block; position:absolute; top:26px; right:22px; width:26px; height:20px; pointer-events:auto; }
  .menu-toggle span{ display:block; width:100%; height:1.4px; background: currentColor; margin-bottom:6px; }
  .filmstrip-rail{ display:none; }
  .reel-grid{ grid-template-columns: repeat(2,1fr); max-height:52vh; }
  .bave-stats{ grid-template-columns: 1fr 1fr; }
}