Ibrahim Merchant — 3D Generalist

Ibrahim.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ibrahim Merchant — 3D Generalist</title>
<meta name="description" content="Ibrahim Merchant — 3D Generalist working across interactive experiences, brand identity, visual communication, creative technology and multidisciplinary projects.">

--font-display: 'Montserrat', sans-serif;
  --font-hand: 'Kalam', cursive;

--max: 1180px;
  --gutter: clamp(24px, 6vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

body{
  margin:0;
  background: var(--black); /* fallback under the video layers */
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background: var(--yellow); color: var(--black); }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 4px; }

/* =========================================================
   CONTINUOUS BACKGROUND — one fixed video stage behind the
   entire page. Sections never own their own background colour;
   they simply let this show through, which is what keeps the
   scroll feeling like one continuous space instead of stacked
   blocks with hard seams.
   ========================================================= */
.bg-stage{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--black);
}
.bg-layer{
  position: absolute;
  inset: 0;
  opacity: 0;
}
.bg-layer video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bg-layer img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* On phones only, the Contact section's background photo pans slowly
   from its left edge to its right edge (and back), so the whole image
   is seen over time instead of staying cropped to a static centre
   slice. Desktop and tablet are untouched — object-position stays
   fixed at "center" there, exactly as before. */
@media (max-width: 768px){
  .bg-pan-mobile{
    animation: bgPanMobile 44s ease-in-out infinite alternate;
  }
}
@keyframes bgPanMobile{
  0%   { object-position: left center; }
  100% { object-position: right center; }
}
/* On tablet/desktop the Contact background instead gets a very slow,
   barely-there 5% zoom in and out, on a loop, so it doesn't feel like
   a static photo without drawing attention to itself. Same slow pace
   as the mobile pan above; phones get the pan instead, not this. */
@media (min-width: 769px){
  .bg-zoom-desktop{
    animation: bgZoomDesktop 44s ease-in-out infinite alternate;
  }
}
@keyframes bgZoomDesktop{
  0%   { transform: scale(1); }
  100% { transform: scale(1.05); }
}
/* textile / brush-stroke texture, constant across the whole page */
.bg-texture{
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .5;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(28deg, rgba(0,0,0,.06) 0 1px, transparent 1px 9px);
  animation: grain 22s linear infinite;
}
@keyframes grain{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-1.5%, 1%) scale(1.03); }
  100%{ transform: translate(0,0) scale(1); }
}
/* one constant scrim for legibility — same everywhere, on purpose,
   so no section reads as a differently-tinted block */
.bg-scrim{
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.32) 22%, rgba(10,10,10,.4) 78%, rgba(10,10,10,.66) 100%);
}
/* =========================================================
   TYPE
   ========================================================= */
.eyebrow{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245,245,245,.55);
}
.hand{ font-family: var(--font-hand); font-weight: 700; line-height: 1.05; }
h1,h2,h3{ margin:0; }

.section-head{
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  color: var(--cream);
  display: inline-block;
  position: relative;
  transform: rotate(-1.1deg);
  opacity: 0;
  clip-path: inset(0 0 0 0);
}
/* Title reveal is no longer tied to scroll distance/speed. Once a
   chapter is snapped into view, .wipe-in plays a single fixed-duration
   left-to-right wipe to completion — always, regardless of how the
   section was reached. When the chapter is left, .fade-out simply
   fades the (already fully-revealed) title out — it never wipes
   backwards. */
.section-head.wipe-in{ animation: headWipeIn .85s var(--ease) forwards; }
.section-head.fade-out{ animation: headFadeOut .5s ease forwards; }
@keyframes headWipeIn{
  0%{ opacity: 1; clip-path: inset(0 100% 0 0); }
  100%{ opacity: 1; clip-path: inset(0 0% 0 0); }
}
@keyframes headFadeOut{
  0%{ opacity: 1; }
  100%{ opacity: 0; }
}
.section-head .mark{ position: relative; z-index: 1; }
.section-head .mark::after{
  content:"";
  position:absolute;
  left:-.06em; right:-.06em; bottom: .1em;
  height: .3em;
  background: var(--yellow);
  z-index:-1;
  transform: skewX(-8deg);
  opacity:.85;
}

.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(245,245,245,.88);
  max-width: 620px;
}
p.body-copy{
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(245,245,245,.78);
  max-width: 58ch;
}
p.body-copy + p.body-copy{ margin-top: 1.15em; }

main{ position: relative; z-index: 10; }

section{
  position: relative;
  min-height: 92vh;
  display:flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(90px, 16vh, 190px) 0;
}

/* margin rail — signature device: a running chapter index in the margin */
.rail{
  position: fixed; top:0; left:0; height:100vh; width:64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; z-index: 30;
}
.rail-line{ position:absolute; top:10%; bottom:10%; left:50%; width:1px; background: rgba(245,245,245,.22); }
.rail-dot{
  position:absolute; left:50%; top:10%; width:7px; height:7px; margin-left:-3px;
  border-radius:50%; background: var(--yellow);
  transition: top .3s var(--ease);
  box-shadow: 0 0 0 4px rgba(255,201,71,.18);
}
.rail-num{
  position:absolute; left:50%;
  transform: translate(-50%,0) rotate(-90deg); transform-origin: left center;
  font-family: var(--font-hand); font-size: 15px; color: var(--cream);
  white-space: nowrap; opacity:.3; transition: opacity .3s var(--ease);
}
.rail-num.active{ opacity: 1; }
@media (max-width: 900px){ .rail{ display:none; } }

.mobile-chapter{
  display:none; font-family: var(--font-hand); color: rgba(245,245,245,.55);
  font-size: 14px; margin-bottom: 10px;
}
@media (max-width: 900px){ .mobile-chapter{ display:block; } }

/* On phones the JS-driven "one gesture = one chapter" paginator is
   switched off (see script below) because it was locking to a fixed
   section centre and cropping any section whose content ran taller
   than the viewport. Phones get plain, free native scrolling for
   everything by default.
   Snap points are reinstated only for Hero, "A Starting Point" and
   "Open Conversation" — short chapters whose content fits a single
   phone screen, so snapping to them can't crop anything. Selected
   Work, Experience Log and Toolkit deliberately get no snap point:
   they're the three sections whose content commonly runs taller than
   one phone screen, and even "proximity" snapping was catching the
   boundary the instant the next section's top edge neared the
   viewport and yanking the page forward before they could be read in
   full. Leaving them snap-point-free means scrolling through that
   whole middle stretch is completely free — nothing to snap to, so
   nothing can pull the page early — while the three short chapters at
   either end of the page still get the satisfying snap. */
@media (max-width: 768px){
  html{ scroll-snap-type: y proximity; }
  header.hero, #starting, #contact{
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* =========================================================
   FOCUS SYSTEM
   Every chapter section carries a live --focus custom property
   (0 → 1), smoothly interpolated toward its target every
   animation frame from its distance to the viewport centre.
   Body text and cards read it as a plain fade, and it also drives
   that chapter's background-video crossfade. Section headings are
   handled separately (see .section-head / .wipe-in / .fade-out
   below) with a fixed-duration reveal, not this continuous value.
   ========================================================= */
section{ --focus: 0; }
.reveal{ opacity: var(--focus); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gutter);
  background: linear-gradient(to bottom, rgba(10,10,10,.5), rgba(10,10,10,0));
}
.nav-mark{ font-weight:800; font-size:14px; letter-spacing:.08em; color: var(--cream); text-transform:uppercase; }
.nav-mark span{ color: var(--yellow); }
.nav-right{ display:flex; align-items:center; gap: clamp(18px,3vw,34px); }
.nav-cta{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--black); background: var(--yellow);
  padding: 9px 18px; border-radius: 999px; white-space:nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-cta:hover{ background: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.nav-links{ display:flex; gap: clamp(16px,2.6vw,34px); }
.nav-links a{
  font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(245,245,245,.75); position:relative; padding-bottom:4px;
}
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--yellow); transition: right .3s var(--ease); }
.nav-links a:hover::after, .nav-links a:focus-visible::after{ right:0; }
.nav-toggle{ display:none; background:none; border:0; padding:4px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--cream); margin:5px 0; }
@media (max-width:640px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background: rgba(10,10,10,.97);
    flex-direction:column; padding:100px 32px 32px; gap:28px;
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size:16px; }
  .nav-toggle{ display:block; z-index:60; }
  .nav-cta{ font-size:10px; padding: 8px 13px; }
}

