Real Estate — Light Minimal

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: 'Real Estate — Light Minimal',
  category: 'pages',
  tech: ['gsap', 'scroll-trigger', 'lenis', 'fraunces', 'inter'],
});

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

// ── Lenis smooth scroll ───────────────────────────────────────────────────────
const lenis = new Lenis({ lerp: 0.09, 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 -60px',
  onUpdate: (self) => {
    nav.classList.toggle('scrolled', self.scroll() > 60);
  },
});

// ── Hero entrance ─────────────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.hero-label', { opacity: 0, y: 12 });
  gsap.set('.hero-h1', { opacity: 0, y: 25 });
  gsap.set('.hero-body', { opacity: 0, y: 18 });
  gsap.set('.hero-btns', { opacity: 0, y: 15 });
  gsap.set('.hero-metric-row', { opacity: 0 });
  gsap.set('.hero-img--main', { opacity: 0, scale: 1.04 });
  gsap.set('.hero-img--sub', { opacity: 0, y: 20 });

  gsap.timeline({ delay: 0.3, defaults: { ease: 'expo.out' } })
    .to('.hero-label',     { opacity: 1, y: 0, duration: 0.7 })
    .to('.hero-h1',        { opacity: 1, y: 0, duration: 1   }, '-=0.4')
    .to('.hero-body',      { opacity: 1, y: 0, duration: 0.8 }, '-=0.6')
    .to('.hero-btns',      { opacity: 1, y: 0, duration: 0.7 }, '-=0.5')
    .to('.hero-metric-row',{ opacity: 1, duration: 0.6 },       '-=0.4')
    .to('.hero-img--main', { opacity: 1, scale: 1, duration: 1.2, ease: 'power2.out' }, 0.5)
    .to('.hero-img--sub',  { opacity: 1, y: 0, duration: 0.9 }, '-=0.5');
}

// ── Parallax on hero images ───────────────────────────────────────────────────
if (!reduced) {
  gsap.to('.hero-img--main', {
    yPercent: -8,
    ease: 'none',
    scrollTrigger: {
      trigger: '.hero',
      start: 'top top',
      end: 'bottom top',
      scrub: 1.5,
    },
  });

  gsap.to('.hero-img--sub', {
    yPercent: -14,
    ease: 'none',
    scrollTrigger: {
      trigger: '.hero',
      start: 'top top',
      end: 'bottom top',
      scrub: 2,
    },
  });
}

// ── Metric numbers count up ───────────────────────────────────────────────────
const metrics = document.querySelectorAll('.hero-metric .hm-num');
metrics.forEach((el) => {
  const target = parseFloat(el.textContent);
  if (!reduced) {
    ScrollTrigger.create({
      trigger: '.hero-metric-row',
      start: 'top 85%',
      end: 'top 40%',
      onUpdate: (self) => {
        const val = target * self.progress;
        el.textContent = Number.isInteger(target) ? Math.round(val) : val.toFixed(1);
      },
    });
  }
});

// ── Filter bar interaction ────────────────────────────────────────────────────
document.querySelectorAll('.filter-btn').forEach((btn) => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.filter-btn').forEach((b) => b.classList.remove('active'));
    btn.classList.add('active');
  });
});

