/* Motion follows the music and the person: self-hosted Anime.js, progressive enhancement. */
.lp-dedication { color: rgba(250,247,245,.75); font-family: var(--font-display); font-style: italic; font-size: 13px; line-height: 1.35; margin-top: 10px; max-width: 220px; }
.lp-dedication + .lp-art { margin-top: 14px; }
.package-card--media { perspective: 1100px; }
.live-phone { transform-origin: center; }

.wizard-progress { overflow: visible; }
.wizard-progress__bar { position: relative; transition: none; border-radius: inherit; }
.wizard-progress__note { position: absolute; right: -10px; top: -10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--accent); background: var(--surface); border: 1px solid var(--accent-ring); box-shadow: 0 2px 8px var(--accent-ring); font-size: 16px; }
.wizard-step { transform-origin: center top; }

/* A paper envelope with a hinged flap; the player stays functional without JS. */
.gift-page { background: radial-gradient(ellipse at 50% 20%, #422a35, var(--dark-warm) 70%); }
.gift-opening { width: 100%; max-width: 520px; text-align: center; padding: 8px 0; }
.gift-opening__to { font-size: 14px; color: #ecc6d8; margin-bottom: 12px; }
.gift-opening h1 { color: var(--bg); font-size: clamp(2.1rem, 1.5rem + 3vw, 3rem); line-height: 1.12; }
.gift-opening__from { max-width: 320px; margin: 12px auto 0; color: #e1cdd4; font-size: 14px; line-height: 1.5; }
.envelope-scene { width: min(100%, 400px); margin: 28px auto 24px; padding: 16px 28px 8px; perspective: 900px; }
.envelope { position: relative; height: 180px; width: 100%; transform: rotate(-4deg); isolation: isolate; }
.envelope__back { position: absolute; inset: 0; background: #e2c8ba; border-radius: 8px; box-shadow: 0 26px 55px rgba(0,0,0,.28); }
.envelope__letter { position: absolute; inset: 14px 18px 8px; background: var(--surface); color: var(--ink-soft); padding: 18px 20px; border-radius: 4px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 -2px 12px rgba(65,30,45,.07); }
.envelope__letter-mark { color: var(--accent); font-size: 26px; line-height: 1; margin-bottom: 10px; }
.envelope__letter p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-family: var(--font-display); font-size: 17px; line-height: 1.35; }
.envelope__letter-sign { color: var(--brass-ink); font-size: 12px; margin-top: 12px; }
.envelope__pocket { position: absolute; inset: 0; background: linear-gradient(145deg, #f9e9dd, #ecd5c5); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); border-radius: 6px; z-index: 3; }
.envelope__pocket::after { content: ''; position: absolute; inset: 0; background: #f6e5d8; clip-path: polygon(0 100%, 50% 48%, 100% 100%); }
.envelope__flap { position: absolute; inset: 0; height: 55%; background: linear-gradient(180deg, #f8e6d8, #e9cdbb); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: center top; backface-visibility: hidden; z-index: 4; }
.envelope__seal { position: absolute; z-index: 5; left: calc(50% - 25px); top: calc(54% - 25px); width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: var(--on-accent); background: var(--grad-accent); border: 3px solid #d82b80; box-shadow: 0 3px 8px rgba(80,20,45,.2), inset 0 0 0 1px rgba(255,255,255,.25); font-size: 23px; }
.gift-opening__hint { color: #d3bac4; font-size: 12px; margin-top: 14px; }
.gift-opening__skip, .gift-replay { min-height: 44px; color: #e1cdd4; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; }
.gift-opening__skip { margin-top: 12px; }
.gift-opening__skip:focus-visible, .gift-replay:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; border-radius: 4px; }
.gift-replay { display: block; margin: 8px auto 0; }
#giftRevealedTitle:focus { outline: none; }

@media (max-width: 639px) {
  .gift-opening { padding-top: 12px; }
  .envelope-scene { margin-top: 28px; padding-inline: 14px; }
  .envelope { height: 170px; }
  .envelope__letter { inset-inline: 12px; padding: 14px; }
  .envelope__letter p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-phone, .wizard-step, .envelope, .envelope__letter, .envelope__flap { transform: none !important; }
}