/* QRS-392: the 3D video stages [qrystal_video_circle] and [qrystal_video_vshape] (assets/js/video-stage.js).
   Light by default (see "Light stage" below); theme="dark" gives a dark, warm jewellery-display stage: champagne spotlight, a bloom behind the front video, the room lit in the front
   video's colours, a sweep of light on the cards, floor reflections and gold dust. Animations use transform and opacity
   only, and stop while the stage is off screen (.is-idle) or the video viewer is open.
   Touch screens get a lighter stage without the effects that flashed on phones (see "Touch screens" at the end). */
.qrystal-video-carousel.qvc--stage {
  --qvs-champagne: 243 220 178;
  --qvs-gold: 214 178 112;
  --qvs-ink: #0b0907;
  width: var(--qvc-vw, 100vw);
  max-width: none;
  margin-left: calc(50% - var(--qvc-vw, 100vw) / 2);
  margin-right: calc(50% - var(--qvc-vw, 100vw) / 2);
  color: #fff;
}
/* The list of links stays for keyboards and screen readers; the stage shows the videos. */
.qrystal-video-carousel.qvc--stage .qvc-track {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.qvs-frame { position: relative; }
.qvs-stage {
  position: relative;
  height: clamp(560px, 76vh, 780px);
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% -5%, #3a2c1d 0%, #1a130d 38%, var(--qvs-ink) 70%), var(--qvs-ink);
  perspective: 2200px;
  perspective-origin: 50% 32%;
  touch-action: pan-y;
  cursor: grab;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  contain: layout paint;
}
.qvc--vshape .qvs-stage {
  height: clamp(580px, 78vh, 800px);
  background: radial-gradient(70% 60% at 50% 8%, #33271b 0%, #17110c 42%, var(--qvs-ink) 75%), var(--qvs-ink);
  perspective: 2000px;
  perspective-origin: 50% 45%;
}
.qvs-stage.is-dragging { cursor: grabbing; }

/* ---------- Light ---------- */
/* The front video lights the room: a large soft copy of its poster (two layers cross-fade). */
.qvs-ambient {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(90px) saturate(1.5);
  opacity: 0;
  transition: opacity 1.4s ease;
  mix-blend-mode: screen;
}
.qvs-ambient.is-on { opacity: .14; }
/* Keeps the room warm, whatever colours the front video has. */
.qvs-warmth { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(90% 80% at 50% 30%, rgb(120 82 40 / .28), transparent 70%); mix-blend-mode: soft-light; }
/* Champagne spotlight from above, breathing slowly. */
.qvs-beam {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -12%;
  width: min(1100px, 120vw);
  height: 125%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 158deg, rgb(var(--qvs-champagne) / .14) 168deg, rgb(255 244 222 / .40) 180deg, rgb(var(--qvs-champagne) / .10) 192deg, transparent 202deg);
  filter: blur(18px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: qvs-breathe 7s ease-in-out infinite alternate;
}
/* The V-shape has a narrower spotlight on the centre video. */
.qvc--vshape .qvs-beam {
  top: -8%;
  width: min(760px, 95vw);
  height: 110%;
  background: conic-gradient(from 180deg at 50% 0%, transparent 166deg, rgb(var(--qvs-champagne) / .18) 172deg, rgb(255 246 226 / .48) 180deg, rgb(var(--qvs-champagne) / .14) 188deg, transparent 194deg);
  filter: blur(16px);
}
@keyframes qvs-breathe { from { opacity: .55; } to { opacity: 1; } }
.qvs-floor {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  pointer-events: none;
  background: radial-gradient(48% 42% at 50% 8%, rgb(var(--qvs-champagne) / .20), transparent 70%), linear-gradient(to bottom, rgb(255 255 255 / .05), transparent 2px, transparent);
}
/* A soft bloom of light behind the front video. */
.qvs-bloom {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 45%;
  width: calc(var(--qvs-card-w, 240px) * 2.4);
  aspect-ratio: 1 / 1.25;
  translate: -50% -50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(255 236 200 / .32), rgb(var(--qvs-gold) / .14) 45%, transparent 72%);
  filter: blur(14px);
  animation: qvs-bloom 5s ease-in-out infinite alternate;
}
.qvc--vshape .qvs-bloom { top: 50%; }
@keyframes qvs-bloom { from { opacity: .45; transform: scale(.96); } to { opacity: .7; transform: scale(1.04); } }
/* A slow glare passes over the stage, like light catching glass. */
.qvs-glare { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.qvs-glare::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / .06) 50%, transparent);
  mix-blend-mode: screen;
  animation: qvs-glare 11s linear infinite;
}
@keyframes qvs-glare { from { transform: translateX(0); } to { transform: translateX(270%); } }
.qvs-vignette { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(0 0 0 / .65)); }
.qvs-dust { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* ---------- Cards ---------- */
.qvs-scene {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 45%;
  width: var(--qvs-card-w);
  height: var(--qvs-card-h);
  margin-left: calc(var(--qvs-card-w) / -2);
  margin-top: calc(var(--qvs-card-h) / -2);
  transform-style: preserve-3d;
  /* The containers lie in the same plane as the front video; only the videos take taps and clicks. */
  pointer-events: none;
}
.qvc--vshape .qvs-scene { top: 50%; }
.qvs-ring { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.qvs-slot { position: absolute; inset: 0; cursor: pointer; pointer-events: auto; }
.qvc--vshape .qvs-slot { will-change: transform; }
.qvs-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #111;
  -webkit-box-reflect: below 14px linear-gradient(transparent 80%, rgb(255 255 255 / .08));
  transition: box-shadow .6s ease;
}
.qvc--vshape .qvs-face { -webkit-box-reflect: below 22px linear-gradient(transparent 82%, rgb(255 255 255 / .08)); }
.qvs-face img,
.qvs-face video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}
.qvs-face video { opacity: 0; transition: opacity .5s ease; }
.qvs-slot.has-frames .qvs-face video { opacity: 1; }
/* Darkness away from the light, and a band of light that sweeps across the glass (both set per frame by the script). */
.qvs-shade { position: absolute; inset: 0; background: #050403; opacity: 0; }
.qvs-sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 70%;
  background: linear-gradient(100deg, transparent 0%, rgb(255 246 228 / 0) 30%, rgb(255 246 228 / .40) 50%, rgb(255 246 228 / 0) 70%, transparent 100%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.qvs-rim { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 240 210 / .14); pointer-events: none; }
.qvs-slot.is-front .qvs-face { box-shadow: 0 0 0 1px rgb(var(--qvs-champagne) / .6), 0 0 80px 10px rgb(var(--qvs-champagne) / .30), 0 40px 90px -30px rgb(var(--qvs-gold) / .6); }
/* Keyboard focus on the list shows on the front video. */
.qvs-slot.is-focus .qvs-face { outline: 2px solid rgb(var(--qvs-champagne)); outline-offset: 4px; }

/* Circle: a ring of golden light on the floor that turns with the carousel, with bright spots running round it.
   It is a layer of its own behind the cards (video-stage.js sets its transform): inside the 3D ring it crossed the
   reflections and shadows, and phones can flicker where 3D planes meet. */
.qvs-halo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 45%;
  width: calc(var(--qvs-radius) * 2.18);
  height: calc(var(--qvs-radius) * 2.18);
  margin-left: calc(var(--qvs-radius) * -1.09);
  margin-top: calc(var(--qvs-radius) * -1.09);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, transparent 94.2%, rgb(255 236 196 / .9) 96.6%, transparent 99%), radial-gradient(closest-side, rgb(var(--qvs-champagne) / .16), rgb(var(--qvs-champagne) / .04) 70%, transparent 93%);
  -webkit-mask: conic-gradient(from 0deg, rgb(0 0 0 / .35), #000 12%, rgb(0 0 0 / .35) 30%, rgb(0 0 0 / .35) 50%, #000 62%, rgb(0 0 0 / .35) 80%, rgb(0 0 0 / .35));
  mask: conic-gradient(from 0deg, rgb(0 0 0 / .35), #000 12%, rgb(0 0 0 / .35) 30%, rgb(0 0 0 / .35) 50%, #000 62%, rgb(0 0 0 / .35) 80%, rgb(0 0 0 / .35));
  filter: drop-shadow(0 0 10px rgb(var(--qvs-champagne) / .8));
}
/* V-shape: a rail of light under each card; together they trace the V. The pulse layer brightens as a light pulse passes. */
.qvs-rail {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -18px;
  height: 3px;
  border-radius: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 238 204 / .5), transparent);
  box-shadow: 0 0 10px rgb(var(--qvs-champagne) / .35);
}
.qvs-pulse {
  position: absolute;
  inset: -2px 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgb(255 248 230 / .95), transparent);
  box-shadow: 0 0 26px 2px rgb(var(--qvs-champagne) / .85);
  opacity: 0;
}

