/* ============================================================
   HERO ANIMATION — uses the user-supplied composition exactly.
   The original animation CSS is preserved 1:1; only the outer
   wrapper has been adapted to fit inside the hero right column
   instead of filling the viewport.
   ============================================================ */

.hero-anim {
  --stage-w: 944.5px;
  --stage-h: 1189px;
  --piece-scale: 0.9;
  --move-ease: cubic-bezier(0.18, 0.88, 0.22, 1);
  --fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  /* The whole animation is ONE fixed-ratio container, scaled
     as a single unit. The internal stage keeps its original
     944.5×1189 coordinate system. */
  width: 100%;
  max-width: 620px;
  aspect-ratio: 944.5 / 1189;
  margin: 0 auto;
  isolation: isolate;
  overflow: visible;
}

/* Soft elegant glow behind the composition */
.hero-anim::before {
  content: "";
  position: absolute;
  inset: 4% 2% 8% 2%;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(255, 230, 235, .45) 0%, rgba(255, 230, 235, 0) 70%),
    radial-gradient(40% 35% at 50% 70%, rgba(230, 223, 255, .25) 0%, rgba(230, 223, 255, 0) 75%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}

/* Soft floor shadow under the composition */
.hero-anim::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%;
  bottom: 4%;
  height: 32px;
  background: radial-gradient(50% 100% at 50% 50%, rgba(32, 18, 24, .18) 0%, rgba(32, 18, 24, 0) 75%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

.hero-anim-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.hero-anim .gift-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  overflow: visible;
  isolation: isolate;
  transform: scale(var(--stage-scale, 1));
  transform-origin: left top;
}

.hero-anim .piece {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
  z-index: var(--z);
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: none !important;
  -webkit-filter: none !important;
  animation: none !important;
  transform-origin: left top;
  transform:
    translate3d(var(--x1), var(--y1), 0)
    rotate(var(--r1))
    scale(calc(var(--s1) * var(--piece-scale, 1)));
  transition:
    opacity var(--fade-time, 1200ms) var(--fade-ease),
    transform var(--move-time, 2600ms) var(--move-ease);
  transition-delay: var(--delay);
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity, translate;
}
.hero-anim .piece img { filter: none !important; }

.hero-anim .gift-stage.is-composed .piece {
  opacity: 1;
  transform:
    translate3d(var(--x2), var(--y2), 0)
    rotate(var(--r2))
    scale(calc(var(--s2) * var(--piece-scale, 1)));
}

