/* ===========================================================
   /demo — standalone Digital Signage showcase.
   Visual simulation only: this stylesheet never assumes any
   network state, form, or interactive control beyond the
   press-and-hold pause on the winner artwork.
   Same brand identity as the real kiosk (Premium Pharmacy /
   Health-tech), fully isolated from kiosk.css's ".kiosk-page"
   scope so nothing here can leak into or be affected by the
   real kiosk route.
   =========================================================== */

.demo-page {
  /* Brand tokens (see project brief "Brand" section) */
  --demo-blue: #1677ff;
  --demo-blue-dark: #0f3d75;
  --demo-blue-light: #dcebff;
  --demo-green: #22c55e;
  --demo-gold: #d4a72c;
  --demo-bg: #f5faff;
  --demo-ink: #0f2846;
  --demo-muted: #5b7290;
  --demo-surface: #ffffff;
  --demo-border: rgb(15 61 117 / 9%);
  --demo-cta-grad: linear-gradient(115deg, #1677ff, #22c55e);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: linear-gradient(160deg, #fbfdff 0%, var(--demo-bg) 55%, #eaf3fe 100%);
  color: var(--demo-ink);
  font-family: var(--font-kiosk-ar), var(--font-kiosk-latin), system-ui, sans-serif;
}

.demo-page--empty {
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--demo-muted, #5b7290);
  background: #f5faff;
  font-size: 1rem;
}

/* ---------- Brand header ---------- */
.demo-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: clamp(0.6rem, 1.6vw, 1.1rem) clamp(1.25rem, 3.5vw, 2.75rem);
}

.demo-brand-copy {
  display: grid;
  gap: 0.1rem;
}

