Photography Portfolio — Dark Film

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Lenis from 'lenis';

gsap.registerPlugin(ScrollTrigger);

initDemoShell({
  title: 'Photography Portfolio — Dark Film',
  category: 'pages',
  tech: ['gsap', 'scroll-trigger', 'lenis', 'eb-garamond', 'geist-mono'],
});

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

// ── Lenis smooth scroll ───────────────────────────────────────────────────────
const lenis = new Lenis({ lerp: 0.075, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

// ── Nav scroll state ──────────────────────────────────────────────────────────
const nav = document.getElementById('nav');
ScrollTrigger.create({
  start: 'top -80px',
  onUpdate: (self) => {
    nav.classList.toggle('scrolled', self.scroll() > 80);
  },
});

// ── Hero entrance ─────────────────────────────────────────────────────────────
if (!reduced) {
  // Staggered entrance — calm and deliberate, like a photograph developing
  gsap.set('.hero-eyebrow', { opacity: 0 });
  gsap.set('.hero-h1', { opacity: 0, y: 20 });
  gsap.set('.hf-img--main', { opacity: 0, scale: 1.03 });
  gsap.set('.hf-caption', { opacity: 0 });
  gsap.set('.hero-scroll-hint', { opacity: 0 });

  gsap.timeline({ delay: 0.5, defaults: { ease: 'power2.out' } })
    .to('.hero-eyebrow',     { opacity: 1, duration: 1 })
    .to('.hero-h1',          { opacity: 1, y: 0, duration: 1.4, ease: 'expo.out' }, '-=0.5')
    .to('.hf-img--main',     { opacity: 1, scale: 1, duration: 1.6 }, '-=1')
    .to('.hf-caption',       { opacity: 1, duration: 0.8 }, '-=0.4')
    .to('.hero-scroll-hint', { opacity: 1, duration: 0.8 }, '-=0.3');
}

// ── Photo grid — staggered reveal ─────────────────────────────────────────────
document.querySelectorAll('.photo-item').forEach((item, i) => {
  if (!reduced) {
    gsap.set(item, { opacity: 0 });
    gsap.to(item, {
      opacity: 1,
      duration: 1.2,
      ease: 'power1.out',
      delay: (i % 3) * 0.15,
      scrollTrigger: {
        trigger: item,
        start: 'top 85%',
        toggleActions: 'play none none none',
      },
    });
  }
});

// ── Parallax on masonry images ────────────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll('.pi-img').forEach((img, i) => {
    const speed = 0.05 + (i % 3) * 0.02;
    gsap.to(img, {
      yPercent: -8 * speed * 10,
      ease: 'none',
      scrollTrigger: {
        trigger: img.closest('.photo-item'),
        start: 'top bottom',
        end: 'bottom top',
        scrub: 1.5,
      },
    });
  });
}

