Documentary Film — Terra Incognita

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: 'Terra Incognita — Documentary Film',
  category: 'pages',
  tech: ['gsap', 'scroll-trigger', 'lenis', 'canvas-2d', 'clip-path', 'libre-baskerville'],
});

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

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

// ── Grain Canvas ───────────────────────────────────────────────────────────
const grainCanvas = document.getElementById('grain-canvas');
const gctx = grainCanvas.getContext('2d');
let grainW = 0, grainH = 0;

function resizeGrain() {
  grainW = grainCanvas.width = window.innerWidth;
  grainH = grainCanvas.height = window.innerHeight;
}
resizeGrain();
window.addEventListener('resize', resizeGrain);

function drawGrain() {
  const imageData = gctx.createImageData(grainW, grainH);
  const buf = imageData.data;
  for (let i = 0; i < buf.length; i += 4) {
    const v = Math.random() * 255 | 0;
    buf[i] = buf[i + 1] = buf[i + 2] = v;
    buf[i + 3] = 255;
  }
  gctx.putImageData(imageData, 0, 0);
  requestAnimationFrame(drawGrain);
}
drawGrain();

// ── Hero entrance ──────────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.hero-meta', { opacity: 0, y: 16 });
  gsap.set('.h1-word', { clipPath: 'inset(100% 0 0 0)' });
  gsap.set('.hero-details', { opacity: 0 });
  gsap.set('.hero-tagline', { opacity: 0, y: 12 });
  gsap.set('.hero-scroll', { opacity: 0 });

  gsap.timeline({ delay: 0.4, defaults: { ease: 'expo.out' } })
    .to('.hero-meta',    { opacity: 1, y: 0, duration: 0.6 })
    .to('.h1-word',      { clipPath: 'inset(0% 0 0 0)', duration: 1.1, stagger: 0.15, ease: 'expo.out' }, '-=0.3')
    .to('.hero-details', { opacity: 1, duration: 0.6 }, '-=0.4')
    .to('.hero-tagline', { opacity: 1, y: 0, duration: 0.6 }, '-=0.3')
    .to('.hero-scroll',  { opacity: 1, duration: 0.6 }, '-=0.2');
}

// ── Synopsis reveal ────────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.synopsis-quote', { opacity: 0, y: 30 });
  gsap.set('.synopsis-text p', { opacity: 0, y: 20 });

  ScrollTrigger.create({
    trigger: '.synopsis-section',
    start: 'top 70%',
    onEnter: () => {
      gsap.to('.synopsis-quote', { opacity: 1, y: 0, duration: 1, ease: 'expo.out' });
      gsap.to('.synopsis-text p', { opacity: 1, y: 0, duration: 0.8, stagger: 0.15, ease: 'expo.out', delay: 0.3 });
    },
  });
}

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

