@property --c1 { syntax: "<color>"; inherits: true; initial-value: #b45ff8; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #6b32f0; }
:root {
  --ink: #1b1b1f; --muted: #6f6e72; --page: #e2e2e3;
  --ease: cubic-bezier(.65, 0, .25, 1);
  --font: "Avenir Next", "Avenir", "Century Gothic", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { color-scheme: light; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: radial-gradient(90% 70% at 50% 40%, #ececed, var(--page)); color: var(--ink);
  font: 500 15px/1.3 var(--font); -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid #5723ec; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; flex: 1; container-type: inline-size; display: grid; justify-items: center; align-content: center; padding: 24px 16px; }

/* ---------- card: everything is placed in 710 x 482 design units ---------- */
.card {
  --u: calc(min(100cqw, 1080px) / 710);
  position: relative; width: calc(var(--u) * 710); height: calc(var(--u) * 482);
  border-radius: calc(var(--u) * 40); isolation: isolate;
  background: linear-gradient(180deg, #fff 55%, #f4f4f5);
  box-shadow: 0 calc(var(--u)*40) calc(var(--u)*70) calc(var(--u)*-34) rgba(30, 20, 50, .28), 0 1px 0 #fff inset;
  transition: --c1 1.2s var(--ease), --c2 1.2s var(--ease);
}
@media (min-height: 400px) { .card { --u: calc(min(100cqw, 1080px, (100svh - 190px) * 1.473) / 710); } }
.card * { position: absolute; }
.card br { position: static; }
svg { overflow: visible; }

/* BACKGROUND = one big rounded pentagon that turns about the same hidden centre as the objects.
   The card clips it, so you only ever see part of it: that is why the visible blob keeps changing
   outline while it rotates 144deg per theme. A pentagon looks identical every 72deg, so each
   theme rests on the same silhouette. Sway = tiny idle wobble so it is never still. */
.bclip { left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; pointer-events: none; }
.bclip svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
#bsq { transform-origin: 104px 128px; will-change: transform; transition: transform 1.25s cubic-bezier(.6, 0, .2, 1); }
.sway { transform-origin: 104px 128px; animation: sway 5.5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.glow { left: calc(var(--u)*200); top: calc(var(--u)*60); width: calc(var(--u)*330); height: calc(var(--u)*330); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 16%, transparent), transparent); }
.bshade { left: calc(var(--u)*10); top: calc(var(--u)*330); width: calc(var(--u)*330); height: calc(var(--u)*120);
  background: radial-gradient(closest-side, rgba(40, 30, 60, .09), transparent); }

.logo { left: calc(var(--u)*78); top: calc(var(--u)*48); width: calc(var(--u)*13); }
.smile { left: calc(var(--u)*634); top: calc(var(--u)*39); width: calc(var(--u)*32); }

/* headline strip: old text slides out left while the new one follows it in */
.hclip { left: 0; top: calc(var(--u)*86); width: calc(var(--u)*236); height: calc(var(--u)*130); overflow: hidden;
  -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
.ht { left: calc(var(--u)*62); top: 0; margin: 0; color: #fff; font-weight: 700; white-space: nowrap;
  font-size: calc(var(--u)*55); line-height: .96; letter-spacing: -.01em;
  transform: translateX(var(--d)); visibility: hidden; will-change: transform; }
.ht.cur, .ht.old { visibility: visible; transition: transform 1.15s var(--ease), opacity .35s ease; }
.ht.cur { transform: none; opacity: 1; }
/* old words slide out left, then fade so no letters are left stranded at the card edge */
.ht.old { transform: translateX(calc(var(--d) * -1)); opacity: 0; transition: transform 1.15s var(--ease), opacity .3s ease .8s; }

/* hero objects ride a hidden circle: the outer wrapper rotates around one shared pivot
   (--px/--py = pivot minus the object's own position), so every object travels on an arc
   of the same wheel. Clockwise always: enter from the top, leave past the bottom-left.
   The inner div counter-spins a little so objects tumble instead of turning upside down. */
.hero { left: 0; top: 0; width: calc(var(--u)*400); height: calc(var(--u)*362); z-index: 2; pointer-events: none; }
.bean { left: calc(var(--u)*44); top: calc(var(--u)*222); width: calc(var(--u)*56); }
.o { visibility: hidden; will-change: transform; --a: calc(var(--k, 1) * 150deg);
  transform-origin: calc(var(--u) * var(--px)) calc(var(--u) * var(--py)); }
.o > div, .o svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.o > div { will-change: transform; }
.o.cur, .o.old { visibility: visible; }
/* easing: enter = long expo-out settle, exit = soft ease-in-out that drifts away
   while it shrinks, blurs and fades (no sudden pop) */
.o.cur, .o.cur > div { animation: orbitIn 1.25s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--dl, 0s) + .2s); }
.o.cur > div { animation-name: spinIn; }
.o.old, .o.old > div { animation: orbitOut 1s cubic-bezier(.55, 0, .6, .6) both; animation-delay: calc(var(--dl, 0s) * .5); }
.o.old > div { animation-name: spinOut; }
.o svg { animation: float 6s ease-in-out infinite; animation-delay: var(--fd, 0s); will-change: transform; }
/* measured from the shot: new set swings in from about -150deg, old set leaves about +165deg */
@keyframes orbitIn { from { transform: rotate(calc(var(--a) * -1)); opacity: 0; } 25% { opacity: 1; } }
@keyframes orbitOut { 55% { opacity: 1; } to { transform: rotate(calc(var(--a) * 1.1)); opacity: 0; } }
/* inner div counter-rotates ~88% so objects stay nearly upright while they travel (the shot tilts them only slightly) */
@keyframes spinIn { from { transform: rotate(calc(var(--a) * .88)); } }
@keyframes spinOut { to { transform: rotate(calc(var(--a) * -.88)); } }
@keyframes float { 50% { transform: translateY(calc(var(--u) * -5)) rotate(var(--fr, 1deg)); } }

/* storehouse list */
.store { left: calc(var(--u)*380); top: calc(var(--u)*100); width: calc(var(--u)*330); height: calc(var(--u)*290); }
.store h2 { left: calc(var(--u)*28); top: 0; margin: 0; font-weight: 500; font-size: calc(var(--u)*27); line-height: 1.15; letter-spacing: .005em; }
.cols { left: calc(var(--u)*28); right: calc(var(--u)*50); top: calc(var(--u)*91); display: flex; justify-content: space-between;
  font-size: calc(var(--u)*7); font-weight: 600; letter-spacing: .1em; color: #3a3a40; }
.cols span { position: static; }
.rows { left: 0; top: calc(var(--u)*125); width: 100%; height: calc(var(--u)*165); margin: 0; padding: 0; list-style: none; }
.rows li { left: calc(var(--u)*-90); right: 0; height: calc(var(--u)*55); }
.rows li:nth-child(1) { top: 0; background: linear-gradient(90deg, rgba(240,240,242,0), #f0f0f2 32%); }
.rows li:nth-child(2) { top: calc(var(--u)*55); background: linear-gradient(90deg, rgba(244,244,246,0), #f5f5f7 32%); }
.rows li:nth-child(3) { top: calc(var(--u)*110); background: linear-gradient(90deg, rgba(250,250,251,0), #fafafb 32%); }
.win { left: calc(var(--u)*110); width: calc(var(--u)*242); top: calc(var(--u)*-8); height: calc(var(--u)*66); overflow: hidden; }
.seg { inset: 0; transform: translateX(100%); visibility: hidden; will-change: transform; }
.seg.cur, .seg.old { visibility: visible; transition: transform 1.05s var(--ease); transition-delay: var(--sd, 0s); }
.seg.cur { transform: none; }
.seg.old { transform: translateX(-100%); }
.rows li:nth-child(2) .seg { --sd: .06s; }
.rows li:nth-child(3) .seg { --sd: .12s; }
.seg b { left: calc(var(--u)*8); top: calc(var(--u)*25); font-weight: 500; font-size: calc(var(--u)*11.2); white-space: nowrap; color: #232327; }
.seg em { left: calc(var(--u)*131); top: calc(var(--u)*28); font-style: normal; font-weight: 500; font-size: calc(var(--u)*6.8); letter-spacing: .02em; color: #3a3a40; white-space: nowrap; }
.seg svg { left: calc(var(--u)*190); top: calc(var(--u)*6); width: calc(var(--u)*44); height: calc(var(--u)*52); }
.plus { right: calc(var(--u)*45); top: calc(var(--u)*17); font-size: calc(var(--u)*15); font-weight: 400; line-height: 1; color: #222; }

/* bottom controls */
.dock { left: calc(var(--u)*308); top: calc(var(--u)*372); width: calc(var(--u)*222); height: calc(var(--u)*54); border-radius: 99px;
  background: rgba(255,255,255,.96); box-shadow: 0 calc(var(--u)*14) calc(var(--u)*30) calc(var(--u)*-8) rgba(30,20,50,.18), 0 0 0 1px rgba(0,0,0,.025); }
.dock .ic { top: calc(var(--u)*18); width: calc(var(--u)*18); height: calc(var(--u)*18); }
.dock hr { left: calc(var(--u)*152); top: calc(var(--u)*15); width: 1px; height: calc(var(--u)*24); margin: 0; border: 0; background: #e6e6e9; }
#next { left: calc(var(--u)*170); top: calc(var(--u)*5); width: calc(var(--u)*44); height: calc(var(--u)*44); border-radius: 50%;
  background: #2b2b30; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); transition: transform .2s; }
#next:hover { transform: scale(1.06); }
#next:active { transform: scale(.94); }
#next svg { position: static; width: calc(var(--u)*14); height: calc(var(--u)*14); }
#steps { left: calc(var(--u)*35); top: calc(var(--u)*405); height: calc(var(--u)*42); width: calc(var(--u)*170); }
#steps button { top: 0; width: calc(var(--u)*42); height: calc(var(--u)*42); border-radius: calc(var(--u)*12);
  display: grid; place-items: center; color: #5d5d63; transition: background-color .35s; }
#steps button:nth-of-type(2) { left: calc(var(--u)*68); }
#steps button:nth-of-type(3) { left: calc(var(--u)*127); }
#steps button[aria-pressed="true"] { background: #e9e9eb; color: #2b2b30; }
#steps i { top: calc(var(--u)*20.5); width: calc(var(--u)*11); height: 1px; background: #b9b9bf; }
#steps i:nth-of-type(1) { left: calc(var(--u)*50); }
#steps i:nth-of-type(2) { left: calc(var(--u)*110); }
#play { left: calc(var(--u)*632); top: calc(var(--u)*405); width: calc(var(--u)*42); height: calc(var(--u)*42); border-radius: calc(var(--u)*12);
  background: #ececee; display: grid; place-items: center; color: #3b3b40; }
#steps svg, #play svg { position: static; width: calc(var(--u)*17); height: calc(var(--u)*17); }
.ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.credit { margin: 20px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.credit a { color: inherit; }

/* signature footer: full-width white bar at the bottom of the page (same pattern as my other projects) */
.sig { width: 100%; height: 56px; padding: 0 60px; background: #fff; border-top: 1px solid rgba(28, 26, 23, .08);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; white-space: nowrap; font-size: 12px; line-height: 1; color: #8a857c; }
.sig a { display: inline-flex; align-items: center; gap: 6px; height: 20px; color: inherit; text-decoration: none; border-radius: 6px; transition: opacity .2s; }
.sig a:hover { opacity: .7; }
.sig strong { color: #3a3a40; font-weight: 600; }
.sig svg { display: block; flex: none; width: 13px; height: 13px; fill: #3a3a40; }
.sig .star-icon { fill: #f5a03a; }
.sig .start { justify-self: start; }
.sig .mid { justify-self: center; display: inline-flex; align-items: center; height: 20px; }
.sig .end { justify-self: end; display: inline-flex; align-items: center; gap: 10px; height: 20px; }
.sig .dot { opacity: .5; }

/* ---------- phone: blob on top, list below (343 design units wide) ---------- */
@media (max-width: 640px) {
  .wrap { padding: 16px; align-content: start; }
  .sig { height: auto; grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 14px 16px max(14px, env(safe-area-inset-bottom)); }
  .sig .start, .sig .mid, .sig .end { justify-self: center; }
  .card { --u: calc(100cqw / 343); width: 100%; height: calc(var(--u)*742); border-radius: calc(var(--u)*30); background: #fff; }
  .bclip { height: calc(var(--u)*300); border-radius: calc(var(--u)*30) calc(var(--u)*30) 0 0; }
  .glow { left: calc(var(--u)*40); top: calc(var(--u)*170); width: calc(var(--u)*280); height: calc(var(--u)*240); }
  .bshade { top: calc(var(--u)*270); }
  .logo { left: calc(var(--u)*26); top: calc(var(--u)*30); }
  .smile { left: calc(var(--u)*289); top: calc(var(--u)*22); }
  .hclip { top: calc(var(--u)*70); width: calc(var(--u)*170); -webkit-mask: none; mask: none; }
  .ht { left: calc(var(--u)*24); font-size: calc(var(--u)*42); }
  .hero { left: calc(var(--u)*-40); top: calc(var(--u)*24); transform: scale(.72); transform-origin: 100% 0; }
  .bean { left: calc(var(--u)*30); top: calc(var(--u)*200); }
  .store { left: 0; top: calc(var(--u)*322); width: calc(var(--u)*343); }
  .store h2 { left: calc(var(--u)*20); }
  .cols { left: calc(var(--u)*20); right: calc(var(--u)*30); top: calc(var(--u)*82); }
  .rows { top: calc(var(--u)*112); }
  .rows li { left: 0; }
  .win { left: calc(var(--u)*12); width: calc(var(--u)*268); }
  .seg em { left: calc(var(--u)*140); }
  .seg svg { left: calc(var(--u)*212); }
  .plus { right: calc(var(--u)*26); }
  .dock { left: calc(var(--u)*60); top: calc(var(--u)*596); }
  #steps { left: calc(var(--u)*18); top: calc(var(--u)*680); }
  #play { left: calc(var(--u)*283); top: calc(var(--u)*680); }
}
@media (prefers-reduced-motion: reduce) {
  .o.cur, .o.old, .o > div, .o svg, .sway { animation: none !important; }
  #bsq { transition: none; }
  .o.old { visibility: hidden; }
  .ht, .seg { transition: none !important; }
}