DAIBA Luxury Fashion Landing Page AI website prompt
A scroll-animated, single-page landing template for a fashion/couture brand in a warm sand-and-olive palette. Features a scattered-photo hero, a collection grid that morphs into a full product detail view, a pinned horizontal runway, and a circular gallery that spins into a tornado. Built with vanilla HTML/CSS/JS + GSAP & Lenis, fully responsive and reduced-motion friendly.
Now put it in WordPress
You have a site. Now make it yours.
An AI build hands you a front end and stops there. No CMS, no client login, no real ownership: you cannot hand it over, and you cannot change it without going back and re-prompting. UiChemy turns that build into native, editable WordPress you own, in the builder you already use.
Bolt to WordPressClaude to WordPressCodex to WordPressCursor to WordPressLovable to WordPressv0 to WordPressAI to WordPress
Get started free
More prompts
Showing 3 prompts
Frequently asked questions
What does the DAIBA Luxury Fashion Landing Page prompt build?
A scroll-animated, single-page landing template for a fashion/couture brand in a warm sand-and-olive palette. Features a scattered-photo hero, a collection grid that morphs into a full product detail view, a pinned horizontal runway, and a circular gallery that spins into a tornado. Built with vanilla HTML/CSS/JS + GSAP & Lenis, fully responsive and reduced-motion friendly.
Which AI tools does the DAIBA Luxury Fashion Landing Page prompt work with?
It's written to work with . Paste it into your AI tool and it builds the site, then move the result into WordPress with UiChemy.
How do I turn the result into a WordPress site?
After the AI builds your site, UiChemy Composer rebuilds it as native, editable WordPress in Elementor or Gutenberg (Bricks coming soon) — you own it and edit it in your builder. See AI to WordPress.
Is the DAIBA Luxury Fashion Landing Page prompt free?
Yes — it's free to copy, no account needed.
Can I edit the website after it's built?
Yes. Once it's in WordPress with UiChemy, every section is native and editable — no re-prompting, no lock-in.
DAIBA Luxury Fashion Landing Page · Section prompt
# MASTER PROMPT — DAIBA — Slow Couture (fully self-contained)
> **Before you start, read the ⛔ STRICT RULES at the end of this prompt — they decide what you
> deliver and they override everything else.**
---
## ▶ WHAT THIS IS
The **original DAIBA — Slow Couture landing page**, byte for byte: `index.html`, `style.css`
and `script.js`. You write the files from the Appendix and deliver **one ZIP** with the
untouched source. Nothing is installed, published or previewed, and nothing is downloaded —
every dependency is referenced by URL from inside the files.
- **Stack:** vanilla HTML + CSS + JS; GSAP 3.13 with ScrollTrigger, SplitText, ScrambleText,
DrawSVG, Flip and Observer, plus Lenis 1.1.14 — all from jsDelivr as UMD `<script>` tags.
No build step.
- **Fonts:** Fraunces and Space Grotesk from Google Fonts.
- **Photographs:** ~40 `images.unsplash.com` URLs, inline in the markup and in `script.js`.
- **Sections:** fixed layer (progress bar, ring cursor, grain, wayfinder, back-to-top
monogram) → nav + full-screen index menu → scattered-photo hero → manifesto → velocity
marquee → collection (Flip grid→detail, 3D tilt) → pinned runway → feature banner →
statement (10-band venetian-blind reveal) → circular ring gallery (assemble, hold, tornado)
→ stacking lookbook → maison stats → praise → dark CTA → footer.
- **Fallbacks:** everything honours `prefers-reduced-motion`; no horizontal scroll at 375px.
## ZIP CONTENTS — one ZIP, `daiba.zip`
```
daiba/
├── index.html B1
├── style.css B2
├── script.js B3
├── README.md B0
└── CHECKSUMS.txt "<sha256> <path>" for every file above, paths relative to daiba/
```
**5 files, in ONE ZIP.** The original site only — nothing else goes in, and no second archive
is ever built.
Every file is UTF-8 and ends with exactly one newline (`\n`), which the Integrity hashes include.
## STEPS
1. **Create the folder** `daiba/`.
2. **Write the files** from the Appendix, verbatim: `README.md` = B0, `index.html` = B1,
`style.css` = B2, `script.js` = B3.
3. **Write `CHECKSUMS.txt`** — sha256 of every file, sorted by path.
4. **Verify:** every sha256 equals the Integrity table; create the ZIP from the folder
(`zip -r daiba.zip daiba`); `unzip -t` reports **No errors**; `unzip -l` lists exactly the
5 files above, nothing else.
5. **Deliver** that one ZIP with the one-line reply from STRICT RULE 7.
---
# APPENDIX · THE FILES (write each verbatim)
## B0 · `README.md`
```markdown
# DAIBA — Slow Couture
The original DAIBA landing page, exactly as it was built: three files and nothing else.
Nothing has been converted, minified or renamed.
## What is in this folder
- index.html : the markup, the font links and the script tags
- style.css : the whole design system
- script.js : every interaction (GSAP + ScrollTrigger + SplitText + ScrambleText
+ DrawSVG + Flip + Observer, and Lenis for smooth scroll)
- CHECKSUMS.txt : sha256 of every file, so you can confirm nothing was altered
## View it
The page loads its libraries, fonts and photographs over the network, which browsers
restrict when a file is opened straight from disk. Serve the folder instead: from inside
this folder run
python3 -m http.server 5220
and open the address it prints in a browser. An internet connection is required (GSAP and
Lenis from jsDelivr, the fonts from Google Fonts, the photographs from Unsplash).
## Turning it into a WordPress page later
Keep this folder unchanged — it is the source of truth for any conversion. The split is
already the right one: index.html becomes the page section, style.css and script.js become
files the page loads, and the photographs go into the media library with their URLs updated.
```
## B1 · `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DAIBA — Slow couture</title>
<meta name="description" content="DAIBA — slow couture, made to endure. An original GSAP concept showcase." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://images.unsplash.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Space+Grotesk:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='11' fill='%23ece5d7'/%3E%3Cg fill='none' stroke='%236b6a3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 9V39'/%3E%3Cpath d='M15 9C38 9 38 39 15 39'/%3E%3Cpath d='M12 35L33 14'/%3E%3C/g%3E%3Ccircle cx='33.5' cy='13.5' r='2.2' fill='%236b6a3a'/%3E%3C/svg%3E" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="progress" aria-hidden="true"><i id="progressBar"></i></div>
<div class="cursor" id="cursor" aria-hidden="true"><span class="cursor__label" id="cursorLabel"></span></div>
<div class="grain" aria-hidden="true"></div>
<div class="wayfind" id="wayfind" aria-hidden="true"><span class="wayfind__no" id="wfNo">00</span><span class="wayfind__sep">/</span><span class="wayfind__name" id="wfName">Maison</span></div>
<a href="#top" class="totop mono" id="toTop" data-cursor aria-label="Back to top">
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path class="mono__p" d="M15 9 V39" />
<path class="mono__p" d="M15 9 C38 9, 38 39, 15 39" />
<path class="mono__p" d="M12 35 L33 14" />
<circle class="mono__dot" cx="33.5" cy="13.5" r="2.1" />
</svg>
</a>
<!-- ============ NAV ============ -->
<header class="nav" id="nav">
<a href="#top" class="nav__logo" data-cursor data-magnetic aria-label="DAIBA">
<svg class="mark" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path class="mark__p" d="M15 9 V39" />
<path class="mark__p" d="M15 9 C38 9, 38 39, 15 39" />
<path class="mark__p" d="M12 35 L33 14" />
<circle class="mark__dot" cx="33.5" cy="13.5" r="2.1" />
</svg>
<span class="nav__word">DAIBA</span>
</a>
<nav class="nav__links">
<a href="#collection" class="nlink" data-cursor><span>Collection</span></a>
<a href="#runway" class="nlink" data-cursor><span>Runway</span></a>
<a href="#house" class="nlink" data-cursor><span>Maison</span></a>
</nav>
<button class="nav__book" id="menuBtn" data-cursor data-magnetic>Index</button>
</header>
<!-- ============ MENU ============ -->
<div class="menu" id="menu" aria-hidden="true">
<button class="menu__close" id="menuClose" data-cursor>Close</button>
<div class="menu__logo mono" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none">
<path class="mono__p" d="M15 9 V39" />
<path class="mono__p" d="M15 9 C38 9, 38 39, 15 39" />
<path class="mono__p" d="M12 35 L33 14" />
<circle class="mono__dot" cx="33.5" cy="13.5" r="2.1" />
</svg>
</div>
<nav class="menu__list">
<a href="#collection" class="menu__link" data-cursor data-img="https://images.unsplash.com/photo-1495121605193-b116b5b9c5fe?w=500&q=75&auto=format&fit=crop"><em>01</em><span>Collection</span></a>
<a href="#runway" class="menu__link" data-cursor data-img="https://images.unsplash.com/photo-1479064555552-3ef4979f8908?w=500&q=75&auto=format&fit=crop"><em>02</em><span>Runway</span></a>
<a href="#lookbook" class="menu__link" data-cursor data-img="https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?w=500&q=75&auto=format&fit=crop"><em>03</em><span>Lookbook</span></a>
<a href="#house" class="menu__link" data-cursor data-img="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?w=500&q=75&auto=format&fit=crop"><em>04</em><span>The Maison</span></a>
</nav>
<div class="menu__preview" id="menuPreview" aria-hidden="true"><img alt="" decoding="async" loading="lazy" /></div>
<div class="menu__foot"><span>Paris — New York</span><span>[email protected]</span></div>
</div>
<main id="top">
<!-- ============ HERO ============ -->
<section class="hero" id="hero">
<div class="hero__topfade" aria-hidden="true"></div>
<div class="hero__scatter" id="heroScatter" aria-hidden="true"></div>
<div class="hero__center">
<div class="hero__mark" aria-hidden="true">
<svg class="emblem" viewBox="0 0 48 48" fill="none">
<circle class="emblem__p emblem__ring" cx="24" cy="24" r="22" />
<path class="emblem__p" d="M16 11 V37" />
<path class="emblem__p" d="M16 11 C37 11, 37 37, 16 37" />
<path class="emblem__p" d="M13 34 L33 15" />
<circle class="emblem__dot" cx="33.5" cy="14.5" r="2" />
</svg>
</div>
<span class="hero__eyebrow" id="heroEyebrow">Slow couture — Maison est. MMXXVI</span>
<h1 class="hero__title">Made slowly. Worn <span class="ital">forever.</span></h1>
<div class="hero__meta">
<a class="btn btn--arrow" href="#collection" data-cursor="View" data-magnetic>View the collection</a>
<span class="hero__scroll"><i></i>Scroll to explore</span>
</div>
</div>
</section>
<!-- ============ MANIFESTO ============ -->
<section class="intro" id="intro">
<div class="intro__grid">
<div class="intro__aside">
<span class="idx">(01)</span>
<span class="label" data-scramble>Manifesto</span>
</div>
<p class="intro__body" id="introText">DAIBA is a house of few pieces, made slowly and worn for a lifetime. Each garment is cut by a single atelier, in cloth chosen to age with grace — so that what you wear tonight becomes an heirloom, not a season.</p>
</div>
</section>
<!-- ============ MARQUEE ============ -->
<section class="marquee" aria-hidden="true">
<div class="marquee__row" id="marquee">
<span>Slow Couture <i class="mq-dot"></i> Made To Endure <i class="mq-dot"></i> Cut By Hand <i class="mq-dot"></i> Paris — New York <i class="mq-dot"></i> </span>
<span>Slow Couture <i class="mq-dot"></i> Made To Endure <i class="mq-dot"></i> Cut By Hand <i class="mq-dot"></i> Paris — New York <i class="mq-dot"></i> </span>
</div>
</section>
<!-- ============ COLLECTION (Flip) ============ -->
<section class="collection" id="collection">
<header class="sec-head">
<span class="label" data-scramble>The Collection — VI pieces</span>
<h2 class="sec-title" data-split>Autumn / Winter <i>MMXXVI</i></h2>
</header>
<div class="pieces" id="pieces">
<article class="pc" data-no="I" data-name="La Robe du Soir" data-cat="Silk crêpe gown" data-cloth="Weighted silk crêpe" data-hours="Paris · 200 hours" data-desc="A floor-length gown cut on the bias so it moves like water and holds like architecture — hemmed by hand, finished to be re-fitted and worn for decades.">
<button class="pc__media" data-cursor="Open" data-tilt><img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="La Robe du Soir" /></button>
<div class="pc__row"><span class="pc__no">№ I</span><h3>La Robe du Soir</h3><span class="pc__cat">Silk crêpe gown</span></div>
</article>
<article class="pc" data-no="II" data-name="Le Manteau" data-cat="Double-wool overcoat" data-cloth="Double-faced wool" data-hours="Paris · 140 hours" data-desc="A double-faced wool overcoat with no lining and no shortcuts — every edge turned and stitched by a single hand.">
<button class="pc__media" data-cursor="Open" data-tilt><img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="Le Manteau" /></button>
<div class="pc__row"><span class="pc__no">№ II</span><h3>Le Manteau</h3><span class="pc__cat">Double-wool overcoat</span></div>
</article>
<article class="pc" data-no="III" data-name="La Nuit" data-cat="Bias slip dress" data-cloth="Sandwashed silk" data-hours="New York · 90 hours" data-desc="A bias slip in sandwashed silk that skims rather than clings — the quietest thing in the collection, and the hardest to cut.">
<button class="pc__media" data-cursor="Open" data-tilt><img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="La Nuit" /></button>
<div class="pc__row"><span class="pc__no">№ III</span><h3>La Nuit</h3><span class="pc__cat">Bias slip dress</span></div>
</article>
<article class="pc" data-no="IV" data-name="La Chemise" data-cat="Silk-satin blouse" data-cloth="Silk satin" data-hours="Paris · 60 hours" data-desc="A silk-satin blouse with a collar drafted three times over — worn open, worn buttoned, worn for years.">
<button class="pc__media" data-cursor="Open" data-tilt><img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="La Chemise" /></button>
<div class="pc__row"><span class="pc__no">№ IV</span><h3>La Chemise</h3><span class="pc__cat">Silk-satin blouse</span></div>
</article>
<article class="pc" data-no="V" data-name="Le Pantalon" data-cat="High pleated trouser" data-cloth="Wool gabardine" data-hours="Paris · 80 hours" data-desc="A high, single-pleat trouser in wool gabardine — a break that falls exactly where it should, and stays there.">
<button class="pc__media" data-cursor="Open" data-tilt><img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1509631179647-0177331693ae?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1509631179647-0177331693ae?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1509631179647-0177331693ae?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1509631179647-0177331693ae?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="Le Pantalon" /></button>
<div class="pc__row"><span class="pc__no">№ V</span><h3>Le Pantalon</h3><span class="pc__cat">High pleated trouser</span></div>
</article>
<article class="pc" data-no="VI" data-name="Le Smoking" data-cat="Satin-lapel tuxedo" data-cloth="Wool & silk satin" data-hours="Paris · 180 hours" data-desc="The house tuxedo — a satin lapel rolled by hand, cut close and built to be handed down.">
<button class="pc__media" data-cursor="Open" data-tilt><img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1554568218-0f1715e72254?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1554568218-0f1715e72254?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1554568218-0f1715e72254?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1554568218-0f1715e72254?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1554568218-0f1715e72254?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1554568218-0f1715e72254?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="Le Smoking" /></button>
<div class="pc__row"><span class="pc__no">№ VI</span><h3>Le Smoking</h3><span class="pc__cat">Satin-lapel tuxedo</span></div>
</article>
</div>
</section>
<!-- collection detail (Flip target) -->
<div class="detail" id="detail" aria-hidden="true">
<div class="detail__bg" id="detailBg"></div>
<button class="detail__close" id="detailClose" data-cursor>Close</button>
<div class="detail__inner">
<div class="detail__media" id="detailMedia"></div>
<div class="detail__text" id="detailText">
<span class="detail__no" id="dNo">№ I</span>
<h3 class="detail__name" id="dName">—</h3>
<span class="detail__cat" id="dCat">—</span>
<p class="detail__desc" id="dDesc">—</p>
<ul class="detail__spec">
<li><span>Cloth</span><b id="dCloth">—</b></li>
<li><span>Atelier</span><b id="dHours">—</b></li>
<li><span>Made</span><b>To order · to measure</b></li>
</ul>
<a class="btn btn--arrow" href="#atelier" id="dEnquire" data-cursor>Enquire</a>
</div>
</div>
</div>
<!-- ============ RUNWAY (horizontal) ============ -->
<section class="runway" id="runway">
<div class="runway__pin" id="runwayPin">
<div class="runway__head">
<span class="label" data-scramble>The Runway</span>
<h2 class="runway__title" data-split>After <i>dark</i></h2>
<span class="runway__hint">Drag / scroll →</span>
</div>
<div class="runway__track" id="runwayTrack">
<figure class="rslide"><span class="rslide__no">01</span><div class="rslide__frame media"><img decoding="async" src="https://images.unsplash.com/photo-1488161628813-04466f872be2?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1488161628813-04466f872be2?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1488161628813-04466f872be2?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1488161628813-04466f872be2?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1488161628813-04466f872be2?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1488161628813-04466f872be2?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="" loading="lazy" /></div><figcaption>La Nuit</figcaption></figure>
<figure class="rslide rslide--tall"><span class="rslide__no">02</span><div class="rslide__frame media"><img decoding="async" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1517841905240-472988babdf9?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1517841905240-472988babdf9?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1517841905240-472988babdf9?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1517841905240-472988babdf9?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="" loading="lazy" /></div><figcaption>Le Smoking</figcaption></figure>
<figure class="rslide"><span class="rslide__no">03</span><div class="rslide__frame media"><img decoding="async" src="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="" loading="lazy" /></div><figcaption>La Chemise</figcaption></figure>
<figure class="rslide rslide--tall"><span class="rslide__no">04</span><div class="rslide__frame media"><img decoding="async" src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="" loading="lazy" /></div><figcaption>Le Manteau</figcaption></figure>
<figure class="rslide"><span class="rslide__no">05</span><div class="rslide__frame media"><img decoding="async" src="https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="" loading="lazy" /></div><figcaption>Le Pantalon</figcaption></figure>
</div>
</div>
</section>
<!-- ============ FEATURE (full-bleed banner) ============ -->
<section class="feature" id="feature">
<div class="feature__media media"><img decoding="async" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=1400&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:860px) 92vw, 60vw" alt="La Robe du Soir" loading="lazy" /></div>
<div class="feature__card">
<span class="label" data-scramble>Piece of the season</span>
<h2 class="feature__title" data-split>La Robe <i>du Soir</i></h2>
<p class="feature__lead">Two hundred hours in a single atelier — weighted silk crêpe, cut on the bias, hemmed by hand and made to be re-fitted for decades.</p>
<a class="btn btn--arrow" href="#atelier" data-cursor="View" data-magnetic>Enquire at the atelier</a>
</div>
<span class="feature__ghost" aria-hidden="true">№ I</span>
</section>
<!-- ============ STATEMENT (live slat reveal) ============ -->
<section class="reveal" id="statement">
<div class="reveal__slats" id="revealSlats" data-img="https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=1600&q=80&auto=format&fit=crop"></div>
<div class="reveal__overlay" aria-hidden="true"></div>
<div class="reveal__content">
<span class="label center light" data-scramble>The house</span>
<p class="reveal__lead">A small house between Paris and New York. No vast team behind the curtain — only a few hands, cutting a few pieces, each made slowly and meant to be kept.</p>
<a href="#house" class="btn btn--light btn--arrow" data-cursor="View" data-magnetic>Our atelier</a>
</div>
</section>
<!-- ============ RING (circular scroll gallery) ============ -->
<section class="ring" id="ring">
<div class="ring__stage" id="ringStage" aria-hidden="true"></div>
<div class="ring__center">
<span class="label center" data-scramble>In rotation</span>
<h2 class="ring__title" data-split>Worn <i>everywhere</i></h2>
</div>
</section>
<!-- ============ LOOKBOOK (offset scatter) ============ -->
<section class="lookbook" id="lookbook">
<header class="sec-head sec-head--right">
<span class="label" data-scramble>Lookbook — AW MMXXVI</span>
<h2 class="sec-title" data-split>The <i>editorial</i></h2>
</header>
<div class="looks">
<figure class="look look--1"><div class="look__frame media" data-cursor="View"><img decoding="async" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="" loading="lazy" /></div><figcaption>01 — La Nuit</figcaption></figure>
<figure class="look look--2"><div class="look__frame media" data-cursor="View"><img decoding="async" src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="" loading="lazy" /></div><figcaption>02 — Le Smoking</figcaption></figure>
<figure class="look look--3"><div class="look__frame media" data-cursor="View"><img decoding="async" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=900&q=80&auto=format&fit=crop" srcset="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=400&q=80&auto=format&fit=crop 400w, https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=600&q=80&auto=format&fit=crop 600w, https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=800&q=80&auto=format&fit=crop 800w, https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1100&q=80&auto=format&fit=crop 1100w, https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=1500&q=80&auto=format&fit=crop 1500w" sizes="(max-width:560px) 46vw, (max-width:1000px) 46vw, 30vw" alt="" loading="lazy" /></div><figcaption>03 — La Chemise</figcaption></figure>
</div>
</section>
<!-- ============ MAISON (stats band) ============ -->
<section class="house" id="house">
<div class="house__intro">
<span class="label" data-scramble>The Maison</span>
<h2 class="house__title" data-split>Fewer things, <i>made to last a lifetime.</i></h2>
<p class="house__lead">We keep no seasons and chase no trends — a small house of makers in Paris and New York, cutting a handful of pieces each year in the finest natural cloth.</p>
</div>
<div class="house__stats">
<div class="stat"><b data-count="200" data-suffix="h">0</b><span>hours in a single gown</span></div>
<div class="stat"><b data-count="6">0</b><span>pieces a year, no more</span></div>
<div class="stat"><b data-count="2">0</b><span>ateliers · Paris & NY</span></div>
<div class="stat"><b data-count="100" data-suffix="%">0</b><span>made to order</span></div>
</div>
</section>
<!-- ============ PRAISE / PRESS ============ -->
<section class="praise" id="praise">
<header class="sec-head"><span class="label" data-scramble>Praise</span><h2 class="sec-title" data-split>In good <i>company</i></h2></header>
<div class="praise__grid">
<blockquote class="quote">
<p>“Nothing in my wardrobe has aged like the DAIBA coat. Five winters in, it looks better than the day it was cut.”</p>
<cite><b>Camille Aubry</b><span>Collector · Paris</span></cite>
</blockquote>
<blockquote class="quote">
<p>“A house that refuses the calendar. You wait for the piece, and the piece waits for no one else — it is yours alone.”</p>
<cite><b>Idris Bello</b><span>Editor · New York</span></cite>
</blockquote>
<blockquote class="quote">
<p>“The fitting felt less like shopping and more like being measured for a life. That is the whole point of DAIBA.”</p>
<cite><b>Sofia Marchetti</b><span>Architect · Milan</span></cite>
</blockquote>
</div>
<div class="praise__press">
<span class="praise__label">As featured in</span>
<ul><li>VOGUE</li><li>ELLE</li><li>GQ</li><li>THE GENTLEWOMAN</li><li>HYPEBEAST</li></ul>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="cta" id="atelier">
<div class="cta__panel">
<span class="cta__eyebrow" data-scramble>By appointment — Paris & New York</span>
<h2 class="cta__title" data-split>Request a private <i>fitting.</i></h2>
<p class="cta__lead">Each DAIBA piece is made to measure. Leave your email and the atelier will write within two days to arrange a private appointment.</p>
<form class="cta__form" onsubmit="return false">
<input class="cta__input" type="email" placeholder="[email protected]" aria-label="Email" />
<button class="btn btn--light btn--arrow" data-cursor data-magnetic>Request an appointment</button>
</form>
<div class="cta__meta">
<span>Made to order</span><i>·</i><span>Re-fitted for life</span><i>·</i><a href="#top">[email protected]</a>
</div>
</div>
</section>
<!-- ============ FOOTER ============ -->
<footer class="footer">
<a href="#top" class="footer__logo mono" data-cursor aria-label="DAIBA — back to top">
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path class="mono__p" d="M15 9 V39" />
<path class="mono__p" d="M15 9 C38 9, 38 39, 15 39" />
<path class="mono__p" d="M12 35 L33 14" />
<circle class="mono__dot" cx="33.5" cy="13.5" r="2.1" />
</svg>
</a>
<div class="footer__mark">DAIBA</div>
<div class="footer__cols">
<div><span>Maison</span><a data-cursor>Collection</a><a data-cursor>Runway</a><a data-cursor>The Maison</a></div>
<div><span>Atelier</span><a data-cursor>Appointments</a><a data-cursor>Made to measure</a><a data-cursor>Care</a></div>
<div><span>Contact</span><a data-cursor>Paris</a><a data-cursor>New York</a><a data-cursor>Instagram</a></div>
</div>
<div class="footer__base"><span>Original concept · not a real maison</span><span>© MMXXVI DAIBA</span></div>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrambleTextPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/DrawSVGPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Flip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Observer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
## B2 · `style.css`
```css
/* ============================================================
DAIBA — v2 · Sand & Olive · Syne / Space Grotesk
============================================================ */
:root{
--sand: #ece5d7;
--sand-2: #e1d7c4;
--sand-3: #f4efe4;
--ink: #211a12;
--ink-2: #7c7264;
--olive: #6b6a3a;
--olive-2:#9a9857;
--line: rgba(33,26,18,.16);
--display:"Fraunces", Georgia, serif;
--sans: "Space Grotesk", system-ui, sans-serif;
--ease: cubic-bezier(.19,1,.22,1);
--pad: clamp(20px, 5vw, 96px);
--maxw: 1560px;
--card-radius: 12px;
--card-shadow: 0 22px 50px rgba(33,26,18,.20);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body{ font-family:var(--sans); font-weight:300; background:var(--sand); color:var(--ink); line-height:1.5; overflow-x:hidden; }
body.is-locked{ overflow:hidden; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-stopped{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }
::selection{ background:var(--olive); color:var(--sand); }
/* grain */
.grain{ position:fixed; inset:0; z-index:700; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* shared */
.label{ display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--olive); }
.label.center{ justify-content:center; }
.label.light{ color:var(--sand); }
.sec-title, .runway__title, .feature__title, .house__title, .atelier__title{ font-family:var(--display); font-weight:500; font-optical-sizing:auto; font-size:clamp(38px,7vw,108px); line-height:.98; letter-spacing:-.015em; }
.sec-title i, .runway__title i, .feature__title i, .house__title i, .atelier__title i, .hero__title .ital{ font-style:italic; font-weight:400; color:var(--olive); }
.sec-head{ display:flex; flex-direction:column; gap:20px; padding-bottom:clamp(40px,5vw,74px); }
.sec-head--right{ align-items:flex-end; text-align:right; }
.btn{ display:inline-block; font-family:var(--sans); font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; padding:15px 32px; border:1px solid var(--ink); color:var(--ink); border-radius:100px; cursor:pointer; background:none; transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.btn:hover{ background:var(--ink); color:var(--sand); }
.btn--light{ border-color:var(--sand); color:var(--sand); }
.btn--light:hover{ background:var(--sand); color:var(--ink); }
.btn--arrow{ display:inline-flex; align-items:center; gap:9px; }
.btn--arrow::after{ content:"→"; display:inline-block; transition:transform .4s var(--ease); }
.btn--arrow:hover::after{ transform:translateX(5px); }
/* split-word fallback masks */
.wm{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.wi{ display:inline-block; }
/* progress */
.progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:800; }
.progress i{ display:block; height:100%; width:100%; background:var(--olive); transform:scaleX(0); transform-origin:0 50%; }
/* media */
.media{ position:relative; overflow:hidden; background:var(--sand-2); border-radius:var(--card-radius); }
.media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.02) saturate(1.05); transition:transform 1.3s var(--ease), filter .9s var(--ease); }
.media:hover img{ transform:scale(1.06); }
/* cursor */
.cursor{ position:fixed; top:0; left:0; z-index:900; pointer-events:none; width:10px; height:10px; border:1px solid var(--ink); border-radius:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; transition:width .4s var(--ease), height .4s var(--ease), background .4s, border-color .4s; }
.cursor.is-hover{ width:82px; height:82px; background:var(--olive); border-color:var(--olive); }
.cursor__label{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); opacity:0; transition:opacity .3s; }
.cursor.is-hover .cursor__label{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }
/* nav */
.nav{ position:fixed; top:0; left:0; width:100%; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:22px var(--pad); mix-blend-mode:normal; }
.nav__logo{ display:flex; align-items:center; gap:12px; }
.mark{ width:30px; height:30px; }
.mark__p{ stroke:var(--olive); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mark__dot, .emblem__dot{ fill:var(--olive); stroke:none; }
/* reusable monogram (footer + menu) */
.mono svg{ width:100%; height:auto; display:block; }
.mono__p{ stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.mono__dot{ fill:currentColor; stroke:none; }
.footer__logo{ display:block; width:46px; margin:0 auto 26px; color:var(--olive); }
.menu__logo{ position:absolute; top:24px; left:var(--pad); width:34px; color:var(--olive-2); }
/* wayfinding counter */
.wayfind{ position:fixed; left:var(--pad); bottom:26px; z-index:190; display:flex; align-items:baseline; gap:8px; font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); mix-blend-mode:difference; pointer-events:none; transition:opacity .4s var(--ease); }
.wayfind__no{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:0; }
.wayfind__sep{ opacity:.5; }
.wayfind.is-hidden{ opacity:0; }
/* back-to-top monogram */
.totop{ position:fixed; right:var(--pad); bottom:22px; z-index:190; width:48px; height:48px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--olive); background:var(--sand); opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .3s, background .3s; }
.totop.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.totop.is-hidden{ opacity:0!important; pointer-events:none; }
.totop svg{ width:22px; height:22px; }
.totop:hover{ border-color:var(--olive); background:var(--sand-3); }
@media (max-width:640px){ .wayfind{ display:none; } .totop{ width:44px; height:44px; } }
.nav__word{ font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:.16em; }
.nav__links{ display:flex; gap:30px; }
.nlink{ position:relative; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); transition:color .3s; }
.nlink::after{ content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:var(--olive); transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--ease); }
.nlink:hover{ color:var(--ink); }
.nlink:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__book{ background:none; border:1px solid var(--line); border-radius:100px; padding:9px 20px; font:inherit; color:var(--ink); font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:border-color .3s, background .3s; }
.nav__book:hover{ border-color:var(--ink); }
/* menu */
.menu{ position:fixed; inset:0; z-index:300; overflow:hidden; background:var(--ink); color:var(--sand); clip-path:inset(0 0 100% 0); pointer-events:none; display:flex; flex-direction:column; justify-content:center; padding:var(--pad); }
.menu.is-open{ pointer-events:auto; }
.menu__close{ position:absolute; top:26px; right:var(--pad); background:none; border:none; color:var(--sand); font:inherit; font-size:12px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; }
.menu__list{ display:flex; flex-direction:column; gap:4px; }
.menu__link{ display:flex; align-items:baseline; gap:20px; font-family:var(--display); font-weight:500; font-size:clamp(30px,8vw,104px); line-height:1.12; letter-spacing:-.02em; }
.menu__link em{ font-family:var(--sans); font-style:normal; font-size:13px; letter-spacing:.1em; color:var(--olive-2); }
.menu__link span{ transition:color .35s, padding-left .35s; }
.menu__link:hover span{ color:var(--olive-2); padding-left:14px; }
.menu__foot{ display:flex; justify-content:space-between; margin-top:9vh; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.menu__preview{ position:fixed; top:0; left:0; width:clamp(180px,16vw,240px); aspect-ratio:3/4; overflow:hidden; border-radius:var(--card-radius); pointer-events:none; z-index:305; opacity:0; transform:translate(-50%,-50%) scale(.86); will-change:transform,opacity; }
.menu__preview img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.02) saturate(1.05); }
@media (hover:none){ .menu__preview{ display:none; } }
/* ============ HERO (scattered gallery) ============ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:120px var(--pad); text-align:center; }
.hero__topfade{ position:absolute; top:0; left:0; right:0; height:20%; z-index:5; pointer-events:none; background:linear-gradient(180deg, var(--sand) 0%, rgba(236,229,215,.86) 34%, rgba(236,229,215,0) 100%); }
.hero__scatter{ position:absolute; inset:0; pointer-events:none; }
.simg{ position:absolute; aspect-ratio:3/4; overflow:hidden; border-radius:var(--card-radius); box-shadow:var(--card-shadow); will-change:transform, opacity; }
.sinner{ width:100%; height:100%; will-change:transform; }
.sinner img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); filter:contrast(1.02) saturate(1.06); }
.hero__center{ position:relative; z-index:2; max-width:1040px; }
.hero__center::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(94vw,1200px); height:min(64vh,580px); background:radial-gradient(ellipse at center, var(--sand) 0%, var(--sand) 40%, rgba(236,229,215,.8) 58%, rgba(236,229,215,0) 80%); z-index:-1; pointer-events:none; }
.hero__mark{ width:clamp(54px,6vw,84px); margin:0 auto 22px; }
.emblem{ width:100%; height:auto; }
.emblem__p{ stroke:var(--olive); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.hero__eyebrow{ display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin-bottom:22px; }
.hero__title{ font-family:var(--display); font-weight:500; font-optical-sizing:auto; font-size:clamp(48px,9.4vw,150px); line-height:.98; letter-spacing:-.02em; }
.hero__meta{ display:flex; align-items:center; justify-content:center; gap:30px; margin-top:40px; flex-wrap:wrap; }
.hero__scroll{ display:inline-flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); }
.hero__scroll i{ display:block; width:44px; height:1px; background:var(--ink-2); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--olive); animation:scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{ transform:translateX(-100%); } 60%,100%{ transform:translateX(100%); } }
@media (max-width:640px){ .hero__scatter{ opacity:.55; } .simg{ box-shadow:0 14px 34px rgba(33,26,18,.2); } }
/* ============ MANIFESTO ============ */
.intro{ max-width:var(--maxw); margin:0 auto; padding:clamp(90px,13vw,200px) var(--pad); }
.intro__grid{ display:grid; grid-template-columns:200px 1fr; gap:clamp(30px,5vw,90px); }
.intro__aside{ display:flex; flex-direction:column; gap:8px; position:sticky; top:120px; height:max-content; }
.intro__aside .idx{ font-family:var(--display); font-weight:700; color:var(--olive); font-size:20px; }
.intro__body{ font-family:var(--display); font-weight:600; font-size:clamp(23px,3.5vw,50px); line-height:1.3; letter-spacing:-.01em; }
.intro__body .w{ display:inline-block; opacity:.18; }
/* ============ MARQUEE ============ */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; }
.marquee__row{ display:flex; white-space:nowrap; will-change:transform; }
.marquee__row span{ font-family:var(--display); font-weight:500; font-size:clamp(28px,5vw,60px); letter-spacing:-.01em; padding-right:.2em; }
.marquee__row i{ font-style:normal; color:var(--olive); margin:0 .3em; }
.marquee__row i.mq-dot{ display:inline-block; width:.32em; height:.32em; border-radius:50%; background:var(--olive); margin:0 .6em .14em; vertical-align:middle; }
/* ============ COLLECTION ============ */
.collection{ max-width:var(--maxw); margin:0 auto; padding:clamp(60px,8vw,120px) var(--pad); }
.pieces{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,46px); perspective:1200px; }
.pc__media{ position:relative; display:block; width:100%; aspect-ratio:3/4; border:none; padding:0; overflow:hidden; border-radius:var(--card-radius); background:var(--sand-2); cursor:pointer; transform-style:preserve-3d; will-change:transform; }
.pc__media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.02) saturate(1.05); transition:transform 1.2s var(--ease), filter .8s var(--ease); }
.pc:hover .pc__media img{ transform:scale(1.05); filter:brightness(.9) contrast(1.02) saturate(1.05); }
.pc__media::after{ content:"Open ↗"; position:absolute; top:12px; left:12px; z-index:2; padding:6px 12px; border-radius:100px; background:var(--sand); color:var(--ink); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:0; transform:translateY(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none; }
.pc:hover .pc__media::after{ opacity:1; transform:none; }
.pc__row{ display:flex; align-items:baseline; gap:12px; margin-top:16px; }
.pc__no{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--olive); }
.pc__row h3{ font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.01em; }
.pc__cat{ margin-left:auto; font-size:12px; letter-spacing:.03em; color:var(--ink-2); }
/* collection detail (Flip) */
.detail{ position:fixed; inset:0; z-index:600; visibility:hidden; }
.detail.is-open{ visibility:visible; }
.detail__bg{ position:absolute; inset:0; background:var(--sand-3); opacity:0; }
.detail__close{ position:absolute; top:26px; right:var(--pad); z-index:4; background:none; border:none; font:inherit; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); cursor:pointer; }
.detail__inner{ position:relative; z-index:3; height:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(80px,10vh,120px) var(--pad) 40px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center; }
.detail__media{ height:min(76vh,760px); overflow:hidden; border-radius:var(--card-radius); background:var(--sand-2); }
.detail__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0); }
.detail__no{ font-family:var(--display); font-weight:700; color:var(--olive); font-size:14px; }
.detail__name{ font-family:var(--display); font-weight:500; font-size:clamp(34px,5vw,74px); line-height:.98; letter-spacing:-.02em; margin:10px 0 8px; }
.detail__cat{ display:block; color:var(--ink-2); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.detail__desc{ margin:22px 0; color:var(--ink-2); line-height:1.7; max-width:46ch; }
.detail__spec{ list-style:none; border-top:1px solid var(--line); margin-bottom:28px; max-width:440px; }
.detail__spec li{ display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; }
.detail__spec li span{ color:var(--ink-2); }
.detail__spec li b{ font-weight:400; }
/* ============ RUNWAY ============ */
.runway{ background:var(--ink); color:var(--sand); }
.runway .label{ color:var(--olive-2); }
.runway__pin{ height:100svh; overflow:hidden; display:flex; flex-direction:column; }
.runway__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:clamp(30px,6vw,70px) var(--pad) 0; flex-wrap:wrap; }
.runway__title i{ color:var(--olive-2); }
.runway__hint{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sand); opacity:.55; }
.runway__track{ display:flex; align-items:center; gap:clamp(24px,3.4vw,60px); height:100%; padding:0 var(--pad); will-change:transform; }
.rslide{ flex:0 0 auto; width:clamp(240px,30vw,420px); }
.rslide__no{ display:block; font-family:var(--display); font-weight:500; font-size:clamp(28px,3vw,46px); color:transparent; -webkit-text-stroke:1px var(--olive-2); margin-bottom:14px; }
.rslide__frame{ aspect-ratio:3/4; background:#2b241a; }
.rslide--tall .rslide__frame{ aspect-ratio:3/4.6; }
.rslide figcaption{ margin-top:14px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); opacity:.72; }
/* ============ FEATURE ============ */
.feature{ position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(60px,8vw,120px) var(--pad); }
.feature__media{ width:100%; aspect-ratio:16/8; }
.feature__card{ position:relative; z-index:2; background:var(--sand); border:1px solid var(--line); padding:clamp(28px,4vw,54px); max-width:520px; margin-top:clamp(-120px,-11vw,-40px); margin-left:clamp(0px,3vw,60px); }
.feature__title{ margin:16px 0 20px; font-size:clamp(34px,5vw,72px); }
.feature__lead{ color:var(--ink-2); line-height:1.7; margin-bottom:26px; max-width:44ch; }
.feature__ghost{ position:absolute; top:clamp(30px,5vw,80px); right:var(--pad); z-index:1; font-family:var(--display); font-weight:500; font-size:clamp(64px,12vw,180px); color:transparent; -webkit-text-stroke:1px var(--line); pointer-events:none; }
/* ============ STATEMENT (slat reveal) ============ */
.reveal{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--ink); }
.reveal__slats{ position:absolute; inset:0; z-index:1; filter:contrast(1.03) brightness(.86) saturate(1.06); }
.reveal__slats .slat{ position:absolute; left:0; right:0; width:100%; background-repeat:no-repeat; clip-path:inset(0% 0% 0% 0%); }
.reveal__overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(20,16,10,.5) 0%, rgba(20,16,10,.66) 55%, rgba(20,16,10,.8) 100%); }
.reveal__content{ position:relative; z-index:3; text-align:center; max-width:760px; padding:0 var(--pad); color:var(--sand); }
.reveal__lead{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3.4vw,48px); line-height:1.3; letter-spacing:-.01em; margin:24px 0 8px; }
/* ============ RING (circular gallery) ============ */
.ring{ position:relative; height:100svh; overflow:hidden; background:var(--sand-3); display:flex; align-items:center; justify-content:center; }
.ring__stage{ position:absolute; top:50%; left:50%; width:min(70vmin,640px); height:min(70vmin,640px); transform:translate(-50%,-50%); z-index:1; }
.ring__stage .card{ --r:min(34vmin,280px); position:absolute; top:50%; left:50%; width:clamp(88px,12vmin,140px); aspect-ratio:3/4; transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))); }
.ring__stage .cardInner{ width:100%; height:100%; overflow:hidden; border-radius:var(--card-radius); box-shadow:var(--card-shadow); }
.ring__stage .cardInner img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.02) saturate(1.05); }
.ring__center{ position:relative; z-index:3; text-align:center; padding:0 var(--pad); pointer-events:none; }
.ring__center::before{ content:""; position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:clamp(340px,52vw,600px); height:clamp(150px,25vmin,250px); background:radial-gradient(ellipse at center, var(--sand-3) 0%, var(--sand-3) 42%, rgba(244,239,227,.9) 58%, rgba(244,239,227,0) 80%); z-index:-1; pointer-events:none; }
.ring__title{ font-family:var(--display); font-weight:500; font-optical-sizing:auto; font-size:clamp(30px,4.6vw,62px); line-height:.98; letter-spacing:-.015em; margin-top:12px; }
.ring__title i{ font-style:italic; font-weight:400; color:var(--olive); }
/* ============ LOOKBOOK ============ */
.lookbook{ padding:clamp(60px,8vw,120px) 0 0; }
.lookbook .sec-head{ padding:0 var(--pad) clamp(20px,3vw,40px); }
.looks{ position:relative; }
.look{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; background:var(--sand); }
.look__frame{ position:relative; width:min(90vw,1080px); height:min(80vh,820px); }
.look figcaption{ position:absolute; left:18px; bottom:16px; z-index:2; color:var(--sand); mix-blend-mode:difference; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
/* ============ MAISON ============ */
.house{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vw,150px) var(--pad); }
.house__intro{ display:flex; flex-direction:column; gap:22px; max-width:840px; margin-bottom:clamp(48px,7vw,90px); }
.house__title{ font-size:clamp(30px,5vw,72px); }
.house__lead{ color:var(--ink-2); line-height:1.7; max-width:540px; }
.house__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; border-top:1px solid var(--line); padding-top:44px; }
.stat b{ display:block; font-family:var(--display); font-weight:500; font-size:clamp(40px,5.5vw,86px); line-height:1; letter-spacing:-.02em; }
.stat span{ display:block; margin-top:12px; font-size:12px; letter-spacing:.03em; color:var(--ink-2); }
/* ============ PRAISE / PRESS ============ */
.praise{ max-width:var(--maxw); margin:0 auto; padding:clamp(70px,9vw,140px) var(--pad); }
.praise__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,44px); }
.quote{ display:flex; flex-direction:column; gap:26px; padding:clamp(26px,2.6vw,44px); border:1px solid var(--line); border-radius:16px; background:var(--sand-3); }
.quote p{ font-family:var(--display); font-weight:500; font-size:clamp(19px,1.55vw,26px); line-height:1.42; letter-spacing:-.01em; }
.quote cite{ font-style:normal; display:flex; flex-direction:column; gap:3px; margin-top:auto; }
.quote cite b{ font-weight:500; font-size:14px; }
.quote cite span{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.praise__press{ display:flex; align-items:center; gap:clamp(18px,3vw,48px); flex-wrap:wrap; margin-top:clamp(40px,5vw,72px); padding-top:34px; border-top:1px solid var(--line); }
.praise__label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); }
.praise__press ul{ list-style:none; display:flex; gap:clamp(18px,3vw,44px); flex-wrap:wrap; }
.praise__press li{ font-family:var(--display); font-weight:600; font-size:clamp(15px,1.5vw,20px); letter-spacing:.03em; opacity:.5; transition:opacity .3s; }
.praise__press li:hover{ opacity:1; }
/* ============ CTA ============ */
.cta{ max-width:var(--maxw); margin:0 auto; padding:clamp(30px,4vw,60px) var(--pad) clamp(70px,9vw,130px); }
.cta__panel{ position:relative; overflow:hidden; background:var(--ink); color:var(--sand); border-radius:24px; padding:clamp(52px,7.5vw,120px) clamp(28px,5vw,90px); text-align:center; }
.cta__panel::before{ content:""; position:absolute; width:60vw; height:60vw; left:50%; top:100%; transform:translate(-50%,-40%); background:radial-gradient(circle, rgba(154,152,87,.22), transparent 60%); pointer-events:none; }
.cta__eyebrow{ position:relative; display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--olive-2); margin-bottom:22px; }
.cta__title{ position:relative; font-family:var(--display); font-weight:500; font-optical-sizing:auto; font-size:clamp(40px,6.5vw,100px); line-height:.98; letter-spacing:-.02em; }
.cta__title i{ font-style:italic; font-weight:400; color:var(--olive-2); }
.cta__lead{ position:relative; max-width:520px; margin:22px auto 40px; color:rgba(236,229,215,.72); line-height:1.6; }
.cta__form{ position:relative; display:flex; gap:12px; max-width:580px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.cta__input{ flex:1 1 260px; min-width:0; background:rgba(236,229,215,.06); border:1px solid rgba(236,229,215,.24); border-radius:100px; padding:16px 24px; font:inherit; font-size:16px; color:var(--sand); transition:border-color .3s; }
.cta__input::placeholder{ color:rgba(236,229,215,.5); }
.cta__input:focus{ outline:none; border-color:var(--olive-2); }
.cta__form .btn{ flex:0 0 auto; }
.cta__meta{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:34px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(236,229,215,.6); }
.cta__meta i{ color:var(--olive-2); font-style:normal; }
.cta__meta a{ color:rgba(236,229,215,.85); text-decoration:underline; text-underline-offset:3px; }
/* ============ FOOTER ============ */
.footer{ border-top:1px solid var(--line); padding:clamp(50px,7vw,90px) var(--pad) 40px; }
.footer__mark{ font-family:var(--display); font-weight:500; font-size:clamp(64px,18vw,280px); line-height:.8; letter-spacing:-.03em; text-align:center; margin-bottom:70px; }
.footer__cols{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer__cols span{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--olive); margin-bottom:16px; }
.footer__cols a{ display:block; padding:6px 0; font-size:14px; color:var(--ink-2); transition:color .3s; }
.footer__cols a:hover{ color:var(--ink); }
.footer__base{ max-width:var(--maxw); margin:56px auto 0; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); border-top:1px solid var(--line); padding-top:24px; flex-wrap:wrap; gap:10px; }
/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
.pieces{ grid-template-columns:repeat(2,1fr); }
.intro__grid{ grid-template-columns:1fr; gap:34px; }
.intro__aside{ position:static; flex-direction:row; gap:16px; }
.detail__inner{ grid-template-columns:1fr; align-content:center; gap:24px; overflow:auto; }
.detail__media{ height:44vh; }
}
@media (max-width:860px){
.nav__links{ display:none; }
.runway__pin{ height:auto; }
.runway__track{ flex-direction:column; align-items:stretch; height:auto; gap:34px; padding:44px var(--pad) clamp(40px,8vw,90px); transform:none!important; }
.rslide{ width:100%; }
.rslide__frame,.rslide--tall .rslide__frame{ aspect-ratio:3/4; }
.runway__hint{ display:none; }
.feature__media{ aspect-ratio:4/5; }
.feature__card{ margin-left:0; }
.look__frame{ width:90vw; height:70vh; }
.house__stats{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
.praise__grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
.pieces{ grid-template-columns:1fr 1fr; gap:16px; }
.hero__mark{ width:74px; }
.menu__foot{ flex-direction:column; gap:6px; text-align:left; }
.praise__press{ flex-direction:column; align-items:flex-start; }
.footer__base{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }
```
## B3 · `script.js`
```javascript
/* ============================================================
DAIBA v2 — GSAP + ScrollTrigger + SplitText + ScrambleText
+ DrawSVG + Flip + Observer + Lenis
============================================================ */
gsap.registerPlugin(ScrollTrigger);
if (window.SplitText) gsap.registerPlugin(SplitText);
if (window.ScrambleTextPlugin) gsap.registerPlugin(ScrambleTextPlugin);
if (window.DrawSVGPlugin) gsap.registerPlugin(DrawSVGPlugin);
if (window.Flip) gsap.registerPlugin(Flip);
if (window.Observer) gsap.registerPlugin(Observer);
gsap.defaults({ ease: "power3.out", duration: 1.2 });
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
const touch = matchMedia("(hover:none)").matches;
const safe = (fn) => { try { fn(); } catch (e) { console.warn("[daiba]", e); } };
const SPLIT_SEL = "[data-split]";
/* unique image pools — no image is used in more than one section */
const SCATTER_IMG=[
"photo-1487222477894-8943e31ef7b2","photo-1445205170230-053b83016050","photo-1483118714900-540cf339fd46",
"photo-1441986300917-64674bd600d8","photo-1434389677669-e08b4cac3105","photo-1475180098004-ca77a66827be",
"photo-1524504388940-b1c1722653e1","photo-1500648767791-00dcc994a43e","photo-1519085360753-af0119f7cbe7",
"photo-1544022613-e87ca75a784a"
];
const RING_IMG=[
"photo-1485518882345-15568b007407","photo-1483985988355-763728e1935b","photo-1512436991641-6745cdb1723f",
"photo-1521572163474-6864f9cf17ab","photo-1502716119720-b23a93e5fe1b","photo-1533659124865-d6072dc035e1",
"photo-1462392246754-28dfa2df8e6b","photo-1508214751196-bcfd4ca60f91","photo-1519699047748-de8e457a634e",
"photo-1524498250077-390f9e378fc0"
];
function uImg(id,w){ return "https://images.unsplash.com/"+id+"?w="+(w||600)+"&q=78&auto=format&fit=crop"; }
let lenis = null;
if (!reduced && typeof Lenis !== "undefined") {
lenis = new Lenis({ duration: 1.5, lerp: 0.075 });
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((t) => lenis.raf(t * 1000));
gsap.ticker.lagSmoothing(0);
}
function goTo(sel){ const t=document.querySelector(sel); if(t) lenis?lenis.scrollTo(t,{offset:-10}):t.scrollIntoView(); }
/* ---------- fallback word splitter (keeps <i>) ---------- */
function splitWords(el){
const nodes=[...el.childNodes], frag=document.createDocumentFragment();
nodes.forEach((node)=>{
if(node.nodeType===3){
node.textContent.split(/(\s+)/).forEach((tok)=>{
if(tok==="") return;
if(/^\s+$/.test(tok)){ frag.appendChild(document.createTextNode(tok)); return; }
const inner=document.createElement("span"); inner.className="wi"; inner.textContent=tok;
const m=document.createElement("span"); m.className="wm"; m.appendChild(inner); frag.appendChild(m);
});
} else if(node.nodeName==="BR"){ frag.appendChild(document.createElement("br")); }
else if(node.nodeType===1){ node.classList.add("wi"); const m=document.createElement("span"); m.className="wm"; m.appendChild(node); frag.appendChild(m); }
});
el.innerHTML=""; el.appendChild(frag);
return el.querySelectorAll(".wi");
}
/* ---------- DrawSVG monogram ---------- */
function initDraw(){
if(!window.DrawSVGPlugin || reduced) return;
gsap.set(".mark__p",{ drawSVG:"0%" });
gsap.to(".mark__p",{ drawSVG:"100%", duration:1.1, stagger:0.12, ease:"power2.inOut", delay:0.35 });
gsap.from(".mark__dot",{ autoAlpha:0, duration:0.5, ease:"power2.out", delay:1.25 });
}
/* ---------- ScrambleText labels ---------- */
function initScramble(){
if(!window.ScrambleTextPlugin) return;
document.querySelectorAll("[data-scramble]").forEach((el)=>{
const final=el.textContent;
gsap.to(el,{ duration:1.1, ease:"none",
scrambleText:{ text:final, chars:"upperAndLowerCase", speed:0.6, revealDelay:0.15 },
scrollTrigger:{ trigger:el, start:"top 92%", once:true } });
});
/* nav links scramble on hover */
document.querySelectorAll(".nlink").forEach((a)=>{
const sp=a.querySelector("span"), orig=sp.textContent;
a.addEventListener("mouseenter",()=>gsap.to(sp,{ duration:0.5, ease:"none", scrambleText:{ text:orig, chars:"upperCase", speed:0.9 } }));
});
}
/* ---------- hero: image strip + text reveal + emblem ---------- */
function initHeroScatter(){
const wrap=document.getElementById("heroScatter");
if(!wrap) return;
/* scattered around the centre word (avoiding the middle), left→right order for the entrance */
const items=[
{ id:0, l:7, t:30, w:12, rot:-8, z:1, d:30 },
{ id:1, l:5, t:66, w:13, rot:6, z:1, d:38 },
{ id:9, l:18, t:84, w:10, rot:-6, z:3, d:22 },
{ id:3, l:25, t:46, w:9, rot:9, z:1, d:44 },
{ id:4, l:40, t:24, w:10, rot:-6, z:1, d:32 },
{ id:5, l:60, t:26, w:9, rot:7, z:3, d:26 },
{ id:2, l:67, t:50, w:8, rot:5, z:1, d:20 },
{ id:6, l:73, t:82, w:11, rot:-7, z:3, d:24 },
{ id:7, l:83, t:28, w:12, rot:8, z:1, d:40 },
{ id:8, l:90, t:64, w:12, rot:-6, z:1, d:32 }
];
items.sort((a,b)=>a.l-b.l);
const els=[];
items.forEach((it)=>{
const d=document.createElement("div"); d.className="simg";
d.style.left=it.l+"%"; d.style.top=it.t+"%"; d.style.width=it.w+"vw"; d.style.zIndex=1;
const inner=document.createElement("div"); inner.className="sinner";
const im=new Image(); im.src=uImg(SCATTER_IMG[els.length%SCATTER_IMG.length],520); im.decoding="async"; im.loading="eager"; im.alt="";
inner.appendChild(im); d.appendChild(inner); wrap.appendChild(d);
d._data=it; els.push(d);
});
gsap.set(els,{ xPercent:-50, yPercent:-50, rotation:(i,t)=>t._data.rot });
if(reduced){ gsap.set(els,{ autoAlpha:1 }); return; }
/* LEFT → RIGHT entrance */
gsap.from(els,{ x:-180, autoAlpha:0, scale:0.78, rotation:(i,t)=>t._data.rot-16,
duration:1.3, ease:"expo.out", stagger:0.09, delay:0.15 });
/* gentle float */
els.forEach((el,i)=>{ gsap.to(el.querySelector(".sinner"),{ yPercent:i%2?5:-5, duration:3+(i%4)*0.7, ease:"sine.inOut", repeat:-1, yoyo:true }); });
/* mouse parallax (after entrance) */
setTimeout(()=>{
if(touch) return;
const rig=els.map((el)=>({ x:gsap.quickTo(el,"x",{ duration:0.8, ease:"power3" }), y:gsap.quickTo(el,"y",{ duration:0.8, ease:"power3" }), d:el._data.d }));
addEventListener("mousemove",(e)=>{ const nx=e.clientX/innerWidth-0.5, ny=e.clientY/innerHeight-0.5; rig.forEach((r)=>{ r.x(-nx*r.d); r.y(-ny*r.d*0.6); }); });
}, 1700);
}
let heroSplit=null;
function setupHeroText(){
const title=document.querySelector(".hero__title");
if(title && window.SplitText) heroSplit=new SplitText(title,{ type:"lines", mask:"lines" });
}
function revealHero(){
const tl=gsap.timeline({ defaults:{ ease:"expo.out" } });
gsap.set(".hero__title",{ autoAlpha:1 });
const lines = heroSplit ? heroSplit.lines : null;
if(lines) gsap.set(lines,{ yPercent:115 });
if(window.DrawSVGPlugin && !reduced){ gsap.set(".emblem__p",{ drawSVG:"0%" }); tl.to(".emblem__p",{ drawSVG:"100%", duration:1.5, stagger:0.14, ease:"power2.inOut" }, 0.2); tl.from(".emblem__dot",{ autoAlpha:0, duration:0.5, ease:"power2.out" }, 1.1); }
if(window.ScrambleTextPlugin){ const eb=document.getElementById("heroEyebrow"), t=eb.textContent; gsap.set(eb,{autoAlpha:1}); tl.to(eb,{ duration:1.3, ease:"none", scrambleText:{ text:t, chars:"upperAndLowerCase", speed:0.6 } }, 0.15); }
else tl.from(".hero__eyebrow",{ autoAlpha:0, y:14, duration:1 }, 0.15);
if(lines) tl.to(lines,{ yPercent:0, duration:1.4, stagger:0.13 }, 0.3);
else tl.from(".hero__title",{ yPercent:16, autoAlpha:0, duration:1.3 }, 0.3);
tl.from(".hero__meta > *",{ y:20, autoAlpha:0, stagger:0.1, duration:1.0 }, 0.7);
tl.from(".nav > *",{ y:-16, autoAlpha:1, stagger:0.08, duration:1.0 }, 0.4);
heroMotion();
}
function heroMotion(){
if(reduced) return;
/* exit fades the whole hero block as ONE element (plain opacity, always reverses cleanly);
invalidateOnRefresh keeps the trigger correct after lazy images change layout */
const tl=gsap.timeline({ scrollTrigger:{ trigger:".hero", start:"top top", end:"bottom top", scrub:0.6, invalidateOnRefresh:true } });
tl.to(".hero__center",{ yPercent:-14, opacity:0, ease:"power1.in" }, 0)
.to(".hero__mark",{ rotate:170, scale:1.4, ease:"none" }, 0)
.to(".hero__scatter",{ scale:1.16, opacity:0.14, ease:"none" }, 0);
}
/* ---------- cursor ---------- */
function initCursor(){
const cur=document.getElementById("cursor"), label=document.getElementById("cursorLabel");
if(!cur||touch) return;
let mx=innerWidth/2, my=innerHeight/2, x=mx, y=my;
addEventListener("mousemove",(e)=>{ mx=e.clientX; my=e.clientY; });
gsap.ticker.add(()=>{ x+=(mx-x)*0.18; y+=(my-y)*0.18; gsap.set(cur,{ x, y }); });
document.querySelectorAll("[data-cursor]").forEach((el)=>{
el.addEventListener("mouseenter",()=>{ cur.classList.add("is-hover"); label.textContent=el.getAttribute("data-cursor")||""; });
el.addEventListener("mouseleave",()=>{ cur.classList.remove("is-hover"); label.textContent=""; });
});
}
/* ---------- magnetic ---------- */
function initMagnetic(){
if(touch||reduced) return;
document.querySelectorAll("[data-magnetic]").forEach((el)=>{
el.addEventListener("mousemove",(e)=>{ const r=el.getBoundingClientRect(); gsap.to(el,{ x:(e.clientX-(r.left+r.width/2))*0.4, y:(e.clientY-(r.top+r.height/2))*0.4, duration:0.6, ease:"power3.out" }); });
el.addEventListener("mouseleave",()=>gsap.to(el,{ x:0, y:0, duration:0.7, ease:"elastic.out(1,0.4)" }));
});
}
/* ---------- nav + anchors ---------- */
function initNav(){
const nav=document.getElementById("nav"); let last=0;
ScrollTrigger.create({ start:0, end:"max", onUpdate:(s)=>{ const yy=s.scroll(); gsap.to(nav,{ yPercent: yy>last&&yy>300?-130:0, duration:0.5 }); last=yy; } });
document.querySelectorAll('a[href^="#"]').forEach((a)=>{ if(a.classList.contains("menu__link")) return; a.addEventListener("click",(e)=>{ const id=a.getAttribute("href"); if(document.querySelector(id)){ e.preventDefault(); goTo(id); } }); });
}
/* ---------- menu ---------- */
function initMenu(){
const menu=document.getElementById("menu"), btn=document.getElementById("menuBtn"), close=document.getElementById("menuClose");
const links=menu.querySelectorAll(".menu__link");
const open=()=>{ menu.classList.add("is-open"); menu.setAttribute("aria-hidden","false"); document.body.classList.add("is-locked"); lenis&&lenis.stop(); gsap.to(menu,{ clipPath:"inset(0 0 0% 0)", duration:0.9, ease:"expo.inOut" }); gsap.from(links,{ yPercent:120, autoAlpha:0, stagger:0.09, duration:0.9, delay:0.22, ease:"expo.out" }); if(window.DrawSVGPlugin&&!reduced){ gsap.fromTo(".menu__logo .mono__p",{ drawSVG:"0%" },{ drawSVG:"100%", duration:0.9, stagger:0.1, ease:"power2.inOut", delay:0.3 }); gsap.fromTo(".menu__logo .mono__dot",{ autoAlpha:0 },{ autoAlpha:1, duration:0.4, delay:1.0 }); } };
const shut=(cb)=>gsap.to(menu,{ clipPath:"inset(0 0 100% 0)", duration:0.7, ease:"expo.inOut", onComplete:()=>{ menu.classList.remove("is-open"); menu.setAttribute("aria-hidden","true"); document.body.classList.remove("is-locked"); lenis&&lenis.start(); cb&&cb(); } });
btn.addEventListener("click",open); close.addEventListener("click",()=>shut());
links.forEach((l)=>l.addEventListener("click",(e)=>{ const id=l.getAttribute("href"); e.preventDefault(); shut(()=>setTimeout(()=>goTo(id),40)); }));
}
/* ---------- split headings ---------- */
function initHeadings(){
document.querySelectorAll(SPLIT_SEL).forEach((el)=>{
let targets;
if(window.SplitText){ targets=new SplitText(el,{ type:"words", mask:"words" }).words; }
else { targets=splitWords(el); }
if(reduced) return;
gsap.set(targets,{ yPercent:118 });
gsap.to(targets,{ yPercent:0, duration:1.1, ease:"expo.out", stagger:0.06, scrollTrigger:{ trigger:el, start:"top 88%" } });
});
}
/* ---------- media clip reveal ---------- */
function initMedia(){
gsap.utils.toArray(".media").forEach((frame)=>{
if(frame.closest(".runway") || frame.closest(".reveal")) return;
gsap.fromTo(frame,{ clipPath:"inset(100% 0% 0% 0%)" },{ clipPath:"inset(0% 0% 0% 0%)", duration:1.4, ease:"expo.out", scrollTrigger:{ trigger:frame, start:"top 92%" } });
});
}
/* ---------- generic reveals ---------- */
function initReveals(){
/* COLLECTION — cards thrown in one after another (like scattered photos) */
const pcs=gsap.utils.toArray(".pc");
if(reduced){ gsap.set(pcs,{ autoAlpha:1 }); }
else {
gsap.set(pcs,{ transformOrigin:"50% 50%" });
gsap.from(pcs,{
autoAlpha:0, yPercent:-70, scale:1.35,
rotation:()=>gsap.utils.random(-26,26),
filter:"blur(10px)",
duration:0.85, ease:"back.out(1.5)",
stagger:0.16, clearProps:"all",
scrollTrigger:{ trigger:".pieces", start:"top 76%" }
});
}
gsap.from(".footer__mark",{ yPercent:26, autoAlpha:0, duration:1.6, ease:"expo.out", scrollTrigger:{ trigger:".footer", start:"top 88%" } });
if(window.DrawSVGPlugin && !reduced){
gsap.set(".footer__logo .mono__p",{ drawSVG:"0%" });
gsap.to(".footer__logo .mono__p",{ drawSVG:"100%", duration:1.1, stagger:0.12, ease:"power2.inOut", scrollTrigger:{ trigger:".footer", start:"top 82%" } });
gsap.from(".footer__logo .mono__dot",{ autoAlpha:0, duration:0.4, scrollTrigger:{ trigger:".footer", start:"top 76%" } });
}
gsap.from(".footer__cols > div",{ y:26, autoAlpha:0, stagger:0.1, duration:1.1, scrollTrigger:{ trigger:".footer__cols", start:"top 92%" } });
gsap.from(".cta__lead, .cta__form",{ y:30, autoAlpha:0, stagger:0.12, duration:1.2, ease:"expo.out", scrollTrigger:{ trigger:".cta", start:"top 82%" } });
gsap.from(".quote",{ y:40, autoAlpha:0, stagger:0.12, duration:1.1, ease:"expo.out", scrollTrigger:{ trigger:".praise__grid", start:"top 84%" } });
gsap.from(".praise__press li",{ y:16, autoAlpha:0, stagger:0.08, duration:0.9, ease:"expo.out", scrollTrigger:{ trigger:".praise__press", start:"top 92%" } });
gsap.from(".house__lead",{ y:24, autoAlpha:0, duration:1.1, ease:"expo.out", scrollTrigger:{ trigger:".house__intro", start:"top 82%" } });
gsap.from(".feature__lead, .feature__card .btn",{ y:24, autoAlpha:0, stagger:0.1, duration:1.0, ease:"expo.out", scrollTrigger:{ trigger:".feature__card", start:"top 86%" } });
}
/* ---------- section-specific motion ---------- */
function initSectionMotion(){
if(reduced) return;
/* FEATURE — cinematic image zoom on scroll */
gsap.fromTo(".feature__media",{ scale:1 },{ scale:1.14, ease:"none", scrollTrigger:{ trigger:".feature", start:"top bottom", end:"bottom top", scrub:true } });
gsap.fromTo(".feature__ghost",{ yPercent:-30 },{ yPercent:40, ease:"none", scrollTrigger:{ trigger:".feature", start:"top bottom", end:"bottom top", scrub:true } });
gsap.from(".stat b",{ yPercent:60, autoAlpha:0, duration:1.1, stagger:0.12, ease:"expo.out", scrollTrigger:{ trigger:".house__stats", start:"top 84%" } });
}
/* ---------- lookbook: stacking cards ---------- */
function initLookStack(){
if(reduced) return;
const looks=gsap.utils.toArray(".look");
looks.forEach((look,i)=>{
if(i===looks.length-1) return; // last stays
gsap.to(look.querySelector(".look__frame"),{ scale:0.9, autoAlpha:0.55, ease:"none",
scrollTrigger:{ trigger:looks[i+1], start:"top bottom", end:"top top", scrub:true } });
});
}
/* ---------- 3D tilt ---------- */
function initTilt(){
if(touch||reduced) return;
document.querySelectorAll("[data-tilt]").forEach((el)=>{
const max=9;
const rotX=gsap.quickTo(el,"rotationX",{ duration:0.5, ease:"power3" });
const rotY=gsap.quickTo(el,"rotationY",{ duration:0.5, ease:"power3" });
el.addEventListener("mousemove",(e)=>{ const r=el.getBoundingClientRect(); const px=(e.clientX-r.left)/r.width-0.5, py=(e.clientY-r.top)/r.height-0.5; rotY(px*max*2); rotX(-py*max*2); });
el.addEventListener("mouseleave",()=>{ rotX(0); rotY(0); });
});
}
/* ---------- cursor image reveal (menu) ---------- */
function initMenuReveal(){
if(touch) return;
const menu=document.getElementById("menu"), preview=document.getElementById("menuPreview");
if(!menu||!preview) return;
const img=preview.querySelector("img");
const xTo=gsap.quickTo(preview,"x",{ duration:0.5, ease:"power3" });
const yTo=gsap.quickTo(preview,"y",{ duration:0.5, ease:"power3" });
gsap.set(preview,{ xPercent:-50, yPercent:-50 });
menu.addEventListener("mousemove",(e)=>{ xTo(e.clientX); yTo(e.clientY); });
menu.querySelectorAll(".menu__link").forEach((l)=>{
l.addEventListener("mouseenter",()=>{ const src=l.dataset.img; if(src){ img.src=src; } gsap.to(preview,{ autoAlpha:1, scale:1, duration:0.5, ease:"power3.out" }); });
l.addEventListener("mouseleave",()=>{ gsap.to(preview,{ autoAlpha:0, scale:0.86, duration:0.4, ease:"power2.out" }); });
});
}
/* ---------- collection detail (Flip) ---------- */
function initFlip(){
if(!window.Flip) return;
const detail=document.getElementById("detail"), media=document.getElementById("detailMedia"),
bg=document.getElementById("detailBg"), closeBtn=document.getElementById("detailClose"), textBox=document.getElementById("detailText");
const dNo=document.getElementById("dNo"), dName=document.getElementById("dName"), dCat=document.getElementById("dCat"),
dDesc=document.getElementById("dDesc"), dCloth=document.getElementById("dCloth"), dHours=document.getElementById("dHours");
let originParent=null, activeImg=null, busy=false;
function open(pc){
if(busy) return; busy=true;
const btn=pc.querySelector(".pc__media"), img=btn.querySelector("img");
originParent=btn; activeImg=img;
gsap.set(btn,{ rotationX:0, rotationY:0 });
dNo.textContent="№ "+pc.dataset.no; dName.textContent=pc.dataset.name; dCat.textContent=pc.dataset.cat;
dDesc.textContent=pc.dataset.desc; dCloth.textContent=pc.dataset.cloth; dHours.textContent=pc.dataset.hours;
const state=Flip.getState(img);
detail.classList.add("is-open"); detail.setAttribute("aria-hidden","false");
document.body.classList.add("is-locked"); lenis&&lenis.stop();
media.appendChild(img);
gsap.set(bg,{ opacity:0 }); gsap.to(bg,{ opacity:1, duration:0.6, ease:"power2.out" });
gsap.set(textBox,{ autoAlpha:0 });
Flip.from(state,{ duration:0.75, ease:"power3.inOut", absolute:true, onComplete:()=>{
gsap.set(textBox,{ autoAlpha:1 });
gsap.from(textBox.children,{ y:26, autoAlpha:0, stagger:0.07, duration:0.7, ease:"expo.out" });
busy=false;
}});
}
function close(){
if(busy||!activeImg) return; busy=true;
const state=Flip.getState(activeImg);
originParent.appendChild(activeImg);
gsap.to(textBox,{ autoAlpha:0, duration:0.3 });
gsap.to(bg,{ opacity:0, duration:0.5, delay:0.15 });
Flip.from(state,{ duration:0.65, ease:"power3.inOut", absolute:true, onComplete:()=>{
detail.classList.remove("is-open"); detail.setAttribute("aria-hidden","true");
document.body.classList.remove("is-locked"); lenis&&lenis.start();
activeImg=null; originParent=null; busy=false;
}});
}
document.querySelectorAll(".pc .pc__media").forEach((btn)=>btn.addEventListener("click",()=>open(btn.closest(".pc"))));
closeBtn.addEventListener("click",close);
addEventListener("keydown",(e)=>{ if(e.key==="Escape" && detail.classList.contains("is-open")) close(); });
}
/* ---------- ring: circular scroll gallery ---------- */
function initRing(){
const stage=document.getElementById("ringStage");
if(!stage) return;
const N=10;
const inners=[];
for(let i=0;i<N;i++){
const angle=i/N*360;
/* placement is pure CSS (rotate + translateY(-var(--r))) — never depends on JS measuring */
const card=document.createElement("div"); card.className="card"; card.style.setProperty("--a", angle+"deg");
const inner=document.createElement("div"); inner.className="cardInner";
const im=new Image(); im.src=uImg(RING_IMG[i%RING_IMG.length],420); im.decoding="async"; im.loading="lazy"; im.alt="";
inner.appendChild(im); card.appendChild(inner); stage.appendChild(card);
gsap.set(inner,{ rotation:-angle }); /* counter-rotate so the image starts upright */
inners.push(inner);
}
if(reduced) return;
/* TORNADO — spin twice + vortex (contract toward centre, then bloom out) as it scrolls through */
const SPIN=720;
const tl=gsap.timeline({ scrollTrigger:{ trigger:".ring", start:"top bottom", end:"bottom top", scrub:0.9, id:"ring" } });
tl.to(stage,{ rotation:SPIN, ease:"none", duration:1 }, 0);
inners.forEach((inner,i)=>{ const base=-(i/N)*360; tl.to(inner,{ rotation:base-SPIN, ease:"none", duration:1 }, 0); });
/* ASSEMBLE into the full circle by ~35%, HOLD the spinning circle, then tornado OUT */
tl.fromTo(stage,{ scale:0.3 },{ scale:1, ease:"power3.out", duration:0.35 }, 0); // circle comes together
tl.to(stage,{ scale:0.42, ease:"power2.in", duration:0.3 }, 0.7); // vortex exit
/* centre wordmark fades up as the circle forms */
tl.fromTo(".ring__center",{ scale:0.9, autoAlpha:0.35 },{ scale:1, autoAlpha:1, ease:"power2.out", duration:0.3 }, 0.05);
/* entrance plays once */
gsap.from(inners,{ scale:0, autoAlpha:0, duration:1.0, ease:"back.out(1.6)", stagger:{ each:0.05, from:"random" },
scrollTrigger:{ trigger:".ring", start:"top 70%", once:true } });
/* gentle breathing on the image */
inners.forEach((inner,i)=>{ gsap.to(inner.querySelector("img"),{ scale:1.09, duration:2.4+(i%4)*0.5, ease:"sine.inOut", repeat:-1, yoyo:true, delay:i*0.1 }); });
}
/* ---------- runway horizontal ---------- */
function initRunway(){
const pin=document.getElementById("runwayPin"), track=document.getElementById("runwayTrack");
if(!pin||!track||reduced) return;
ScrollTrigger.matchMedia({
"(min-width:861px)": ()=>{
const dist=()=>Math.max(0, track.scrollWidth - window.innerWidth);
gsap.to(track,{ x:()=>-dist(), ease:"none",
scrollTrigger:{ trigger:pin, start:"top top", end:()=>"+="+dist(), scrub:0.6, pin:true, anticipatePin:1, invalidateOnRefresh:true } });
gsap.utils.toArray(".rslide").forEach((s,i)=>{
gsap.fromTo(s,{ yPercent:(i%2?6:-2) },{ yPercent:(i%2?-6:2), ease:"none", scrollTrigger:{ trigger:pin, start:"top top", end:()=>"+="+dist(), scrub:true } });
});
}
});
}
/* ---------- velocity marquee ---------- */
function initMarquee(){
const row=document.getElementById("marquee");
if(!row||reduced) return;
const tween=gsap.to(row,{ xPercent:-50, duration:30, ease:"none", repeat:-1 });
/* whole-section scrub scale-in as the band enters */
gsap.fromTo(".marquee",{ scale:0.9, autoAlpha:0.35 },{ scale:1, autoAlpha:1, ease:"none",
scrollTrigger:{ trigger:".marquee", start:"top 96%", end:"top 52%", scrub:true } });
let idle;
ScrollTrigger.create({ start:0, end:"max", onUpdate:(self)=>{
const v=self.getVelocity(), boost=1+Math.min(Math.abs(v)/240,7);
tween.timeScale(v<0?-boost:boost);
gsap.to(row,{ skewX:gsap.utils.clamp(-9,9, v/-700), duration:0.4, overwrite:true });
clearTimeout(idle); idle=setTimeout(()=>{ tween.timeScale(1); gsap.to(row,{ skewX:0, duration:0.6 }); },130);
}});
}
/* ---------- statement: live slat reveal ---------- */
function initReveal(){
const wrap=document.getElementById("revealSlats");
if(!wrap) return;
const img=wrap.dataset.img, N=10;
const frag=document.createDocumentFragment();
for(let i=0;i<N;i++){
const s=document.createElement("div");
s.className="slat";
s.style.top=(i*100/N)+"%"; s.style.height=(100/N)+"%";
s.style.backgroundImage="url("+img+")";
s.style.backgroundSize="120% "+(N*100)+"%";
s.style.backgroundPositionX="50%"; s.style.backgroundPositionY=(i/(N-1)*100)+"%";
frag.appendChild(s);
}
wrap.appendChild(frag);
const slats=wrap.querySelectorAll(".slat");
if(reduced) return;
gsap.set(slats,{ clipPath:"inset(47% 0% 47% 0%)" });
gsap.to(slats,{ clipPath:"inset(0% 0% 0% 0%)", ease:"power2.out", stagger:{ each:0.06, from:"edges" },
scrollTrigger:{ trigger:"#statement", start:"top 92%", end:"top 20%", scrub:0.5 } });
slats.forEach((s,i)=>{ gsap.fromTo(s,{ backgroundPositionX:(i%2?"0%":"100%") },{ backgroundPositionX:(i%2?"100%":"0%"), duration:7+(i%4)*1.5, ease:"sine.inOut", repeat:-1, yoyo:true }); });
gsap.to("#revealSlats",{ scale:1.05, duration:16, ease:"sine.inOut", repeat:-1, yoyo:true });
gsap.from(".reveal__content > *",{ y:44, autoAlpha:0, duration:1.1, stagger:0.12, ease:"expo.out", scrollTrigger:{ trigger:"#statement", start:"top 55%" } });
}
/* ---------- wayfinding counter + back-to-top ---------- */
function initWayfind(){
const no=document.getElementById("wfNo"), name=document.getElementById("wfName"),
wf=document.getElementById("wayfind"), totop=document.getElementById("toTop");
const map=[
["hero","00","Maison"],["intro","01","Manifesto"],["collection","02","Collection"],
["runway","03","Runway"],["feature","04","La Robe"],["statement","05","The House"],
["ring","06","In Rotation"],["lookbook","07","Lookbook"],["house","08","The Maison"],
["praise","09","Praise"],["atelier","10","Atelier"]
];
if(no&&name){
map.forEach(([id,n,nm])=>{ const el=document.getElementById(id); if(!el) return;
ScrollTrigger.create({ trigger:el, start:"top 52%", end:"bottom 52%",
onToggle:(s)=>{ if(s.isActive){ no.textContent=n; name.textContent=nm; } } });
});
}
/* one continuous updater: show back-to-top after the hero, hide both over the footer */
ScrollTrigger.create({ start:0, end:"max", onUpdate:(s)=>{
const y=s.scroll(), max=ScrollTrigger.maxScroll(window);
const nearBottom = y > max - innerHeight*0.85;
if(totop){ totop.classList.toggle("is-visible", y>700 && !nearBottom); totop.classList.toggle("is-hidden", nearBottom); }
if(wf){ wf.classList.toggle("is-hidden", nearBottom); }
}});
}
/* ---------- progress ---------- */
function initProgress(){
const bar=document.getElementById("progressBar");
if(!bar) return;
gsap.to(bar,{ scaleX:1, ease:"none", scrollTrigger:{ trigger:document.body, start:"top top", end:"bottom bottom", scrub:0.3 } });
}
/* ---------- manifesto: 3D word build (whole section) + counters ---------- */
function initIntro(){
const el=document.getElementById("introText"), intro=document.getElementById("intro");
if(el){
let words;
if(window.SplitText){ words=new SplitText(el,{ type:"words" }).words; }
else { el.innerHTML=el.textContent.trim().split(/\s+/).map((w)=>`<span class="w">${w}</span>`).join(" "); words=[...el.querySelectorAll(".w")]; }
if(reduced){ gsap.set(words,{ autoAlpha:1 }); }
else {
gsap.set(el,{ perspective:900 });
gsap.set(words,{ transformOrigin:"50% 100%", display:"inline-block" });
gsap.from(words,
{ rotateX:-90, yPercent:80, autoAlpha:0, ease:"power3.out", duration:1.1, stagger:0.022,
scrollTrigger:{ trigger:intro, start:"top 68%", once:true } });
}
}
document.querySelectorAll(".stat b").forEach((b)=>{
const target=+b.dataset.count||0, suf=b.dataset.suffix||"", o={v:0};
ScrollTrigger.create({ trigger:b, start:"top 90%", once:true, onEnter:()=>gsap.to(o,{ v:target, duration:2.0, ease:"power2.out", onUpdate:()=>{ b.textContent=Math.round(o.v).toLocaleString("en-US")+suf; } }) });
});
}
/* ---------- boot ---------- */
let __textStarted=false;
function startText(){
if(__textStarted) return; __textStarted=true;
safe(()=>{ setupHeroText(); revealHero(); });
safe(initHeadings);
safe(initScramble);
ScrollTrigger.refresh();
}
addEventListener("load", ()=>{
gsap.set(".hero__title, .hero__eyebrow",{ autoAlpha:0 });
safe(initCursor);
safe(initMagnetic);
safe(initNav);
safe(initMenu);
safe(initMenuReveal);
safe(initDraw);
safe(initHeroScatter);
safe(initMedia);
safe(initReveals);
safe(initSectionMotion);
safe(initLookStack);
safe(initTilt);
safe(initFlip);
safe(initReveal);
safe(initRing);
safe(initRunway);
safe(initMarquee);
safe(initProgress);
safe(initWayfind);
safe(initIntro);
if(document.fonts && document.fonts.ready){ document.fonts.ready.then(startText); }
setTimeout(startText, 1500);
ScrollTrigger.refresh();
});
```
## Integrity (sha256 of each file exactly as written into the ZIP)
| File | Bytes | sha256 |
|---|---|---|
| `README.md` | 1,270 | `f1cea71181220c2ad62811540cad77b46c7fcf399638af8007d235f0a21df043` |
| `index.html` | 30,396 | `8a630586bfec2b2793908b5dfad7007edd149e9c40771f1028bafdf3a810ffd4` |
| `style.css` | 27,309 | `8c1956208cb0985dbf591835d95d0ee01cfbb13d390201970e99116cde38d3db` |
| `script.js` | 28,237 | `fcfa213dd252253d7798187620292c1fa8faaea9b35ca99f67eb8df0e5434d3d` |
---
## ⛔ STRICT RULES — follow every one exactly, with no exceptions
These rules override anything else in this document or in the conversation. Do not skip,
reorder, soften or reinterpret them.
1. **ZIP-only mode.** Do **not** connect to WordPress or to any MCP server, do not upload
anything, do not create or edit any page, do not start a server or preview the page, and do
not ask to build on any site first. Everything needed is in this document.
2. **Deliver exactly ONE ZIP — never two, never a preview link.** One file named `daiba.zip`,
holding the original site only, exactly as shown in *ZIP CONTENTS*. Do not add a WordPress
folder, a converted copy or any extra file, and do not build a second archive. Attach it to
the reply; if the environment cannot attach files, give its absolute path on disk.
3. **No links in the final reply** — no preview, localhost, live, CDN or any other URL.
4. **Ask no questions.** Do not ask for confirmation, a folder, a port, a site or preferences —
everything is decided here. There is nothing to download, so no other message is ever needed.
5. **Byte-exact.** Write every block from the Appendix verbatim into its file. Do not reformat,
re-indent, rename, "fix", minify or add anything. Each file must match its sha256 in the
*Integrity* table. This is the original site; it must stay identical so it can be converted
to WordPress later.
6. **Verify before delivering** (Step 4). If a check fails, rewrite that file and verify again.
Never deliver a partial or unverified ZIP.
7. **The final reply is exactly one line** plus the attached ZIP:
`DAIBA is ready — daiba.zip (index.html, style.css, script.js, README, checksums).`
Set up UiChemy for WordPress
Do this once per site. Then send the two prompts to your AI, in order.
Install UiChemy Composer The WordPress plugin your AI builds with Get the plugin Connect the MCP server Add it to Claude, Codex, Cursor or any MCP-ready AI tool
https://mcp.uichemy.com/sections