BELOW IS THE COMPLETE REPRODUCTION PROMPT FOR THE ENTIRE PAGE (SECTIONS 1, 2, AND 3). BOLD WITHOUT MARKDOWN. CODE IS RESERVED ONLY FOR KEYFRAMES, SCROLL-MAPPED VALUES, AND GEOMETRY WHERE PROSE WOULD BE AMBIGUOUS.

---

## GLOBAL / PAGE LEVEL

STACK AND DEPENDENCIES. REACT + VITE + TYPESCRIPT + TAILWINDCSS. ALL ANIMATIONS USE FRAMER-MOTION (MOTION, USESCROLL, USETRANSFORM, MOTIONVALUE) PLUS REACT'S USEREF, USESTATE, USEEFFECT. NO ROUTER-DRIVEN LOGIC, NO BACKEND, NO GLOBAL STATE.

FONTS. LOADED ONCE IN INDEX.HTML VIA GOOGLE FONTS: INTER TIGHT (WEIGHTS 300, 400, 500, 600, 700, 800, 900) AND INSTRUMENT SERIF (ITALIC AND ROMAN). INTER TIGHT IS THE ENTIRE UI AND DISPLAY SANS. INSTRUMENT SERIF IS RESERVED FOR THE FOUR SIGNATURE SERIF ACCENT WORDS — "YOUR" (HERO), "ELEGANCE" (HERO STICKER), "NEW" (SECTION 2 HEADER), "MATCH" (SECTION 3 TITLE) — PLUS THE BRACKETED NUMERALS "(01)…(06)" USED AS LABELS IN HERO AND SECTION 3, AND THE WATERMARK "(01)" IN THE BOTTOM-RIGHT OF HERO.

PAGE STRUCTURE. A SINGLE INDEX PAGE RENDERS THREE SECTIONS WITH NO WRAPPERS BETWEEN THEM: HERO (WARM CREAM), COLLECTION (TRUE BLACK, 4× VIEWPORT-TALL SCROLL STAGE), PERFECTMATCH (LIGHT GREY PAPER). SECTION 2 → SECTION 3 IS BRIDGED BY A TORN-PAPER GRAPHIC THAT BLEEDS UPWARD OVER THE BLACK.

BRAND COLOR (TEXT_COLOR). A MUTED WARM GREY, EXACT VALUE `#545454`, USED FOR ALMOST ALL BODY AND HEADLINE TEXT ON LIGHT BACKGROUNDS AND AS THE SOFT FILL BEHIND THE YELLOW-GREEN SERIF GLOW.

SIGNATURE SERIF GLOW TECHNIQUE. EVERY INSTRUMENT SERIF ACCENT WORD ("YOUR", "ELEGANCE", "NEW", "MATCH") USES THE EXACT SAME DUAL-LAYER CONSTRUCTION: AN ABSOLUTELY POSITIONED ARIA-HIDDEN SPAN BEHIND, WITH `color: #EAFE79`, `WebkitTextStrokeWidth` BETWEEN 10 AND 20PX (SIZED TO THE WORD), AND `WebkitTextStrokeColor: #EAFE79` — PRODUCING A SOFT FLUORESCENT YELLOW-GREEN HALO. ON TOP OF IT, A RELATIVELY POSITIONED SPAN RENDERS THE SAME WORD IN SOLID `#545454`. THE TWO LAYERS SHARE FONT-SIZE, LINE-HEIGHT AND LETTER-SPACING EXACTLY, SO THE FILL SITS CENTERED INSIDE THE GLOW.

SIGNATURE "TUBULAR CURL" ENTRANCE (USED ON EVERY SIGNATURE SERIF WORD). A MOTION.SPAN WITH `transformPerspective: 600`, `transformOrigin: "top center"`, ANIMATING FROM `{ rotateX: -110, scaleY: 0.15, scaleX: 0.7, opacity: 0 }` TO KEYFRAMED:

```
rotateX:  [-110, -70, -20,  5, -2, 0]
scaleY:   [0.15, 0.4,  0.8, 1.04, 0.98, 1]
scaleX:   [0.7,  0.85, 0.95, 1.02, 1, 1]
opacity:  [0,    0.4,  0.85, 1, 1, 1]
duration: 0.7, ease: [0.22, 1, 0.36, 1], times: [0, 0.2, 0.55, 0.75, 0.88, 1]
```

THE DELAY DIFFERS PER OCCURRENCE: 0.5 IN HERO ("YOUR"), 1.35 FOR "ELEGANCE", 0.5 INVIEW IN SECTION 2 HEADER ("NEW"), 0.5 INVIEW IN SECTION 3 TITLE ("MATCH"). IT READS AS A STICKER UNFURLING FORWARD OFF THE PAGE.

