/* ============================================
   FAN DEMO — shell for the "card fan" animations (the three fanned cards
   in the Rocket mood carousel). A scene is authored on a fixed 600x520
   canvas (1 unit = 1 Figma px; the old composite images were exactly 2x),
   scaled to fit its column by fan-demo.js via --fs. Each scene brings its
   own stylesheet (fan-rocket-lock.css) and script (fan-rocket-lock.js).
   ============================================ */
.fan-demo {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 520;
}
/* the still image stays until the scene is built (and for no-JS) */
.fan-demo .fan-fallback { display: block; width: 100%; height: 100%; object-fit: contain; }
.fan-demo.is-ready .fan-fallback { display: none; }

.fan-stage {
  position: absolute; left: 0; top: 0; width: 600px; height: 520px; /* overridden per scene */
  transform-origin: 0 0;
  transform: scale(var(--fs, 0.5));
  /* nothing pre-paints until the engine has measured the column */
  visibility: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #111;
  user-select: none; -webkit-user-select: none;
}
.fan-demo.is-ready .fan-stage { visibility: visible; }
.fan-stage *, .fan-stage *::before, .fan-stage *::after { box-sizing: border-box; }
.fan-stage.fk-reset, .fan-stage.fk-reset * { transition: none !important; animation: none !important; }

/* images placed by the scenes (sized inline) — beat the site's `.mood-card-img img` rule */
.fan-stage .px { position: absolute; display: block; max-width: none; pointer-events: none; }

/* a card in the fan: placed by its centre, tilted with --r, dealt out from
   behind the middle card via --tx/--ty/--sc. The individual `translate`
   property is left free for the idle float + pointer parallax. */
.fk {
  position: absolute;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--r, 0deg)) scale(var(--sc, 1));
  transform-origin: 50% 50%;
  translate: calc(var(--px, 0) * var(--par, 0) * 1px) calc(var(--py, 0) * var(--par, 0) * 1px);
  will-change: transform;
}

@keyframes fk-float {
  0%, 100% { translate: calc(var(--px, 0) * var(--par, 0) * 1px) calc(var(--py, 0) * var(--par, 0) * 1px); }
  50%      { translate: calc(var(--px, 0) * var(--par, 0) * 1px) calc(var(--py, 0) * var(--par, 0) * 1px - 4px); }
}

.fan-demo.is-paused .fan-stage * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .fan-stage, .fan-stage * { transition: none !important; animation: none !important; }
}