/* Opening: photo — the theme's own photograph of a sealed envelope. Used automatically by photographic themes (html.art).
   Theme supplies: --art-open (image url, 9:16), --op-bg (colour behind/around the photo), and the seal position comes from
   designs.json (seal: [x%, y%, diameter%]) as --sx/--sy/--ss on .ph-scene. */
.op-photo { display: block; background: var(--op-bg, #EEE); }
.op-photo::before { content: ""; position: absolute; inset: -40px; background: var(--art-open) center / cover no-repeat; filter: blur(30px) saturate(1.05); opacity: .9; }
/* Exact 9:16 stage as tall as the screen (never stretched, so --sx/--sy always land on the seal): on tall phones the sides
   are cropped, on wide screens the blurred photo fills the rest. */
.ph-scene { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 9 / 16; transform: translateX(-50%);
  background: var(--art-open) center / cover no-repeat; transform-origin: var(--sx) var(--sy);
  transition: transform 1.5s cubic-bezier(.6, 0, .25, 1), opacity .9s ease .55s; }
.ph-seal { position: absolute; left: var(--sx); top: var(--sy); width: max(var(--ss), 64px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ph-seal::before, .ph-seal::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); animation: ph-ring 2.4s ease-out infinite; }
.ph-seal::after { animation-delay: 1.2s; }
@keyframes ph-ring { 0% { transform: scale(.9); opacity: .95; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
.is-opening .ph-scene { transform: translateX(-50%) scale(3); opacity: 0; }
.is-opening .ph-seal::before, .is-opening .ph-seal::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ph-scene { transition: opacity .4s ease; } .is-opening .ph-scene { transform: translateX(-50%); } .ph-seal::before, .ph-seal::after { animation: none; } }