How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Section: min-height: 900px, ground #0B0C0D, 120px top padding, 0 bottom. Content row inside a 1440px max-width container with 32px side padding, two equal columns 80px apart.
- Left: headline in Bebas Neue 64px, line-height 0.9, letter-spacing -0.02em, ice blue #58A6FF.
- Right: the list, items 32px apart. Each item: a 32px line icon and the label (Outfit 24px) 10px apart; under it, 12px lower, the description (Outfit 300, 16px, line-height 1.1, max 624px) and a 1px progress track (rgba(130,130,130,0.35), max 624px) whose fill (#F4F6F2) scales from the left.
- Active item: label weight 600 at full opacity; inactive items weight 300 at 72% opacity (both change over 240ms). Only the active item shows its description and bar.
- Timer: a requestAnimationFrame loop sets fill.style.transform = scaleX(elapsed / 9000). At 1 it moves to the next item (looping) and resets every fill.
- Pause: while an item is hovered, or while a finger is down on it. A hold counter makes overlapping holds safe, and a held fill dims to 55% opacity. All holds are released on touchend, touchcancel and when the tab is hidden. The timer also stops advancing while the section is outside 10% to 90% of the viewport.
- Backgrounds: four full-bleed cover photos stacked at opacity: 0; the one matching the active item goes to opacity: 1 over 700ms ease. A vertical veil keeps the text readable: linear-gradient(#0B0C0D 0 28%, rgba(11,12,13,.72) 44%, rgba(11,12,13,.18) 68%, transparent 82%, rgba(11,12,13,.55) 92%, #0B0C0D 100%).
- Headline and list fade in (1100ms cubic-bezier(0.22, 1, 0.36, 1)) when they enter view.
- Under 992px: single column, 48px gap (36px on phones). The full-bleed photos are replaced by a 360px band (300px on phones) between the headline and the list. The band bleeds past the side padding and has a 90px top veil and a 180px bottom veil. Headline 46px (40px on phones), body 14px on phones, section padding 90px top and 56px bottom on phones.
- Fallbacks: reduced motion: no timer, items still switch on click. Without JavaScript the first item is shown open and everything is visible.