Orbiting cards poster

## Goal

Design a square motion poster for Northwind Studio, a motion and brand design studio. The headline is "Make things move" with the handwritten accent word "together". Keep it bold and playful.

Use the style, layout and motion rules below exactly. Replace the sample labels with ones that fit the goal, keeping the same number of cards and similar text lengths.

## Style

Keep this exactly: it is what makes the design look the way it does.
- A square poster stage, centered on a black page (#000), sized `min(100vw, 100svh)` on both sides. Size everything inside it from that one stage size (store it in a CSS variable, e.g. `--s`), so the whole poster scales as one piece. The stage background is a soft radial glow: #16121F at the center fading to black by 70%.
- Font: system-ui. The headline is three words on three lines, uppercase, weight 900, font size 15.5% of the stage, line-height 0.86, letter-spacing -0.045em, white, centered in the stage.
- The accent word is in a handwritten cursive system font ("Segoe Script", "Brush Script MT", "Snell Roundhand", cursive), bold, 7.5% of the stage, color #F5D0FE, rotated -9deg, with a soft dark text shadow. It sits over the lower right of the headline, starting just right of center and overlapping the last line.
- Two small labels: the brand name centered at the top and a short tagline centered at the bottom, each 6% of the stage from its edge, 1.45% of the stage (at least 11px), weight 700, uppercase, 0.14em letter spacing.
- Five cards, each 22% of the stage wide and 27% tall, with 2.2% corner radius, a deep soft drop shadow, and a glossy white sheen in the top-left corner (a 135deg gradient from 22% white to transparent at 40%). Each card is abstract CSS art in its own color:
  1. Lavender (#C7C4FF to #8F86F0) with a glossy deep-violet ring in the middle.
  2. Dark plum (radial #4A0B3E to #12030F) with a glowing magenta (#FF4FD8) light bar just below center.
  3. Dark teal (#1F5C55 to #0A1F1D) with a faint white grid and a soft mint glow in the top right.
  4. Coral to crimson (#FF6B57 to #C81E3A) with a thick white arc rising from the bottom left.
  5. Amber (#FFD27A to #F08A24) with a glowing cream blob.

## Layout

The page is only the stage. Inside it, from back to front: the glow background; a 3D scene containing the headline and the five cards; the accent word; the two labels. Give the scene `perspective` of 1.6× the stage size (perspective origin 50% 45%) and `transform-style: preserve-3d`. The headline is a flat layer at z = 0 in the middle of the scene; the cards move around it in 3D, so they pass **in front of and behind the headline letters**. The accent word sits in the same 3D scene at z = +32% of the stage, so it always stays in front of every card.

## Motion

Write it with CSS transitions plus a small vanilla script driven by requestAnimationFrame; no animation libraries.
- **Orbit:** the five cards sit evenly spaced on a flat ellipse around the headline. For card i (0–4) and orbit phase p, the angle is a = (i + p + 0.5) / 5 × 360°, where a = 0 is the front. Each frame, place the card at x = sin(a) × 36% of the stage, z = cos(a) × 26% of the stage, y = cos(a) × 9% of the stage (front cards lower, back cards higher), plus a gentle float of ±0.8% of the stage (a sine wave over about 5.6 seconds, offset per card). Rotate each card rotateY(−sin(a) × 28deg), then rotateZ by its own resting tilt: −10, 8, −5, 12 and −7 degrees. Because of the +0.5, at rest two cards flank the front and none covers the very center.
- **Swing and hold:** the orbit moves one slot at a time. Every 1600ms the phase advances by exactly 1, easing over 1100ms with easeInOutCubic, then holds still for 500ms. After 5 steps (8 seconds) every card is back in its starting slot, so the loop is seamless.
- **Depth:** never fake the depth with z-index. Let the browser's 3D sorting put cards behind or in front of the headline from their real z position.
- **Intro:** the headline lines rise into view one by one (each line clips its text and slides it up from 105% over 900ms with cubic-bezier(0.22, 1, 0.36, 1), 110ms apart). The accent word fades in and scales from 0.6 to 1 over 700ms, starting at 700ms. The orbit starts 900ms after load; just before that the cards fly in from the center, each starting 90ms after the previous one, growing from 0.6 scale and fading in over 800ms with a cubic ease-out.
- **Pointer parallax:** on devices with a fine pointer, the whole 3D scene leans toward the cursor, up to 10deg rotateY and 8deg rotateX, easing over 600ms, and returns flat when the cursor leaves the stage.
- **Reduced motion:** with prefers-reduced-motion: reduce, show one still frame: headline and accent fully visible with no intro, and the cards placed at orbit phase 0 with no orbit, float or parallax.

## Sample content

- Brand label "Northwind Studio". Tagline "Motion & brand design · 2026".
- Headline lines "Make", "Things", "Move". Accent word "together".
- The cards are decorative: give them `aria-hidden="true"`, and give the stage an aria-label describing the poster.

## Images

This design uses no photos: every card is CSS gradient art. Do not add images or external files.

## Output

A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag, with no libraries, frameworks, web fonts or external files. It must look right at 1440×900 and at 390px wide (the square stage then fills the width), with semantic HTML.