// ── Series items reveal ───────────────────────────────────────────────────────
document.querySelectorAll('.series-item').forEach((item, i) => {
  if (!reduced) {
    gsap.set(item, { opacity: 0, x: -15 });
    gsap.to(item, {
      opacity: 1,
      x: 0,
      duration: 1,
      ease: 'expo.out',
      delay: i * 0.12,
      scrollTrigger: {
        trigger: '.series-list',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });

    // Reveal preview images staggered
    const imgs = item.querySelectorAll('.si-img');
    gsap.set(imgs, { opacity: 0, y: 10 });
    gsap.to(imgs, {
      opacity: 1,
      y: 0,
      duration: 0.6,
      stagger: 0.08,
      ease: 'power2.out',
      delay: 0.4 + i * 0.12,
      scrollTrigger: {
        trigger: '.series-list',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  }
});

// ── Italic number animation on series ────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll('.si-number').forEach((num) => {
    num.addEventListener('mouseenter', () => {
      gsap.to(num, { color: 'rgba(200, 169, 110, 0.4)', duration: 0.4, ease: 'power2.out' });
    });
    num.addEventListener('mouseleave', () => {
      gsap.to(num, { color: 'rgba(58, 52, 42, 1)', duration: 0.4, ease: 'power2.out' });
    });
  });
}

// ── Info section reveal ───────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.info-h2', { opacity: 0, y: 25 });
  gsap.to('.info-h2', {
    opacity: 1,
    y: 0,
    duration: 1.2,
    ease: 'expo.out',
    scrollTrigger: {
      trigger: '.info-section',
      start: 'top 70%',
      toggleActions: 'play none none reverse',
    },
  });

  gsap.set('.info-bio', { opacity: 0, y: 18 });
  gsap.to('.info-bio', {
    opacity: 1,
    y: 0,
    duration: 1,
    stagger: 0.15,
    ease: 'expo.out',
    delay: 0.2,
    scrollTrigger: {
      trigger: '.info-right',
      start: 'top 75%',
      toggleActions: 'play none none reverse',
    },
  });

  // Stats count up
  document.querySelectorAll('.is-num').forEach((el) => {
    const text = el.textContent.trim();
    const hasPlus = text.includes('+');
    const target = parseFloat(text);

    ScrollTrigger.create({
      trigger: '.info-stats',
      start: 'top 80%',
      end: 'top 35%',
      onUpdate: (self) => {
        const val = Math.round(target * self.progress);
        el.textContent = val + (hasPlus ? '+' : '');
      },
    });
  });

  // Portrait fade in
  gsap.set('.ip-img', { opacity: 0, scale: 1.02 });
  gsap.to('.ip-img', {
    opacity: 1,
    scale: 1,
    duration: 1.4,
    ease: 'power2.out',
    scrollTrigger: {
      trigger: '.info-portrait',
      start: 'top 80%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── Contact section reveal ────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.contact-h2', { opacity: 0, y: 30 });
  gsap.to('.contact-h2', {
    opacity: 1,
    y: 0,
    duration: 1.2,
    ease: 'expo.out',
    scrollTrigger: {
      trigger: '.contact-section',
      start: 'top 70%',
      toggleActions: 'play none none reverse',
    },
  });

  gsap.set('.cl-item', { opacity: 0, y: 12 });
  gsap.to('.cl-item', {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: 'expo.out',
    delay: 0.2,
    scrollTrigger: {
      trigger: '.contact-body',
      start: 'top 75%',
      toggleActions: 'play none none reverse',
    },
  });

  gsap.set('.contact-availability > *', { opacity: 0, y: 12 });
  gsap.to('.contact-availability > *', {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.12,
    ease: 'expo.out',
    delay: 0.35,
    scrollTrigger: {
      trigger: '.contact-body',
      start: 'top 75%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── Slow scroll‐driven parallax on hero image ─────────────────────────────────
if (!reduced) {
  gsap.to('.hf-img--main', {
    yPercent: -6,
    ease: 'none',
    scrollTrigger: {
      trigger: '.hero',
      start: 'top top',
      end: 'bottom top',
      scrub: 2,
    },
  });
}

// ── Section label fade-in ─────────────────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll('.section-label').forEach((label) => {
    gsap.set(label, { opacity: 0 });
    gsap.to(label, {
      opacity: 1,
      duration: 1,
      ease: 'power1.out',
      scrollTrigger: {
        trigger: label,
        start: 'top 85%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── Motion preference toggle ──────────────────────────────────────────────────
window.addEventListener('motion-preference', (e) => {
  if (e.detail.reduced) {
    gsap.globalTimeline.paused(true);
  } else {
    gsap.globalTimeline.paused(false);
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elara Voss — Photography</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Geist+Mono:wght@300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>

  <!-- Grain texture overlay -->
  <div class="grain" aria-hidden="true"></div>

  <!-- Navigation -->
  <nav class="nav" id="nav">
    <a href="#" class="nav-logo">Elara Voss</a>
    <ul class="nav-links">
      <li><a href="#work">Work</a></li>
      <li><a href="#series">Series</a></li>
      <li><a href="#info">Info</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <a href="#contact" class="nav-book">Book a Session</a>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-inner">
      <div class="hero-text">
        <div class="hero-eyebrow">Documentary · Portrait · Architecture</div>
        <h1 class="hero-h1">
          <em>Light </em>finds<br>
          the truth in<br>
          <em>stillness.</em>
        </h1>
      </div>
      <div class="hero-featured" aria-hidden="true">
        <div class="hf-img hf-img--main"></div>
        <div class="hf-caption">
          <span class="hf-title">Berlin, 2024</span>
          <span class="hf-series">Concrete & Sky</span>
        </div>
      </div>
    </div>
    <div class="hero-scroll-hint">
      <span>Scroll to explore</span>
      <div class="scroll-line"></div>
    </div>
  </section>

  <!-- Work / Masonry Grid -->
  <section class="work-section" id="work">
    <div class="work-header">
      <span class="section-label">Selected Work</span>
      <div class="work-year">2020 — 2025</div>
    </div>

    <div class="masonry-grid">
      <!-- Row 1 -->
      <figure class="photo-item photo-item--tall" data-index="01">
        <div class="pi-img pi-img--1"></div>
        <figcaption class="pi-caption">
          <span class="pi-num">01</span>
          <div class="pi-info">
            <strong>Morning Transit</strong>
            <span>Tokyo, 2024</span>
          </div>
        </figcaption>
      </figure>

      <figure class="photo-item" data-index="02">
        <div class="pi-img pi-img--2"></div>
        <figcaption class="pi-caption">
          <span class="pi-num">02</span>
          <div class="pi-info">
            <strong>Fog Study No. 3</strong>
            <span>Iceland, 2023</span>
          </div>
        </figcaption>
      </figure>

      <figure class="photo-item" data-index="03">
        <div class="pi-img pi-img--3"></div>
        <figcaption class="pi-caption">
          <span class="pi-num">03</span>
          <div class="pi-info">
            <strong>Interior Light</strong>
            <span>Copenhagen, 2024</span>
          </div>
        </figcaption>
      </figure>

      <!-- Row 2 -->
      <figure class="photo-item" data-index="04">
        <div class="pi-img pi-img--4"></div>
        <figcaption class="pi-caption">
          <span class="pi-num">04</span>
          <div class="pi-info">
            <strong>Passage</strong>
            <span>Paris, 2023</span>
          </div>
        </figcaption>
      </figure>

      <figure class="photo-item photo-item--wide" data-index="05">
        <div class="pi-img pi-img--5"></div>
        <figcaption class="pi-caption">
          <span class="pi-num">05</span>
          <div class="pi-info">
            <strong>Dusk, East Quarter</strong>
            <span>Berlin, 2024</span>
          </div>
        </figcaption>
      </figure>

      <!-- Row 3 -->
      <figure class="photo-item photo-item--wide" data-index="06">
        <div class="pi-img pi-img--6"></div>
        <figcaption class="pi-caption">
          <span class="pi-num">06</span>
          <div class="pi-info">
            <strong>The Architects</strong>
            <span>Rotterdam, 2023</span>
          </div>
        </figcaption>
      </figure>

      <figure class="photo-item" data-index="07">
        <div class="pi-img pi-img--7"></div>
        <figcaption class="pi-caption">
          <span class="pi-num">07</span>
          <div class="pi-info">
            <strong>Window Study</strong>
            <span>Lisbon, 2024</span>
          </div>
        </figcaption>
      </figure>
    </div>
  </section>

  <!-- Series Section -->
  <section class="series-section" id="series">
    <div class="series-header">
      <span class="section-label">Ongoing Series</span>
      <h2 class="series-h2">Long-form <em>projects</em></h2>
    </div>

    <div class="series-list">
      <div class="series-item" id="series-1">
        <div class="si-number">01</div>
        <div class="si-content">
          <h3>Concrete & Sky</h3>
          <p>Brutalist architecture photographed at the hour when artificial and natural light are indistinguishable.</p>
          <div class="si-meta">
            <span>32 images</span>
            <span>2022 — ongoing</span>
          </div>
        </div>
        <div class="si-preview">
          <div class="si-img si-img--1"></div>
          <div class="si-img si-img--2"></div>
          <div class="si-img si-img--3"></div>
        </div>
        <a href="#" class="si-link">View Series →</a>
      </div>

      <div class="series-item" id="series-2">
        <div class="si-number">02</div>
        <div class="si-content">
          <h3>Threshold</h3>
          <p>Doorways, windows, and liminal spaces — moments of transition captured across six countries.</p>
          <div class="si-meta">
            <span>48 images</span>
            <span>2021 — 2023</span>
          </div>
        </div>
        <div class="si-preview">
          <div class="si-img si-img--4"></div>
          <div class="si-img si-img--5"></div>
          <div class="si-img si-img--6"></div>
        </div>
        <a href="#" class="si-link">View Series →</a>
      </div>

      <div class="series-item" id="series-3">
        <div class="si-number">03</div>
        <div class="si-content">
          <h3>Portraits in Available Light</h3>
          <p>Intimate character studies shot exclusively with ambient light. No flash, no reflectors.</p>
          <div class="si-meta">
            <span>24 images</span>
            <span>2023 — ongoing</span>
          </div>
        </div>
        <div class="si-preview">
          <div class="si-img si-img--7"></div>
          <div class="si-img si-img--8"></div>
          <div class="si-img si-img--9"></div>
        </div>
        <a href="#" class="si-link">View Series →</a>
      </div>
    </div>
  </section>

  <!-- Info / About -->
  <section class="info-section" id="info">
    <div class="info-inner">
      <div class="info-left">
        <span class="section-label">About</span>
        <h2 class="info-h2">
          <em>Quietly</em><br>
          observant.
        </h2>
      </div>
      <div class="info-right">
        <p class="info-bio">Elara Voss is a documentary and architectural photographer based between Berlin and Tokyo. Her work explores the tension between built environments and the people who inhabit them.</p>
        <p class="info-bio">Exhibited at the Foam Museum Amsterdam, Rencontres d'Arles, and the Tokyo Photographic Art Museum. Published in Aperture, Magnum Photos, and The Guardian Weekend Magazine.</p>
        <div class="info-stats">
          <div class="is-item">
            <span class="is-num">14</span>
            <span class="is-label">Years shooting</span>
          </div>
          <div class="is-item">
            <span class="is-num">30+</span>
            <span class="is-label">Exhibitions</span>
          </div>
          <div class="is-item">
            <span class="is-num">8</span>
            <span class="is-label">Published books</span>
          </div>
        </div>
      </div>
    </div>
    <div class="info-portrait" aria-hidden="true">
      <div class="ip-img"></div>
      <div class="ip-caption">Berlin, 2024. Canon F-1 · Kodak Gold 200</div>
    </div>
  </section>

  <!-- Contact -->
  <section class="contact-section" id="contact">
    <div class="contact-inner">
      <h2 class="contact-h2">
        Let's create<br>
        <em>something real.</em>
      </h2>
      <div class="contact-body">
        <div class="contact-links">
          <a href="mailto:hello@elaravoss.com" class="cl-item">
            <span class="cl-label">Email</span>
            <span class="cl-value">hello@elaravoss.com</span>
          </a>
          <a href="#" class="cl-item">
            <span class="cl-label">Instagram</span>
            <span class="cl-value">@elaravoss</span>
          </a>
          <a href="#" class="cl-item">
            <span class="cl-label">Represented by</span>
            <span class="cl-value">Ostkreuz Agency</span>
          </a>
        </div>
        <div class="contact-availability">
          <div class="ca-status">
            <span class="ca-dot"></span>
            <span>Available for commissions</span>
          </div>
          <p>Currently booking for Q3–Q4 2025.<br>Commissions, editorial, and exhibition prints.</p>
          <a href="mailto:hello@elaravoss.com" class="btn-film">Send Enquiry</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <span>Elara Voss Photography</span>
    <span>© 2025 · All rights reserved · Berlin / Tokyo</span>
  </footer>

  <script type="module" src="script.js"></script>
</body>
</html>