// ── Film stills reveal ─────────────────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll('.still-item').forEach((item, i) => {
    gsap.set(item, { opacity: 0, scale: 0.97 });
    gsap.to(item, {
      opacity: 1, scale: 1,
      duration: 0.9,
      ease: 'expo.out',
      delay: i * 0.08,
      scrollTrigger: {
        trigger: '.stills-grid',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── Credits reveal ─────────────────────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll('.credit-row').forEach((row, i) => {
    gsap.set(row, { opacity: 0, y: 20 });
    gsap.to(row, {
      opacity: 1, y: 0,
      duration: 0.7,
      ease: 'expo.out',
      delay: i * 0.06,
      scrollTrigger: {
        trigger: '.credits-list',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── Festival badges reveal ─────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.festival-badge', { opacity: 0, scale: 0.85 });
  gsap.to('.festival-badge', {
    opacity: 1, scale: 1,
    duration: 0.6,
    stagger: 0.07,
    ease: 'back.out(1.5)',
    scrollTrigger: {
      trigger: '.festivals-row',
      start: 'top 80%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── Watch section reveal ───────────────────────────────────────────────────
if (!reduced) {
  gsap.set(['.watch-h2', '.watch-text > p', '.watch-btns'], { opacity: 0, y: 24 });
  gsap.set('.watch-terminal', { opacity: 0, x: 30 });

  ScrollTrigger.create({
    trigger: '.watch-section',
    start: 'top 70%',
    onEnter: () => {
      gsap.to(['.watch-h2', '.watch-text > p', '.watch-btns'], {
        opacity: 1, y: 0, duration: 0.8, stagger: 0.1, ease: 'expo.out',
      });
      gsap.to('.watch-terminal', {
        opacity: 1, x: 0, duration: 1, ease: 'expo.out', delay: 0.3,
      });
    },
  });
}

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Terra Incognita — Documentary</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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=IBM+Plex+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 overlay -->
  <canvas id="grain-canvas" aria-hidden="true"></canvas>

  <!-- Nav -->
  <nav class="nav" id="nav">
    <span class="nav-logo">TERRA INCOGNITA</span>
    <ul class="nav-links">
      <li><a href="#synopsis">Story</a></li>
      <li><a href="#chapters">Chapters</a></li>
      <li><a href="#stills">Stills</a></li>
      <li><a href="#team">Credits</a></li>
    </ul>
    <a href="#watch" class="nav-watch">Watch Film</a>
  </nav>

  <!-- Hero -->
  <section class="hero" id="hero">
    <div class="hero-inner">
      <div class="hero-meta">
        <span class="hero-label">A Film by</span>
        <span class="hero-director">Mara Solano</span>
      </div>
      <h1 class="hero-h1">
        <span class="h1-word">TERRA</span>
        <span class="h1-word h1-word--accent">INCOGNITA</span>
      </h1>
      <div class="hero-details">
        <span class="hd-item">2024</span>
        <span class="hd-sep">—</span>
        <span class="hd-item">128 min</span>
        <span class="hd-sep">—</span>
        <span class="hd-item">4K / Dolby Atmos</span>
      </div>
      <p class="hero-tagline">Into the unmapped. Beyond the known.</p>
    </div>
    <div class="hero-scroll">
      <span>Scroll to explore</span>
      <div class="scroll-line"></div>
    </div>
  </section>

  <!-- Synopsis -->
  <section class="synopsis-section" id="synopsis">
    <div class="synopsis-inner">
      <div class="synopsis-label">
        <span class="section-num">01</span>
        <span class="section-title">The Story</span>
      </div>
      <blockquote class="synopsis-quote">
        "There are still places on Earth no human has ever stood."
      </blockquote>
      <div class="synopsis-text">
        <p>Over four years, filmmaker Mara Solano and her crew of seven ventured into three of Earth's least-documented territories — the interior highlands of Papua New Guinea, the deep cave systems of the Movile Plateau, and a previously unmapped archipelago in the far North Atlantic.</p>
        <p>Terra Incognita is not an adventure film. It is a meditation on what it means to witness something that has never been witnessed before — and the weight of being the first.</p>
      </div>
    </div>
  </section>

  <!-- Chapters -->
  <section class="chapters-section" id="chapters">
    <div class="chapters-header">
      <span class="section-num">02</span>
      <span class="section-title">Chapters</span>
    </div>
    <div class="chapters-list">
      <div class="chapter-item" data-num="I">
        <span class="ch-num">I</span>
        <div class="ch-content">
          <h3 class="ch-title">The Approach</h3>
          <span class="ch-runtime">00:00 — 22:14</span>
          <p class="ch-desc">The logistics of reaching nowhere. Three teams, three continents, six months of preparation for a combined 47 days in the field.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
      <div class="chapter-item" data-num="II">
        <span class="ch-num">II</span>
        <div class="ch-content">
          <h3 class="ch-title">Papua Highlands</h3>
          <span class="ch-runtime">22:14 — 48:37</span>
          <p class="ch-desc">A week above the clouds in a valley that cartographers have labeled simply "interior — unknown." The first long-form documentation of a ritual fire-walk ceremony.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
      <div class="chapter-item" data-num="III">
        <span class="ch-num">III</span>
        <div class="ch-content">
          <h3 class="ch-title">Below the Plateau</h3>
          <span class="ch-runtime">48:37 — 78:00</span>
          <p class="ch-desc">The Movile Cave system supports 48 species found nowhere else on Earth, all evolved in complete darkness. A 72-hour descent into a world without light.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
      <div class="chapter-item" data-num="IV">
        <span class="ch-num">IV</span>
        <div class="ch-content">
          <h3 class="ch-title">The Unnamed Archipelago</h3>
          <span class="ch-runtime">78:00 — 108:22</span>
          <p class="ch-desc">Seven islands in the North Atlantic, last visited by a fishing vessel in 1934. Arriving by research vessel in January. Sub-zero temperatures. Extraordinary bird colonies.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
      <div class="chapter-item" data-num="V">
        <span class="ch-num">V</span>
        <div class="ch-content">
          <h3 class="ch-title">The Return</h3>
          <span class="ch-runtime">108:22 — 128:00</span>
          <p class="ch-desc">What does it mean to document a place and then leave it? An essay on the ethics of witnessing — and whether showing the world the unknown makes it less unknown.</p>
        </div>
        <div class="ch-rule"></div>
      </div>
    </div>
  </section>

  <!-- Film Stills -->
  <section class="stills-section" id="stills">
    <div class="stills-header">
      <span class="section-num">03</span>
      <span class="section-title">Cinematography</span>
    </div>
    <div class="stills-grid">
      <figure class="still-item still-item--tall" data-location="Papua Highlands, PNG">
        <div class="si-frame si-frame--1"></div>
        <figcaption>Papua Highlands, PNG</figcaption>
      </figure>
      <figure class="still-item" data-location="Movile Cave, Romania">
        <div class="si-frame si-frame--2"></div>
        <figcaption>Movile Cave, Romania</figcaption>
      </figure>
      <figure class="still-item" data-location="North Atlantic, 71°N">
        <div class="si-frame si-frame--3"></div>
        <figcaption>North Atlantic, 71°N</figcaption>
      </figure>
      <figure class="still-item still-item--wide" data-location="Interior Valley — unnamed">
        <div class="si-frame si-frame--4"></div>
        <figcaption>Interior Valley — unnamed</figcaption>
      </figure>
      <figure class="still-item" data-location="Cave Entrance, Day 1">
        <div class="si-frame si-frame--5"></div>
        <figcaption>Cave Entrance, Day 1</figcaption>
      </figure>
      <figure class="still-item" data-location="Archipelago, January 2024">
        <div class="si-frame si-frame--6"></div>
        <figcaption>Archipelago, January 2024</figcaption>
      </figure>
    </div>
  </section>

  <!-- Credits -->
  <section class="credits-section" id="team">
    <div class="credits-inner">
      <div class="credits-label">
        <span class="section-num">04</span>
        <span class="section-title">Credits</span>
      </div>
      <div class="credits-list">
        <div class="credit-row">
          <span class="cr-role">Directed by</span>
          <span class="cr-name">Mara Solano</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Cinematography</span>
          <span class="cr-name">Jesper Lindqvist</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Edited by</span>
          <span class="cr-name">Nadia Okonkwo</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Original Score</span>
          <span class="cr-name">Ólafur Sigurðsson</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Sound Design</span>
          <span class="cr-name">Tomás Ferreira</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Executive Producers</span>
          <span class="cr-name">Annika Björk · Daniel Levi · Ruth Achebe</span>
        </div>
        <div class="credit-row">
          <span class="cr-role">Production</span>
          <span class="cr-name">Deep Field Films · Arte Documentary</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Festivals -->
  <section class="festivals-section" id="festivals">
    <div class="festivals-inner">
      <div class="festivals-label">
        <span class="section-num">05</span>
        <span class="section-title">Film Festivals</span>
      </div>
      <div class="festivals-row">
        <div class="festival-badge">
          <span class="fb-name">Sundance</span>
          <span class="fb-award">World Premiere</span>
          <span class="fb-year">2024</span>
        </div>
        <div class="festival-badge festival-badge--winner">
          <span class="fb-name">TIFF</span>
          <span class="fb-award">Best Documentary</span>
          <span class="fb-year">2024</span>
        </div>
        <div class="festival-badge">
          <span class="fb-name">Cannes</span>
          <span class="fb-award">Official Selection</span>
          <span class="fb-year">2024</span>
        </div>
        <div class="festival-badge festival-badge--winner">
          <span class="fb-name">Hot Docs</span>
          <span class="fb-award">Grand Jury Prize</span>
          <span class="fb-year">2024</span>
        </div>
        <div class="festival-badge">
          <span class="fb-name">IDFA</span>
          <span class="fb-award">Official Selection</span>
          <span class="fb-year">2024</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Watch / CTA -->
  <section class="watch-section" id="watch">
    <div class="watch-inner">
      <div class="watch-text">
        <h2 class="watch-h2">
          See it<br>
          <em>in the dark.</em>
        </h2>
        <p>Available in cinemas and streaming globally.</p>
        <div class="watch-btns">
          <a href="#" class="btn-film">Stream Now</a>
          <a href="#" class="btn-film btn-film--outline">Find Screenings</a>
        </div>
      </div>
      <div class="watch-terminal">
        <div class="wt-bar">
          <span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span>
          <span class="wt-title">screenings.log</span>
        </div>
        <div class="wt-body">
          <p><span class="wt-loc">NEW YORK</span> IFC Center · Jan 15–Feb 28</p>
          <p><span class="wt-loc">LONDON</span> Curzon Soho · Jan 19–Mar 15</p>
          <p><span class="wt-loc">BERLIN</span> Babylon · Jan 22–Feb 20</p>
          <p><span class="wt-loc">TOKYO</span> Human Trust Cinema · Feb 1–Mar 1</p>
          <p><span class="wt-loc">SYDNEY</span> Dendy Newtown · Feb 8–Mar 8</p>
          <p class="wt-stream"><span class="wt-live">●</span> Streaming — MUBI · DocPlay</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <span>Terra Incognita © 2024 Deep Field Films</span>
    <span>All rights reserved · Distributed by Arte Documentary</span>
  </footer>

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