/* ITERATION 20 — Merch door as a gallery piece with moving light (staging only). */

.plate-img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- moving light ---------- */

/* a) light sweep — cyan->magenta beam, <=20% opacity, drifts L->R->L, 24s */
.light-sweep{
  position:absolute; top:6%; left:0; width:30%; height:30%;
  background:linear-gradient(90deg, rgba(0,229,255,0) 0%, rgba(0,229,255,.65) 45%, rgba(255,61,242,.65) 75%, rgba(255,61,242,0) 100%);
  opacity:.2; mix-blend-mode:screen; pointer-events:none; border-radius:20px; filter:blur(3px);
  animation:sweep 24s ease-in-out infinite; will-change:transform;
}
@keyframes sweep{ 0%{transform:translateX(-35%)} 50%{transform:translateX(325%)} 100%{transform:translateX(-35%)} }

/* b) floor reflection — glint across the wet floor, synced + offset */
.floor-glint{
  position:absolute; top:70%; left:0; width:42%; height:13%;
  background:linear-gradient(90deg, rgba(0,229,255,0) 0%, rgba(0,229,255,.55) 50%, rgba(255,61,242,.45) 100%);
  opacity:.16; mix-blend-mode:screen; pointer-events:none; filter:blur(7px);
  animation:glint 24s ease-in-out infinite; animation-delay:-3s; will-change:transform;
}
@keyframes glint{ 0%{transform:translateX(-40%) scaleY(.5)} 50%{transform:translateX(250%) scaleY(.95)} 100%{transform:translateX(-40%) scaleY(.5)} }

/* c) pink lamp glow breathes 70%->100%, 7s */
.lamp-glow{
  position:absolute; left:35%; top:13%; width:15%; height:12%;
  background:radial-gradient(circle, rgba(255,61,242,.8) 0%, rgba(255,61,242,.25) 55%, rgba(255,61,242,0) 72%);
  mix-blend-mode:screen; pointer-events:none;
  animation:lamp 7s ease-in-out infinite; will-change:opacity;
}
@keyframes lamp{ 0%,100%{opacity:.7} 50%{opacity:1} }

/* d) plinth rim light — pulses 15% brightness every 9s; .flash brightens on piece change */
.plinth-rim{
  position:absolute; left:24%; top:48%; width:52%; height:2.4%;
  background:linear-gradient(90deg, rgba(0,229,255,0) 0%, rgba(0,229,255,.85) 50%, rgba(0,229,255,0) 100%);
  box-shadow:0 0 12px rgba(0,229,255,.8), 0 0 30px rgba(0,229,255,.4);
  filter:blur(1px); pointer-events:none;
  animation:rim 9s ease-in-out infinite; will-change:opacity;
}
@keyframes rim{ 0%,100%{opacity:.85} 50%{opacity:1} }
.rim-flash{
  position:absolute; left:24%; top:48%; width:52%; height:2.6%;
  background:linear-gradient(90deg, rgba(0,229,255,0) 0%, #bdf6ff 50%, rgba(0,229,255,0) 100%);
  box-shadow:0 0 22px rgba(0,229,255,1), 0 0 52px rgba(0,229,255,.7);
  opacity:0; pointer-events:none; transition:opacity .35s ease; will-change:opacity;
}
.rim-flash.on{ opacity:1; }

/* e) neon sign — steady tube glow + one shimmer every 12s */
.g-sign{ position:absolute; left:55%; top:8%; width:37%; height:30%; pointer-events:none; }
.g-neon{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-family:var(--font-disp); font-weight:400; line-height:.92;
  font-size:clamp(15px,5.6cqw,30px); letter-spacing:.04em;
  color:#d9fbff; -webkit-text-stroke:1px #5deeff;
  text-shadow:0 0 3px rgba(0,229,255,.95), 0 0 10px rgba(0,229,255,.55), 0 0 24px rgba(0,229,255,.25),
              0 0 2px #ff3df2, 0 0 14px rgba(255,61,242,.45);
}
.g-neon-shimmer{
  color:#ffffff; -webkit-text-stroke:0; opacity:0;
  text-shadow:0 0 6px rgba(180,255,255,.95), 0 0 20px rgba(0,229,255,.7), 0 0 34px rgba(255,61,242,.4);
  animation:shimmer 12s ease-in-out infinite; will-change:opacity;
}
@keyframes shimmer{ 0%,100%{opacity:0} 4%{opacity:.65} 12%{opacity:0} }

/* ---------- product on plinth ---------- */
.pp-wrap{
  position:absolute; left:50%; bottom:50%; width:48%; height:34%;
  transform:translateX(-50%); pointer-events:none;
  animation:floatp 5.5s ease-in-out infinite; will-change:transform;
}
@keyframes floatp{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-4px)} }
.pp-glow{
  position:absolute; left:50%; bottom:10%; transform:translateX(-50%); width:120%; height:140%;
  background:radial-gradient(ellipse at 50% 82%, rgba(0,229,255,.5) 0%, rgba(0,229,255,.18) 45%, rgba(0,229,255,0) 70%);
  filter:blur(4px); mix-blend-mode:screen;
}
.pp-img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; }

/* ---------- placard ---------- */
.placard{
  position:absolute; left:30%; top:55%; width:40%; height:11%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(6,14,22,.32); backdrop-filter:blur(3px);
  border:1px solid rgba(0,229,255,.45); border-radius:6px;
}
.pl-name{ font-family:var(--font-body); font-weight:700; font-size:clamp(10px,2.4cqw,13px); color:#eae6ff; letter-spacing:.02em; line-height:1.1; text-align:center; }
.pl-price{ font-family:var(--font-mono); font-size:clamp(11px,2.6cqw,14px); color:#7df3ff; line-height:1; }

/* ---------- dots ---------- */
.dots{ position:absolute; left:0; width:100%; top:70%; display:flex; gap:9px; align-items:center; justify-content:center; pointer-events:none; }
.dots .dot{
  pointer-events:auto; width:8px; height:8px; border-radius:50%; padding:0;
  border:1px solid rgba(0,229,255,.6); background:transparent; cursor:pointer;
  transition:background .2s, box-shadow .2s;
}
.dots .dot.on{ background:#00e5ff; box-shadow:0 0 10px rgba(0,229,255,.85); }

/* ---------- buy button (reposition over the gallery) ---------- */
.buy-btn{ left:35%; top:78%; width:30%; height:10%; }

/* ---------- accessibility: kill light motion ---------- */
@media (prefers-reduced-motion: reduce){
  .light-sweep,.floor-glint,.lamp-glow,.plinth-rim,.g-neon-shimmer,.pp-wrap{ animation:none !important; }
}