/* ============================================================
   RED BARON — GLOBAL MOTORCYCLE IMAGE SYSTEM
   ------------------------------------------------------------
   One presentation system for every motorcycle image.
   New motorcycles uploaded from the dashboard automatically use
   the same framing because the public cards/gallery are dynamic.

   The companion script (photo-bg.js) can remove an exterior white
   background and crop excess empty space in-browser. This CSS then
   places every processed image in the same visual stage.
   ============================================================ */

:root{
  --rb-bike-stage:#090d11;
  --rb-bike-stage-2:#0d1217;
  --rb-bike-edge:rgba(255,255,255,.09);
  --rb-bike-glow:rgba(255,255,255,.11);
  --rb-bike-shadow:drop-shadow(0 18px 18px rgba(0,0,0,.34));
}

/* ---------- shared product frame ---------- */
.bike-photo,
.stage-frame,
.thumb-scroll button,
.compare-thumb{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255,255,255,.075) 0%, rgba(255,255,255,.025) 28%, transparent 64%),
    linear-gradient(180deg,var(--rb-bike-stage-2) 0%,var(--rb-bike-stage) 100%) !important;
}

/* subtle floor light — generated by CSS, never baked into a photo */
.bike-photo::after,
.stage-frame::after{
  content:"";
  position:absolute;
  z-index:0;
  left:15%;
  right:15%;
  bottom:8%;
  height:14%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,var(--rb-bike-glow),transparent 70%);
  filter:blur(14px);
  opacity:.58;
}

/* Every product image follows the same rules. No crop, no stretch. */
.bike-photo img,
#stageImg,
.thumb-scroll img,
.compare-thumb img{
  object-fit:contain !important;
  object-position:center center !important;
  filter:var(--rb-bike-shadow);
}

.bike-photo img{
  z-index:1;
  padding:clamp(10px,4.2%,22px) !important;
  transform:scale(.96) !important;
  transform-origin:center center;
  transition:opacity .22s ease,transform .26s cubic-bezier(.22,1,.36,1) !important;
}

.bike:hover .bike-photo img,
#catalogue .bike:hover .bike-photo img{
  transform:scale(.985) !important;
}

/* Homepage compact cards keep exactly the same image treatment. */
#popular .bike-photo{
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255,255,255,.07), transparent 62%),
    linear-gradient(180deg,#0d1217,#090d11) !important;
}
#popular .bike-photo img{
  padding:clamp(7px,3.4%,16px) !important;
  transform:scale(.95) !important;
}
#popular .bike:hover .bike-photo img{transform:scale(.975) !important}

/* Catalogue cards: replace the older per-card scaling with the global rule. */
#catalogue .bike-photo{
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255,255,255,.075), transparent 63%),
    linear-gradient(180deg,#0d1217,#090d11) !important;
}
#catalogue .bike-photo img{
  padding:clamp(12px,4.6%,24px) !important;
  transform:scale(.96) !important;
}
#catalogue .bike:hover .bike-photo img{transform:scale(.985) !important}

/* ---------- detail page hero gallery ---------- */
.stage-frame{
  min-height:570px;
  display:block;
  background:
    radial-gradient(ellipse at 50% 76%, rgba(255,255,255,.085), transparent 58%),
    linear-gradient(180deg,#0d1217 0%,#090d11 100%) !important;
}
.stage-frame::after{
  left:12%;
  right:12%;
  bottom:7%;
  height:15%;
  opacity:.64;
}
#stageImg{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  z-index:1;
  padding:clamp(30px,6%,54px) clamp(26px,5%,48px) clamp(58px,10%,92px) !important;
  transform:none !important;
  transition:opacity .22s ease !important;
}

/* The detail hero must never wait for the optional canvas normaliser.
   The browser shows the optimised source immediately; the processed result
   can replace it later without making the gallery look empty. */
#stageImg.rb-fast-stage{opacity:1 !important}

/* Thumbnails no longer crop differently shaped uploads. */
.thumb-scroll button{
  display:grid;
  place-items:center;
}
.thumb-scroll img{
  width:100%;
  height:100%;
  padding:8px !important;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.25));
  transform:none !important;
}

/* Compare view uses the same centred presentation. */
.compare-thumb{
  position:relative;
}
.compare-thumb img{
  padding:8px !important;
  transform:none !important;
}

/* The JS marks successfully normalised images. Keep the transition clean. */
.bike-photo img,
#stageImg,
.thumb-scroll img,
.compare-thumb img{
  opacity:0;
}
.rb-product-image{
  image-rendering:auto;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.rb-product-image.rb-image-processing{opacity:0}
.rb-product-image.rb-image-ready{opacity:1}

@media (max-width:920px){
  .stage-frame{min-height:430px}
  #stageImg{padding:32px 24px 66px !important}
}

@media (max-width:680px){
  .stage-frame{min-height:320px}
  #stageImg{padding:22px 16px 48px !important}
  .bike-photo img{padding:10px !important;transform:scale(.97) !important}
  .bike:hover .bike-photo img{transform:scale(.985) !important}
  .thumb-scroll img{padding:5px !important}
}

@media (prefers-reduced-motion:reduce){
  .bike-photo img,#stageImg,.thumb-scroll img,.compare-thumb img{transition:none !important}
}