/* Open Slot reference: rise/blur entrance and a tilted solid slab. */
.product-preview {
  --preview-solid:var(--brand);
  --preview-ease:cubic-bezier(.22,1,.36,1);
  padding:100px 0 110px;
}
.preview-heading { text-align:center; margin:0 auto 70px; }
.preview-title-line { display:block; }
.preview-stage { position:relative; isolation:isolate; margin:0 26px; }
.preview-slab {
  position:absolute;
  inset:-20px -24px -28px -16px;
  z-index:-1;
  border-radius:26px;
  background:var(--preview-solid);
  transform:rotate(-2deg);
  transform-origin:50% 60%;
  pointer-events:none;
}
.preview-stage .hero-product {
  position:relative;
  border-radius:18px;
  box-shadow:0 22px 65px #15451d20;
}
.preview-heading[data-entered="false"] .preview-title-line,
.preview-stage[data-entered="false"] .hero-product { opacity:0; }
.preview-stage[data-entered="false"] .preview-slab { opacity:0; }
.preview-heading[data-entered="true"] .preview-title-line {
  animation:preview-rise .84s var(--preview-ease) both;
}
.preview-heading[data-entered="true"] .preview-title-line:nth-child(2) { animation-delay:300ms; }
.preview-stage[data-entered="true"] .hero-product { animation:preview-rise .84s var(--preview-ease) both 900ms; }
.preview-stage[data-entered="true"] .preview-slab { animation:preview-settle 1.08s var(--preview-ease) both 600ms; }
@keyframes preview-rise {
  from { opacity:0; transform:translateY(14px); filter:blur(3px); }
  to { opacity:1; transform:none; filter:none; }
}
@keyframes preview-settle {
  from { opacity:0; transform:rotate(0deg) translateY(10px); }
  to { opacity:1; transform:rotate(-2deg); }
}
@media(prefers-reduced-motion:reduce) {
  .preview-heading .preview-title-line,.preview-stage .hero-product,.preview-stage .preview-slab {
    animation:none!important;
    opacity:1!important;
  }
}