[data-shopfx-scene] { --scene-spread: 0; --scene-scale: 1; }
.sfx-scene-enabled { min-height: 185vh; padding-block: 0; }
.sfx-scene-enabled .sfx-scene-sticky { position: sticky; top: 100px; min-height: calc(100vh - 100px); padding-block: 38px; }
.sfx-scene-art { padding-block: 48px; isolation: isolate; }
.sfx-scene-picture { overflow: hidden; border-radius: 22px; transform: scale(var(--scene-scale)); }
.sfx-scene-picture img { transform: translateY(calc(var(--scene-spread) * 20px)) scale(1.05); }
.sfx-scene-card { display: flex; align-items: center; gap: 12px; position: absolute; max-width: 86%; padding: 16px 20px; background: var(--sfx-bg); border: 1px solid var(--sfx-line); border-radius: 14px; box-shadow: 0 12px 30px #0002; z-index: 1; }
.sfx-scene-card svg { width: 25px; min-width: 25px; color: var(--sfx-accent); }
.sfx-scene-card span { font-size: .66rem; line-height: 1.7; color: var(--sfx-muted); }
.sfx-scene-card b { display: block; font-size: .82rem; color: var(--sfx-ink); }
.sfx-scene-product { top: 20px; left: -10px; transform: translate(calc(var(--scene-spread) * -60px), calc(var(--scene-spread) * -30px)) rotate(calc(var(--scene-spread) * -9deg)); }
.sfx-scene-order { top: 43%; right: -12px; transform: translateX(calc(var(--scene-spread) * 85px)) rotate(calc(var(--scene-spread) * 8deg)); }
.sfx-scene-date { bottom: 24px; left: 12px; transform: translate(calc(var(--scene-spread) * -35px), calc(var(--scene-spread) * 50px)) rotate(calc(var(--scene-spread) * -6deg)); }
.sfx-scene-art figcaption { position: absolute; bottom: -25px; left: 0; width: 100%; margin: 0; }
[data-scene-step="0"] .sfx-scene-product, [data-scene-step="1"] .sfx-scene-order, [data-scene-step="2"] .sfx-scene-date { border-color: var(--sfx-accent); }
@media (max-width: 800px), (max-height: 740px) {
  .sfx-scene-enabled { min-height: 0; padding-block: 55px; }
  .sfx-scene-enabled .sfx-scene-sticky { position: static; min-height: 0; padding-block: 0; }
  .sfx-scene-picture { transform: scale(calc(1 - var(--scene-spread) * .025)); }
  .sfx-scene-picture img { transform: translateY(calc(var(--scene-spread) * 8px)) scale(1.03); }
  .sfx-scene-art { display: grid; gap: 12px; padding-block: 0; }
  .sfx-scene-card { position: static; max-width: none; box-shadow: none; transform: translateX(calc(var(--scene-spread) * 12px)); }
  .sfx-scene-order { transform: translateX(calc(var(--scene-spread) * -12px)); }
  .sfx-scene-art figcaption { position: static; }
}
.sfx-scene-gentle .sfx-scene-picture, .sfx-scene-gentle .sfx-scene-picture img { transform: translateY(calc(var(--scene-spread) * 3px)); }
.sfx-scene-gentle .sfx-scene-card { transform: translateY(calc(var(--scene-spread) * 5px)); }