ASSET HOST. ALL IMAGERY IS FETCHED FROM `https://qclay.design/lovable/bags`, JOINED AS `${ASSET}/${file}`. NO ASSET IS BUNDLED LOCALLY.

---

## SECTION 1 — HERO

CONTAINER. A RELATIVE, FULL-VIEWPORT, OVERFLOW-HIDDEN DIV WITH `background: #EEEAE3` (WARM PARCHMENT CREAM) AND `fontFamily: 'Inter Tight'`. MIN-HEIGHT 100VH.

NAVBAR. A FIXED TOP BAR (`top: 0, left: 0, right: 0, zIndex: 50`), PADDING `20px 32px`, TRANSPARENT BACKGROUND, JUSTIFIED TO THE RIGHT WITH 32PX GAPS. THREE PLAIN TEXT LINKS — "CATALOG", "FAVORITES", "CART (0)" — INTER TIGHT 14 / 400 / `#545454`, WITH A 200MS `hover:opacity-60`. TO THEIR RIGHT, A BORDERLESS ICON BUTTON CONTAINING `burger.svg` (42×30) WITH `hover:opacity-70`. NO LOGO.

HEADING BLOCK. ABSOLUTELY POSITIONED AT `top: 32, left: 40, maxWidth: 500, zIndex: 10`. THREE LINES STACKED.

LINE 1: "BAGS CRAFTED" — INTER TIGHT, 87.999 / 500 / LINE-HEIGHT 80 / LETTER-SPACING -3.52 / `#545454`. ENTERS FROM `{ opacity:0, filter: blur(14px) }` TO CRISP OVER 0.8S EASEOUT, DELAY 0.1S.

LINE 2: "TO MOVE WITH" — SAME EXACT TYPE, DELAY 0.28S.

LINE 3 ROW: A FLEX ROW WITH `alignItems: baseline, gap: 12, marginTop: -2` CONTAINING THE SIGNATURE SERIF WORD "YOUR" THEN THE SANS WORD "STORY".

THE SERIF "YOUR" USES INSTRUMENT SERIF AT 94.969 / LINE-HEIGHT 93.413 / LETTER-SPACING -3.799 / WEIGHT 400, DUAL-LAYER GLOW WITH STROKE WIDTH 20.55. PLAYS THE TUBULAR-CURL ENTRANCE, DELAY 0.5S.

THE SANS "STORY" — INTER TIGHT 87.999 / 500 / 80 / -3.52 / `#545454` — ENTERS FROM `{ opacity:0, filter: blur(12px) }` OVER 0.7S EASEOUT, DELAY 0.78S.

WOMAN MODEL. `woman.png`, ABSOLUTE, BOTTOM-CENTERED: `bottom:0, left:0, right:0, marginLeft/right: auto, height: 100vh, width: auto, objectFit: contain, objectPosition: bottom center, zIndex: 6`. ENTERS FROM `{ opacity:0, y:80 }` OVER 1.1S EASE `[0.22,1,0.36,1]`, DELAY 0.2S — A SLOW RISE FROM BELOW.

STICKS (SMALL SVG FLOURISH). `sticks.svg`, ABSOLUTE, `top:24, left: calc(50% + 40px), zIndex:7, width:32`, TRANSFORMORIGIN `bottom center`. COMPOUND ENTRANCE:

```
opacity: 0→1   (0.3s, delay 0.85, easeOut)
scale:   [0, 1.4, 0.85, 1.15, 0.95, 1.05, 1]   (0.95s, delay 0.85, ease [0.34,1.56,0.64,1])
rotate:  [-180, -20, 25, -15, 10, -5, 0]       (same window)
```

THEN AN IDLE BOBBING LOOP `y: [0, -6, 0]` OVER 3.2S, DELAY 2S, INFINITE EASEINOUT.

SMILE STICKER. `smile.png`, ABSOLUTE AT `top: calc(55% - 60px), left: calc(50% - 260px), zIndex:7, 60×60`. POP-IN FROM `{ opacity:0, scale:0.4, rotate:-40 }` OVER 0.5S (DELAY 1.05, EASE `[0.34,1.56,0.64,1]`). THEN A PERPETUAL SUBTLE WOBBLE `rotate: [0, 10, -5, 0]`, 5S, DELAY 1.55, INFINITE EASEINOUT.

SNAP POLAROID (CENTERED, IN FRONT OF MODEL). `snap.png`, ABSOLUTE `top: 35%, left: calc(50% - 5px), zIndex:8, width: 200, transformPerspective: 500, transformOrigin: top center`. THE "CARD FLIPS DOWN" ENTRANCE:

