/* ============================================================
   HERO STAGE V2  — luxury floral gift-box composition
   Layered, photographic, slow cinematic entry.
   Overrides only the right-column .stage; the rest of the
   site styling stays in styles.css.
   ============================================================ */

/* Re-tune the stage container ------------------------------- */
.stage.stage-v2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.04;
  max-height: 720px;
  isolation: isolate;
  overflow: visible;
  perspective: 1400px;
}

/* Existing .stage-glow / .stage-vignette in styles.css are kept. */

/* Soft warm floor under the whole composition --------------- */
.stage-floor-v2 {
  position: absolute;
  left: 4%; right: 4%; bottom: 0;
  height: 36%;
  background:
    radial-gradient(60% 78% at 50% 100%,
      rgba(255, 230, 226, .55) 0%,
      rgba(252, 218, 220, .35) 35%,
      rgba(250, 220, 225, .12) 65%,
      transparent 100%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}

/* ---- Base piece state (initial hidden) — narrower override
   so we don't fight specifics. Animations defined per class. */
.stage-v2 .piece {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, filter;
  transform-origin: 50% 100%;
}
.stage-v2 .piece img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* =============== BALLOON (CSS transparent bubble) ============ */
.stage-v2 .v2-balloon {
  top: -1%;
  left: 50%;
  width: 36%;
  aspect-ratio: 1 / 1.06;
  transform: translate(-50%, -28px);
  z-index: 5;
}
.v2-orb {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 12%, transparent 28%),
    radial-gradient(circle at 70% 78%, rgba(255,210,220,.30) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(255,245,247,.05) 0%, rgba(255,232,238,.10) 60%, rgba(220,180,190,.18) 100%);
  box-shadow:
    inset 0 0 50px rgba(255,255,255,.45),
    inset -28px -40px 60px rgba(220,170,185,.22),
    inset 32px 28px 50px rgba(255,255,255,.55),
    0 24px 60px rgba(180,120,140,.12);
  backdrop-filter: blur(.5px);
  overflow: hidden;
}
.v2-orb-shine {
  position: absolute;
  top: 9%; left: 22%;
  width: 26%; height: 32%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 40%, transparent 70%);
  filter: blur(2px);
}
.v2-orb-shine-2 {
  position: absolute;
  top: 18%; left: 30%;
  width: 8%; height: 6%;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  filter: blur(1px);
}
.v2-orb-rim {
  position: absolute; inset: 2%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  opacity: .55;
}
.v2-orb-message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: .02em;
  color: rgba(120, 70, 90, .55);
  text-align: center;
  line-height: 1;
}
.v2-orb-message em {
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 20px);
  display: block;
  margin: 2px 0;
}
.v2-orb-knot {
  position: absolute;
  left: 50%; bottom: -2.4%;
  width: 12px; height: 12px;
  background: radial-gradient(circle at 35% 30%, #f4b8c6 0%, #c4778b 60%, #8d3e54 100%);
  border-radius: 0 0 8px 8px;
  transform: translateX(-50%);
  clip-path: path("M 0 0 L 12 0 L 9 12 L 3 12 Z");
}

/* ============== Ribbon trailing from balloon ============== */
.stage-v2 .v2-ribbon {
  top: 8%;
  left: 50%;
  width: 14%;
  height: 76%;
  transform: translate(-50%, 20px);
  z-index: 4;
  filter: drop-shadow(0 6px 14px rgba(140,70,90,.18));
}
.stage-v2 .v2-ribbon svg {
  width: 100%; height: 100%;
}

/* ===================== Bow ==================== */
.stage-v2 .v2-bow {
  top: 30%;
  left: 50%;
  width: 14%;
  aspect-ratio: 220 / 140;
  transform: translate(-50%, 16px);
  z-index: 6;
  filter: drop-shadow(0 6px 12px rgba(170, 90, 110, .28));
}
.stage-v2 .v2-bow svg { width: 100%; height: 100%; }

/* =================== Pedestal ================== */
.stage-v2 .v2-pedestal {
  bottom: 1%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1500 / 1000;
  transform: translate(-50%, 30px);
  z-index: 2;
  filter: drop-shadow(0 22px 24px rgba(40,20,30,.18));
}
.stage-v2 .v2-pedestal img {
  filter: brightness(1.01) contrast(1.02);
}
.stage-v2 .v2-pedestal-shadow {
  bottom: 4%;
  left: 50%;
  width: 70%;
  height: 5%;
  transform: translate(-50%, 0);
  z-index: 1;
  background: radial-gradient(50% 100% at 50% 50%, rgba(40,18,30,.22) 0%, rgba(40,18,30,.10) 50%, transparent 78%);
  filter: blur(6px);
}

/* =================== The gift box ================== */
.stage-v2 .v2-box {
  bottom: 12%;
  left: 50%;
  width: 64%;
  aspect-ratio: 1200 / 680;
  transform: translate(-50%, 50px);
  z-index: 7;
  filter: drop-shadow(0 28px 30px rgba(40,18,28,.22));
}
.stage-v2 .v2-box img {
  filter: brightness(1.005) contrast(1.02);
}
.stage-v2 .v2-box-shadow {
  bottom: 11.6%;
  left: 50%;
  width: 60%;
  height: 4%;
  transform: translate(-50%, 0);
  z-index: 6;
  background: radial-gradient(50% 100% at 50% 50%, rgba(30,12,22,.34) 0%, rgba(30,12,22,.14) 55%, transparent 78%);
  filter: blur(7px);
}

/* =================== Back-layer stems ================== */
/* Each stem positions from its bottom anchor and grows upward.
   The base of each tucks behind the box's front rim by
   sitting BELOW (z-index lower than) the box image — but
   because the box image is below them, we get the look of
   stems planted *into* the cylinder by overlapping geometry. */

.stage-v2 .v2-stem,
.stage-v2 .v2-bloom,
.stage-v2 .v2-prod {
  transform-origin: 50% 95%;
}

/* Pampas back-left  --------------------------------------- */
.stage-v2 .v2-pampas-l {
  bottom: 34%; left: 4%;
  width: 32%; aspect-ratio: 1 / 1;
  z-index: 8;
  transform: translateY(40px) rotate(-14deg);
}
.stage-v2 .v2-pampas-l img {
  filter: brightness(1.06) contrast(1.04) saturate(.92) blur(1.5px) drop-shadow(0 6px 10px rgba(120,80,60,.16));
  transform: rotate(-6deg);
}

/* Pampas back-right (mirrored) ---------------------------- */
.stage-v2 .v2-pampas-r {
  bottom: 36%; right: 2%;
  width: 30%; aspect-ratio: 1 / 1;
  z-index: 8;
  transform: translateY(40px) rotate(18deg) scaleX(-1);
}
.stage-v2 .v2-pampas-r img {
  filter: brightness(1.06) contrast(1.04) saturate(.92) blur(1.8px) drop-shadow(0 6px 10px rgba(120,80,60,.16));
  transform: rotate(4deg);
}

/* Purple lisianthus back-center, arcing upward ------------ */
.stage-v2 .v2-lisi-back {
  bottom: 32%; left: 38%;
  width: 22%; aspect-ratio: 1 / 1.5;
  z-index: 9;
  transform: translateY(40px) rotate(-18deg);
}
.stage-v2 .v2-lisi-back img {
  filter: brightness(.96) contrast(1.05) saturate(1.05) blur(.6px) drop-shadow(0 8px 12px rgba(60,30,80,.18));
}

/* White gardenia rose on stem — tall back-right ----------- */
.stage-v2 .v2-gardenia {
  bottom: 32%; right: 14%;
  width: 22%; aspect-ratio: 1500 / 1500;
  z-index: 10;
  transform: translateY(46px) rotate(12deg);
}
.stage-v2 .v2-gardenia img {
  filter: brightness(1.03) contrast(1.02) saturate(.96) blur(.4px) drop-shadow(0 10px 12px rgba(80,60,80,.18));
}

/* Baby's breath back fillers ------------------------------ */
.stage-v2 .v2-gyp-back-l {
  bottom: 36%; left: 18%;
  width: 26%; aspect-ratio: 1 / 1;
  z-index: 11;
  transform: translateY(40px) rotate(-10deg);
}
.stage-v2 .v2-gyp-back-l img {
  filter: brightness(1.08) contrast(1.05) saturate(.95) blur(1px) drop-shadow(0 6px 8px rgba(100,70,80,.14));
}
.stage-v2 .v2-gyp-back-r {
  bottom: 34%; right: 18%;
  width: 24%; aspect-ratio: 1 / 1;
  z-index: 11;
  transform: translateY(40px) rotate(14deg) scaleX(-1);
}
.stage-v2 .v2-gyp-back-r img {
  filter: brightness(1.08) contrast(1.05) saturate(.95) blur(1px) drop-shadow(0 6px 8px rgba(100,70,80,.14));
}

/* =================== Tall products ================== */
/* Foaming shower gel — tall, back-left, partially hidden by flowers */
.stage-v2 .v2-prod-shower {
  bottom: 30%; left: 22%;
  width: 11%; aspect-ratio: 1 / 3;
  z-index: 12;
  transform: translateY(36px) rotate(-4deg);
}
.stage-v2 .v2-prod-shower img {
  filter:
    drop-shadow(0 10px 14px rgba(40,15,40,.32))
    drop-shadow(0 2px 4px rgba(40,15,40,.2));
}

/* Shimmering body oil — back-right of box */
.stage-v2 .v2-prod-bodyoil {
  bottom: 28%; right: 28%;
  width: 11%; aspect-ratio: 1 / 2.6;
  z-index: 12;
  transform: translateY(36px) rotate(6deg);
}
.stage-v2 .v2-prod-bodyoil img {
  filter:
    drop-shadow(0 10px 14px rgba(80,30,55,.32))
    drop-shadow(0 2px 4px rgba(80,30,55,.2));
}

/* Sakura dry oil — mid-front-right, tucked between blooms */
.stage-v2 .v2-prod-dryoil {
  bottom: 22%; right: 18%;
  width: 9%; aspect-ratio: 1 / 2.7;
  z-index: 14;
  transform: translateY(36px) rotate(8deg);
}
.stage-v2 .v2-prod-dryoil img {
  filter:
    drop-shadow(0 10px 14px rgba(180,90,110,.28))
    drop-shadow(0 2px 4px rgba(180,90,110,.2));
}

/* =================== Main focal blooms ================== */

/* Cream rose (top-down) — left center, behind */
.stage-v2 .v2-bloom-cream-l {
  bottom: 32%; left: 16%;
  width: 22%; aspect-ratio: 1 / 1;
  z-index: 13;
  transform: translateY(30px) rotate(-22deg);
}
.stage-v2 .v2-bloom-cream-l img {
  filter:
    drop-shadow(0 8px 14px rgba(170,140,110,.30))
    drop-shadow(0 2px 4px rgba(170,140,110,.18))
    brightness(1.02) saturate(1.02);
}

/* Magenta rose — focal, dead center */
.stage-v2 .v2-bloom-magenta {
  bottom: 32%; left: 38%;
  width: 26%; aspect-ratio: 1 / 1;
  z-index: 15;
  transform: translateY(30px) rotate(-12deg);
}
.stage-v2 .v2-bloom-magenta img {
  filter:
    drop-shadow(0 10px 16px rgba(110,40,90,.34))
    drop-shadow(0 3px 6px rgba(110,40,90,.22))
    brightness(1.01) saturate(1.06);
}

/* Pink rose with stem — emerging left, slight tilt */
.stage-v2 .v2-bloom-pink {
  bottom: 30%; left: 4%;
  width: 18%; aspect-ratio: 1 / 1.5;
  z-index: 14;
  transform: translateY(34px) rotate(-40deg);
}
.stage-v2 .v2-bloom-pink img {
  filter:
    drop-shadow(0 8px 14px rgba(180,80,110,.28))
    drop-shadow(0 2px 4px rgba(180,80,110,.18));
}

/* Peach rose with long stem — emerging right, extending out */
.stage-v2 .v2-bloom-peach {
  bottom: 30%; right: 2%;
  width: 18%; aspect-ratio: 1 / 1.5;
  z-index: 14;
  transform: translateY(36px) rotate(38deg);
}
.stage-v2 .v2-bloom-peach img {
  filter:
    drop-shadow(0 8px 14px rgba(200,110,120,.28))
    drop-shadow(0 2px 4px rgba(200,110,120,.18));
}

/* Second magenta — smaller, top of bouquet */
.stage-v2 .v2-bloom-magenta-2 {
  bottom: 46%; left: 28%;
  width: 16%; aspect-ratio: 1 / 1;
  z-index: 16;
  transform: translateY(26px) rotate(8deg) scale(.7);
}
.stage-v2 .v2-bloom-magenta-2 img {
  filter:
    drop-shadow(0 8px 12px rgba(110,40,90,.30))
    brightness(1.0) saturate(1.04);
}

/* Cream rose duplicate — right side filler */
.stage-v2 .v2-bloom-cream-r {
  bottom: 38%; right: 14%;
  width: 18%; aspect-ratio: 1 / 1;
  z-index: 16;
  transform: translateY(26px) rotate(32deg);
}
.stage-v2 .v2-bloom-cream-r img {
  filter:
    drop-shadow(0 8px 12px rgba(170,140,110,.28))
    brightness(1.02) saturate(1.0);
}

/* Dried beige flowers — front, spilling forward */
.stage-v2 .v2-dried-front {
  bottom: 14%; left: 28%;
  width: 36%; aspect-ratio: 1 / 1;
  z-index: 17;
  transform: translateY(34px) rotate(-6deg);
}
.stage-v2 .v2-dried-front img {
  filter:
    brightness(1.04) contrast(1.04) saturate(.95)
    drop-shadow(0 8px 12px rgba(120,80,60,.22))
    drop-shadow(0 2px 4px rgba(120,80,60,.16));
}

/* Pink sugar scrub jar — front center, between blooms */
.stage-v2 .v2-prod-jar {
  bottom: 18%; left: 46%;
  width: 14%; aspect-ratio: 1 / 1;
  z-index: 18;
  transform: translate(-50%, 30px) rotate(-3deg);
}
.stage-v2 .v2-prod-jar img {
  filter:
    drop-shadow(0 10px 16px rgba(120,30,75,.36))
    drop-shadow(0 3px 6px rgba(120,30,75,.22));
}

/* Baby's breath wisps — draped over front edge */
.stage-v2 .v2-gyp-front {
  bottom: 4%; left: 4%;
  width: 36%; aspect-ratio: 1 / 1;
  z-index: 19;
  transform: translateY(38px) rotate(-22deg);
}
.stage-v2 .v2-gyp-front img {
  filter:
    brightness(1.06) contrast(1.04) saturate(.95)
    drop-shadow(0 8px 12px rgba(120,80,90,.22))
    drop-shadow(0 2px 4px rgba(120,80,90,.14));
}

/* =================== Atmosphere haze ================== */
.stage-v2 .atmosphere {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(255,225,232,.18) 0%, transparent 60%),
    radial-gradient(50% 40% at 30% 70%, rgba(255,210,220,.12) 0%, transparent 70%),
    radial-gradient(50% 40% at 80% 80%, rgba(230,220,255,.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  animation: v2-fade 2.6s ease-out 5s forwards;
}

/* =================== Entry sequence ==================
   All pieces start hidden (opacity 0 + 30-50px translate).
   The .in class triggers the assigned animation.
   We pace items from background to foreground, slowly.
=========================================================== */

@keyframes v2-rise {
  0%   { opacity: 0; filter: blur(8px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: var(--rest); filter: blur(0); }
}
@keyframes v2-fade  { to { opacity: 1; } }
@keyframes v2-float-tiny {
  0%, 100% { transform: var(--rest); }
  50%      { transform: var(--rest-float); }
}

/* Each piece declares its --rest (resting transform) and an
   optional --rest-float (subtle drift target). The .in class
   plays v2-rise then loops v2-float-tiny on top. */

/* Helper: define rest transforms in :root-like fashion */

.stage-v2 .v2-pedestal {
  --rest: translate(-50%, 0);
  --rest-float: translate(-50%, -2px);
}
.stage-v2 .v2-pedestal-shadow {
  --rest: translate(-50%, 0);
  --rest-float: translate(-50%, 0) scaleX(1.01);
}
.stage-v2 .v2-box {
  --rest: translate(-50%, 0);
  --rest-float: translate(-50%, -3px);
}
.stage-v2 .v2-box-shadow {
  --rest: translate(-50%, 0);
  --rest-float: translate(-50%, 0) scaleX(1.02);
}
.stage-v2 .v2-balloon {
  --rest: translate(-50%, 0);
  --rest-float: translate(-50%, -8px);
}
.stage-v2 .v2-ribbon {
  --rest: translate(-50%, 0);
  --rest-float: translate(-50%, 1px) rotate(.4deg);
}
.stage-v2 .v2-bow {
  --rest: translate(-50%, 0);
  --rest-float: translate(-50%, -2px) rotate(-1deg);
}
.stage-v2 .v2-pampas-l {
  --rest: translateY(0) rotate(-14deg);
  --rest-float: translateY(-3px) rotate(-13deg);
}
.stage-v2 .v2-pampas-r {
  --rest: translateY(0) rotate(18deg) scaleX(-1);
  --rest-float: translateY(-3px) rotate(17deg) scaleX(-1);
}
.stage-v2 .v2-lisi-back {
  --rest: translateY(0) rotate(-18deg);
  --rest-float: translateY(-2px) rotate(-17deg);
}
.stage-v2 .v2-gardenia {
  --rest: translateY(0) rotate(12deg);
  --rest-float: translateY(-3px) rotate(11deg);
}
.stage-v2 .v2-gyp-back-l {
  --rest: translateY(0) rotate(-10deg);
  --rest-float: translateY(-2px) rotate(-9deg);
}
.stage-v2 .v2-gyp-back-r {
  --rest: translateY(0) rotate(14deg) scaleX(-1);
  --rest-float: translateY(-2px) rotate(13deg) scaleX(-1);
}
.stage-v2 .v2-prod-shower {
  --rest: translateY(0) rotate(-4deg);
  --rest-float: translateY(-1.5px) rotate(-4deg);
}
.stage-v2 .v2-prod-bodyoil {
  --rest: translateY(0) rotate(6deg);
  --rest-float: translateY(-1.5px) rotate(6deg);
}
.stage-v2 .v2-prod-dryoil {
  --rest: translateY(0) rotate(8deg);
  --rest-float: translateY(-1.5px) rotate(8deg);
}
.stage-v2 .v2-bloom-cream-l {
  --rest: translateY(0) rotate(-8deg);
  --rest-float: translateY(-2px) rotate(-7deg);
}
.stage-v2 .v2-bloom-magenta {
  --rest: translateY(0) rotate(6deg);
  --rest-float: translateY(-2px) rotate(6.5deg);
}
.stage-v2 .v2-bloom-pink {
  --rest: translateY(0) rotate(-22deg);
  --rest-float: translateY(-2px) rotate(-21deg);
}
.stage-v2 .v2-bloom-peach {
  --rest: translateY(0) rotate(20deg);
  --rest-float: translateY(-2px) rotate(19deg);
}
.stage-v2 .v2-bloom-magenta-2 {
  --rest: translateY(0) rotate(-12deg) scale(.85);
  --rest-float: translateY(-2px) rotate(-11deg) scale(.85);
}
.stage-v2 .v2-bloom-cream-r {
  --rest: translateY(0) rotate(14deg);
  --rest-float: translateY(-2px) rotate(15deg);
}
.stage-v2 .v2-dried-front {
  --rest: translateY(0) rotate(-6deg);
  --rest-float: translateY(-3px) rotate(-5deg);
}
.stage-v2 .v2-prod-jar {
  --rest: translate(-50%, 0) rotate(-3deg);
  --rest-float: translate(-50%, -1.5px) rotate(-2deg);
}
.stage-v2 .v2-gyp-front {
  --rest: translateY(0) rotate(-22deg);
  --rest-float: translateY(-3px) rotate(-21deg);
}

/* Entry timings — slow luxury cadence -----------------------
   Order: pedestal → box → balloon → ribbon/bow → back stems →
          mid blooms → products → focal blooms → front blooms →
          baby's breath drape → atmosphere → petals.            */

.stage-v2 .v2-pedestal-shadow.in { animation: v2-rise 1.6s cubic-bezier(.22,.7,.25,1) .35s forwards; }
.stage-v2 .v2-pedestal.in        { animation: v2-rise 1.8s cubic-bezier(.22,.7,.25,1) .35s forwards,
                                              v2-float-tiny 12s ease-in-out 8s infinite; }
.stage-v2 .v2-box-shadow.in      { animation: v2-rise 1.8s cubic-bezier(.22,.7,.25,1) .9s forwards; }
.stage-v2 .v2-box.in             { animation: v2-rise 2.2s cubic-bezier(.22,.7,.25,1) 1.0s forwards,
                                              v2-float-tiny 13s ease-in-out 9s infinite; }
.stage-v2 .v2-balloon.in         { animation: v2-rise 2.6s cubic-bezier(.22,.7,.25,1) 1.4s forwards,
                                              v2-float-tiny 10s ease-in-out 7s infinite; }
.stage-v2 .v2-ribbon.in          { animation: v2-rise 2.6s cubic-bezier(.22,.7,.25,1) 1.9s forwards,
                                              v2-float-tiny 11s ease-in-out 8s infinite; }
.stage-v2 .v2-bow.in             { animation: v2-rise 2.0s cubic-bezier(.22,.7,.25,1) 2.4s forwards,
                                              v2-float-tiny 11.4s ease-in-out 8.4s infinite; }

.stage-v2 .v2-pampas-l.in        { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 2.2s forwards,
                                              v2-float-tiny 12s ease-in-out 9s infinite; }
.stage-v2 .v2-pampas-r.in        { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 2.4s forwards,
                                              v2-float-tiny 12s ease-in-out 9s infinite; }
.stage-v2 .v2-lisi-back.in       { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 2.6s forwards,
                                              v2-float-tiny 13s ease-in-out 9.4s infinite; }
.stage-v2 .v2-gardenia.in        { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 2.8s forwards,
                                              v2-float-tiny 12.4s ease-in-out 9.2s infinite; }
.stage-v2 .v2-gyp-back-l.in      { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 3.0s forwards,
                                              v2-float-tiny 13s ease-in-out 9.6s infinite; }
.stage-v2 .v2-gyp-back-r.in      { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 3.1s forwards,
                                              v2-float-tiny 12.5s ease-in-out 9.4s infinite; }

.stage-v2 .v2-prod-shower.in     { animation: v2-rise 2.0s cubic-bezier(.22,.7,.25,1) 3.2s forwards; }
.stage-v2 .v2-prod-bodyoil.in    { animation: v2-rise 2.0s cubic-bezier(.22,.7,.25,1) 3.35s forwards; }

.stage-v2 .v2-bloom-cream-l.in   { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 3.5s forwards,
                                              v2-float-tiny 13s ease-in-out 10s infinite; }
.stage-v2 .v2-bloom-magenta.in   { animation: v2-rise 2.6s cubic-bezier(.22,.7,.25,1) 3.8s forwards,
                                              v2-float-tiny 13s ease-in-out 10.4s infinite; }
.stage-v2 .v2-bloom-pink.in      { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 4.0s forwards,
                                              v2-float-tiny 13.4s ease-in-out 10.6s infinite; }
.stage-v2 .v2-bloom-peach.in     { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 4.2s forwards,
                                              v2-float-tiny 14s ease-in-out 10.8s infinite; }

.stage-v2 .v2-prod-dryoil.in     { animation: v2-rise 2.0s cubic-bezier(.22,.7,.25,1) 4.3s forwards; }
.stage-v2 .v2-prod-jar.in        { animation: v2-rise 2.0s cubic-bezier(.22,.7,.25,1) 4.5s forwards,
                                              v2-float-tiny 12s ease-in-out 10s infinite; }

.stage-v2 .v2-bloom-magenta-2.in { animation: v2-rise 2.2s cubic-bezier(.22,.7,.25,1) 4.7s forwards,
                                              v2-float-tiny 13s ease-in-out 11s infinite; }
.stage-v2 .v2-bloom-cream-r.in   { animation: v2-rise 2.2s cubic-bezier(.22,.7,.25,1) 4.9s forwards,
                                              v2-float-tiny 13s ease-in-out 11s infinite; }

.stage-v2 .v2-dried-front.in     { animation: v2-rise 2.2s cubic-bezier(.22,.7,.25,1) 5.1s forwards,
                                              v2-float-tiny 13s ease-in-out 11s infinite; }
.stage-v2 .v2-gyp-front.in       { animation: v2-rise 2.4s cubic-bezier(.22,.7,.25,1) 5.3s forwards,
                                              v2-float-tiny 13.4s ease-in-out 11.2s infinite; }

/* Petals foreground (already animated by base CSS) — re-tune
   to start AFTER the composition settles. */
.stage-v2 .petals-foreground.in { animation: v2-fade 2.4s ease-out 5.8s forwards; }

/* ---- Reduced motion respect ---- */
@media (prefers-reduced-motion: reduce) {
  .stage-v2 .piece,
  .stage-v2 .piece.in { animation: none !important; opacity: 1 !important; transform: var(--rest, none) !important; filter: none !important; }
  .stage-v2 .atmosphere { opacity: 1; animation: none; }
}

/* ============================================================
   Responsive — collapse the stage so it stays balanced on
   narrow viewports. The original stage rules in styles.css
   already handle the breakpoint to a single-column hero, so
   we only fine-tune sizing here.
   ============================================================ */
@media (max-width: 880px) {
  .stage.stage-v2 {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ============================================================
   Real product photography — products grid + atelier gallery
   ============================================================ */
.product-img img,
.gtile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* Soft warm tint on hover so the catalogue stays editorial */
.product:hover .product-img img { filter: saturate(1.04) brightness(1.01); }