/* -- Fold 4 (Offers) - Apple-style entrance + exit -----------------------
   The two horizontally-scrolling rows glide in from opposite sides, with
   a soft blur dissolve. The "View all Offers" CTA rises up + scales last.
   Uses CSS transitions (not one-shot @keyframes) so the close animation
   plays cleanly when fold-active is removed - with the stagger reversed
   so the CTA exits first, row-large exits last.
   --------------------------------------------------------------------- */
#layer4 .fold2-offers-row.row-large,
#layer4 .fold2-offers-row.row-small,
#layer4 .fold2-view-all-container {
  opacity:0;
  /* Removed `filter: blur()` from this entrance - animating CSS
     filters forces full re-rasterization each frame. Soft entrance
     achieved via opacity + transform alone. */
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Default (exit) state - staggered so CTA goes first, large row last */
#layer4 .fold2-view-all-container {
  transform:translateY(22px) scale(0.96);
  transition-delay:0s;
}
#layer4 .fold2-offers-row.row-small {
  transform:translateX(-90px);
  transition-delay:0.10s;
}
#layer4 .fold2-offers-row.row-large {
  transform:translateX(90px);
  transition-delay:0.20s;
}
/* Active (entrance) state - large first, then small, then CTA */
#layer4.fold-active .fold2-offers-row.row-large {
  opacity:1;
  transform:translateX(0);
  transition-delay:0s;
}
#layer4.fold-active .fold2-offers-row.row-small {
  opacity:1;
  transform:translateX(0);
  transition-delay:0.15s;
}
#layer4.fold-active .fold2-view-all-container {
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:0.32s;
}
/* On small screens the slide distance shrinks proportionally */
@media (max-width:900px) {
  #layer4 .fold2-offers-row.row-large {
    transform:translateX(56px);
  }
  #layer4 .fold2-offers-row.row-small {
    transform:translateX(-56px);
  }
  #layer4 .fold2-view-all-container {
    transform:translateY(16px) scale(0.96);
  }
}
.stackWrap {
  width:760px;
  height:760px;
  display:grid;
  place-items:center;
  position:relative;
  /* The fan is visually centered by the wider 600px middle column on
     stage3 (see #stage3 .grid above). Small downward shift only - no
     horizontal translate, so layout survives prefers-reduced-motion
     (which wipes `transform`s on .stackWrap). */
  transform:translate3d(0, -15px, 0);
  perspective:1400px;
  transform-style:preserve-3d;
}
.card {
  position:absolute;
  width:452px;
  height:282px;
  left:50%;
  top:50%;
  background:transparent;
  border:0;
  outline:0;
  box-shadow:none;
  overflow:visible;
  --ox:0px;
  --oy:0px;
  --tz:0px;
  --rz:0deg;
  --sc:1;
  --op:1;
  transform:translate3d(calc(-50% + var(--ox)), calc(-50% + var(--oy)), var(--tz)) rotateZ(var(--rz)) scale(var(--sc));
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  opacity:var(--op);
  will-change:transform, opacity;
}
.card img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  /* No border-radius - the gift card artwork already has its own rounded
     corners. Adding a clip creates a visible aliased edge especially on
     dark cards (Amazon) against the page background. */
  /* Shadow blur radii reduced from 90/26 - 28/12 - drop-shadow paint is
     proportional to blur radius-, so this is ~10x less paint area per
     frame while the cards are animating through the fan. */
  filter:drop-shadow(0 18px 28px rgba(0, 0, 0, .55)) drop-shadow(0 6px 12px rgba(0, 0, 0, .28));
}
.cN {
  z-index:1;
}
.cB {
  z-index:2;
}
.cA {
  z-index:3;
}
#layer1 {
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:none;
}