:root { color-scheme: dark; --invitation-bg: #eee9da; }
* { box-sizing: border-box; }
html { background: var(--invitation-bg); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--invitation-bg); }
main { overflow: clip; }
.stage { display: block; width: 100%; background: var(--invitation-bg); padding: 0; }
.media { display: block; width: 100%; height: auto; background: var(--invitation-bg); }
.media--cover, .media--contain { object-fit: contain; }
.stage--intro { position: relative; }
main.is-locked > :not(.stage--intro) { display: none; }
.media--replacement { position: absolute; inset: 0; height: 100%; opacity: 0; pointer-events: none; transition: none; }
.stage--intro.is-open #video-one { visibility: hidden; }
.stage--intro.is-open .media--replacement { opacity: 1; }
.envelope-hit-area { position: absolute; z-index: 2; left: 50%; top: 50%; width: 44%; height: 34%; transform: translate(-50%, -50%); cursor: pointer; border: 0; background: transparent; padding: 0; }
.envelope-hit-area:focus-visible { outline: 2px solid #e7e6bc; outline-offset: -8px; }
.stage--intro.is-open .envelope-hit-area { display: none; }
.stage--video-three { position: relative; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: clamp(32px, 5.5vw, 64px); width: 28px; height: 28px; border-right: 3px solid #f7f2e7; border-bottom: 3px solid #f7f2e7; transform: translateX(-50%) rotate(45deg); opacity: 0; pointer-events: none; transition: opacity 800ms ease; }
.scroll-cue--button { border-top: 0; border-left: 0; background: transparent; padding: 0; cursor: pointer; pointer-events: auto; }
.scroll-cue--button:focus-visible { outline: 2px solid #f7f2e7; outline-offset: 7px; }
.show-cue .scroll-cue { opacity: .95; animation: scroll-cue 2s ease-in-out infinite; }
@keyframes scroll-cue { 0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: .65; } 50% { transform: translate(-50%, 9px) rotate(45deg); opacity: 1; } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 850ms ease, transform 850ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.image-transition { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #28301d; }
.image-transition__sticky { position: absolute; inset: 0; overflow: hidden; background: #8a9149; }
.transition-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.transition-image--back { opacity: 0; transform: translateY(18px); transition: opacity 800ms ease, transform 800ms ease; }
.transition-image--front { opacity: 1; transition: opacity 800ms ease; }
.image-transition.is-transitioned .transition-image--back { opacity: 1; transform: translateY(0); }
.image-transition.is-transitioned .transition-image--front { opacity: 0; }
.stage--final { padding-bottom: clamp(0px, 3vw, 40px); }
.stage--final { position: relative; }
.final-open-link { position: absolute; z-index: 2; left: 50%; top: 77%; width: 38%; height: 13%; transform: translateX(-50%); }
.final-open-link:focus-visible { outline: 2px solid #f1efd9; outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .transition-image--back, .transition-image--front { transition: none; transform: none; }
  .reveal { opacity: 1; }
  .show-cue .scroll-cue { animation: none; }
}