// ── Listing cards reveal ──────────────────────────────────────────────────────
document.querySelectorAll('.listing-card').forEach((card, i) => {
  if (!reduced) {
    gsap.set(card, { opacity: 0, y: 35 });
    gsap.to(card, {
      opacity: 1,
      y: 0,
      duration: 0.9,
      ease: 'expo.out',
      delay: i * 0.1,
      scrollTrigger: {
        trigger: '.listings-grid',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  }
});

// ── Listings header reveal ────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.listings-header h2, .listings-header .section-eyebrow', { opacity: 0, y: 20 });
  gsap.to('.listings-header h2, .listings-header .section-eyebrow', {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: 'expo.out',
    scrollTrigger: {
      trigger: '.listings-header',
      start: 'top 80%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── Process steps reveal ──────────────────────────────────────────────────────
if (!reduced) {
  // Left column — heading
  gsap.set('.process-left > *', { opacity: 0, x: -25 });
  gsap.to('.process-left > *', {
    opacity: 1,
    x: 0,
    duration: 0.9,
    stagger: 0.12,
    ease: 'expo.out',
    scrollTrigger: {
      trigger: '.process-section',
      start: 'top 70%',
      toggleActions: 'play none none reverse',
    },
  });

  // Steps — each step line
  document.querySelectorAll('.step').forEach((step, i) => {
    gsap.set(step, { opacity: 0, x: 20 });
    gsap.to(step, {
      opacity: 1,
      x: 0,
      duration: 0.7,
      ease: 'expo.out',
      delay: i * 0.1,
      scrollTrigger: {
        trigger: '.process-steps',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── About section reveal ──────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.ab-img--main', { opacity: 0, scale: 1.03 });
  gsap.to('.ab-img--main', {
    opacity: 1,
    scale: 1,
    duration: 1.2,
    ease: 'power2.out',
    scrollTrigger: {
      trigger: '.about-section',
      start: 'top 70%',
      toggleActions: 'play none none reverse',
    },
  });

  gsap.set('.ab-img--secondary', { opacity: 0, y: 25 });
  gsap.to('.ab-img--secondary', {
    opacity: 1,
    y: 0,
    duration: 1,
    ease: 'expo.out',
    delay: 0.3,
    scrollTrigger: {
      trigger: '.about-section',
      start: 'top 70%',
      toggleActions: 'play none none reverse',
    },
  });

  gsap.set('.about-content > *', { opacity: 0, y: 22 });
  gsap.to('.about-content > *', {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: 'expo.out',
    delay: 0.15,
    scrollTrigger: {
      trigger: '.about-section',
      start: 'top 70%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── Contact section reveal ────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.contact-left > *', { opacity: 0, y: 20 });
  gsap.to('.contact-left > *', {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: 'expo.out',
    scrollTrigger: {
      trigger: '.contact-section',
      start: 'top 75%',
      toggleActions: 'play none none reverse',
    },
  });

  gsap.set('.form-field', { opacity: 0, y: 18 });
  gsap.to('.form-field', {
    opacity: 1,
    y: 0,
    duration: 0.7,
    stagger: 0.08,
    ease: 'expo.out',
    delay: 0.2,
    scrollTrigger: {
      trigger: '.contact-form',
      start: 'top 80%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── Subtle section divider line animations ────────────────────────────────────
if (!reduced) {
  document.querySelectorAll('.step').forEach((step) => {
    step.addEventListener('mouseenter', () => {
      gsap.to(step.querySelector('.step-num'), {
        color: '#c4856a',
        duration: 0.3,
        ease: 'power2.out',
      });
    });
    step.addEventListener('mouseleave', () => {
      gsap.to(step.querySelector('.step-num'), {
        color: '#c4856a',
        duration: 0.3,
        ease: 'power2.out',
      });
    });
  });
}

// ── 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>Meridian Property Group — Architecture & Real Estate</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=Inter:wght@300;400;500;600&family=Fraunces:ital,wght@0,300;0,400;1,300;1,400&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>

  <!-- Nav -->
  <nav class="nav" id="nav">
    <div class="nav-brand">
      <div class="nav-mark" aria-hidden="true"></div>
      <span class="nav-name">Meridian</span>
    </div>
    <ul class="nav-links">
      <li><a href="#listings">Properties</a></li>
      <li><a href="#process">Process</a></li>
      <li><a href="#about">Studio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <a href="#contact" class="nav-cta">Schedule a Visit</a>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-left">
      <div class="hero-label">Residential · Commercial · 2025</div>
      <h1 class="hero-h1">
        <span>Where<br>architecture</span>
        <span class="h1-italic">meets living</span>
      </h1>
      <p class="hero-body">Meridian curates exceptional properties in London, Copenhagen, and Amsterdam — buildings that endure because they were designed to.</p>
      <div class="hero-btns">
        <a href="#listings" class="btn-dark">Browse Properties</a>
        <a href="#process" class="btn-line">Our Process →</a>
      </div>
      <div class="hero-metric-row">
        <div class="hero-metric"><span class="hm-num">240</span><span class="hm-label">Properties sold</span></div>
        <div class="hero-metric-div" aria-hidden="true"></div>
        <div class="hero-metric"><span class="hm-num">18</span><span class="hm-label">Years active</span></div>
        <div class="hero-metric-div" aria-hidden="true"></div>
        <div class="hero-metric"><span class="hm-num">3</span><span class="hm-label">Cities</span></div>
      </div>
    </div>
    <div class="hero-right" aria-hidden="true">
      <div class="hero-img hero-img--main"></div>
      <div class="hero-img hero-img--sub"></div>
    </div>
  </section>

  <!-- Featured Listings -->
  <section class="listings-section" id="listings">
    <div class="listings-header">
      <span class="section-eyebrow">Available Properties</span>
      <h2>Current Listings</h2>
      <div class="filter-bar">
        <button class="filter-btn active">All</button>
        <button class="filter-btn">Residential</button>
        <button class="filter-btn">Commercial</button>
        <button class="filter-btn">New Development</button>
      </div>
    </div>
    <div class="listings-grid">
      <article class="listing-card listing-card--large">
        <div class="lc-img lc-img--1" aria-hidden="true">
          <div class="lc-badge">New</div>
        </div>
        <div class="lc-info">
          <div class="lc-type">Residential · London</div>
          <h3>Bankside Penthouse</h3>
          <p>A 320m² top-floor residence with sweeping Thames views, designed by Wilkinson Eyre Architects in 2023.</p>
          <div class="lc-details">
            <span>320 m²</span>
            <span>4 bed · 3 bath</span>
            <span>Floor 18</span>
          </div>
          <div class="lc-price">£ 4,200,000</div>
        </div>
      </article>

      <article class="listing-card">
        <div class="lc-img lc-img--2" aria-hidden="true"></div>
        <div class="lc-info lc-info--sm">
          <div class="lc-type">Commercial · Copenhagen</div>
          <h3>Nordhavn Studio</h3>
          <p>Open-plan creative studio in the iconic Nordhavn waterfront district.</p>
          <div class="lc-price">DKK 8,400,000</div>
        </div>
      </article>

      <article class="listing-card">
        <div class="lc-img lc-img--3" aria-hidden="true"></div>
        <div class="lc-info lc-info--sm">
          <div class="lc-type">Residential · Amsterdam</div>
          <h3>Jordaan Canal House</h3>
          <p>Restored 17th-century canal house with original wooden beams and modern amenities.</p>
          <div class="lc-price">€ 3,100,000</div>
        </div>
      </article>
    </div>
    <div class="listings-more">
      <a href="#" class="btn-line">View all 24 listings →</a>
    </div>
  </section>

  <!-- Process Section -->
  <section class="process-section" id="process">
    <div class="process-inner">
      <div class="process-left">
        <span class="section-eyebrow">How We Work</span>
        <h2>A considered <br><em>approach</em></h2>
        <p>We don't list properties. We match people to places that will shape the next chapter of their lives. Our process begins with listening.</p>
      </div>
      <div class="process-steps">
        <div class="step">
          <div class="step-num">01</div>
          <div class="step-content">
            <h4>Discovery Consultation</h4>
            <p>A conversation about how you live, work, and what a building needs to do for you.</p>
          </div>
        </div>
        <div class="step">
          <div class="step-num">02</div>
          <div class="step-content">
            <h4>Curated Selection</h4>
            <p>We present only 3–5 properties that match your criteria. Quality over quantity, always.</p>
          </div>
        </div>
        <div class="step">
          <div class="step-num">03</div>
          <div class="step-content">
            <h4>Architectural Review</h4>
            <p>Our in-house architects assess structural integrity, renovation potential, and long-term value.</p>
          </div>
        </div>
        <div class="step">
          <div class="step-num">04</div>
          <div class="step-content">
            <h4>Transaction & Beyond</h4>
            <p>Full legal and financial coordination. We remain your point of contact after keys are handed over.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Studio / About -->
  <section class="about-section" id="about">
    <div class="about-img-block" aria-hidden="true">
      <div class="ab-img ab-img--main"></div>
      <div class="ab-img ab-img--secondary"></div>
    </div>
    <div class="about-content">
      <span class="section-eyebrow">The Studio</span>
      <h2>Designed<br>from the<br>inside out</h2>
      <p>Meridian was founded by Elena Marsh and Thomas Velde — an architect and a property lawyer who saw an industry focused on volume over value. We believe every transaction should leave both buyer and city better than before.</p>
      <p>Our studio employs 12 specialists across architecture, finance, heritage conservation, and interior strategy.</p>
      <a href="#contact" class="btn-dark">Meet the Team →</a>
    </div>
  </section>

  <!-- Contact / CTA -->
  <section class="contact-section" id="contact">
    <div class="contact-inner">
      <div class="contact-left">
        <span class="section-eyebrow">Get in Touch</span>
        <h2>Let's find<br>your property.</h2>
        <div class="contact-details">
          <div class="cd-item">
            <span class="cd-label">London Office</span>
            <span>14 Bermondsey Street, SE1</span>
          </div>
          <div class="cd-item">
            <span class="cd-label">Email</span>
            <span>hello@meridianprop.co</span>
          </div>
          <div class="cd-item">
            <span class="cd-label">Hours</span>
            <span>Mon–Fri · 09:00–18:00</span>
          </div>
        </div>
      </div>
      <div class="contact-form">
        <div class="form-row">
          <div class="form-field">
            <label>Full name</label>
            <div class="form-input-mock"></div>
          </div>
          <div class="form-field">
            <label>Email</label>
            <div class="form-input-mock"></div>
          </div>
        </div>
        <div class="form-field">
          <label>What are you looking for?</label>
          <div class="form-input-mock form-input-mock--tall"></div>
        </div>
        <a href="#" class="btn-dark">Send Message →</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-brand">
      <div class="nav-mark" aria-hidden="true"></div>
      <span>Meridian Property Group</span>
    </div>
    <p>© 2025 Meridian Property Group. London · Copenhagen · Amsterdam.</p>
  </footer>

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