/* Shared hero interaction: a product view with a business-scene card tucked behind it. */
.hero-stack-switch {
  --stack-x: clamp(24px, 3.8vw, 44px);
  --stack-y: clamp(20px, 3vw, 34px);
  position: relative;
  aspect-ratio: var(--stack-card-ratio, var(--stack-scene-ratio, 1.2));
  isolation: isolate;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.hero-stack-card {
  position: absolute;
  inset: 0 var(--stack-x) var(--stack-y) 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .68s cubic-bezier(.2,.8,.2,1), box-shadow .68s cubic-bezier(.2,.8,.2,1), filter .68s ease;
  will-change: transform;
}

.hero-stack-card--scene {
  z-index: 1;
  border: 1px solid rgba(148,163,184,.62);
  background: #f8fafc;
  box-shadow: 0 28px 60px rgba(15,23,42,.2), 0 0 0 1px rgba(255,255,255,.7) inset;
}

.hero-stack-card--scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero-stack-product-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-stack-card--product {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(148,163,184,.28);
  background: #fff;
  box-shadow: 0 32px 70px rgba(15,23,42,.22);
}

.hero-stack-product-shell {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.hero-stack-switch:not(.is-scene-active) .hero-stack-card--scene {
  transform: translate3d(var(--stack-x),var(--stack-y),0) rotateY(3.5deg) rotateX(-1deg) scale(.985);
  filter: saturate(.92);
}

.hero-stack-switch:not(.is-scene-active) .hero-stack-card--product {
  transform: translate3d(0,0,42px) rotateY(-1deg) rotateX(.3deg);
  filter: drop-shadow(0 30px 48px rgba(0,8,28,.32));
}

/* Pre-composited case artwork stays crisp; the stack still lifts it above the scene. */
.hero-stack-switch:not(.is-scene-active) .hero-stack-card--product.hero-stack-card--raster {
  transform: translate3d(0,0,42px);
}

.hero-stack-switch.is-scene-active .hero-stack-card--scene {
  z-index: 3;
  transform: translate3d(0,0,48px) rotateY(0) rotateX(0) scale(1);
  filter: none;
  box-shadow: 0 38px 78px rgba(15,23,42,.28), 0 0 0 1px rgba(255,255,255,.8) inset;
}

.hero-stack-switch.is-scene-active .hero-stack-card--product {
  z-index: 1;
  transform: translate3d(var(--stack-x),var(--stack-y),0) rotateY(-4deg) rotateX(1deg) scale(.985);
  filter: saturate(.82) brightness(.86) drop-shadow(0 18px 36px rgba(0,8,28,.28));
}

.hero-stack-badge {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem .68rem;
  border: 1px solid rgba(148,163,184,.42);
  border-radius: .5rem;
  background: rgba(255,255,255,.9);
  color: #15359d;
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  pointer-events: none;
  white-space: nowrap;
}

.hero-stack-badge em {
  color: #64748b;
  font-size: .58rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .02em;
}

.hero-stack-card--scene .hero-stack-badge { top: .75rem; right: .75rem; }
.hero-stack-card--product .hero-stack-badge { right: .75rem; bottom: .75rem; }

.hero-stack-switch.is-scene-active .hero-stack-card--scene .hero-stack-badge {
  background: #15359d;
  border-color: rgba(255,255,255,.32);
  color: #fff;
}

.hero-stack-switch.is-scene-active .hero-stack-card--scene .hero-stack-badge em { color: #bfdbfe; }
.hero-stack-switch.is-scene-active .hero-stack-card--product .hero-stack-badge { opacity: .72; }

.hero-stack-card:focus-visible {
  outline: 3px solid #86e9ff;
  outline-offset: 5px;
}

.hero-stack-switch--dark .hero-stack-card--scene {
  border-color: rgba(134,233,255,.44);
  box-shadow: 0 28px 64px rgba(0,8,28,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.hero-stack-switch--dark .hero-stack-card--product {
  border-color: rgba(134,233,255,.2);
  background: #071226;
  box-shadow: 0 32px 76px rgba(0,8,28,.48);
}

.hero-stack-switch--dark .hero-stack-card--product.hero-stack-card--transparent {
  border-color: rgba(134,233,255,.28);
  background: transparent;
  box-shadow: none;
}

.hero-stack-switch--dark .hero-stack-badge {
  border-color: rgba(134,233,255,.28);
  background: rgba(7,18,38,.9);
  color: #86e9ff;
}

.hero-stack-switch--dark .hero-stack-badge em { color: #bfd0e4; }

@media (max-width: 767px) {
  .hero-stack-switch { --stack-x: 18px; --stack-y: 16px; }
  .hero-stack-card { border-radius: .75rem; }
  .hero-stack-badge { padding: .4rem .5rem; font-size: .58rem; }
  .hero-stack-badge em { display: none; }
  .hero-stack-card--scene .hero-stack-badge,
  .hero-stack-card--product .hero-stack-badge { top: .55rem; right: .55rem; bottom: auto; }
  .hero-stack-switch--case-composite:not(.is-scene-active) .hero-stack-card--scene .hero-stack-badge,
  .hero-stack-switch--case-composite.is-scene-active .hero-stack-card--product .hero-stack-badge {
    top: auto;
    bottom: .55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stack-card { transition: none; }
}