.demo-brand-copy strong {
  color: var(--demo-blue-dark);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.demo-brand-copy small {
  color: var(--demo-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.demo-brand-mark,
.demo-brand-logo {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
}

.demo-brand-mark {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--demo-blue), var(--demo-blue-dark));
  box-shadow: 0 0.25rem 0.875rem rgb(15 61 117 / 16%);
  color: white;
  font-size: 1.2rem;
}

.demo-brand-logo {
  background: #ffffff;
  box-shadow: 0 0.25rem 0.875rem rgb(15 61 117 / 10%);
}

.demo-brand-logo .safe-image img {
  object-fit: contain;
}

/* ---------- Opening splash: branded intro video (INTRO_MS in SpinDemo.tsx) ----------
   Replaces the earlier logo+pharmacy-name text splash with a short local video asset
   (public/demo/intro.webm — copied in from the approved brand video, never fetched over the
   network; source clip VITAMEN_CAPSULE_HERO_7s_111.mov, 1080x1920 / 9:16, 7s, 60fps). The source
   is the After Effects QuickTime Animation (qtrle) export, which carries a real ARGB alpha
   channel — so this asset has genuine, properly anti-aliased per-pixel transparency straight
   from the design tool, not a CSS trick and not a chroma-key approximation. It was only
   transcoded to VP9-alpha WebM (ffmpeg -pix_fmt yuva420p) to get the 267MB master down to ~4MB
   for the browser; the alpha is carried through untouched. That's why the splash can just sit on
   the normal brand gradient below with no blend-mode or background color-matching hack: the
   video has no background. Shown alone, before the brand header/wheel interface mounts (see
   showingSplash in SpinDemo.tsx). */
.demo-splash {
  /* Fixed (not absolute) so this ignores .demo-stage's own padding and the hidden header's
     layout entirely, covering the true viewport edge-to-edge like a splash screen should. */
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(160deg, #fbfdff 0%, var(--demo-bg, #f5faff) 55%, #eaf3fe 100%);
  animation: demo-fade-in 500ms ease both;
}

.demo-splash-video {
  /* Sized to the source clip's own aspect ratio (1080x1920, 9:16), not stretched to the
     viewport's — this is what actually guarantees zero cropping (object-fit below is just
     a safety net), and unlike a naive width:100%/height:100%, it stays a large, clearly-
     bounded element in the middle of the page instead of shrinking to a thin sliver on a
     wide desktop test window. Same clamp shape as .demo-winner-hero elsewhere in this
     file, just tuned to 9:16 instead of 2:3. */
  height: min(90vh, 160vw, 64rem);
  width: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  /* Background is truly transparent now (see .demo-splash comment above), so this floats
     directly on the brand gradient with no card/box treatment needed. */
}

/* ---------- Stage ---------- */
.demo-stage {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
  place-items: center;
  padding: clamp(0.15rem, 0.6vh, 0.5rem) clamp(1rem, 4vw, 2.5rem) clamp(0.5rem, 1.4vh, 1rem);
}

/* ---------- Intro / spinning wheel scene ---------- */
.demo-wheel-scene {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 34rem;
}

/* The entrance fade is scoped to the spinning phase rather than sitting on .demo-wheel-scene
   itself, because the scene is also mounted (hidden behind the splash overlay) during "intro"
   — see the showingWheel comment in SpinDemo.tsx for why that mount has to happen early. An
   unscoped animation would burn itself out under the splash and the wheel would then pop in
   with no entrance at all when the splash lifts. */
[data-demo-phase="spinning"] .demo-wheel-scene {
  animation: demo-fade-in 600ms ease both;
}

.demo-kicker {
  margin: 0;
  color: var(--demo-blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.demo-wheel-scene h1 {
  margin: 0;
  color: var(--demo-blue-dark);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.demo-subtitle {
  max-width: 26rem;
  margin: 0;
  color: var(--demo-muted);
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
}

.demo-wheel-wrap {
  display: grid;
  width: 100%;
  justify-items: center;
  margin-block-start: clamp(0.75rem, 2.5vh, 1.5rem);
}

.demo-page .wheel-shell {
  /* Slightly larger than the original demo pass, same PrizeWheel component/geometry. */
  width: min(80vw, 62vh, 30rem);
  padding-block-start: 0;
}

/* ---------- Wheel spin polish (scoped to /demo only) ----------
   PrizeWheel and kiosk.css are shared with the real kiosk and are intentionally left
   untouched. These overrides target the exact classes PrizeWheel already renders, scoped
   under .demo-page so nothing outside /demo is affected. */
.demo-page .kiosk-wheel-rotor--spinning {
  /* ~36% lighter than the kiosk's default 2.2px blur — still reads as motion, less smear. */
  filter: blur(1.4px);
}

.demo-page .kiosk-wheel-rotor {
  /* PrizeWheel sets its timing-function as an inline style, so !important is required to
     reach it. Same curve family, just weighted to glide a little longer through the final
     part of the spin for a more deliberate, display-grade stop. */
  transition-timing-function: cubic-bezier(0.15, 0.75, 0.05, 1) !important;
}

/* ---------- Winner celebration: confetti ----------
   Mounted only while SpinDemo's confettiActive state is true (a short, one-shot burst
   fired exactly when phase becomes "winner" — see SpinDemo.tsx). Purely decorative
   (aria-hidden, no pointer-events) and stacked behind .demo-winner (z-index: 0 here vs.
   1 there) so it can never visually sit on top of the prize artwork or text — pieces
   passing behind the hero card or copy are simply hidden by their opaque backgrounds. */
.demo-confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.demo-confetti-piece {
  position: absolute;
  top: -1.2rem;
  left: var(--demo-confetti-left, 50%);
  width: var(--demo-confetti-size, 0.5rem);
  height: calc(var(--demo-confetti-size, 0.5rem) * 1.8);
  border-radius: 0.15rem;
  background: var(--demo-confetti-color, var(--demo-green));
  opacity: 0;
  animation: demo-confetti-fall var(--demo-confetti-duration, 2.2s) ease-in var(--demo-confetti-delay, 0s) 1 both;
}

@keyframes demo-confetti-fall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--demo-confetti-drift, 0), 115vh) rotate(var(--demo-confetti-spin, 320deg));
    opacity: 0;
  }
}

/* Static acknowledgment instead of falling motion — a brief, gentle fade with no
   transform, per prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .demo-confetti-piece {
    top: 8%;
    animation: demo-confetti-fade 700ms ease both;
  }
}

@keyframes demo-confetti-fade {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0.8;
  }
  to {
    opacity: 0;
  }
}

/* ---------- Winner hero ---------- */
.demo-winner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(0.3rem, 1vh, 0.55rem);
  width: 100%;
  /* Was capped at 30rem, which — combined with the hero's aspect-ratio-derived width —
     was quietly shrinking the artwork below its intended size (the actual cause of the
     "too small, looks like a normal result card" feedback). Give it real room instead. */
  max-width: min(94vw, 40rem);
  text-align: center;
  /* A brief, deliberate beat after the wheel stops (and before this fades in) instead of
     an instant cut — matches the settle time already built into the spin's finish. */
  animation: demo-fade-in 500ms ease 150ms both;
}

.demo-winner--fading {
  animation: demo-fade-out var(--demo-reset-duration, 2000ms) ease forwards;
}

