:root { color-scheme: dark; }
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { display: grid; place-items: center; background: #202020; font-family: system-ui, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
.invite { position: relative; width: min(100vw, 56.25vh, 540px); aspect-ratio: 9 / 16; overflow: hidden; background: #bce7ff; }
.screen { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateX(3%); transition: opacity .42s ease, transform .42s ease, visibility .42s; }
.screen.active { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.layer, .reference { position: absolute; display: block; user-select: none; pointer-events: none; }
.reference { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.child-photo { position: absolute; z-index: 5; top: 15.8%; left: 5.8%; width: 35.8%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; pointer-events: none; }
.child-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-one-reference { z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sky-video { z-index: 1; top: 0; left: 0; width: 100%; height: 21.5%; object-fit: cover; object-position: center top; background: transparent; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%); }
.art-button { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform .14s ease, filter .14s ease; z-index: 20; }
.art-button img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.art-button:active { transform: scale(.96); }
.art-button:focus-visible, .nav-back:focus-visible, .sound:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.entrance-sign { position: absolute; z-index: 20; left: 11%; bottom: -1%; width: 78%; height: auto; pointer-events: none; }
.sign-grass { position: absolute; z-index: 23; bottom: 3%; width: 15%; height: 7%; overflow: hidden; pointer-events: none; }
.sign-grass-left { left: 9%; }
.sign-grass-right { right: 9%; }
.sign-grass img { position: absolute; top: -16%; left: -128%; width: 360%; max-width: none; height: auto; }
.sign-grass-right img { left: -132%; transform: scaleX(-1); }
.entrance-grass { position: absolute; z-index: 22; left: -5%; bottom: -8%; width: 110%; height: auto; pointer-events: none; }
.enter-arrow { z-index: 24; left: 37%; bottom: 2.2%; width: 26%; height: 9.5%; border-radius: 28%; }
.start-experience { position: absolute; z-index: 50; inset: 0; display: grid; place-items: start center; padding-top: 4%; border: 0; color: #fff; background: #00000012; cursor: pointer; }
.start-experience span { padding: .65rem 1rem; border-radius: 999px; background: #54290ed9; font: 700 clamp(.78rem, 3vw, 1rem)/1 system-ui, sans-serif; }
.start-experience[hidden] { display: none; }
.p2-action { top: 77.2%; width: 20%; height: 14.5%; }
.rsvp { left: 17%; }
.location { right: 17%; }
.maps { left: 40%; top: 76%; width: 20%; height: 13%; }
.nav-back, .sound { position: absolute; z-index: 40; display: grid; place-items: center; border: 0; color: #fff; background: #3b21096b; cursor: pointer; opacity: .38; transition: opacity .15s ease; }
.nav-back:hover, .nav-back:focus-visible, .sound:hover, .sound:focus-visible { opacity: 1; }
.nav-back { top: 1.2%; left: 2%; width: 40px; height: 40px; border-radius: 50%; font-size: 1.75rem; line-height: 1; }
.sound { top: 1.2%; right: 2%; width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; }
.sound[hidden] { display: none; }
.toast { position: absolute; z-index: 60; left: 50%; bottom: 4%; width: max-content; max-width: 82%; padding: .7rem 1rem; border-radius: 999px; color: #fff; background: #3d210ee8; font-size: clamp(.75rem, 2.8vw, .95rem); text-align: center; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 350px) { .nav-back, .sound { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .screen, .art-button, .toast { transition-duration: .01ms; } }