```
rotateX: [-100, -60, -15, 4, -1, 0]
scaleY:  [0.1, 0.35, 0.8, 1.03, 0.99, 1]
opacity: [0, 0.35, 0.85, 1, 1, 1]
duration 0.65, delay 1.1, ease [0.22,1,0.36,1], times [0, 0.2, 0.55, 0.78, 0.9, 1]
```

WITH A PERMANENT GENTLE SWAY `rotate: [-6, -4, -7, -6]`, 7S, DELAY 1.8, INFINITE EASEINOUT.

CARD (GIFT CARD TO THE LEFT OF MODEL). `card.png`, ABSOLUTE `bottom: 22%, left: calc(50% - 170px), zIndex:9, width: 150, transformPerspective: 600, transformOrigin: top center`. SAME FLIP-DOWN ENTRANCE:

```
rotateX: [-90, -50, -10, 3, 0]
scaleY:  [0.12, 0.5, 0.9, 1.02, 1]
opacity: [0, 0.4, 0.9, 1, 1]
duration 0.6, delay 1.2, ease [0.22,1,0.36,1], times [0, 0.25, 0.65, 0.85, 1]
```

FINAL ROTATION LOCKS AT `-3deg`.

"ELEGANCE" STICKER. ABSOLUTE AT `bottom: calc(16% + 40px), left: calc(50% - 100px), zIndex:10`, STATICALLY ROTATED BY `6.206deg`. INSIDE, DUAL-LAYER INSTRUMENT SERIF ITALIC WORD "ELEGANCE" AT 32 / LINE-HEIGHT 31 / LETTER-SPACING -1.2 / WEIGHT 400, STROKE WIDTH 10.27, `whiteSpace: nowrap`. PLAYS THE TUBULAR-CURL ENTRANCE, DELAY 1.35S.

TEXT-HEART STICKER. `text-heart.png`, ABSOLUTE `top: 57%, left: calc(50% + 150px), zIndex:7, width: 110`. ENTERS FROM `{ opacity:0, scale:0.5, rotate:18 }` TO `{ opacity:1, scale:1, rotate:4 }` OVER 0.5S (DELAY 1.3, EASE `[0.34,1.56,0.64,1]`).

ARROW. `arrow.svg`, ABSOLUTE `top: 44%, left: calc(50% + 250px), zIndex:7, width: 90`. SETTLES FROM `{ opacity:0, x:24, rotate:20 }` TO `{ opacity:0.8, rotate:0 }` OVER 0.55S (DELAY 1.4, EASEOUT). THEN A PERPETUAL NUDGING LOOP `x: [0, -5, 0]` OVER 2.2S, DELAY 2S, INFINITE EASEINOUT.

LOVE BAG LABEL (RIGHT COLUMN). ABSOLUTE `top: 48%, right: 32, zIndex:10, maxWidth: 210, translateY(-50%)`. ENTERS FROM `{ opacity:0, x:24, filter: blur(6px) }` OVER 0.6S (DELAY 0.4, EASEOUT). HEADER ROW: "LOVE BAG" IN INTER TIGHT 11 / 600 / LETTER-SPACING 2.5 / `#545454`, 6PX GAP, THEN `heart.svg` 13×13. BELOW (MARGIN-TOP 10), A PARAGRAPH IN INTER TIGHT 12 / 400 / LINE-HEIGHT 1.7 / `#545454`, JUSTIFIED: "CRAFTED WITH CARE AND DESIGNED TO FOLLOW YOU FROM DAY TO NIGHT, IT HOLDS NOT ONLY YOUR ESSENTIALS, BUT YOUR STORIES".

LARGE "(01)" PAGE NUMERAL. ABSOLUTE `bottom: 20, right: 32, zIndex:4`. INSTRUMENT SERIF, 87.999 / 400 / LINE-HEIGHT 80 / LETTER-SPACING -3.52, COLOR `rgba(84,84,84,0.18)` SO IT READS LIKE A WATERMARK. ENTERS FROM `{ opacity:0, y:30 }` OVER 0.8S (DELAY 0.3, EASEOUT).

BOTTOM-LEFT POLAROID THUMBNAILS. ABSOLUTE `bottom: 24, left: 32, zIndex:10`. FLEX ROW, ITEMS END-ALIGNED, 20PX GAP. TWO CARDS BUILT IDENTICALLY, EACH IN A PRE-ROTATED WRAPPER:

- TAG (02): BAG-1.PNG, DELAY 1.65, ROTATE -2°

- TAG (03): BAG-2.PNG, DELAY 1.8, ROTATE +1.5°

