/* ONCE ÉDITION — the women's showcase pages: Bags (bags.html) and Jackets (jackets.html), js/showcase.js
   The owner's base pictures one under another on black, a little black between them — as the
   "coming soon" sections. Left: the bag in its scene. Right: the bag itself from the front.
   Under each picture, in the black: its name and price, or the placeholder label. */
.bags-page { background: #000; }
.bags-page .hud { background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,0)); }
.hud-btn.is-here { color: var(--ivory); position: relative; }
.hud-btn.is-here::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--brass); opacity: .75; }

.showcase { position: relative; display: grid; justify-items: center; gap: clamp(22px, 5vh, 54px);
  padding: calc(70px + env(safe-area-inset-top)) 0 clamp(30px, 7vh, 80px); direction: ltr; }

.bg-card { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.bg-card.seen { opacity: 1; transform: none; }
/* the picture at its own size (full width on a phone) */
.bg-pic { position: relative; width: min(100vw, calc(90svh * 1320 / 1409), 760px); max-width: 100%; overflow: hidden; }
.bg-card.real .bg-pic { cursor: pointer; }
.bg-frame { position: absolute; left: 0; width: 100%; }
.bg-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-scene { position: absolute; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.bg-scene img { display: block; width: 100%; height: auto; }

/* the bag from the front, on the right panel: it floats very slightly */
.bg-front { position: absolute; transform: translateY(-50%); filter: drop-shadow(0 26px 30px rgba(0,0,0,.6));
  opacity: 0; transition: opacity 1.3s var(--ease) .35s; }
.bg-card.seen .bg-front { opacity: 1; }
.bg-front img { display: block; width: 100%; height: auto; animation: bg-float 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -2.3s); }
@keyframes bg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4%); } }
/* until the front picture comes: a quiet frame on the panel */
.bg-slot { position: absolute; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center;
  border: 1px solid rgba(244,236,224,.34); background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 6px rgba(0,0,0,.12);
  color: #f4ece0; text-shadow: 0 0 6px #000, 0 0 14px rgba(0,0,0,.9); direction: rtl; }
.bg-slot span { font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif; font-weight: 300; font-size: clamp(11px, 2.9vw, 15px); }
.bg-slot small { font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif; font-weight: 200; font-size: clamp(10px, 2.4vw, 12.5px); opacity: .75; }

/* under the picture, in the black */
.bg-note { margin: clamp(12px, 3vw, 22px) 0 0; color: rgba(244,236,224,.62); direction: rtl;
  font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif; font-weight: 300; font-size: 12.5px;
  opacity: 0; transition: opacity 1.4s var(--ease) .5s; }
.bg-card.seen .bg-note { opacity: 1; }
.bg-buy { margin: clamp(14px, 3.4vw, 24px) 0 0; display: grid; justify-items: center; gap: 8px; color: #f4ece0; background: none; border: 0; cursor: pointer;
  opacity: 0; transform: translateY(12px); transition: opacity 1.5s var(--ease) .5s, transform 1.7s var(--ease) .5s; }
.bg-card.seen .bg-buy { opacity: 1; transform: none; }
.bg-name { font-family: "Cinzel", "Bodoni Moda", serif; font-weight: 600; font-size: clamp(15px, 4.4vw, 22px); letter-spacing: .32em; padding-left: .32em; text-transform: uppercase;
  text-shadow: 0 0 3px #000, 0 0 10px #000; }
.bg-ar { font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif; font-weight: 300; font-size: 13px; color: rgba(244,236,224,.85); direction: rtl; margin-top: -2px; }
.bg-ar.big { font-size: clamp(14px, 3.8vw, 18px); font-weight: 400; color: #f4ece0; text-shadow: 0 0 3px #000, 0 0 10px #000; }
.bg-price { font-family: "Noto Kufi Arabic", sans-serif; font-weight: 300; font-size: 13px; color: rgba(244,236,224,.8); direction: rtl; }
.bg-cta { font-family: "Noto Kufi Arabic", sans-serif; font-size: 12px; color: var(--brass, #c9a46a); border-bottom: 1px solid currentColor; padding-bottom: 2px; direction: rtl; }
.bg-buy:disabled { cursor: default; } .bg-buy:disabled .bg-cta { color: rgba(244,236,224,.5); border: 0; }

.bags-page .site-foot { background: #000; }
@media (prefers-reduced-motion: reduce) { .bg-front img { animation: none; } .bg-card, .bg-buy { transform: none; } }