/* A living floral frame: the source photographs keep their natural scale. */
.opening-stage {
  --bloom-left: 0;
  --bloom-right: 0;
  --garden-spread: 0;
}
.opening-veil { opacity: calc(var(--blessing) * .94 + var(--names) * .05); }
.opening-garden {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
[data-art-ready="false"] .opening-garden { visibility: hidden; }
.garden-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--art-width, 100%);
  height: var(--art-height, 100%);
  transform: translate(-50%, -50%);
}
.garden-frame {
  position: absolute;
  inset: 7svh 6vw 9svh;
  border: 1px solid #9c895640;
  border-radius: 48% 48% 2px 2px / 23% 23% 2px 2px;
  opacity: var(--blessing);
  transform: translate3d(0,calc((1 - var(--blessing)) * 12px),0) scale(calc(.97 + var(--blessing) * .03));
}
.garden-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #9c89561c;
  border-radius: inherit;
}
.bloom-anchor { position: absolute; transform: translate3d(calc(var(--garden-spread) * var(--art-width,100vw) * var(--garden-x)),calc(var(--garden-spread) * var(--art-height,100vh) * var(--garden-y)),0); }
.bloom-anchor-left {
  left: 17%;
  bottom: 13%;
  --garden-x: -.15;
  --garden-y: .26;
  width: 25%;
}
.bloom-anchor-right {
  right: 15%;
  top: 13%;
  --garden-x: .15;
  --garden-y: -.26;
  width: 22%;
}
.bloom-unfold { filter: drop-shadow(0 9px 11px #3e44251c); }
.bloom-unfold-left {
  opacity: var(--bloom-left);
  transform-origin: 15% 90%;
  transform: translate3d(0,calc((1 - var(--bloom-left)) * 24px),0) rotate(calc((1 - var(--bloom-left)) * -5deg)) scale(calc(.92 + var(--bloom-left) * .08));
}
.bloom-unfold-right {
  opacity: var(--bloom-right);
  transform-origin: 86% 12%;
  transform: translate3d(0,calc((1 - var(--bloom-right)) * 18px),0) rotate(calc((1 - var(--bloom-right)) * 4deg)) scale(calc(.94 + var(--bloom-right) * .06));
}
.bloom-flower { display: block; width: 100%; height: auto; max-width: none; }
.bloom-anchor-left .bloom-flower { transform-origin: 15% 90%; animation: garden-breathe-left 8s ease-in-out infinite alternate; animation-play-state: paused; }
.bloom-anchor-right .bloom-flower { transform-origin: 86% 12%; animation: garden-breathe-right 9s ease-in-out infinite alternate; animation-delay: -2s; animation-play-state: paused; }
[data-garden-active="true"] .bloom-flower { animation-play-state: running; }
@keyframes garden-breathe-left { from { transform: rotate(-.7deg); } to { transform: translateY(-4px) rotate(.7deg); } }
@keyframes garden-breathe-right { from { transform: rotate(.6deg); } to { transform: translateY(3px) rotate(-.6deg); } }

@media (orientation: portrait) {
  .garden-frame { inset: 52px 20px 70px; border-radius: 48% 48% 2px 2px / 19% 19% 2px 2px; }
  .bloom-anchor-left { left: -4%; bottom: 27%; --garden-x: -.02; --garden-y: .41; width: 40%; }
  .bloom-anchor-right { right: -1%; top: 22%; --garden-x: .14; --garden-y: -.24; width: 34%; }
}
@media (max-height: 650px) and (orientation: portrait) {
  .garden-frame { inset: 38px 16px 52px; }
  .bloom-anchor-left { --garden-y: .40; width: 40%; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .garden-frame { inset: 24px 30px 35px; }
  .bloom-anchor-left { width: 23%; }
  .bloom-anchor-right { width: 20%; }
}
@media (prefers-reduced-motion: reduce) {
  .bloom-unfold, .bloom-flower, .garden-frame { transform: none; animation: none!important; }
  .bloom-unfold { filter: none; }
}