/* ==========================================================================
   FinalLap — "How it works" loop player
   Self-contained. Drop the markup anywhere; the player fills its parent's width
   and keeps the 621 x 388 frame shape from the design at every width.
   ========================================================================== */

.hiw-player {
  --hiw-frame-bg: #ffffff;
  --hiw-frame-border: rgba(0, 0, 0, 0.05);
  --hiw-frame-radius: 14px;              /* radius-xl */
  --hiw-frame-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); /* shadow-xs */
  --hiw-page-bg: #f7f6f2;

  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 621 / 388.125;   /* frame size from the Figma design */
  background: var(--hiw-frame-bg);
  border: 1px solid var(--hiw-frame-border);
  border-radius: var(--hiw-frame-radius);
  box-shadow: var(--hiw-frame-shadow);
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  -webkit-user-select: none;
  user-select: none;
}

.hiw-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--hiw-page-bg);
}

.hiw-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: opacity;
}

.hiw-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.hiw-world > img.hiw-base {
  display: block;
  max-width: none;
  pointer-events: none;
}

.hiw-layer {
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.hiw-layer > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Cursor lives in stage space, so it stays the same size while the camera zooms. */
.hiw-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: -6px 0 0 -10px;   /* hotspot = arrow tip / fingertip */
  transform-origin: 10px 6px;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 10;
}
.hiw-cursor svg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; overflow: visible; }
.hiw-cursor[data-state="arrow"] .hiw-c-arrow,
.hiw-cursor[data-state="pointer"] .hiw-c-pointer,
.hiw-cursor[data-state="not-allowed"] .hiw-c-blocked { display: block; }

.hiw-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 3px solid rgba(36, 27, 23, 0.35);
  background: rgba(36, 27, 23, 0.08);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}

/* Static fallback for reduced motion is handled in JS (renders one still frame). */