EACH ENTRY ENTERS FROM `{ opacity:0, y:16 }` OVER 0.5S EASEOUT. INSIDE THE WRAPPER: A 170×210 DIV WITH `filter: drop-shadow(2px 6px 14px rgba(0,0,0,0.10))` AND `transition: all 0.25s ease`. ON MOUSEENTER THE INNER DIV SHIFTS TO `translateY(-4px)`; ON LEAVE IT RETURNS. THE POLAROID FRAME IS `snap-bare.png` FILLING THE BOX (`inset:0, objectFit: contain, zIndex:2`). THE BAG IMAGE SITS IN THE PHOTO APERTURE: `top: 14%, left: 14%, width: 72%, height: 62%, objectFit: contain, zIndex:1`. ABOVE THE FRAME, A SMALL INSTRUMENT SERIF TAG — "(02)" OR "(03)" — AT `top: -32, right: 14, zIndex:3`, 18 / 400 / `rgba(84,84,84,0.7)`, NON-INTERACTIVE.

---

## SECTION 2 — COLLECTION (ENVELOPE REVEAL SCROLL STAGE)

CONTAINER. A `` WITH `background: #111111` (TRUE BLACK), `position: relative`, `height: 400vh`, `fontFamily: 'Inter Tight'`. A `useScroll` IS ATTACHED WITH `target: containerRef, offset: ["start start", "end end"]`. INSIDE, A STICKY DIV IS `top: 0, height: 100vh, overflow: hidden`, FLEX COLUMN, ITEMS + CONTENT CENTERED — THE ENTIRE ENVELOPE CHOREOGRAPHY HAPPENS HERE WHILE THE PAGE IS SCROLLED THROUGH 4 VIEWPORTS.

**HEADER (TOP OF STICKY STAGE).** ABSOLUTE `top: 60, left/right: 0, zIndex: 20, textAlign: center, flex column, items center`. ENTERS ONCE FROM `{ opacity:0, filter: blur(12px), y:20 }` OVER 0.8S EASEOUT (`viewport: { once: true, margin: "-60px" }`).

TITLE ROW: A FLEX ROW BASELINE-ALIGNED, 14PX GAP. "OUR" IN INTER TIGHT 72 / 500 / LINE-HEIGHT 1 / LETTER-SPACING -3 / `#FFFFFF`. BESIDE IT, THE SIGNATURE SERIF WORD "NEW" WITH THE DUAL-LAYER GLOW (STROKE WIDTH 16, ITALIC INSTRUMENT SERIF 78 / 400 / 1 / -3, FILL COLOR `#545454`). THE "NEW" PLAYS THE TUBULAR-CURL ENTRANCE ON INVIEW, DELAY 0.5S.

BELOW, A CENTERED "COLLECTION" WORD IN INTER TIGHT 72 / 500 / 1 / -3 / `#FFFFFF`, MARGINTOP 4.

BELOW THAT (MARGINTOP 14), A PARAGRAPH MAXWIDTH 320, CENTERED, INTER TIGHT 13 / 400 / LINE-HEIGHT 1.6 / `rgba(255,255,255,0.45)`: "CRAFTED WITH CARE AND DESIGNED TO FOLLOW YOU FROM DAY TO NIGHT, IT HOLDS NOT ONLY YOUR ESSENTIALS, BUT YOUR STORIES". ENTERS ONCE FROM `{ opacity:0, filter: blur(8px), y:10 }` OVER 0.7S EASEOUT, DELAY 0.3.

THERE IS NO DEBUG OVERLAY ANYWHERE IN THIS SECTION.

**ENVELOPE ASSETS.**

- BODY: `envelop.webp` — FLAT RECTANGULAR BACK PANEL.

- TOPOPEN: `open-top.webp` — TRIANGULAR FRONT FLAP (ASSET IS UPSIDE-DOWN; BASE ROTATION IS 180°).

- LEFT: `tapa-left.webp` — LEFT SIDE FLAP, FULL ENVELOPE HEIGHT.

- RIGHT: `tapa-right.webp` — RIGHT SIDE FLAP, FULL ENVELOPE HEIGHT.

- BOTTOM: `tapa-bajo.webp` — BOTTOM FLAP.

**ENVELOPE GEOMETRY.** `ENV_W = 480`, `ENV_H = 340`. TRIANGULAR FLAP: `FLAP_W = 480`, `FLAP_H = 200`.

**PHOTOS.** SIX CARDS FROM `[photo-1…photo-6].png` NAMED `["Terra", "Love Bag", "Amélie", "Belle", "Mira", "Adele"]`. Z-STACK ACROSS THE ROW IS `[2, 4, 6, 6, 4, 2]` SO THE MIDDLE TWO PHOTOS READ ON TOP, FANNING DOWN TOWARD THE EDGES.

