/* ═══════════════════════════════════════════════════════════════
   FLOATING PRODUCT SHOWCASE (views/partials/showcase.ejs)
   - Sirf transform/opacity animation (GPU cheap), har item ka alag phase.
   - Reflection = SVG ka ulta copy + gradient mask (static render, sirf transform chalta hai).
   - Pause: .hero/.page-hero par fx.js .fx-paused lagata hai, tab hidden par html.fx-hidden
     → fx.css ka rule saare descendants ka animation-play-state paused kar deta hai.
   - Entrance: main.js ka .reveal → .in (IntersectionObserver), items staggered.
   ═══════════════════════════════════════════════════════════════ */
.sc {
  --sc-fg: #fff; --sc-sub: rgba(255,255,255,.72); --sc-tile: rgba(255,255,255,.07); --sc-line: rgba(255,255,255,.16);
  --sc-ic: color-mix(in srgb, var(--pt-b, #38bdf8) 55%, #fff);
  list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.6vw, 1.4rem);
}
.hero .sc { /* home hero: light background */
  --sc-fg: var(--text); --sc-sub: var(--text-faint); --sc-tile: color-mix(in srgb, var(--pt-a, #2563eb) 6%, var(--surface, #fff));
  --sc-line: color-mix(in srgb, var(--pt-a, #2563eb) 18%, transparent); --sc-ic: var(--pt-a, var(--accent));
  justify-content: center; margin-top: clamp(2rem, 4vw, 3rem);
}
[data-theme="dark"] .hero .sc { --sc-ic: color-mix(in srgb, var(--pt-b, #38bdf8) 70%, #fff); }

/* staggered entrance (reveal ke andar) */
.sc.reveal { transform: none; }
.sc-item {
  width: 116px; display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; transform: translateY(22px) scale(.92);
  transition: opacity .7s var(--ease-out, ease), transform .8s var(--ease-out, ease);
  transition-delay: calc(.25s + var(--i) * .09s);
}
.sc.in .sc-item { opacity: 1; transform: none; }

.sc-stage { position: relative; width: 88px; height: 104px; }
.sc-float {
  position: absolute; left: 0; top: 0; width: 88px; height: 88px; border-radius: 22px;
  display: grid; place-items: center; color: var(--sc-ic);
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc-ic) 16%, transparent), var(--sc-tile) 60%);
  border: 1px solid var(--sc-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: border-color .3s, box-shadow .3s;
  animation: sc-bob var(--sc-dur, 5.6s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.37s);
  will-change: transform;
}
.sc .sc-ico { width: 58px; height: 58px; }
.sc .sc-refl { /* mirror: ulta copy, niche fade */
  position: absolute; left: 15px; top: 90px; width: 58px; height: 58px; color: var(--sc-ic);
  transform: scaleY(-1); opacity: .2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 45%); mask-image: linear-gradient(to top, #000, transparent 45%);
  animation: sc-refl var(--sc-dur, 5.6s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.37s);
}
.sc-glow {
  position: absolute; left: 10px; right: 10px; top: 90px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sc-ic) 55%, transparent), transparent);
  animation: sc-glow var(--sc-dur, 5.6s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.37s);
}
.sc-item:nth-child(3n+2) { --sc-dur: 6.4s; }
.sc-item:nth-child(3n)   { --sc-dur: 4.9s; }

@keyframes sc-bob  { from { transform: translateY(2px) rotate(-2deg); } to { transform: translateY(-9px) rotate(2deg); } }
@keyframes sc-refl { from { transform: scaleY(-1) translateY(-2px); opacity: .24; } to { transform: scaleY(-1) translateY(8px); opacity: .1; } }
@keyframes sc-glow { from { transform: scaleX(1); opacity: .9; } to { transform: scaleX(.7); opacity: .45; } }

/* repair mode: chhota wrench "kaam chal raha hai" */
.sc .sc-fix {
  position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; padding: 4px; border-radius: 50%;
  color: #0b1220; background: var(--pt-b, #facc15); box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transform-origin: 70% 30%; animation: sc-fix 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s);
}
@keyframes sc-fix { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-28deg); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-10deg); } }

