/* Finite lighting for the v18 product stage. Scene geometry and all purchase
   controls belong to shop-quality-v18.css / the existing presenter. */
.shop-v17 .shop-v18-stage {
  --shop-fx-light: 226, 207, 161;
  --shop-fx-rune: 99, 183, 174;
  isolation: isolate;
}
.shop-v17 .shop-v18-stage[data-element="fire"] { --shop-fx-light: 242, 179, 121; --shop-fx-rune: 216, 116, 74; }
.shop-v17 .shop-v18-stage[data-element="water"] { --shop-fx-light: 170, 217, 229; --shop-fx-rune: 92, 169, 197; }
.shop-v17 .shop-v18-stage[data-element="wind"] { --shop-fx-light: 195, 218, 175; --shop-fx-rune: 133, 182, 142; }
.shop-v17 .shop-v18-stage[data-element="lightning"] { --shop-fx-light: 221, 202, 235; --shop-fx-rune: 164, 143, 199; }
.shop-v17 .shop-v18-stage[data-element="earth"] { --shop-fx-light: 224, 198, 155; --shop-fx-rune: 170, 145, 106; }
.shop-v17 .shop-v18-stage::before,
.shop-v17 .shop-v18-atmosphere::before,
.shop-v17 .shop-v18-product-art::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.shop-v17 .shop-v18-stage::before {
  inset: 2% 13% 8%;
  z-index: 1;
  opacity: .28;
  background: linear-gradient(177deg, rgba(var(--shop-fx-light), .12), transparent 48%),
    radial-gradient(ellipse at 50% 64%, rgba(var(--shop-fx-rune), .10), transparent 66%);
  clip-path: polygon(30% 0, 66% 0, 100% 100%, 0 100%);
}
.shop-v17 .shop-v18-product-art::after {
  inset: 4px; opacity: 0; z-index: 2;
  background: linear-gradient(116deg, transparent 25%, rgba(var(--shop-fx-light), .05) 40%,
    rgba(var(--shop-fx-light), .9) 48%, rgba(var(--shop-fx-light), .18) 54%, transparent 68%);
  -webkit-mask-image: var(--shop-v18-specular-mask, none);
  mask-image: var(--shop-v18-specular-mask, none);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.shop-v17 .shop-v18-stage[data-product-kind="shard"] .shop-v18-product-art::after { display: none; }
.shop-v17 .shop-v18-atmosphere {
  position: absolute; inset: 0; pointer-events: none; z-index: 4; background: none;
}
.shop-v17 .shop-v18-glyph { z-index: 0; }
.shop-v17 .shop-v18-atmosphere::before {
  width: 2px; height: 2px; left: 49%; top: 66%; opacity: 0;
  background: rgba(var(--shop-fx-light), .85);
  box-shadow: -29px 9px rgba(var(--shop-fx-light), .48), 36px -22px rgba(var(--shop-fx-light), .68),
    -50px -37px rgba(var(--shop-fx-light), .30), 61px 17px rgba(var(--shop-fx-light), .32),
    15px -49px rgba(var(--shop-fx-light), .62), -45px -21px rgba(var(--shop-fx-light), .4);
}
.shop-v17 .shop-v18-pedestal::after {
  content: ""; position: absolute; inset: 12% 6% 20%; border-radius: 50%;
  border-top: 1px solid rgba(var(--shop-fx-rune), .65); opacity: .32; pointer-events: none;
}
/* The old single diamond reveal is replaced by materialization and the stage. */
.shop-v17 .shop-v17-success[data-reveal="true"] :is(.shop-v17-success-art,.shop-v17-success-ray,.shop-v17-success-seal) { animation: none; }
.shop-v17 .shop-v17-success-ray { display: none; }
.shop-v17[data-cinematic="entry"] .shop-v18-stage::before { animation: shop-v18-light-open 620ms cubic-bezier(.2,.65,.2,1) both; }
.shop-v17[data-cinematic="entry"] .shop-v18-glyph { animation: shop-v18-glyph-wake 620ms ease-out both; }
.shop-v17[data-cinematic="inspect"] .shop-v18-stage::before { animation: shop-v18-light-open 680ms cubic-bezier(.2,.65,.2,1) both; }
.shop-v17[data-cinematic="inspect"] .shop-v18-product-art::after { animation: shop-v18-metal-glint 520ms 110ms ease-out both; }
.shop-v17[data-cinematic="review"] .shop-v18-pedestal::after { animation: shop-v18-seam-lock 420ms ease-out both; }
.shop-v17[data-cinematic="acquire"] .shop-v18-product-art { animation: shop-v18-materialize 520ms cubic-bezier(.18,.72,.18,1) both; }
.shop-v17[data-cinematic="acquire"] .shop-v18-stage::before { animation: shop-v18-receipt-light 1020ms ease-out both; }
.shop-v17[data-cinematic="acquire"] .shop-v18-product-art::after { animation: shop-v18-metal-glint 460ms 300ms ease-out both; }
.shop-v17[data-cinematic="acquire"] .shop-v18-glyph { animation: shop-v18-receipt-glyph 720ms 130ms ease-out both; }
.shop-v17[data-cinematic="acquire"] .shop-v18-atmosphere::before { animation: shop-v18-fine-dust 560ms 340ms ease-out both; }
.shop-v17[data-cinematic="acquire"] .shop-v18-pedestal::after { animation: shop-v18-seam-lock 650ms 300ms ease-out both; }
.shop-v17[data-cinematic="settled"] .shop-v18-product-art { opacity: 1; }
@keyframes shop-v18-light-open {
  0% { opacity: 0; transform: translateY(-9px) scaleX(.82); }
  54% { opacity: .58; }
  100% { opacity: .28; transform: none; }
}
@keyframes shop-v18-glyph-wake {
  0% { opacity: .04; transform: translateY(calc(-50% + 7px)) scale(.92); }
  100% { opacity: .5; transform: translateY(-50%); }
}
@keyframes shop-v18-materialize {
  0% { opacity: .06; transform: translateY(13px) scale(.955); }
  42% { opacity: 1; }
  78% { transform: translateY(-1px) scale(1.003); }
  100% { opacity: 1; transform: none; }
}
@keyframes shop-v18-receipt-light {
  0% { opacity: .05; transform: scaleX(.76); }
  24% { opacity: .7; }
  100% { opacity: .28; transform: none; }
}
@keyframes shop-v18-metal-glint {
  0% { opacity: 0; }
  34% { opacity: .32; }
  75% { opacity: .10; }
  100% { opacity: 0; }
}
@keyframes shop-v18-receipt-glyph {
  0% { opacity: .04; transform: translateY(calc(-50% + 6px)) scale(.9); }
  38% { opacity: .65; transform: translateY(-50%) scale(1.025); }
  100% { opacity: .5; transform: translateY(-50%); }
}
@keyframes shop-v18-seam-lock {
  0% { opacity: .15; transform: scaleX(.85); }
  48% { opacity: .8; }
  100% { opacity: .32; transform: none; }
}
@keyframes shop-v18-fine-dust {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  25% { opacity: .5; }
  100% { opacity: 0; transform: translateY(-21px) scale(1.08); }
}
/* Every phase terminates. Background-off and low-memory keep the object reveal
   but omit decorative motes. Full reduced motion uses the settled still. */
.shop-v17:is([data-cinematic-ambient="off"],[data-cinematic-degraded="true"]) .shop-v18-atmosphere::before { animation: none; opacity: 0; }
.shop-v17:is([data-cinematic-reduced="true"],[data-effects-paused="true"]) :is(.shop-v18-product-art,.shop-v18-glyph),
.shop-v17:is([data-cinematic-reduced="true"],[data-effects-paused="true"]) .shop-v18-stage::before,
.shop-v17:is([data-cinematic-reduced="true"],[data-effects-paused="true"]) .shop-v18-product-art::after,
.shop-v17:is([data-cinematic-reduced="true"],[data-effects-paused="true"]) .shop-v18-pedestal::after,
.shop-v17:is([data-cinematic-reduced="true"],[data-effects-paused="true"]) .shop-v18-atmosphere::before,
body.motion-reduced .shop-v17 :is(.shop-v18-product-art,.shop-v18-glyph),
body.motion-reduced .shop-v17 .shop-v18-stage::before,
body.motion-reduced .shop-v17 .shop-v18-product-art::after,
body.motion-reduced .shop-v17 .shop-v18-pedestal::after,
body.motion-reduced .shop-v17 .shop-v18-atmosphere::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .shop-v17 :is(.shop-v18-product-art,.shop-v18-glyph),
  .shop-v17 .shop-v18-stage::before,.shop-v17 .shop-v18-product-art::after,
  .shop-v17 .shop-v18-pedestal::after,
  .shop-v17 .shop-v18-atmosphere::before { animation: none !important; }
}