**MID-STAGE PEEK POSITIONS** (JUST ESCAPING THE V OPENING, `[x, y, rotateDeg]`):

```
[-90, -30, -12], [-40, -60, -6], [-15, -78, -2],
[ 20, -76,   3], [ 55, -58,  7], [ 95, -28, 12]
```

**FINAL ROW POSITIONS** (SINGLE HORIZONTAL ROW ACROSS THE VIEWPORT):

```
[-625, 0, 0], [-375, 0, 0], [-125, 0, 0],
[ 125, 0, 0], [ 375, 0, 0], [ 625, 0, 0]
```

**SCROLL-MAPPED REACTIVE VALUES.**

```
envelopeY  = useTransform(scrollYProgress, [0, 0.18, 0.45, 0.7, 1], [145, 20, 90, 600, 900])
envelopeIn = useTransform(scrollYProgress, [0.6, 0.75], [1, 0])
flapRotate = useTransform(scrollYProgress, [0.20, 0.45], [180, 0])
```

**REACTIVE BOOLEANS (SET WITH .on("change") LISTENERS).**

- `cardsOut = scrollYProgress >= 0.52` — ONCE TRUE, THE PHOTO WRAPPER JUMPS FROM `zIndex: 2` (UNDER THE FLAPS) TO `zIndex: 999` (ABOVE EVERYTHING).

- `cardsVisible = scrollYProgress >= 0.30` — GATES THE PHOTOS WITH `display: 'block'` SO THEY NEVER FLASH THROUGH THE CLOSED ENVELOPE.

- `photosAboveFlap = envelopeY > 85` — SECONDARY TRIGGER THAT ALSO LIFTS PHOTOS TO `zIndex: 999`.

THERE IS NO `envelopeGone` STATE. PHOTOS ARE NEVER HIDDEN BY THE WRAPPER (NO `visibility: hidden`, NO `pointerEvents: 'none'` ON THE WRAPPER). AFTER SCROLLYPROGRESS PASSES 0.67 THE PHOTOS REMAIN FULLY VISIBLE — THE ONLY THING FADING IS EACH ENVELOPE VISUAL VIA THE `envelopeIn` OPACITY TRANSFORM. THIS IS THE EXPLICIT FIX TO THE PRIOR BUG WHERE THE WRAPPER USED A `visibility: hidden` TOGGLE THAT MADE THE PHOTOS DISAPPEAR PAST 0.67.

**ENVELOPE STAGE ELEMENT.** ABSOLUTE `top: 58%, left: 50%, width: 480, height: 340, marginLeft: -240, marginTop: -170, overflow: visible`, WITH `y: envelopeY` (THE ENTIRE ENVELOPE DRIFTS: DROPS IN 145→20, RISES SLIGHTLY BACK TO 90, THEN CONTINUES FALLING 600→900 AS THE CARDS TAKE OVER).

CHILDREN, BY ZINDEX:

- Z:1 — BODY (`envelop.webp`), 480×340, TOP-LEFT, OPACITY BOUND TO `envelopeIn`, NON-INTERACTIVE.

- Z:3 — LEFT SIDE FLAP, TOP:0, LEFT:0, HEIGHT: ENV_H, WIDTH: AUTO, OPACITY `envelopeIn`.

- Z:3 — RIGHT SIDE FLAP, TOP:0, RIGHT:0, HEIGHT: ENV_H, WIDTH: AUTO, OPACITY `envelopeIn`.

- Z:4 — BOTTOM FLAP, WIDTH: ENV_W, BOTTOM:0, LEFT:0, TRANSFORMORIGIN `bottom center`, TRANSFORMPERSPECTIVE 1400, ROTATEX 0, OPACITY `envelopeIn`.

- Z:8 — TRIANGULAR TOP FLAP CONTAINER: `top: -FLAP_H + 5, left:0, width: 480, height: 200, transformOrigin: "bottom center", transformPerspective: 1400, rotateX: flapRotate, opacity: envelopeIn`. INSIDE IS `open-top.webp` FILLING THE BOX. ASSET IS UPSIDE-DOWN SO CLOSED POSE IS ROTATEX 180°; THE SCROLL ANIMATION 180→0 BETWEEN SCROLL 0.20 AND 0.45 FOLDS THE TRIANGLE UPWARD TO STAND ABOVE THE ENVELOPE.

