/* ═══════════════════════════════════════════════════════════════════════
   v216.css — "The Wow Release" · 2026-10-14
   Loaded last. Owner brief: (1) the four offer banners look like cartoon
   shapes — they must look premium, with real graphics and motion; (2) the
   case films still do not play on the phone; (3) the Black Card in the
   first hero banner is not organised.

   Seals kept: no filter on the card or the hero stage (v211 stillness) ·
   no blur loops · no animated gradient positions · transform/opacity
   only · v200 gold button gradient untouched · tap-to-flip stays removed.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · OFFER BANNERS — real artwork, one calm sheen, no drawn shapes ──
   v212 painted a card, a rotated rectangle and a gold dash on each band.
   Those read as clip-art. Each band now carries a finished photographic
   painting (images/offers/art-*.jpg), a gold hairline inset, and a single
   slow light sweep on the shine layer. */
.shv-offer-making .shv-offer-art::before,
.shv-offer-making .shv-offer-art::after,
.shv-offer-delivery .shv-offer-art::before,
.shv-offer-delivery .shv-offer-art::after,
.shv-offer-premium .shv-offer-art::before,
.shv-offer-premium .shv-offer-art::after,
.shv-offer-cert .shv-offer-art::before,
.shv-offer-cert .shv-offer-art::after {
  display: none !important;
  content: none !important;
}

.shv-offer-making .shv-offer-art,
.shv-offer-delivery .shv-offer-art,
.shv-offer-premium .shv-offer-art,
.shv-offer-cert .shv-offer-art {
  background-color: #1a070b !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center 42% !important;
  border-bottom: 1px solid rgba(233, 196, 106, .5) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 233, 180, .08), inset 0 -28px 36px -18px rgba(12, 4, 7, .85);
  overflow: hidden;
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.shv-offer-making .shv-offer-art {
  background-image: linear-gradient(180deg, rgba(20, 6, 10, .05), rgba(20, 6, 10, .6)), url(/images/offers/art-making.jpg) !important;
}
.shv-offer-delivery .shv-offer-art {
  background-image: linear-gradient(180deg, rgba(20, 6, 10, .05), rgba(20, 6, 10, .6)), url(/images/offers/art-delivery.jpg) !important;
}
.shv-offer-premium .shv-offer-art {
  background-image: linear-gradient(180deg, rgba(20, 6, 10, .05), rgba(20, 6, 10, .6)), url(/images/offers/art-premium.jpg) !important;
}
.shv-offer-cert .shv-offer-art {
  background-image: linear-gradient(180deg, rgba(20, 6, 10, .05), rgba(20, 6, 10, .6)), url(/images/offers/art-cert.jpg) !important;
}

/* the living part: one soft light sweep across the band (transform only) */
.shv-offer-card .shv-offer-shine {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 104px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 242, 206, .26) 50%, transparent 64%);
  transform: translateX(-115%);
  animation: v216Sheen 7.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes v216Sheen {
  0%, 40% { transform: translateX(-115%); }
  100%    { transform: translateX(115%); }
}

/* a slow lift of the artwork when the visitor points at the banner */
.shv-offer-card:hover .shv-offer-art { transform: scale(1.035); }

/* the card itself: a crisp gold-edged slab with a soft lower shadow */
.shv-offer-card {
  box-shadow: 0 26px 52px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 236, 190, .14);
}

/* ── 2 · THE BLACK CARD HERO — one card, one motion, nothing overlapping ──
   Stacked over v184 → v215 the hero card had: a -2.4° tilt, a drop-shadow
   filter, a floor-glow blur, two float animations on the same element, a
   glint on background-position, and the certificate + status pill sitting
   on top of the card. Now the stage is a single column: card, then the
   certificate, then the status line — each with its own clear space. */
.bc-hero-stage {
  min-height: 0 !important;
  height: auto;
  flex-direction: column !important;
  justify-content: center;
  gap: 18px;
  padding: 16px 0 8px;
}
.bc-hero-stage::after { display: none !important; }

.bc-stage-card {
  filter: none !important;
  transform: none !important;
  width: min(100%, 520px);
  margin: 0 auto;
}
/* the single float: translate + a whisper of rotate, compositor-only */
.bc-stage-card .bc-card-wrap {
  filter: none !important;
  animation: v216HeroFloat 6.4s ease-in-out infinite !important;
}
@keyframes v216HeroFloat {
  0%, 100% { translate: 0 0;    rotate: 0deg;   }
  50%      { translate: 0 -12px; rotate: .6deg; }
}
/* the gleam on the face moved to the wrapper's own sweep (v215); no
   background-position loop here any more */
.bc-stage-card .bc-front::after { display: none !important; animation: none !important; }

.bc-stage-cert {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(100%, 520px) !important;
  transform: none !important;
  margin: 0 auto;
}
.bc-stage-open {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 5;
  margin: 0 auto;
}

@media (max-width: 820px) {
  .bc-hero-stage {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 0 4px;
  }
  .bc-stage-card,
  .bc-stage-cert { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-stage-card .bc-card-wrap,
  .shv-offer-card .shv-offer-shine { animation: none !important; }
  .shv-offer-card .shv-offer-shine { display: none; }
}