/* ---------- Controls ---------- */
/* .qvc--stage beats the shared .qrystal-video-carousel button rule. */
.qvc--stage .qvs-nav {
  position: absolute;
  z-index: 9;
  top: 45%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 50%;
  background: rgb(24 22 20 / .45);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition: background-color .25s ease, border-color .25s ease;
}
.qvc--vshape .qvs-nav { top: 50%; }
.qvc--stage .qvs-nav:hover { background: rgb(24 22 20 / .7); border-color: rgb(var(--qvs-champagne) / .6); }
.qvc--stage .qvs-nav:focus-visible { outline: 2px solid rgb(var(--qvs-champagne)); outline-offset: 3px; }
.qvs-prev { left: clamp(12px, 3vw, 40px); }
.qvs-next { right: clamp(12px, 3vw, 40px); }

/* ---------- Light stage (the default; theme="dark" keeps the dark stage above) ----------
   White to warm ivory, soft shadows under the cards, short faint reflections. Cards further back fade into the light,
   like distance in a bright room. The effects use gold and champagne in normal or multiply blending (screen light does
   not show on white). */
.qvc--stage.qvc--light { color: #161412; --qvs-gold-deep: 190 148 80; }
.qvc--light .qvs-stage,
.qvc--light.qvc--vshape .qvs-stage {
  background:
    radial-gradient(70% 55% at 50% 38%, #ffffff 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(to bottom, #ffffff 0%, #f8f4ef 52%, #efe8de 100%);
}
.qvc--light .qvs-ambient { mix-blend-mode: multiply; filter: blur(90px) saturate(1.15); }
.qvc--light .qvs-ambient.is-on { opacity: .06; }
.qvc--light .qvs-warmth { background: radial-gradient(80% 70% at 50% 35%, rgb(236 214 170 / .22), transparent 70%); mix-blend-mode: multiply; }
.qvc--light .qvs-beam,
.qvc--light.qvc--vshape .qvs-beam {
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, rgb(236 214 172 / .16) 172deg, rgb(230 204 156 / .26) 180deg, rgb(236 214 172 / .16) 188deg, transparent 198deg);
  mix-blend-mode: multiply;
}
.qvc--light .qvs-floor {
  background:
    radial-gradient(46% 40% at 50% 6%, rgb(255 255 255 / .9), transparent 70%),
    linear-gradient(to bottom, rgb(120 95 60 / .07), transparent 2px, transparent);
}
.qvc--light .qvs-bloom {
  mix-blend-mode: normal;
  background: radial-gradient(closest-side, rgb(255 244 222 / .95), rgb(236 210 160 / .32) 48%, transparent 72%);
}
.qvc--light .qvs-glare { display: none; }
.qvc--light .qvs-vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 62%, rgb(120 95 60 / .10)); }
.qvc--light .qvs-dust { mix-blend-mode: normal; }
.qvc--light .qvs-face {
  background: #ece6dd;
  /* Short, faint reflections. */
  -webkit-box-reflect: below 12px linear-gradient(transparent 90%, rgb(255 255 255 / .06));
  box-shadow: 0 34px 50px -30px rgb(70 48 24 / .42), 0 10px 22px -14px rgb(70 48 24 / .28);
}
.qvc--light.qvc--vshape .qvs-face { -webkit-box-reflect: below 18px linear-gradient(transparent 91%, rgb(255 255 255 / .06)); }
.qvc--light .qvs-shade { background: #f6f2ec; }
.qvc--light .qvs-rim { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.qvc--light .qvs-slot.is-front .qvs-face {
  box-shadow: 0 0 0 1px rgb(var(--qvs-gold-deep) / .55), 0 0 60px 6px rgb(236 210 160 / .45), 0 44px 60px -30px rgb(70 48 24 / .5);
}
.qvc--light .qvs-slot.is-focus .qvs-face { outline-color: rgb(var(--qvs-gold-deep)); }
/* A soft contact shadow under each card. */
.qvs-shadow { display: none; }
.qvc--light .qvs-shadow {
  display: block;
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(70 48 24 / .26), transparent);
  pointer-events: none;
}
.qvc--light .qvs-halo {
  background:
    radial-gradient(closest-side, transparent 94.4%, rgb(var(--qvs-gold-deep) / .85) 96.6%, transparent 98.8%),
    radial-gradient(closest-side, rgb(236 214 172 / .30), rgb(236 214 172 / .08) 70%, transparent 93%);
  filter: drop-shadow(0 0 8px rgb(var(--qvs-gold-deep) / .45));
}
.qvc--light .qvs-rail { background: linear-gradient(90deg, transparent, rgb(var(--qvs-gold-deep) / .65), transparent); box-shadow: 0 0 8px rgb(var(--qvs-gold-deep) / .30); }
.qvc--light .qvs-pulse { background: linear-gradient(90deg, transparent, rgb(214 170 96), transparent); box-shadow: 0 0 18px 1px rgb(var(--qvs-gold-deep) / .6); }
.qvc--stage.qvc--light .qvs-nav {
  border-color: rgb(20 16 12 / .12);
  background: rgb(255 255 255 / .72);
  color: #161412;
  box-shadow: 0 8px 24px -10px rgb(70 48 24 / .35);
}
.qvc--stage.qvc--light .qvs-nav:hover { background: #fff; border-color: rgb(var(--qvs-gold-deep) / .6); }
.qvc--stage.qvc--light .qvs-nav:focus-visible { outline-color: rgb(var(--qvs-gold-deep)); }

/* ---------- Pauses ---------- */
.qvs-stage.is-idle *,
.qvs-stage.is-idle *::before,
.qvc-lightbox-open .qvs-stage *,
.qvc-lightbox-open .qvs-stage *::before { animation-play-state: paused; }

/* ---------- Phones: fewer and lighter effects ---------- */
@media (max-width: 680px) {
  .qvs-stage { height: clamp(520px, 82vh, 660px); perspective: 1500px; }
  .qvc--vshape .qvs-stage { height: clamp(540px, 84vh, 680px); perspective: 1400px; }
  .qvs-face,
  .qvc--vshape .qvs-face,
  .qvc--light .qvs-face,
  .qvc--light.qvc--vshape .qvs-face { -webkit-box-reflect: initial; } /* Chrome ignores the value "none" here. */
  .qvs-ambient { filter: blur(60px) saturate(1.4); }
  .qvs-beam { filter: blur(12px); }
  .qvc--stage .qvs-nav { top: auto; bottom: 64px; width: 44px; height: 44px; transform: none; }
}
/* ---------- Touch screens (phones, foldables, tablets) ----------
   No effects that make the phone draw large areas again while the cards turn: the room light (a blurred copy of the
   front video that changes every few seconds), blur filters, colour blending, glow shadows, the light sweep and the
   reflections. They flashed and blinked on iPhone (Safari, Chrome) and on Android (Chrome, Fold 7).
   video-stage.js also shows the distance of a card with its own opacity there (no repaint per frame). */
@media (hover: none), (pointer: coarse) {
  /* .qrystal-video-carousel.qvc--stage beats the theme and V-shape rules above. */
  .qrystal-video-carousel.qvc--stage .qvs-ambient,
  .qrystal-video-carousel.qvc--stage .qvs-glare,
  .qrystal-video-carousel.qvc--stage .qvs-sheen { display: none; }
  .qrystal-video-carousel.qvc--stage .qvs-warmth,
  .qrystal-video-carousel.qvc--stage .qvs-beam,
  .qrystal-video-carousel.qvc--stage .qvs-bloom,
  .qrystal-video-carousel.qvc--stage .qvs-dust { mix-blend-mode: normal; }
  .qrystal-video-carousel.qvc--stage .qvs-beam,
  .qrystal-video-carousel.qvc--stage .qvs-bloom,
  .qrystal-video-carousel.qvc--stage .qvs-halo { filter: none; animation: none; }
  .qrystal-video-carousel.qvc--stage .qvs-bloom { opacity: .55; }
  /* "initial" = no reflection: Chrome ignores the value "none" for -webkit-box-reflect. */
  .qrystal-video-carousel.qvc--stage .qvs-face { -webkit-box-reflect: initial; box-shadow: none; transition: none; }
  .qrystal-video-carousel.qvc--stage .qvs-slot.is-front .qvs-face { box-shadow: 0 0 0 1px rgb(var(--qvs-champagne) / .6); }
  .qrystal-video-carousel.qvc--light .qvs-slot.is-front .qvs-face { box-shadow: 0 0 0 1px rgb(var(--qvs-gold-deep) / .55); }
  .qrystal-video-carousel.qvc--stage .qvs-rail,
  .qrystal-video-carousel.qvc--stage .qvs-pulse { box-shadow: none; }
  .qrystal-video-carousel.qvc--stage .qvs-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .qrystal-video-carousel.qvc--dark .qvs-nav { background: rgb(24 22 20 / .7); }
}
@media (prefers-reduced-motion: reduce) {
  .qvs-beam,
  .qvs-bloom,
  .qvs-glare::before { animation: none; }
  .qvs-ambient,
  .qvs-face video { transition: none; }
}