/* =========================================================
   A STARTING POINT
   ========================================================= */
.chapter-tag{ font-family: var(--font-hand); font-size:15px; color: rgba(245,245,245,.5); margin-bottom:10px; display:block; }

/* =========================================================
   SELECTED WORK — sparse, scattered index cards.
   Deliberately not filling the grid so a lot of the running
   background stays visible around and between the cards.
   ========================================================= */
.head-row{ margin-bottom: 56px; }

.deck{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 54px 44px;
  max-width: 980px;
}
.deck .card:nth-child(2){ margin-top: 46px; }
.deck .card:nth-child(3){ margin-top: 14px; }
.deck .card:nth-child(5){ margin-top: 46px; }
.deck .card:nth-child(6){ margin-top: 14px; }

@media (max-width: 1000px){ .deck{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width:none; } .deck .card{ margin-top:0 !important; } }
@media (max-width: 620px){ .deck{ grid-template-columns: 1fr; } }

.card{
  position: relative;
  background: var(--paper);
  color: #1c1c1c;
  padding: 26px 22px 22px;
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform, opacity;
}
.card:nth-child(6n+1){ --r: -2.1deg; }
.card:nth-child(6n+2){ --r: 1.6deg; }
.card:nth-child(6n+3){ --r: -1deg; }
.card:nth-child(6n+4){ --r: 1.9deg; }
.card:nth-child(6n+5){ --r: -1.6deg; }
.card:nth-child(6n+6){ --r: 1.1deg; }
.card::before{
  content:""; position:absolute; top:-7px; left:50%; margin-left:-7px;
  width:13px; height:13px; border-radius:50%; background: var(--yellow);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card::after{
  content:""; position:absolute; right:0; bottom:0;
  width:0; height:0; border-style:solid; border-width: 0 0 20px 20px;
  border-color: transparent transparent rgba(18,18,18,.14) transparent;
  transition: border-width .5s var(--ease);
}
.card-num{ font-family: var(--font-hand); font-size:13px; color:#8a8a8a; transition: color .4s var(--ease); }
.card h3{ font-size:1.08rem; font-weight:800; margin-top:6px; line-height:1.2; background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size .5s var(--ease); }
.card p{ font-size:13px; line-height:1.55; margin-top:12px; color:#3a3a3a; }
.card .role{ font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#6b6b6b; margin-top:14px; }

.card{
  opacity: var(--focus);
  transform: rotate(var(--r,0deg));
}
.card:hover, .card:focus-within{
  transform: translateY(-20px) rotate(0deg) scale(1.06);
  box-shadow: 0 30px 30px rgba(0,0,0,.4), 0 14px 46px rgba(255,201,71,.22);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  z-index:5;
}
.card:hover::before, .card:focus-within::before{
  transform: scale(1.25) translateY(-1px);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 3px 8px rgba(255,201,71,.55);
}
.card:hover::after, .card:focus-within::after{ border-width: 0 0 26px 26px; }
.card:hover h3, .card:focus-within h3{ background-size: 100% 2px; }
.card:hover .card-num, .card:focus-within .card-num{ color: #b5860a; }

/* =========================================================
   EXPERIENCE LOG
   ========================================================= */
.log{ margin-top: 40px; display:flex; flex-direction:column; }
.log-row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid rgba(245,245,245,.14);
}
.log-row:last-of-type{ border-bottom: 1px solid rgba(245,245,245,.14); }
.log-org{ font-weight:800; font-size:1.05rem; color: var(--cream); }
.log-role{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color: var(--yellow); margin-top:4px; }
.log-desc{ font-size:14.5px; line-height:1.7; color: rgba(245,245,245,.75); max-width: 56ch; }
@media (max-width: 700px){ .log-row{ grid-template-columns: 1fr; gap:8px; } }

.resume-btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top: 40px;
  padding: 15px 26px;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-radius: 999px;
  background: var(--cream); color: var(--black);
  border: 1px solid var(--cream);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.resume-btn:hover{ background: var(--yellow); transform: translateY(-2px); }

/* =========================================================
   TOOLKIT
   ========================================================= */
.tools-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 46px; }
@media (max-width:700px){ .tools-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:480px){ .tools-grid{ grid-template-columns: 1fr; } }
.tool-group span.hand-sm{
  font-family: var(--font-hand); font-size:20px; color: var(--cream);
  border-bottom: 2px solid var(--yellow); padding-bottom:4px; display:inline-block; margin-bottom:14px;
}
.tool-group li{ font-size:14.5px; font-weight:300; color: rgba(245,245,245,.8); padding:6px 0; }

.toolkit-cta{
  margin-top: 60px;
  padding-top: 34px;
  border-top: 1px solid rgba(245,245,245,.14);
  max-width: 560px;
}
.toolkit-cta p{ font-size:14.5px; line-height:1.7; color: rgba(245,245,245,.75); }
.toolkit-cta a{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-weight:700; color: var(--yellow); font-size:14.5px;
  border-bottom: 1px solid rgba(255,201,71,.4);
  padding-bottom: 3px;
}
.toolkit-cta a:hover{ border-color: var(--yellow); }
.toolkit-cta .site{ display:block; margin-top:8px; font-size:12.5px; color: rgba(245,245,245,.4); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-links{ margin-top: 40px; display:flex; flex-direction:column; gap: 18px; max-width: 620px; }
.contact-links a, .contact-links .static-row{
  display:flex; align-items:baseline; gap: 14px; flex-wrap:wrap;
  font-size: clamp(1rem,2vw,1.3rem); font-weight:600;
  border-bottom: 1px solid rgba(245,245,245,.14);
  padding-bottom: 14px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact-links a:hover{ color: var(--yellow); border-color: var(--yellow); }
.contact-links small{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--grey); width: 92px; flex: none;
}

footer{
  position: relative; z-index: 10;
  padding: 34px var(--gutter) 46px;
  border-top: 1px solid rgba(245,245,245,.12);
}
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding:0; }
footer p{ font-size:12.5px; color: rgba(245,245,245,.45); margin:0; }
</style>
</head>
<body>

<div class="bg-stage" aria-hidden="true">
  
  <div class="bg-layer" data-layer="intro">
    <video autoplay muted loop playsinline>
      <source src="Website%20Visual%20New.webm" type="video/webm">
    </video>
  </div>
  <div class="bg-layer" data-layer="work">
    <img src="Tiles_BG.jpg" alt="">
  </div>
  <div class="bg-layer" data-layer="experience">
    <img src="Tiles_BG.jpg" alt="">
  </div>
  <div class="bg-layer" data-layer="toolkit">
    <img src="Tiles_BG.jpg" alt="">
  </div>
  <div class="bg-layer" data-layer="contact">
    <img src="Contact_section_BG.jpg" alt="" class="bg-pan-mobile bg-zoom-desktop">
  </div>
</div>
<div class="bg-texture"></div>
<div class="bg-scrim"></div>

<nav class="nav" id="siteNav">
  <a href="#hero" class="nav-mark">Ibrahim<span>.</span></a>
  <div class="nav-right">
    <ul class="nav-links" id="navLinks">
      <li><a href="#work">Selected Work</a></li>
      <li><a href="#experience">Experience</a></li>
      <li><a href="#toolkit">Toolkit</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <a class="nav-cta" href="#3d" target="_parent">3D Portfolio</a>
    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
  </div>
</nav>

<div class="rail" aria-hidden="true">
  <div class="rail-line"></div>
  <div class="rail-dot" id="railDot"></div>
  <div class="rail-num" data-chapter="0" style="top:14%">Hero</div>
  <div class="rail-num" data-chapter="1" style="top:29%">01 — A Starting Point</div>
  <div class="rail-num" data-chapter="2" style="top:45%">02 — Selected Work</div>
  <div class="rail-num" data-chapter="3" style="top:61%">03 — Experience Log</div>
  <div class="rail-num" data-chapter="4" style="top:76%">04 — Toolkit</div>
  <div class="rail-num" data-chapter="5" style="top:90%">05 — Open Conversation</div>
</div>

<main>

<header class="hero" id="hero" data-layer-target="hero">
    <div class="wrap">
      <div class="hero-eyebrow reveal">
        <span class="dot"></span>
        <span class="eyebrow">Ibrahim Merchant</span>
      </div>
      <h1 class="reveal reveal-delay-1">Hi, I'm Ibrahim.</h1>
      <div class="line-2 reveal reveal-delay-2">Professionally, I work as a 3D Generalist.</div>
      <p class="lede reveal reveal-delay-3">Over the last few years, my work has taken me through interactive experiences, brand identity, visual communication, creative technology and multidisciplinary projects, depending on what each brief demanded. Every project asks for something different. That's what has kept the work interesting.</p>
      <div class="hero-scroll reveal reveal-delay-3">Scroll</div>
    </div>
  </header>

<section id="starting" data-layer-target="starting">
    <div class="wrap">
      <div class="mobile-chapter">01 — A Starting Point</div>
      <div class="reveal">
        <span class="chapter-tag">Note 01</span>
        <h2 class="section-head"><span class="mark hand">A Starting Point</span></h2>
        <div style="margin-top:30px;">
          <p class="body-copy">My professional work began with 3D, creating environments and interactive experiences for games, VR and visualization.</p>
          <p class="body-copy">Since then, the work has gradually expanded into brand identity, presentations, 3D animated explainers, creative communication and interactive products.</p>
          <p class="body-copy">Different projects ask different questions.</p>
          <p class="body-copy" style="font-weight:600; color: var(--cream);">The work has simply followed wherever those questions have led.</p>
        </div>
        <div class="starting-note reveal reveal-delay-1" style="margin-top:34px; padding-top:26px; border-top:1px solid rgba(245,245,245,.14); max-width:58ch;">
          <p class="body-copy">No two projects have followed the same process. Different industries bring different challenges. Different teams work in different ways.</p>
        </div>
      </div>
    </div>
  </section>

<section id="work" data-layer-target="work">
    <div class="wrap">
      <div class="mobile-chapter">02 — Selected Work</div>
      <div class="head-row reveal">
        <span class="chapter-tag">Note 02</span>
        <h2 class="section-head"><span class="mark hand">Selected Work</span></h2>
        <p class="lede" style="margin-top:18px;">A few projects that shaped the way I think.</p>
      </div>

<div class="deck" id="deck">
        <article class="card">
          <span class="card-num">01</span>
          <h3>Interactive Telecom Platform</h3>
          <p>Built a proof of concept for a Google Earth-inspired platform that visualised telecom infrastructure through interactive maps and 3D tower models, helping demonstrate the feasibility of a larger product before development began.</p>
          <div class="role">Concept Development · Product Thinking · Project Coordination</div>
        </article>

<article class="card">
          <span class="card-num">02</span>
          <h3>Restaurant Training Simulation</h3>
          <p>Created optimized low-poly replicas of real restaurants for mobile game-based staff training.</p>
          <div class="role">3D Environment Art · Modeling · Texturing · Level Design · Lighting</div>
        </article>

<article class="card">
          <span class="card-num">03</span>
          <h3>Healthcare 3D Animation</h3>
          <p>Designed the production pipeline for educational 3D animations that explained physiotherapy concepts through medical visualization.</p>
          <div class="role">Concept Development · Pre-production · Creative Direction · Post-production</div>
        </article>

<article class="card">
          <span class="card-num">04</span>
          <h3>VR Environments</h3>
          <p>Created optimized real-time environments for VR experiences using Unity and baked lighting workflows.</p>
          <div class="role">Environment Art · Scene Assembly</div>
        </article>

<article class="card">
          <span class="card-num">05</span>
          <h3>Mobile Game Environments</h3>
          <p>Designed stylized game-ready environments for simulation-based mobile games. Additionally contributed to SFX and background music for the game.</p>
          <div class="role">Environment Art · World Building · Cutscene Creation · Sound Design</div>
        </article>

<article class="card">
          <span class="card-num">06</span>
          <h3>Brand Identity System</h3>
          <p>Designed a complete visual identity, website and communication system for an industrial manufacturing business.</p>
          <div class="role">Brand Identity · Website · Visual Communication</div>
        </article>
      </div>
    </div>
  </section>

<section id="experience" data-layer-target="experience">
    <div class="wrap">
      <div class="mobile-chapter">03 — Experience Log</div>
      <div class="reveal">
        <span class="chapter-tag">Note 03</span>
        <h2 class="section-head"><span class="mark hand">Experience Log</span></h2>
      </div>

<div class="log reveal reveal-delay-1">
        <div class="log-row">
          <div><div class="log-org">Amazon</div><div class="log-role">3D Support (Pre-production)</div></div>
          <div class="log-desc">Prepared production-ready 3D assets, documentation and workflows supporting large-scale 3D operations.</div>
        </div>
        <div class="log-row">
          <div><div class="log-org">Freelance</div><div class="log-role">3D Printing Design</div></div>
          <div class="log-desc">Designed production-ready models for custom curated requirements across independent client projects.</div>
        </div>
        <div class="log-row">
          <div><div class="log-org">VR Development</div><div class="log-role">3D Artist</div></div>
          <div class="log-desc">Created optimized real-time environments assembled in Unity for immersive experiences.</div>
        </div>
        <div class="log-row">
          <div><div class="log-org">Workverse</div><div class="log-role">3D Generalist</div></div>
          <div class="log-desc">Worked across workplace simulation games, restaurant training simulations, marketing content, presentations, demo videos and visual communication — also contributing sound effects and background music for one of the games.</div>
        </div>
        <div class="log-row">
          <div><div class="log-org">Independent Practice</div><div class="log-role"> </div></div>
          <div class="log-desc">Worked on brand identity systems, interactive and technology-driven products, healthcare visualization, 3D animated explainers and multidisciplinary creative projects.</div>
        </div>
      </div>

<a class="resume-btn reveal reveal-delay-2" href="Ibrahim-Merchant-Resume.pdf" download>↓ Download Résumé</a>
    </div>
  </section>

<section id="toolkit" data-layer-target="toolkit">
    <div class="wrap">
      <div class="mobile-chapter">04 — Toolkit</div>
      <div class="reveal">
        <span class="chapter-tag">Note 04</span>
        <h2 class="section-head"><span class="mark hand">Toolkit</span></h2>
        <p class="lede" style="margin-top:18px;">The tools change from project to project. These are simply the ones I happen to work with.</p>
      </div>

<div class="tools-grid">
        <div class="tool-group reveal">
          <span class="hand-sm">3D</span>
          <ul><li>Autodesk Maya</li><li>Blender</li><li>Unity</li><li>Unreal Engine</li><li>Substance Painter</li><li>V-Ray</li></ul>
        </div>
        <div class="tool-group reveal reveal-delay-1">
          <span class="hand-sm">Design</span>
          <ul><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>Figma</li><li>Canva</li></ul>
        </div>
        <div class="tool-group reveal reveal-delay-2">
          <span class="hand-sm">Video</span>
          <ul><li>Adobe Premiere Pro</li><li>DaVinci Resolve</li></ul>
        </div>
      </div>

<div class="toolkit-cta reveal reveal-delay-3">
        <p>Looking specifically for 3D work? A dedicated portfolio focused on environments, modeling, texturing and visualization is available separately.</p>
        <a href="#3d" target="_parent">→ View 3D Portfolio</a>
        <span class="site">ibrahimmerchant.in/3d</span>
      </div>
    </div>
  </section>

<section id="contact" data-layer-target="contact">
    <div class="wrap">
      <div class="mobile-chapter">05 — Open Conversation</div>
      <div class="reveal">
        <span class="chapter-tag">Note 05</span>
        <h2 class="section-head"><span class="mark hand">Open Conversation</span></h2>
        <div style="margin-top:26px;">
          <p class="body-copy">If you have an idea that needs a creative or technical approach, I'd be happy to hear about it.</p>
          <p class="body-copy">Whether it's a product, a visual experience, a brand, an interactive tool or something that doesn't fit neatly into a category, every project starts with the same thing.</p>
          <p class="body-copy" style="font-weight:600; color: var(--cream);">A conversation.</p>
        </div>

<div class="contact-links">
          <a href="mailto:ibrahim.y.merchant@gmail.com"><small>Email</small> ibrahim.y.merchant@gmail.com</a>
          <a href="https://wa.me/917743875623" target="_blank" rel="noopener"><small>Phone / WhatsApp</small> +91 7743875623</a>
          <a href="https://www.linkedin.com/in/ibrahim-merchant-b55a9a230/" target="_blank" rel="noopener"><small>LinkedIn</small> Ibrahim Merchant</a>
          <a href="https://ibrahim_merchant.artstation.com" target="_blank" rel="noopener"><small>ArtStation</small> ibrahim_merchant</a>
          <div class="static-row"><small>Location</small> Nashik, Maharashtra, India</div>
        </div>
      </div>
    </div>
  </section>

</main>

<footer>
  <div class="wrap">
    <p>© Ibrahim Merchant</p>
    <p>3D Generalist</p>
  </div>
</footer>

/* ---------- mobile nav toggle ---------- */
  var toggle = document.getElementById('navToggle');
  var links = document.getElementById('navLinks');
  toggle.addEventListener('click', function(){
    var open = links.classList.toggle('open');
    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
  links.querySelectorAll('a').forEach(function(a){
    a.addEventListener('click', function(){
      links.classList.remove('open');
      toggle.setAttribute('aria-expanded','false');
    });
  });

/* ---------- focus engine: text + background, driven every frame by
     real scroll geometry (not a timer, not a threshold callback) ----------
     Each chapter section's --focus custom property is smoothly
     interpolated every animation frame toward a target computed from
     its exact distance to the viewport centre. Text/cards read that
     variable directly (see CSS), so motion tracks scroll position
     itself rather than a fixed-duration timer — precise on scroll
     down AND up, at any speed — while the interpolation absorbs any
     jitter from stepped/notchy scroll input so it never looks choppy.
     The same smoothed number drives that chapter's background-video
     opacity, so text and footage stay in lockstep. ---------- */
  var bgLayers = {};
  document.querySelectorAll('.bg-layer').forEach(function(l){ bgLayers[l.dataset.layer] = l; });
  /* Selected Work, Experience Log and Toolkit use the Tiles image as
     a faint texture, not a full picture, so their layer opacity is
     capped at 10% even at full focus. Every other layer (including
     Contact, which uses its own photo at full 100% opacity) is
     unaffected. */
  var LAYER_MAX_OPACITY = { work: 0.10, experience: 0.10, toolkit: 0.10 };
  function layerOpacity(layerTarget, focusValue){
    var cap = LAYER_MAX_OPACITY.hasOwnProperty(layerTarget) ? LAYER_MAX_OPACITY[layerTarget] : 1;
    return focusValue * cap;
  }
  var targets = Array.prototype.slice.call(document.querySelectorAll('[data-layer-target]'));
  var heroSection = document.getElementById('hero');
  var startingSection = document.getElementById('starting');
  var heroIdx = targets.indexOf(heroSection);
  var startingIdx = targets.indexOf(startingSection);
  /* Hero + A Starting Point share one physical video layer ("intro")
     instead of each having its own — see the HTML comment above the
     layer markup. Its opacity is the MAX of the two sections' own
     focus values (not each overwriting the other), so there's no dip
     as you scroll between them — it only starts fading once you head
     into Selected Work, exactly like every other section-to-section
     crossfade, just capped at 90% instead of 100%. */
  var introLayer = bgLayers['intro'];
  var INTRO_MAX_OPACITY = 0.8;
  var heroIntroStart = null;
  var heroIntroDuration = 1200;
  var current = targets.map(function(){ return 0; });
  var lastTs = null;
  var SMOOTH_RATE = 10; /* higher = snappier, lower = silkier */

function smoothstep(x){ return x*x*(3-2*x); }

function rawFocus(sec, vh){
    var rect = sec.getBoundingClientRect();
    var center = rect.top + rect.height / 2;
    var dist = Math.abs(center - vh/2);
    var range = vh * 0.85;
    var f = 1 - Math.min(dist/range, 1);
    return smoothstep(Math.max(f,0));
  }

/* ---------- Selected Work: its own fade-in/fade-out, tied to the
     heading and last card instead of the section's centre distance.
     Every other chapter still uses the plain rawFocus() above,
     unchanged. ----------
     Fade IN: quick — happens over a short scroll distance and
     finishes right as the "Selected Work" heading reaches the top
     of the screen (offset a little for the fixed nav bar).
     Fade OUT: begins a beat after the last card has fully cleared
     the bottom of the screen (a small buffer so it isn't cut short),
     then fades out gently over a slightly longer distance, so the
     disappearance lands a little later/higher than a strict 1:1
     trigger would. */
  var workSection = document.getElementById('work');
  var workHead = workSection ? workSection.querySelector('.section-head') : null;
  var workCards = workSection ? workSection.querySelectorAll('.deck .card') : null;
  var workLastCard = workCards && workCards.length ? workCards[workCards.length - 1] : null;

var WORK_NAV_OFFSET   = 90;  /* clears the fixed nav bar */
  var WORK_FADE_IN_DIST = 130; /* px of scroll the fade-in takes — kept short/quick */
  var WORK_EXIT_BUFFER  = 110; /* px of extra scroll after the last card clears bottom, before fade-out starts */
  var WORK_FADE_OUT_DIST = 240; /* px of scroll the fade-out takes once it starts */

function rawFocusWork(vh){
    if(!workHead || !workLastCard) return 0;
    var headTop = workHead.getBoundingClientRect().top;
    var cardBottom = workLastCard.getBoundingClientRect().bottom;

var fadeInStart = WORK_NAV_OFFSET + WORK_FADE_IN_DIST;
    var fadeIn = (fadeInStart - headTop) / WORK_FADE_IN_DIST;
    fadeIn = Math.max(0, Math.min(fadeIn, 1));

var fadeOutStart = vh - WORK_EXIT_BUFFER;
    var fadeOutProgress = (fadeOutStart - cardBottom) / WORK_FADE_OUT_DIST;
    fadeOutProgress = Math.max(0, Math.min(fadeOutProgress, 1));
    var fadeOut = 1 - fadeOutProgress;

return Math.min(fadeIn, fadeOut);
  }

function tick(ts){
    var vh = window.innerHeight;
    var dt = lastTs === null ? 16.7 : Math.min(ts - lastTs, 48);
    lastTs = ts;
    var lerpAmt = 1 - Math.exp(-SMOOTH_RATE * (dt / 1000));

targets.forEach(function(sec, i){
      var target = sec === workSection ? rawFocusWork(vh) : rawFocus(sec, vh);
      if(sec === heroSection && heroIntroStart !== null){
        var p = Math.min((ts - heroIntroStart) / heroIntroDuration, 1);
        var eased = 1 - Math.pow(1 - p, 3);
        target = target * eased;
        if(p >= 1){ heroIntroStart = null; }
      }
      var c = current[i] + (target - current[i]) * lerpAmt;
      if(Math.abs(target - c) < 0.0008){ c = target; }
      current[i] = c;
      sec.style.setProperty('--focus', c.toFixed(4));
      var layer = bgLayers[sec.dataset.layerTarget];
      if(layer){ layer.style.opacity = layerOpacity(sec.dataset.layerTarget, c).toFixed(4); }
    });
    if(introLayer){
      var introFocus = Math.max(current[heroIdx] || 0, current[startingIdx] || 0);
      introLayer.style.opacity = (introFocus * INTRO_MAX_OPACITY).toFixed(4);
    }
    requestAnimationFrame(tick);
  }

if(reduced){
    targets.forEach(function(sec){
      var f = sec === heroSection ? 1 : 0;
      sec.style.setProperty('--focus', f);
      var layer = bgLayers[sec.dataset.layerTarget];
      if(layer){ layer.style.opacity = layerOpacity(sec.dataset.layerTarget, f); }
    });
    if(introLayer){ introLayer.style.opacity = INTRO_MAX_OPACITY; }
    document.addEventListener('scroll', function(){
      var vh = window.innerHeight;
      var heroF = 0, startingF = 0;
      targets.forEach(function(sec){
        var f = sec === workSection ? rawFocusWork(vh) : rawFocus(sec, vh);
        sec.style.setProperty('--focus', f.toFixed(4));
        if(sec === heroSection){ heroF = f; }
        if(sec === startingSection){ startingF = f; }
        var layer = bgLayers[sec.dataset.layerTarget];
        if(layer){ layer.style.opacity = layerOpacity(sec.dataset.layerTarget, f).toFixed(4); }
      });
      if(introLayer){ introLayer.style.opacity = (Math.max(heroF, startingF) * INTRO_MAX_OPACITY).toFixed(4); }
    }, { passive: true });
  } else {
    requestAnimationFrame(function(ts){ heroIntroStart = ts; requestAnimationFrame(tick); });
  }

/* ---------- margin rail: active chapter + progress dot ---------- */
  var railNums = document.querySelectorAll('.rail-num');
  var railDot = document.getElementById('railDot');
  var chapters = Array.prototype.slice.call(targets);

/* ---------- title reveal: fixed-duration wipe-in, plain fade-out ----------
     Section headings no longer track scroll distance. As soon as a
     chapter becomes the active (centred/snapped) one, its heading plays
     one complete left-to-right wipe over a fixed duration — never
     partial, never tied to how fast or how far the user scrolled.
     Leaving a chapter never reverses that wipe; the heading just fades
     out as a whole. ---------- */
  var sectionHeads = {};
  targets.forEach(function(sec){
    var head = sec.querySelector('.section-head');
    if(head){ sectionHeads[sec.dataset.layerTarget] = head; }
  });
  var activeHeadKey = null;
  function setActiveHead(idx){
    var sec = targets[idx];
    if(!sec) return;
    var key = sec.dataset.layerTarget;
    if(key === activeHeadKey) return;
    activeHeadKey = key;
    Object.keys(sectionHeads).forEach(function(k){
      var el = sectionHeads[k];
      if(k === key){
        el.classList.remove('fade-out');
        void el.offsetWidth; /* restart the wipe-in animation cleanly */
        el.classList.add('wipe-in');
      } else if(el.classList.contains('wipe-in')){
        el.classList.remove('wipe-in');
        el.classList.add('fade-out');
      }
    });
  }

/* ---------- paginated snap-scroll: one scroll gesture = one chapter ----------
     Every wheel tick / swipe / arrow-key press moves exactly one chapter
     and animates straight to that chapter's centre over a fixed
     duration — no gradual drift, no landing off-centre. Disabled under
     reduced-motion, where the page falls back to plain free scrolling. */
  var pages = targets; // hero + each data-layer-target section, in DOM order
  var currentPage = 0;
  var isSnapping = false;
  var inputLocked = false;

function pageScrollTarget(idx){
    var el = pages[idx];
    var rect = el.getBoundingClientRect();
    var elCenter = window.scrollY + rect.top + rect.height / 2;
    var target = elCenter - window.innerHeight / 2;
    var maxScroll = document.documentElement.scrollHeight - window.innerHeight;
    return Math.max(0, Math.min(target, Math.max(maxScroll, 0)));
  }

function easeInOutCubic(t){ return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2; }

if(!reduced && !isMobile){
    window.addEventListener('wheel', function(e){
      e.preventDefault();
      if(isSnapping || inputLocked) return;
      inputLocked = true;
      goToPage(currentPage + (e.deltaY > 0 ? 1 : -1));
      setTimeout(function(){ inputLocked = false; }, 700);
    }, { passive: false });

/* ---------- anchor navigation now routes through the same snap engine ---------- */
  document.querySelectorAll('a[href^="#"]').forEach(function(a){
    a.addEventListener('click', function(e){
      var id = a.getAttribute('href');
      var target = document.querySelector(id);
      if(!target) return;
      e.preventDefault();
      var idx = pages.indexOf(target);
      if(!reduced && !isMobile && idx !== -1){
        goToPage(idx);
      } else {
        target.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'start' });
      }
    });
  });
})();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ibrahim Merchant — 3D Artist</title>
<meta name="description" content="Ibrahim Merchant — 3D Generalist working across interactive experiences, brand identity, visual communication, creative technology and multidisciplinary projects.">

--font-display: 'Montserrat', sans-serif;
  --font-hand: 'Kalam', cursive;

--max: 1180px;
  --gutter: clamp(24px, 6vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

body{
  margin:0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* =========================================================
   CONTINUOUS BACKGROUND STAGE
   Hero and Contact each run their own loopable webp "video".
   Selected Work and Why Work With Me share the same Tiles
   texture the main site uses, kept faint, so the whole page
   still reads as one continuous space rather than two sites
   stitched together.
   ========================================================= */
.bg-stage{ position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--black); }
.bg-layer{ position: absolute; inset: 0; opacity: 0; }
.bg-layer img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.bg-layer video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* On phones only, the Contact section's background photo pans slowly
   from its left edge to its right edge (and back), so the whole image
   is seen over time instead of staying cropped to a static centre
   slice. Desktop and tablet are untouched — object-position stays
   fixed at "center" there, exactly as before. */
@media (max-width: 768px){
  .bg-pan-mobile{
    animation: bgPanMobile 44s ease-in-out infinite alternate;
  }
}
@keyframes bgPanMobile{
  0%   { object-position: left center; }
  100% { object-position: right center; }
}
/* On tablet/desktop the Contact background instead gets a very slow,
   barely-there 5% zoom in and out, on a loop, so it doesn't feel like
   a static photo without drawing attention to itself. Same slow pace
   as the mobile pan above; phones get the pan instead, not this. */
@media (min-width: 769px){
  .bg-zoom-desktop{
    animation: bgZoomDesktop 44s ease-in-out infinite alternate;
  }
}
@keyframes bgZoomDesktop{
  0%   { transform: scale(1); }
  100% { transform: scale(1.05); }
}

.bg-texture{
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .5;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(28deg, rgba(0,0,0,.06) 0 1px, transparent 1px 9px);
  animation: grain 22s linear infinite;
}
@keyframes grain{ 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-1.5%,1%) scale(1.03); } 100%{ transform:translate(0,0) scale(1); } }

.bg-scrim{
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.32) 22%, rgba(10,10,10,.4) 78%, rgba(10,10,10,.66) 100%);
}

