/* One continuous stage: paper flap, emerging invitation, then the garden film. */
.scroll-invitation { overflow-x: clip; overflow-y: auto; }
.scroll-invitation main { animation: none; transition: none; filter: none; transform: none; }
.scroll-invitation .hero-journey { height: calc(max(100svh, 680px) + 255svh); }
.scroll-invitation .hero {
  position: sticky;
  top: 0;
  height: max(100svh, 680px);
  min-height: 0;
  max-height: none;
  perspective: 1600px;
  background: #b8c18e;
}
.garden-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--paper);
  transform: translate3d(0, var(--card-y, 48%), 0) scale(var(--card-scale, .86));
  transform-origin: center;
  border-radius: var(--card-radius, 5px);
  box-shadow: 0 12px 45px #30391640, 0 0 0 var(--card-edge, 6px) #fff9f5;
  will-change: transform;
}
.scroll-invitation .envelope {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: auto;
  transform: none;
  perspective: none;
  background: none;
  box-shadow: none;
  overflow: visible;
  opacity: 1;
  transition: none;
  pointer-events: none;
}
.envelope-back, .envelope-pocket, .envelope-flap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.envelope-back {
  z-index: 0;
  background: linear-gradient(#89925f, #bbc493 52%, #cdd5a9);
}
.envelope-skin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--paper-width, 100%);
  height: var(--paper-height, 100%);
  transform: translate(-50%, -50%);
  background: url('assets/envelope-dz.webp') center / 100% 100%;
}
.envelope-flap {
  z-index: 4;
  transform-origin: 50% 0;
  transform: rotateX(var(--flap-angle, 0deg));
  opacity: var(--flap-opacity, 1);
  backface-visibility: hidden;
  filter: drop-shadow(0 9px 10px #303a2938);
  will-change: transform;
}
/* Both pieces use the same artwork coordinates, including the physical seal. */
.envelope-flap .envelope-skin {
  clip-path: polygon(0 0, 100% 0, 100% 19%, 67% 35%, 70% 39%, 71% 43%, 70% 48%, 67% 51.5%, 62% 54%, 56% 55.5%, 50% 56%, 44% 55.5%, 38% 54%, 33% 51.5%, 30% 48%, 29% 43%, 30% 39%, 33% 35%, 0 19%);
}
.envelope-pocket {
  z-index: 3;
  transform: translate3d(0, var(--pocket-y, 0%), 0);
  opacity: var(--pocket-opacity, 1);
  filter: drop-shadow(0 -5px 9px #303a2926);
  will-change: transform;
}
.envelope-pocket .envelope-skin {
  clip-path: polygon(0 18.8%, 50% 44%, 100% 18.8%, 100% 100%, 0 100%);
}
/* Reuse the unprinted lower paper under the seal, which belongs to the moving flap. */
.envelope-pocket .envelope-skin::after {
  content: '';
  position: absolute;
  left: 26%;
  top: 29%;
  width: 48%;
  height: 28%;
  background: url('assets/envelope-dz.webp') center bottom / 208.333% auto;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 85%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 85%, transparent 100%);
}
.scroll-invitation .envelope-button {
  position: absolute;
  inset: 0;
  z-index: 5;
  height: 100%;
  touch-action: pan-y pinch-zoom;
  overflow: visible;
  pointer-events: auto;
  opacity: var(--cover-text-opacity, 1);
}
.scroll-invitation .cover-copy {
  top: 65%;
  transform: translate3d(0, var(--cover-copy-y, 0px), 0);
  transition: none;
}
.cover-chevron { margin-top: 12px; }
.scroll-invitation .cover-hint { font-size: .79rem; }
.scroll-invitation .hero-copy { z-index: 1; }
.scroll-invitation .scroll-note { z-index: 1; }
.scroll-invitation .envelope[aria-hidden=true] > * { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .scroll-invitation .hero-journey { height: calc(max(100svh, 680px) + 65svh); }
  .garden-card { transform: none; border-radius: 0; box-shadow: none; will-change: auto; }
  .envelope-flap, .envelope-pocket { transform: none; will-change: auto; }
  .scroll-invitation .envelope-button { opacity: 1; }
  .scroll-invitation .cover-copy { transform: none; }
}
@media print {
  .scroll-invitation .hero-journey { height: auto; }
  .scroll-invitation .hero { position: relative; }
  .envelope { display: none !important; }
  .garden-card { transform: none; box-shadow: none; border-radius: 0; }
}