**PHOTO WRAPPER (INSIDE THE ENVELOPE STAGE SO IT DRIFTS WITH IT, THEN COUNTER-TRANSLATED TO STAY IN VIEWPORT).** ABSOLUTELY CENTERED (`top: 50%, left: 50%, width: 0, height: 0`), `pointerEvents: none`, `display: cardsVisible ? 'block' : 'none'`, `opacity: 1`, `overflow: visible`, `zIndex: photosAboveFlap || cardsOut ? 999 : 2`, AND `y: useTransform(envelopeY, v => -v)` SO AS THE ENVELOPE FALLS THE PHOTO ORIGIN STAYS LOCKED TO VIEWPORT CENTER.

**PER-PHOTO MOTION.** FOR EACH CARD INDEX `i`, TWO SCROLL WINDOWS:

```
stageA = [0.30 + off[i], 0.50 + off[i]]   // peek out of the V
stageB = [0.55 + off[i], 0.78 + off[i]]   // drop & fan into the row
off    = [0, 0.015, 0.03, 0.045, 0.06, 0.075]
```

FOUR SCROLL-MAPPED VALUES:

```
x = useTransform(scrollY, [a0,a1,b0,b1], [0,    PEEK[i].x, PEEK[i].x, END[i].x])
y = useTransform(scrollY, [a0,a1,b0,b1], [60,   PEEK[i].y, PEEK[i].y, END[i].y])
r = useTransform(scrollY, [a0,a1,b0,b1], [0,    PEEK[i].rot, PEEK[i].rot, END[i].rot])
s = useTransform(scrollY, [a0,a1],       [0.5,  1])
```

EACH CARD DIV IS ABSOLUTE AT `left: -90, top: -90, width: 180`, `zIndex: CARD_Z[i]`, `pointerEvents: auto`, `cursor: pointer`, `opacity: 1`, `visibility: visible`, WITH `x, y, rotate, scale` BOUND TO THOSE MOTION VALUES. INSIDE, THE PHOTO IMAGE FILLS THE DIV (`width: 100%, height: auto, objectFit: contain, opacity: 1, visibility: visible, pointerEvents: none`).

**PHOTO HOVER.** EACH CARD HAS `whileHover={{ rotate: [0, -3, 3, -2, 2, 0] }}` OVER 0.5S EASEINOUT — A FRIENDLY LITTLE JIGGLE.

**CAPTION UNDER EACH PHOTO (ONLY AFTER `cardsOut` IS TRUE).** ABSOLUTE AT `top: calc(100% + 18px)`, CENTERED. NAME LINE IN INTER TIGHT 18 / 500 / -0.3 / 1.2 / `#FFFFFF`, THEN "€129.90" IN INTER TIGHT 14 / 400 / `rgba(255,255,255,0.7)`, MARGINTOP 4. ANIMATES IN WITH `{ opacity: cardsOut ? 1 : 0, y: cardsOut ? 0 : 8 }`, 0.5S EASEOUT, WITH PER-CARD DELAY `0.1 + i  0.05` SO LABELS STAIRCASE IN LEFT TO RIGHT.

**CHOREOGRAPHY SUMMARY AS THE USER SCROLLS.** 0.00 → ENVELOPE SITS CENTERED, CLOSED, NO PHOTOS VISIBLE. ~0.20 → TRIANGULAR FLAP BEGINS FOLDING UPWARD. ~0.30 → PHOTOS APPEAR BEHIND THE BODY AND START PEEKING OUT OF THE V. 0.45 → FLAP FULLY OPEN. 0.52 → PHOTOS JUMP ABOVE ALL ENVELOPE LAYERS. 0.55–0.78 → PHOTOS TRANSLATE FROM PEEK TO THE FINAL HORIZONTAL ROW AND CAPTIONS STAGGER IN. 0.60–0.75 → EVERY ENVELOPE VISUAL FADES TO 0 VIA `envelopeIn`. 0.70 → 1.00 → ENVELOPE CONTINUES DRIFTING DOWNWARD AND OFF THE STAGE; PHOTOS REMAIN FULL-OPACITY IN THEIR FINAL ROW ALL THE WAY TO THE SECTION'S END. THERE IS NO SCROLL POINT AT WHICH PHOTOS DISAPPEAR.

---

**SECTION 3 — PERFECTMATCH (PAPER-BRIDGE ORBIT)**

**CONTAINER.** A `` WITH `background: #f7f7f7` (LIGHT WARM PAPER), `minHeight: 100vh`, `paddingBottom: 80`, `fontFamily: 'Inter Tight'`, `overflow: visible`.

**TORN PAPER TOP EDGE.** `paper.png` ABSOLUTELY POSITIONED AT `top: -188` (RAISED 8PX FROM THE PREVIOUS -180), `left:0, right:0, width:100%, height:auto, objectFit: cover, objectPosition: top center, zIndex: 50`, NON-INTERACTIVE. IT BLEEDS UPWARD INTO THE BLACK OF SECTION 2 TO FORM THE TORN-PAPER HANDOFF.

