/* Background glow — the raw asset already matches the 1220x710 stage
   1:1 (same viewBox as the Figma frame), so it's dropped in full-bleed. */
.glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.heading {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.36px;
  line-height: 1.4;
  color: #fff;
}

/* Fan of scenario cards */
.fan {
  position: absolute;
  left: 50%;
  top: 205px;
  width: 1221px;
  height: 511px;
  transform: translateX(-50%);
  touch-action: none; /* we own drag/swipe entirely via pointer events */
}

/* Every card keeps a fixed base box (the hero's size) and is scaled down
   via the transform below — this keeps position/size/rotation on a single
   compositor-only `transform`, so a live 1:1 drag never triggers layout.
   No CSS transition here on purpose: the JS motion engine (carousel.js)
   repaints every card every rAF frame for drag, momentum coast, idle nudges
   AND tap-jumps alike, so a CSS transition would just fight each write —
   the smoothness now comes entirely from that continuous per-frame update. */
.card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 408px;
  height: 276px;
  transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--rot)) scale(var(--scale));
  opacity: var(--opacity);
  z-index: var(--z);
  /* divide back out the scale so the rendered radius stays ~8px at every size */
  border-radius: calc(8px / var(--scale));
  overflow: hidden;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  /* every card is animated via transform/opacity on every rAF frame during
     drag/coast/settle — promoting each to its own compositor layer keeps
     that work on the GPU instead of forcing a CPU repaint of the fan each
     frame, which is what caused visible stutter on lower-powered tablets. */
  will-change: transform, opacity;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.scenario-title {
  position: absolute;
  left: 50%;
  top: 496px; /* fan top (205) + 291, since title is a sibling of .fan, not nested in it */
  transform: translateX(-50%);
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.scenario-subtitle {
  position: absolute;
  left: 50%;
  top: 539px; /* fan top (205) + 334 */
  transform: translateX(-50%);
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.16px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(103deg, var(--gradient-a) 4%, var(--gradient-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.choose-btn {
  position: absolute;
  left: 50%;
  top: 589px;
  transform: translateX(-50%);
  overflow: hidden; /* clips the sheen sweep below to the pill shape */
}

/* After a long idle, a soft light streak sweeps across the button to nudge
   the visitor toward it — the standard "shine" pattern: a static pseudo-
   element animated purely with `transform`, so it's compositor-only and
   never causes a repaint (no banding/stutter). Stops instantly on touch. */
.choose-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  /* on-brand tint, not plain white — a white streak would be invisible on
     this button's white background */
  background: linear-gradient(
    100deg,
    transparent,
    rgba(47, 208, 171, 0.55),
    rgba(48, 178, 207, 0.55),
    transparent
  );
  transform: translateX(-350%) skewX(-20deg);
  pointer-events: none;
}

.choose-btn.is-idle-highlight::after {
  animation: choose-sheen 2.6s ease-in-out infinite;
}

@keyframes choose-sheen {
  0%,
  20% {
    transform: translateX(-350%) skewX(-20deg);
  }
  55%,
  100% {
    transform: translateX(350%) skewX(-20deg);
  }
}

/* Inline "not yet ready" notice for scenarios without a built flow yet —
   a small pill above the Choose button, not a screen navigation. */
.not-ready-badge {
  position: absolute;
  left: 50%;
  top: 555px;
  transform: translateX(-50%) translateY(6px);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.14px;
  padding: 8px 18px;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.not-ready-badge.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}