.sc-label { margin-top: .15rem; font-family: var(--font-head, inherit); font-weight: 700; font-size: .82rem; line-height: 1.2; color: var(--sc-fg); }
.sc-spec { max-width: 100%;
  margin-top: .35rem; padding: .18rem .5rem; border-radius: 999px; font-size: .66rem; line-height: 1.3; font-weight: 600;
  color: var(--sc-sub); border: 1px solid var(--sc-line); background: var(--sc-tile);
  transition: color .3s, border-color .3s, background .3s;
}
@media (hover: hover) {
  .sc-item:hover .sc-float { border-color: color-mix(in srgb, var(--sc-ic) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 24px -4px color-mix(in srgb, var(--sc-ic) 60%, transparent); }
  .sc-item:hover .sc-spec { color: var(--sc-fg); border-color: color-mix(in srgb, var(--sc-ic) 60%, transparent); }
}

/* mobile: ek snap-scroll row (page ka horizontal scroll nahi, sirf is list ka) */
@media (max-width: 760px) {
  .sc { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: -16px; padding: 0 16px 4px; gap: .5rem; justify-content: flex-start; }
  .hero .sc { justify-content: flex-start; }
  .sc::-webkit-scrollbar { display: none; }
  .sc-item { flex: 0 0 96px; width: 96px; scroll-snap-align: start; }
  .sc-stage { width: 72px; height: 86px; }
  .sc-float { width: 72px; height: 72px; border-radius: 18px; }
  .sc .sc-ico { width: 46px; height: 46px; }
  .sc .sc-refl { left: 13px; top: 74px; width: 46px; height: 46px; }
  .sc-glow { top: 74px; }
  .sc-label { font-size: .76rem; }
  .sc-spec { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-float, .sc-refl, .sc-glow, .sc-fix { animation: none !important; }
  .sc-item { opacity: 1; transform: none; transition: none; }
}
@media print { .sc { display: none; } }

/* Real product photo (item.photo, abhi sirf Canon page) — wahi float/reflection/glow, sirf icon ki jagah <img>.
   Tile halka white rakha hai taaki white-background product shots kisi bhi hero par saaf dikhein. */
.sc-item--photo .sc-float { background: #fff; overflow: hidden; }
.sc .sc-photo { width: 78px; height: 78px; object-fit: contain; display: block; }
.sc .sc-refl[src] { object-fit: contain; }
@media (max-width: 760px) { .sc .sc-photo { width: 64px; height: 64px; } }

/* ═══════════════════════════════════════════════════════════════
   MARQUEE MODE (Canon hero only, scData.mode === 'marquee')
   Continuous right-to-left scroll of the whole row - starts flush at the
   right edge of the hero and drifts left forever, looping seamlessly
   (the item list is rendered twice back-to-back in showcase.ejs).
   Each item KEEPS its own bob/glow/reflection animation from above -
   this only adds the horizontal drift on the outer track.
   ═══════════════════════════════════════════════════════════════ */
.sc-marquee-mask {
  overflow: hidden; margin-top: clamp(1.6rem, 3vw, 2.4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sc--marquee {
  margin-top: 0; flex-wrap: nowrap; width: max-content;
  animation: sc-marquee-scroll 38s linear infinite;
  animation-delay: .1s;
  /* Start flush at the right edge: the track's natural position already begins with the
     first duplicate group, so we offset the whole track in from the right on load and let
     the keyframes carry it the rest of the way - avoids a jarring snap-in. */
  transform: translateX(0);
}
.sc--marquee:hover { animation-play-state: paused; }
.sc--marquee .sc-item { opacity: 1; transform: none; transition: none; } /* skip the fade-in-from-below entrance - the marquee's own motion IS the entrance */
@keyframes sc-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .sc-marquee-mask { margin-inline: -16px; padding-inline: 16px; }
  .sc--marquee { animation-duration: 26s; }
}
@media (prefers-reduced-motion: reduce) {
  .sc--marquee { animation: none; }
}