/* =========================================================
   TYPE
   ========================================================= */
.eyebrow{ font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color: rgba(245,245,245,.55); }
.hand{ font-family: var(--font-hand); font-weight:700; line-height:1.05; }
h1,h2,h3{ margin:0; }

.section-head{
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  color: var(--cream);
  display:inline-block;
  position:relative;
  transform: rotate(-1.1deg);
  opacity:0;
  clip-path: inset(0 0 0 0);
}
.section-head.wipe-in{ animation: headWipeIn .85s var(--ease) forwards; }
.section-head.fade-out{ animation: headFadeOut .5s ease forwards; }
@keyframes headWipeIn{ 0%{ opacity:1; clip-path: inset(0 100% 0 0); } 100%{ opacity:1; clip-path: inset(0 0% 0 0); } }
@keyframes headFadeOut{ 0%{ opacity:1; } 100%{ opacity:0; } }
.section-head .mark{ position:relative; z-index:1; }
.section-head .mark::after{
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.1em; height:.3em;
  background: var(--yellow); z-index:-1; transform: skewX(-8deg); opacity:.85;
}

.lede{ font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight:400; line-height:1.65; color: rgba(245,245,245,.88); max-width:640px; }
p.body-copy{ font-size:1rem; line-height:1.8; color: rgba(245,245,245,.78); max-width:58ch; }
p.body-copy + p.body-copy{ margin-top: 1.15em; }