**TOP BADGE TEXT (TWO LINES).** CENTERED, `paddingTop: 120, zIndex: 60`. ENTERS FROM `{ opacity:0, filter: blur(8px), y:12 }` OVER 0.6S EASEOUT (ONCE, VIEWPORT MARGIN -60). TWO LINES: "DESIGNED WITH PURPOSE." AND "WORN WITH CONFIDENCE." EACH IS INTER TIGHT 11 / 500 / LETTER-SPACING 2.5 / LINE-HEIGHT 1.8 / `rgba(84,84,84,0.55)`.

**ORBIT STAGE CONTAINER.** RELATIVE DIV, `width:100%, height:640, zIndex:60, marginTop:20`.

**CENTER TITLE.** ABSOLUTELY COVERING THE ORBIT (`inset:0`), FLEX CENTERED, `zIndex:10, pointerEvents: none`. THE WRAPPING MOTION.DIV ENTERS FROM `{ opacity:0, scale:0.9, filter: blur(10px) }` OVER 0.8S EASEOUT, DELAY 0.2S. TWO STACKED LINES:

- "FIND YOUR" — INTER TIGHT 64 / 700 / 1 / -2 / `#545454`, BLOCK.

- A ROW CONTAINING "PERFECT " (INTER TIGHT 64 / 700 / -2 / `#545454`) FOLLOWED BY THE SIGNATURE SERIF WORD "MATCH" (DUAL-LAYER GLOW, INSTRUMENT SERIF 64 / 400 / 1 / -2 / FILL `#545454`, STROKE WIDTH 14, COLOR `#EAFE79`). THE "MATCH" WORD PLAYS THE TUBULAR-CURL ENTRANCE ON INVIEW, DELAY 0.5S.

**ORBIT CENTER.** A 0×0 ABSOLUTE ELEMENT AT THE GEOMETRIC CENTER (`top: 50%, left: 50%`). SIX BAG ELEMENTS ROTATE AROUND IT IN REAL TIME.

**BAG DATASET.**

```
[
  { img: "baggy-1.png", baseAngle: 270, label: "(01)" },
  { img: "baggy-2.png", baseAngle: 330, label: "(02)" },
  { img: "baggy-3.png", baseAngle:  30, label: "(03)" },
  { img: "baggy-4.png", baseAngle: 150, label: "(04)" },
  { img: "baggy-5.png", baseAngle: 210, label: "(05)" },
  { img: "baggy-6.png", baseAngle:  90, label: "(06)" },
]
ORBIT_RADIUS = 260
```

**CONTINUOUS ROTATION ENGINE.** A `useState` NAMED `angle` IS INCREMENTED BY `0.12` EVERY REQUESTANIMATIONFRAME FRAME (≈7.2°/SEC — SLOW, CALM). A `useState paused` FLAG FREEZES THE INCREMENT WHEN TRUE. THE RAF LOOP IS SET UP IN `useEffect`, CLEANED UP ON UNMOUNT, AND RE-BOUND WHEN `paused` FLIPS.

**PER-BAG POSITIONING.** FOR EACH BAG AT INDEX `i`:

```
rad   = ((angle + bag.baseAngle) * π) / 180
x     = cos(rad) * 260
y     = sin(rad) * 260
labelDist = 80 (BAG_HALF) + 8 (LABEL_GAP) = 88
labelX = cos(rad) * 88
labelY = sin(rad) * 88
```

THE CONTAINER DIV IS ABSOLUTELY POSITIONED AND TRANSLATED TO `(x, y)` THEN `-50%, -50%` TO CENTER THE 160×160 BAG ON THE ORBIT. ZINDEX 6.

**BAG ENTRANCE ANIMATION.** EACH BAG IS WRAPPED IN A MOTION.DIV THAT ENTERS FROM `{ scale:0, opacity:0 }` TO `{ scale:1, opacity:1 }` (WHILEINVIEW, ONCE, VIEWPORT MARGIN -80) OVER 0.5S WITH OVERSHOOT EASE `[0.34,1.56,0.64,1]` AND PER-BAG STAGGER `i  0.08`S.

**HOVER BEHAVIOR ON EACH BAG.** `onMouseEnter` SETS `paused = true` (THE ENTIRE ORBIT FREEZES), `onMouseLeave` SETS IT BACK TO FALSE. `whileHover` ENLARGES TO `scale: 1.12` AND ADDS `filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15))` — A SOFT LIFT. `cursor: pointer`, 160×160, POSITION RELATIVE.