.hero-anim .gift-stage.is-idle .float-soft {
  animation: heroFloatSoft var(--float-time, 8.5s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

@keyframes heroFloatSoft {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 var(--float-y, -3px); }
}

/* ---- Per-piece layout (verbatim from supplied styles.css) ---- */

.hero-anim .base-one {
  --w: 916.5px; --h: 611px; --z: 9;
  --x1: 0px; --y1: 739px; --r1: 0deg; --s1: 1;
  --x2: 0px; --y2: 625.8px; --r2: 0deg; --s2: 1;
  --delay: 0ms; --move-time: 1800ms; --fade-time: 900ms;
}

.hero-anim .base-v2 {
  --w: 916px; --h: 611px; --z: 10;
  --x1: -4.25px; --y1: 475.3px; --r1: 0deg; --s1: 1;
  --x2: -0.3px; --y2: 509.7px; --r2: 0deg; --s2: 1;
  --delay: 650ms; --move-time: 1650ms; --fade-time: 850ms;
}

.hero-anim .item-image-17 {
  --w: 1737.509px; --h: 1096px; --z: 1;
  --x1: -417.25px; --y1: -952.7px; --r1: 0deg; --s1: 1;
  --x2: -414.539px; --y2: -142px; --r2: 0deg; --s2: 1;
  --delay: 1400ms; --float-y: -4px;
}

.hero-anim .item-image-16 {
  --w: 1682.223px; --h: 1121.482px; --z: 2;
  --x1: -190.375px; --y1: -1014.978px; --r1: 23deg; --s1: 1;
  --x2: -677.25px; --y2: 441.945px; --r2: -23.209deg; --s2: 1;
  --delay: 1650ms; --float-delay: -1.8s; --float-y: -4px;
}

.hero-anim .item-image-15 {
  --w: 509.537px; --h: 509.537px; --z: 3;
  --x1: -26.335px; --y1: 95.787px; --r1: -27deg; --s1: 1;
  --x2: 20.75px; --y2: 587.548px; --r2: -10.122deg; --s2: 1;
  --delay: 2150ms; --float-delay: -0.6s;
}

.hero-anim .item-image-14 {
  --w: 424px; --h: 636px; --z: 4;
  --x1: 764.001px; --y1: -182.398px; --r1: 24deg; --s1: 1;
  --x2: 233.299px; --y2: 278.141px; --r2: 0.829deg; --s2: 1;
  --delay: 2400ms; --float-delay: -2.4s;
}

.hero-anim .item-image-13 {
  --w: 442.942px; --h: 664.413px; --z: 5;
  --x1: -210.25px; --y1: 0.216px; --r1: -26.54deg; --s1: 1;
  --x2: -113.946px; --y2: 484.034px; --r2: -26.54deg; --s2: 1;
  --delay: 2650ms; --float-delay: -1.2s;
}

.hero-anim .item-image-12 {
  --w: 921.192px; --h: 921.192px; --z: 6;
  --x1: 792.57px; --y1: -348.7px; --r1: 40.137deg; --s1: 1;
  --x2: 192.185px; --y2: 137px; --r2: 9.651deg; --s2: 1;
  --delay: 1900ms; --float-delay: -3.1s; --float-y: -4px;
}

.hero-anim .item-image-10 {
  --w: 385px; --h: 577px; --z: 7;
  --x1: 316.75px; --y1: -67.337px; --r1: -47deg; --s1: 0.999;
  --x2: 431.75px; --y2: 354px; --r2: 0deg; --s2: 1;
  --delay: 3150ms; --float-delay: -0.9s;
}

.hero-anim .item-image-09 {
  --w: 305.5px; --h: 458.192px; --z: 8;
  --x1: 174.778px; --y1: -5.724px; --r1: -3deg; --s1: 1;
  --x2: 252.75px; --y2: 616.261px; --r2: -47.785deg; --s2: 1;
  --delay: 3400ms; --float-delay: -2.9s;
}

.hero-anim .item-image-08 {
  --w: 776.986px; --h: 517.99px; --z: 11;
  --x1: 25.75px; --y1: -158.793px; --r1: -9.4deg; --s1: 1;
  --x2: -107.25px; --y2: 423.907px; --r2: -9.4deg; --s2: 1;
  --delay: 3650ms; --float-delay: -1.7s;
}

.hero-anim .item-image-07 {
  --w: 177.032px; --h: 177.032px; --z: 12;
  --x1: 510.592px; --y1: 340px; --r1: 9.048deg; --s1: 1;
  --x2: 510.592px; --y2: 640px; --r2: 9.048deg; --s2: 1;
  --delay: 4650ms; --float-delay: -0.3s;
}

.hero-anim .item-image-06 {
  --w: 222.041px; --h: 222.041px; --z: 13;
  --x1: 520.75px; --y1: 420.803px; --r1: -0.207deg; --s1: 1;
  --x2: 520.75px; --y2: 731.803px; --r2: -0.207deg; --s2: 1;
  --delay: 4900ms; --float-delay: -2.2s;
}

.hero-anim .item-image-05 {
  --w: 339.239px; --h: 339.239px; --z: 14;
  --x1: 25.75px; --y1: -22.062px; --r1: -51deg; --s1: 1;
  --x2: 132.75px; --y2: 556.71px; --r2: -9.795deg; --s2: 1;
  --delay: 3900ms; --float-delay: -2.5s;
}

.hero-anim .item-image-04 {
  --w: 396.508px; --h: 396.508px; --z: 15;
  --x1: 392.374px; --y1: -168.7px; --r1: 15deg; --s1: 1;
  --x2: 239.75px; --y2: 489.398px; --r2: -0.925deg; --s2: 1;
  --delay: 4250ms; --float-delay: -1.1s;
}

.hero-anim .item-image-03 {
  --w: 202.8px; --h: 202.8px; --z: 16;
  --x1: 20.75px; --y1: 12.3px; --r1: 0deg; --s1: 1;
  --x2: 180.6px; --y2: 731.7px; --r2: 0deg; --s2: 1;
  --delay: 5250ms; --float-delay: -1.9s;
}

.hero-anim .item-image-02 {
  --w: 213.6px; --h: 213.6px; --z: 17;
  --x1: 281.75px; --y1: 113.3px; --r1: 0deg; --s1: 1;
  --x2: 292.5px; --y2: 749.1px; --r2: 0deg; --s2: 1;
  --delay: 5550ms; --float-delay: -0.7s;
}

.hero-anim .item-image-01 {
  --w: 245px; --h: 245px; --z: 18;
  --x1: 502.75px; --y1: 97.3px; --r1: 0deg; --s1: 1;
  --x2: 378.75px; --y2: 732px; --r2: 0deg; --s2: 1;
  --delay: 5850ms; --float-delay: -2.8s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim .piece {
    transition: none;
    opacity: 1;
    transform:
      translate3d(var(--x2), var(--y2), 0)
      rotate(var(--r2))
      scale(calc(var(--s2) * var(--piece-scale, 1)));
  }
  .hero-anim .gift-stage.is-idle .float-soft { animation: none; }
}

/* ============================================================
   CENTER OVERRIDES — image-16 and image-17 only
   Keep original sizes and rotations; only re-center horizontally
   so they sit behind the box composition, not off to one side.
   Math (stage width = 944.5px):
     centered x = (944.5 - imageW) / 2
   ============================================================ */
.hero-anim .item-image-17 {
  /* moved right 25px more from -101.5 → -76.5, then +20px → -56.5 */
  --x2: -56.5px;
}
.hero-anim .item-image-16 {
  --x2: -368.86px;
  /* moved up 60px more from 381.945 → 321.945 */
  --y2: 321.945px;
}