/* =========================================================
   LAYOUT SHELL
   ========================================================= */
.wrap{ max-width: var(--max); margin:0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main{ position:relative; z-index:10; }
section{ position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding: clamp(90px,16vh,190px) 0; }

/* margin rail */
.rail{ position:fixed; top:0; left:0; height:100vh; width:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; z-index:30; }
.rail-line{ position:absolute; top:10%; bottom:10%; left:50%; width:1px; background: rgba(245,245,245,.22); }
.rail-dot{ position:absolute; left:50%; top:10%; width:7px; height:7px; margin-left:-3px; border-radius:50%; background:var(--yellow); transition: top .3s var(--ease); box-shadow: 0 0 0 4px rgba(255,201,71,.18); }
.rail-num{ position:absolute; left:50%; transform: translate(-50%,0) rotate(-90deg); transform-origin:left center; font-family: var(--font-hand); font-size:15px; color:var(--cream); white-space:nowrap; opacity:.3; transition: opacity .3s var(--ease); }
.rail-num.active{ opacity:1; }
@media (max-width:900px){ .rail{ display:none; } }

.mobile-chapter{ display:none; font-family: var(--font-hand); color: rgba(245,245,245,.55); font-size:14px; margin-bottom:10px; }
@media (max-width:900px){ .mobile-chapter{ display:block; } }

/* Only Hero and Contact snap on phones — the two short chapters
   whose content always fits a single screen. Selected Work and
   Why Work With Me are left snap-free so scrolling through the
   cards and the value points is never yanked forward early. */
@media (max-width:768px){
  html{ scroll-snap-type: y proximity; }
  header.hero, #contact{ scroll-snap-align:start; scroll-snap-stop:always; }
}

section{ --focus:0; }
.reveal{ opacity: var(--focus); }

/* =========================================================
   NAV
   ========================================================= */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:22px var(--gutter); background: linear-gradient(to bottom, rgba(10,10,10,.5), rgba(10,10,10,0)); }
