* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html, body, .stage, .screen, .envelope-still, .envelope-video, .invitation-image {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
html, body { margin: 0; width: 100%; height: 100%; background: #fff; overflow: hidden; }
body { min-height: 100%; }
.stage { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #fff; }
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.envelope-screen { z-index: 2; cursor: pointer; opacity: 1; visibility: visible; touch-action: manipulation; outline: none; }
.envelope-still, .envelope-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
.envelope-video { display: none; }
.envelope-screen.playing .envelope-still { display: none; }
.envelope-screen.playing .envelope-video { display: block; }
.invitation-screen { z-index: 1; opacity: 0; visibility: hidden; transform: translateY(34px); background: #fff; }
.invitation-screen.visible { visibility: visible; }
.invitation-screen.enter { animation: invitation-enter .85s cubic-bezier(.22,.72,.24,1) forwards; }
.invitation-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #fff; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
.transition { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; }
/* El velo blanco existe desde el primer fotograma: evita que el sobre parpadee antes del fundido. */
.transition.initial-cover { visibility: visible; opacity: 1; }
.transition.initial-reveal { visibility: visible; opacity: 1; animation: initial-white-reveal 1.15s ease-out forwards; }
.transition.cover { visibility: visible; animation: white-cover .42s ease-in forwards; }
.transition.reveal { visibility: visible; opacity: 1; animation: white-reveal .45s ease-out forwards; }
@keyframes initial-white-reveal { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes white-cover { from { opacity: 0; } to { opacity: 1; } }
@keyframes white-reveal { from { opacity: 1; } to { opacity: 0; } }
@keyframes invitation-enter { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .invitation-screen.enter, .transition.initial-reveal, .transition.cover, .transition.reveal { animation-duration: .01ms; } }