**BAG IMAGE.** 160×160 IMAGE RENDERED WITH `objectFit: contain`, BLOCK DISPLAY.

**PER-BAG RADIAL LABEL.** A `` PLACED AT THE ORBIT ELEMENT'S CENTER THEN TRANSLATED BY `(labelX, labelY)`, SO THE BRACKETED NUMERAL "(01)…(06)" FLOATS EXACTLY 8PX OUTSIDE THE BAG ALONG THE RADIAL LINE AWAY FROM CENTER. INSTRUMENT SERIF 16 / 400 / `rgba(84,84,84,0.65)` / LETTER-SPACING -0.5, `whiteSpace: nowrap`, NON-INTERACTIVE.

**BOTTOM BLOCK (EYE + MANIFESTO).** BELOW THE ORBIT, A FLEX ROW WITH `alignItems: flex-start`, `gap: 16`, `maxWidth: 380`, `margin: 50px auto 0`, `padding: 0 40px`, `zIndex: 5`.

THE EYE IMAGE (`eye.png`) AT 32×32, `objectFit: contain`, `flexShrink: 0`, `marginTop: 12` (THE "MOVE DOWN BY 10PX" TWEAK — WAS 2, NOW 12). ENTERS FROM `{ opacity:0, scale:0.6, rotate:-20 }` TO `{ opacity:0.7, scale:1, rotate:0 }` OVER 0.5S OVERSHOOT EASE `[0.34,1.56,0.64,1]`, ONCE, VIEWPORT MARGIN -60.

THE PARAGRAPH: INTER TIGHT 13 / 400 / LINE-HEIGHT 1.75 / `rgba(84,84,84,0.75)` / TEXTALIGN JUSTIFY / `marginTop: 10` (MATCHING "MOVE DOWN BY 10PX" TWEAK). TEXT: "WE BELIEVE A BAG IS MORE THAN AN ACCESSORY — IT'S A COMPANION TO YOUR EVERY MOMENT. FROM THE DAILY RUSH TO QUIET EVENINGS, OUR PIECES ARE CRAFTED TO BE EFFORTLESSLY ELEGANT, ENDURING, AND DISTINCTIVELY YOURS." ENTERS FROM `{ opacity:0, filter: blur(8px), x:16 }` OVER 0.6S EASEOUT, DELAY 0.2S, ONCE, VIEWPORT MARGIN -60.

---

**ROUTING / COMPOSITION**

`src/pages/Index.tsx` SIMPLY RENDERS ``, ``, `` IN A FRAGMENT, IN THAT ORDER — NO WRAPPER, NO SPACING ELEMENT. EVERY VISUAL RHYTHM IS HANDLED BY EACH SECTION'S INTERNAL LAYOUT. NO GLOBAL BACKGROUND BLEED BEYOND THE TORN-PAPER BRIDGE.

**VISUAL JOURNEY.** WARM CREAM AND EDITORIAL STICKER COLLAGE (HERO) → DEEP BLACK SCROLL-DRIVEN ENVELOPE REVEAL THAT DELIVERS SIX PRODUCT PHOTOS INTO A HORIZONTAL LINEUP, PHOTOS ALWAYS VISIBLE AFTER THEY APPEAR (COLLECTION) → TORN-PAPER TRANSITION INTO A SOFT GREY ORBIT FIELD WHERE SIX MATCHING BAGS ROTATE SLOWLY AROUND THE HEADLINE "FIND YOUR PERFECT MATCH", PAUSING ON HOVER WITH A 1.12 LIFT (PERFECTMATCH). THE YELLOW-GREEN INSTRUMENT SERIF ACCENT WORDS ("YOUR", "ELEGANCE", "NEW", "MATCH") TIE THE THREE SECTIONS TOGETHER AS THE BRAND'S SIGNATURE VISUAL GESTURE.

SENT THE FULL UPDATED REPRODUCTION PROMPT FOR SECTIONS 1, 2, AND 3 — EVERY ASSET URL, COLOR, FONT SIZE, LAYER ORDER, FRAMER-MOTION CONFIG, SCROLL-MAPPED VALUE, REACTIVE FLAG, GEOMETRY CONSTANT, IDLE LOOP, AND HOVER MICRO-INTERACTION — WITH THE DEBUG PANEL REMOVED, THE SECTION 2 PHOTO-DISAPPEARANCE BUG FIXED (NO `envelopeGone`, NO `visibility: hidden` ON THE WRAPPER, ONLY ENVELOPE VISUALS FADE VIA `envelopeIn`), THE PAPER RAISED BY 8PX, AND THE EYE + PARAGRAPH NUDGED DOWN BY 10PX.