.nav-mark{ font-weight:800; font-size:14px; letter-spacing:.08em; color: var(--cream); text-transform:uppercase; }
.nav-mark span{ color: var(--yellow); }
.nav-right{ display:flex; align-items:center; gap: clamp(18px,3vw,34px); }
.nav-cta{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--black); background: var(--yellow); padding:9px 18px; border-radius:999px; white-space:nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.nav-cta:hover{ background: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.nav-links{ display:flex; gap: clamp(16px,2.6vw,34px); }
.nav-links a{ font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color: rgba(245,245,245,.75); position:relative; padding-bottom:4px; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--yellow); transition: right .3s var(--ease); }
.nav-links a:hover::after, .nav-links a:focus-visible::after{ right:0; }
.nav-toggle{ display:none; background:none; border:0; padding:4px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--cream); margin:5px 0; }
@media (max-width:640px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background: rgba(10,10,10,.97); flex-direction:column; padding:100px 32px 32px; gap:28px; transform: translateX(100%); transition: transform .45s var(--ease); }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size:16px; }
  .nav-toggle{ display:block; z-index:60; }
  .nav-cta{ font-size:10px; padding:8px 13px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ min-height:100svh; padding-top:140px; }
.hero-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--yellow); }
.hero h1{ font-weight:900; font-size: clamp(2.1rem, 6vw, 4.2rem); line-height:1.1; letter-spacing:-.01em; max-width:16ch; color: var(--yellow); }
.hero p.lede{ margin-top:26px; }
.hero-cta-row{ margin-top:38px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:999px;
  background: var(--yellow); color: var(--black);
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  box-shadow: 0 10px 26px rgba(255,201,71,.22);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,201,71,.32); }
.hero-cta-note{ font-family: var(--font-hand); font-size:14px; color: rgba(245,245,245,.55); }
.hero-scroll{ margin-top:64px; display:flex; align-items:center; gap:12px; color: rgba(245,245,245,.5); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.hero-scroll::before{ content:""; width:34px; height:1px; background: rgba(245,245,245,.35); display:block; }

.chapter-tag{ font-family: var(--font-hand); font-size:15px; color: rgba(245,245,245,.5); margin-bottom:10px; display:block; }

/* =========================================================
   SELECTED WORK — same scattered index-card device as the
   main site, just with a thumbnail slot up top for the render.
   ========================================================= */
.head-row{ margin-bottom:56px; }

.deck{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 50px 32px; max-width: 1180px; }
.deck .card:nth-child(4n+2){ margin-top:44px; }
.deck .card:nth-child(4n+3){ margin-top:16px; }
.deck .card:nth-child(4n+4){ margin-top:58px; }

@media (max-width:1080px){ .deck{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width:none; } .deck .card{ margin-top:0 !important; } }
@media (max-width:620px){ .deck{ grid-template-columns: 1fr; } }

.card{
  display:block;
  position:relative; background: var(--paper); color:#1c1c1c;
  padding: 14px 14px 20px;
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform, opacity;
  text-decoration:none;
  cursor: pointer;
}
.card:nth-child(6n+1){ --r:-2.1deg; }
.card:nth-child(6n+2){ --r:1.6deg; }
.card:nth-child(6n+3){ --r:-1deg; }
.card:nth-child(6n+4){ --r:1.9deg; }
.card:nth-child(6n+5){ --r:-1.6deg; }
.card:nth-child(6n+6){ --r:1.1deg; }
.card::before{
  content:""; position:absolute; top:-7px; left:50%; margin-left:-7px; width:13px; height:13px; border-radius:50%;
  background: var(--yellow); box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); z-index:2;
}
.card::after{
  content:""; position:absolute; right:0; bottom:0; width:0; height:0; border-style:solid; border-width: 0 0 20px 20px;
  border-color: transparent transparent rgba(18,18,18,.14) transparent; transition: border-width .5s var(--ease);
}
.card-thumb{
  position:relative; width:100%; aspect-ratio: 4 / 3; overflow:hidden; background:#d8d3c4;
}
.card-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.card:hover .card-thumb img, .card:focus-within .card-thumb img{ transform: scale(1.06); }
.card-num{ font-family: var(--font-hand); font-size:13px; color:#8a8a8a; transition: color .4s var(--ease); position:absolute; top:8px; left:10px; z-index:2; background: rgba(238,234,224,.85); padding:1px 7px; border-radius:999px; }
.card-body{ padding: 16px 8px 4px; }
.card h3{ font-size:1.02rem; font-weight:800; margin-top:2px; line-height:1.2; background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat:no-repeat; background-size:0% 2px; background-position:0 100%; transition: background-size .5s var(--ease); }
.card p{ font-size:12.5px; line-height:1.55; margin-top:10px; color:#3a3a3a; }

.card{ opacity: var(--focus); transform: rotate(var(--r,0deg)); }
.card:hover, .card:focus-within{
  transform: translateY(-16px) rotate(0deg) scale(1.05);
  box-shadow: 0 30px 30px rgba(0,0,0,.4), 0 14px 46px rgba(255,201,71,.22);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  z-index:5;
}
.card:hover::before, .card:focus-within::before{ transform: scale(1.25) translateY(-1px); box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 3px 8px rgba(255,201,71,.55); }
.card:hover::after, .card:focus-within::after{ border-width:0 0 26px 26px; }
.card:hover h3, .card:focus-within h3{ background-size:100% 2px; }
.card:hover .card-num, .card:focus-within .card-num{ color:#b5860a; }

article.card{ cursor: default; }

.work-outro{ margin-top:56px; max-width:66ch; }
.work-outro p{ font-size:15px; line-height:1.8; color: rgba(245,245,245,.8); }
.work-outro strong{ color: var(--yellow); }

/* =========================================================
   WHY WORK WITH ME — reasoned rows, same device as the main
   site's Experience Log, since it's the same "one line item
   per row" logic just with value props instead of jobs.
   ========================================================= */
.reasons{ margin-top:40px; display:flex; flex-direction:column; }
.reason-row{ display:grid; grid-template-columns: 280px 1fr; gap:24px; padding:26px 0; border-top:1px solid rgba(245,245,245,.14); }
.reason-row:last-of-type{ border-bottom:1px solid rgba(245,245,245,.14); }
.reason-title{ font-weight:800; font-size:1.05rem; color: var(--yellow); }
.reason-desc{ font-size:14.5px; line-height:1.7; color: rgba(245,245,245,.75); max-width:58ch; }
@media (max-width:700px){ .reason-row{ grid-template-columns:1fr; gap:8px; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-links{ margin-top:40px; display:flex; flex-direction:column; gap:18px; max-width:620px; }
.contact-links a, .contact-links .static-row{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  font-size: clamp(1rem,2vw,1.3rem); font-weight:600;
  border-bottom: 1px solid rgba(245,245,245,.14); padding-bottom:14px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact-links a:hover{ color: var(--yellow); border-color: var(--yellow); }
.contact-links small{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--grey); width:92px; flex:none; }

.contact-icons{ display:flex; justify-content:center; gap:14px; margin-top:36px; }
.contact-icons a{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background: var(--yellow); color: var(--black);
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.contact-icons a:hover{ background: var(--cream); transform: translateY(-3px); }
.contact-icons svg{ width:20px; height:20px; }

footer{ position:relative; z-index:10; padding:34px var(--gutter) 46px; border-top:1px solid rgba(245,245,245,.12); }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding:0; }
footer p{ font-size:12.5px; color: rgba(245,245,245,.45); margin:0; }
</style>
</head>
<body>

<div class="bg-stage" aria-hidden="true">
  <div class="bg-layer" data-layer="hero">
    <video autoplay muted loop playsinline>
      <source src="3D_Hero_BG.webm" type="video/webm">
    </video>
  </div>
  <div class="bg-layer" data-layer="work">
    <img src="Tiles_BG.jpg" alt="">
  </div>
  <div class="bg-layer" data-layer="why">
    <img src="Tiles_BG.jpg" alt="">
  </div>
  <div class="bg-layer" data-layer="contact">
    <img src="Contact_section_BG.jpg" alt="" class="bg-pan-mobile bg-zoom-desktop">
  </div>
</div>
<div class="bg-texture"></div>
<div class="bg-scrim"></div>

<nav class="nav" id="siteNav">
  <a href="#main" target="_parent" class="nav-mark">Ibrahim<span>.</span></a>
  <div class="nav-right">
    <ul class="nav-links" id="navLinks">
      <li><a href="#work">Selected Work</a></li>
      <li><a href="#why">Why Work With Me</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <a class="nav-cta" href="#main" target="_parent">Primary Website</a>
    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
  </div>
</nav>

<div class="rail" aria-hidden="true">
  <div class="rail-line"></div>
  <div class="rail-dot" id="railDot"></div>
  <div class="rail-num" data-chapter="0" style="top:14%">Hero</div>
  <div class="rail-num" data-chapter="1" style="top:38%">01 — Selected Work</div>
  <div class="rail-num" data-chapter="2" style="top:64%">02 — Why Work With Me</div>
  <div class="rail-num" data-chapter="3" style="top:88%">03 — Get In Touch</div>
</div>

<main>

<header class="hero" id="hero" data-layer-target="hero">
    <div class="wrap">
      <div class="hero-eyebrow reveal">
        <span class="dot"></span>
        <span class="eyebrow">Ibrahim Merchant — 3D Artist</span>
      </div>
      <h1 class="reveal reveal-delay-1">Build 3D Worlds & Props That Drop Straight Into Your Project</h1>
      <p class="lede reveal reveal-delay-2">I'm Ibrahim Y Merchant, a 3D Artist who crafts props and environments. I create high-quality, engine-ready assets for games, VR/AR, simulations, films, product visualization, and architectural storytelling. Quick turnarounds, fair pricing, no long-term strings.</p>
      <div class="hero-cta-row reveal reveal-delay-3">
        <a class="hero-cta" href="#contact">Start Yours</a>
        <span class="hero-cta-note">*Click to start yours*</span>
      </div>
      <div class="hero-scroll reveal reveal-delay-3">Scroll</div>
    </div>
  </header>

<section id="work" data-layer-target="work">
    <div class="wrap">
      <div class="mobile-chapter">01 — Selected Work</div>
      <div class="head-row reveal">
        <span class="chapter-tag">Note 01</span>
        <h2 class="section-head"><span class="mark hand">Work That Speaks for Itself</span></h2>
        <p class="lede" style="margin-top:18px;">A wide variety of assets built for performance and visual impact, across multiple pipelines.</p>
      </div>

<div class="deck" id="deck">
        
        <a class="card" href="https://ibrahim_merchant.artstation.com/projects/QXbyvx" target="_blank" rel="noopener">
          <div class="card-thumb"><span class="card-num">01</span><img src="Game_Ready_Assets.jpg" alt="Game ready 3D asset render"></div>
          <div class="card-body">
            <h3>Game Ready Assets</h3>
            <p>Optimized, texture-baked props and characters built to drop straight into game engines.</p>
          </div>
        </a>

<a class="card" href="https://ibrahim_merchant.artstation.com/projects/RKwo5m" target="_blank" rel="noopener">
          <div class="card-thumb"><span class="card-num">02</span><img src="Architectural_Visualization.jpg" alt="Architectural visualization render"></div>
          <div class="card-body">
            <h3>Architectural Visualization</h3>
            <p>Photoreal interiors and structures for storytelling, pitching and pre-construction.</p>
          </div>
        </a>

<article class="card">
          <div class="card-thumb"><span class="card-num">03</span><img src="Product_Visualization.jpg" alt="Product visualization render"></div>
          <div class="card-body">
            <h3>Product Visualization</h3>
            <p>Studio-quality renders that make a product look ready for market before it's manufactured.</p>
          </div>
        </article>

<a class="card" href="https://ibrahim_merchant.artstation.com/projects/8BvPXG" target="_blank" rel="noopener">
          <div class="card-thumb"><span class="card-num">04</span><img src="VR_Environments.jpg" alt="VR environment render"></div>
          <div class="card-body">
            <h3>VR Environments</h3>
            <p>Real-time environments built and optimized for immersive, comfortable VR experiences.</p>
          </div>
        </a>

<a class="card" href="https://ibrahim_merchant.artstation.com/projects/oJYeEz" target="_blank" rel="noopener">
          <div class="card-thumb"><span class="card-num">05</span><img src="Mobile_Game_environments.jpg" alt="Mobile game environment render"></div>
          <div class="card-body">
            <h3>Mobile Game Environments</h3>
            <p>Stylized, performance-first environments built to run smoothly on mobile hardware.</p>
          </div>
        </a>

<a class="card" href="https://ibrahim_merchant.artstation.com/projects/aonKqL" target="_blank" rel="noopener">
          <div class="card-thumb"><span class="card-num">06</span><img src="Environments_for_Films-YouTube.jpg" alt="Environment render for film or YouTube"></div>
          <div class="card-body">
            <h3>Environments for Films / YouTube</h3>
            <p>Cinematic sets and backdrops built for camera, lighting and narrative first.</p>
          </div>
        </a>

<article class="card">
          <div class="card-thumb"><span class="card-num">07</span><img src="3D_Model_for_AR_Platforms.jpg" alt="3D model for AR platform"></div>
          <div class="card-body">
            <h3>3D Models for AR Platforms</h3>
            <p>Lightweight, real-world-scaled models built to hold up in AR viewers and platforms.</p>
          </div>
        </article>

<a class="card" href="https://ibrahim_merchant.artstation.com/projects/6Ly0Ox" target="_blank" rel="noopener">
          <div class="card-thumb"><span class="card-num">08</span><img src="Simulation_Game_Environments.jpg" alt="Simulation game environment render"></div>
          <div class="card-body">
            <h3>Simulation Game Environments</h3>
            <p>Detailed, functional spaces built for simulation and training-based gameplay.</p>
          </div>
        </a>
      </div>

<div class="work-outro reveal reveal-delay-2">
        <p>And that's just the start! Beyond these use cases are possibilities wide open. <strong>If you can imagine it, I can build it</strong> — from props to worlds and everything in between.</p>
      </div>
    </div>
  </section>

<section id="why" data-layer-target="why">
    <div class="wrap">
      <div class="mobile-chapter">02 — Why Work With Me</div>
      <div class="reveal">
        <span class="chapter-tag">Note 02</span>
        <h2 class="section-head"><span class="mark hand">Why Work With Me</span></h2>
      </div>

<div class="reasons reveal reveal-delay-1">
        <div class="reason-row">
          <div class="reason-title">Fast Turnaround, Real Results</div>
          <div class="reason-desc">Projects delivered under tight deadlines, with iteration loops kept short. Faster delivery means more done in less time, and higher productivity for your team.</div>
        </div>
        <div class="reason-row">
          <div class="reason-title">Cost-Effective Without Compromise</div>
          <div class="reason-desc">Pay per project instead of carrying a full-time salary. Efficiency in workflow means both time and money are saved, without sacrificing quality.</div>
        </div>
        <div class="reason-row">
          <div class="reason-title">Proven Across Industries</div>
          <div class="reason-desc">From Amazon's AR division to indie startups, experience spans VR, AR, games, simulation, product visualization, film and ArchViz.</div>
        </div>
        <div class="reason-row">
          <div class="reason-title">Pipeline Ready</div>
          <div class="reason-desc">Assets built in industry-standard tools — Blender, Maya, Substance, ZBrush, Unreal, Unity — and delivered clean, optimized, and ready to slot into your workflow.</div>
        </div>
      </div>
    </div>
  </section>

<section id="contact" data-layer-target="contact">
    <div class="wrap">
      <div class="mobile-chapter">03 — Get In Touch</div>
      <div class="reveal">
        <span class="chapter-tag">Note 03</span>
        <h2 class="section-head"><span class="mark hand">Get In Touch</span></h2>
        <p class="lede" style="margin-top:18px;">Share your brief and you'll get a quick estimate with a clear timeline.</p>

</main>

/* ---------- focus engine: text + background, driven every frame
     by real scroll geometry, exactly like the main site ---------- */
  var bgLayers = {};
  document.querySelectorAll('.bg-layer').forEach(function(l){ bgLayers[l.dataset.layer] = l; });
  /* Selected Work and Why Work With Me use the Tiles image as a
     faint texture, capped at 10% even at full focus. Hero and
     Contact run their own webp loops at full opacity. */
  var LAYER_MAX_OPACITY = { work: 0.10, why: 0.10, hero: 0.8, contact: 0.8 };
  function layerOpacity(layerTarget, focusValue){
    var cap = LAYER_MAX_OPACITY.hasOwnProperty(layerTarget) ? LAYER_MAX_OPACITY[layerTarget] : 1;
    return focusValue * cap;
  }
  var targets = Array.prototype.slice.call(document.querySelectorAll('[data-layer-target]'));
  var heroSection = document.getElementById('hero');
  var heroIdx = targets.indexOf(heroSection);
  var heroIntroStart = null;
  var heroIntroDuration = 1200;
  var current = targets.map(function(){ return 0; });
  var lastTs = null;
  var SMOOTH_RATE = 10;

function smoothstep(x){ return x*x*(3-2*x); }

/* ---------- Selected Work: its own fade-in/fade-out, tied to the
     heading and last card, same logic as the main site's deck ---------- */
  var workSection = document.getElementById('work');
  var workHead = workSection ? workSection.querySelector('.section-head') : null;
  var workCards = workSection ? workSection.querySelectorAll('.deck .card') : null;
  var workLastCard = workCards && workCards.length ? workCards[workCards.length - 1] : null;

var WORK_NAV_OFFSET   = 90;
  var WORK_FADE_IN_DIST = 130;
  var WORK_EXIT_BUFFER  = 110;
  var WORK_FADE_OUT_DIST = 240;

function rawFocusWork(vh){
    if(!workHead || !workLastCard) return 0;
    var headTop = workHead.getBoundingClientRect().top;
    var cardBottom = workLastCard.getBoundingClientRect().bottom;

var fadeInStart = WORK_NAV_OFFSET + WORK_FADE_IN_DIST;
    var fadeIn = (fadeInStart - headTop) / WORK_FADE_IN_DIST;
    fadeIn = Math.max(0, Math.min(fadeIn, 1));

return Math.min(fadeIn, fadeOut);
  }

function tick(ts){
    var vh = window.innerHeight;
    var dt = lastTs === null ? 16.7 : Math.min(ts - lastTs, 48);
    lastTs = ts;
    var lerpAmt = 1 - Math.exp(-SMOOTH_RATE * (dt / 1000));

if(reduced){
    targets.forEach(function(sec){
      var f = sec === heroSection ? 1 : 0;
      sec.style.setProperty('--focus', f);
      var layer = bgLayers[sec.dataset.layerTarget];
      if(layer){ layer.style.opacity = layerOpacity(sec.dataset.layerTarget, f); }
    });
    document.addEventListener('scroll', function(){
      var vh = window.innerHeight;
      targets.forEach(function(sec){
        var f = sec === workSection ? rawFocusWork(vh) : rawFocus(sec, vh);
        sec.style.setProperty('--focus', f.toFixed(4));
        var layer = bgLayers[sec.dataset.layerTarget];
        if(layer){ layer.style.opacity = layerOpacity(sec.dataset.layerTarget, f).toFixed(4); }
      });
    }, { passive: true });
  } else {
    requestAnimationFrame(function(ts){ heroIntroStart = ts; requestAnimationFrame(tick); });
  }

/* ---------- title reveal: fixed-duration wipe-in, plain fade-out ---------- */
  var sectionHeads = {};
  targets.forEach(function(sec){
    var head = sec.querySelector('.section-head');
    if(head){ sectionHeads[sec.dataset.layerTarget] = head; }
  });
  var activeHeadKey = null;
  function setActiveHead(idx){
    var sec = targets[idx];
    if(!sec) return;
    var key = sec.dataset.layerTarget;
    if(key === activeHeadKey) return;
    activeHeadKey = key;
    Object.keys(sectionHeads).forEach(function(k){
      var el = sectionHeads[k];
      if(k === key){
        el.classList.remove('fade-out');
        void el.offsetWidth;
        el.classList.add('wipe-in');
      } else if(el.classList.contains('wipe-in')){
        el.classList.remove('wipe-in');
        el.classList.add('fade-out');
      }
    });
  }

/* ---------- paginated snap-scroll: one scroll gesture = one chapter ---------- */
  var pages = targets;
  var currentPage = 0;
  var isSnapping = false;
  var inputLocked = false;

function easeInOutCubic(t){ return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2; }

/* ---------- anchor navigation routes through the same snap engine ---------- */
  document.querySelectorAll('a[href^="#"]').forEach(function(a){
    a.addEventListener('click', function(e){
      var id = a.getAttribute('href');
      var target = document.querySelector(id);
      if(!target) return;
      e.preventDefault();
      var idx = pages.indexOf(target);
      if(!reduced && !isMobile && idx !== -1){
        goToPage(idx);
      } else {
        target.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'start' });
      }
    });
  });
})();
</script>

</body>
</html>