.demo-winner-eyebrow {
  margin: 0;
  padding: 0.22rem 1rem;
  border-radius: 999px;
  background: rgb(34 197 94 / 12%);
  color: #0f7a3d;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* The product artwork: the dominant element on this screen, same 2:3 ratio as the
   source uploads (~1000x1500) so nothing is cropped. Sized ~15% larger than the
   previous pass, with surrounding chrome trimmed to make room for it. */
.demo-winner-hero {
  position: relative;
  height: min(85vh, 103vw, 60rem);
  max-width: min(92vw, 42rem);
  aspect-ratio: 2 / 3;
  margin-inline: auto;
  border-radius: 1.75rem;
  overflow: hidden;
  background: radial-gradient(22rem 16rem at 50% 18%, #eaf3fe, var(--demo-bg));
  /* Layered shadow: depth below the card, a crisp inner highlight, and a soft green
     ambient glow — a calm "product spotlight", not a flashing effect. */
  box-shadow:
    0 1.75rem 4.5rem rgb(15 61 117 / 20%),
    inset 0 0 0 1px rgb(255 255 255 / 55%),
    0 0 5.5rem 0.5rem rgb(34 197 94 / 16%);
  touch-action: none;
  transition: box-shadow 200ms ease;
  /* Same short 150ms beat as .demo-winner, then a gentle 95% -> 100% zoom-in, holding at rest. */
  animation: demo-hero-reveal 650ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms both;
}

.demo-winner--held .demo-winner-hero {
  box-shadow:
    0 1.75rem 4.5rem rgb(15 61 117 / 24%),
    inset 0 0 0 1px rgb(255 255 255 / 65%),
    0 0 0 4px rgb(34 197 94 / 45%),
    0 0 6rem 1rem rgb(34 197 94 / 26%);
}

.demo-winner-image,
.demo-winner-image.safe-image-placeholder {
  width: 100%;
  height: 100%;
}

.demo-winner-image img {
  object-fit: contain;
}

.demo-winner-image.safe-image-placeholder {
  background: linear-gradient(145deg, var(--demo-blue-light), #eaf3fe);
  color: var(--demo-blue-dark);
}

.demo-winner-image.safe-image-placeholder span {
  font-size: 2.5rem;
  font-weight: 800;
}

.demo-winner-copy {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
}

/* Compact but premium: a touch smaller and tighter-set than the previous pass so it
   reads as a confident label under the hero rather than competing with it for space. */
.demo-winner-copy h2 {
  margin: 0;
  color: var(--demo-blue-dark);
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.demo-winner-number {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.4rem;
  border: 2px solid rgb(255 255 255 / 85%);
  border-radius: 999px;
  background: var(--demo-cta-grad);
  box-shadow:
    0 0.75rem 1.75rem rgb(15 61 117 / 32%),
    inset 0 1px rgb(255 255 255 / 35%);
  color: white;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.demo-winner-progress {
  width: min(100%, 16rem);
  height: 3px;
  border-radius: 999px;
  background: var(--demo-blue-light);
  overflow: hidden;
}

.demo-winner-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--demo-green), var(--demo-blue));
  transform-origin: left center;
  animation: demo-progress-shrink var(--demo-progress-duration, 4000ms) linear forwards;
}

html[dir="rtl"] .demo-winner-progress-fill {
  transform-origin: right center;
}

@keyframes demo-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.985);
  }
}

@keyframes demo-fade-out {
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes demo-hero-reveal {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes demo-progress-shrink {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-splash,
  .demo-wheel-scene,
  .demo-winner,
  .demo-winner-hero {
    animation: none;
  }

  .demo-winner--fading {
    animation: demo-fade-out 1ms linear forwards;
  }
}

/* ===========================================================
   Responsive: portrait iPad/tablet is the priority target.
   =========================================================== */

/* iPad portrait (768x1024) and up: a little more breathing room. */
@media (min-width: 48rem) and (orientation: portrait) {
  .demo-page .wheel-shell {
    width: min(70vw, 58vh, 33rem);
  }

  .demo-winner-hero {
    height: min(83vh, 92vw, 64rem);
  }
}

/* iPad Pro-class portrait (834x1194, 1024x1366) — the primary signage target. */
@media (min-width: 52rem) and (orientation: portrait) {
  .demo-wheel-scene h1 {
    font-size: clamp(2.3rem, 3.6vw, 3.4rem);
  }

  .demo-page .wheel-shell {
    width: min(62vw, 56vh, 36rem);
  }

  .demo-winner-hero {
    height: min(80vh, 83vw, 69rem);
  }

  .demo-winner-copy h2 {
    font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  }
}

/* Landscape / desktop preview: keep the hero from overwhelming a wide, short viewport. */
@media (orientation: landscape) {
  .demo-stage {
    padding-block: clamp(0.4rem, 2.4vh, 1rem);
  }

  .demo-page .wheel-shell {
    width: min(44vw, 70vh, 28rem);
  }

  .demo-winner-hero {
    height: min(83vh, 41vw, 41rem);
  }

  .demo-winner {
    max-width: 30rem;
  }
}

@media (max-width: 26rem) {
  .demo-brand {
    padding-block: 0.6rem;
  }

  .demo-brand-copy small {
    display: none;
  }

  .demo-winner-hero {
    height: min(71vh, 99vw, 41rem);
  }
}