/*
 * RegattaHub demo loops (demo.js).
 *
 * Each demo is a short loop of real app screenshots. Rules the owner set for
 * walkthroughs: every screenshot is shown whole (no zoom, pan or cropping),
 * there is no fake mouse cursor, what is pressed gets one highlight ring and
 * one ripple, and captions stay short. With prefers-reduced-motion the demo
 * shows one still frame until the viewer presses Play.
 */
.rh-demo {
  --rh-ring: #0284c7;
  margin: 0;
  width: 100%;
}

/* Desktop screenshots sit in a slim browser frame; the frame is chrome
   around the image, never on top of it. */
.rh-demo__window {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.18), 0 4px 10px -4px rgb(15 23 42 / 0.08);
  overflow: hidden;
}
.rh-demo__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}
.rh-demo__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: #d1d5db;
}

.rh-demo__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 900;
  background: #f8fafc;
  overflow: hidden;
}
.rh-demo__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
  transition: opacity 0.45s ease;
}
.rh-demo__screen img[data-hidden] { opacity: 0; }

/* iPhone screenshots: a phone-shaped frame, whole screenshot inside. */
.rh-demo--phone { max-width: 290px; margin-left: auto; margin-right: auto; }
.rh-demo--phone .rh-demo__window {
  border: 9px solid #0f172a;
  border-radius: 2.4rem;
  box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.35);
}
.rh-demo--phone .rh-demo__chrome { display: none; }
.rh-demo--phone .rh-demo__screen { aspect-ratio: 600 / 1304; background: #fff; }

/* What was pressed: one ring, one ripple. Positioned in % of the screenshot,
   which fills the screen box exactly (same aspect ratio). */
.rh-demo__ring {
  position: absolute;
  width: clamp(20px, 4.4%, 54px);
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  border: 3px solid var(--rh-ring);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.95), 0 0 18px 4px rgb(2 132 199 / 0.35);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
  z-index: 2;
}
.rh-demo--phone .rh-demo__ring { width: clamp(20px, 11%, 40px); }
.rh-demo__ring.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rh-demo__ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 3px solid var(--rh-ring);
  opacity: 0;
}
.rh-demo__ring.is-ripple::after { animation: rh-demo-ripple 0.75s ease-out 1; }
@keyframes rh-demo-ripple {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(2.3); }
}

/* Caption bar under the screenshot. */
.rh-demo__bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 2px 0;
}
.rh-demo__cap {
  flex: 1;
  min-height: 2.6em;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #374151;
}
.rh-demo--phone .rh-demo__cap { font-size: 0.9rem; }
.rh-demo__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  color: #374151;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.rh-demo__toggle:hover { border-color: #0369a1; color: #0369a1; }
.rh-demo__toggle:focus-visible,
.rh-demo__step:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.rh-demo__toggle svg { width: 12px; height: 12px; fill: currentColor; }

/* One segment per step; the current one fills over its duration. */
.rh-demo__steps {
  display: flex;
  gap: 4px;
  padding: 10px 2px 0;
}
.rh-demo__step {
  position: relative;
  flex: 1;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #e5e7eb;
  cursor: pointer;
  overflow: hidden;
}
.rh-demo__step::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  right: 0;
}
.rh-demo__step span {
  position: absolute;
  inset: 0;
  background: #0369a1;
  transform-origin: left center;
  transform: scaleX(0);
}
.rh-demo__step.is-done span { transform: scaleX(1); }
.rh-demo__step.is-current span { animation: rh-demo-fill var(--rh-ms, 2600ms) linear forwards; }
.rh-demo.is-paused .rh-demo__step.is-current span { animation: none; transform: scaleX(1); opacity: 0.55; }
@keyframes rh-demo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rh-demo__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rh-demo__screen img,
  .rh-demo__ring { transition: none; }
  .rh-demo__ring.is-ripple::after { animation: none; }
  .rh-demo__step.is-current span { animation: none; transform: scaleX(1); }
}