* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: #e8d4bd; color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #8a5a2d; outline-offset: 4px; }
.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; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .8rem 1rem; transform: translateY(-180%); background: #fff8ed; box-shadow: 0 8px 24px #3d271a30; font-size: .85rem; }
.skip-link:focus { transform: translateY(0); }
h1, h2, p { margin-top: 0; }

.opening-screen { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; background: #e8d4bd; isolation: isolate; }
.js .opening-screen { position: fixed; z-index: 10; inset: 0; min-height: 0; height: 100dvh; }
.opening-artboard { position: absolute; top: 50%; left: 50%; width: max(100vw, 56.25dvh); aspect-ratio: 9 / 16; transform: translate(-50%,-50%); isolation: isolate; }
.opening-picture, .opening-poster, .opening-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opening-poster { z-index: 0; }
.opening-video { z-index: 1; opacity: 0; pointer-events: none; mask-image: linear-gradient(to right, transparent 3%, #000 11%, #000 89%, transparent 97%), linear-gradient(to bottom, transparent 33%, #000 36%, #000 70%, transparent 76%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.opening-screen.is-video-ready .opening-video { opacity: 1; }
.envelope-target { position: absolute; z-index: 5; top: 44.2%; left: 12%; width: 76%; height: 24.8%; border-radius: .35rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.envelope-target:focus-visible { outline: 3px solid #8a5a2d; outline-offset: 3px; }
.opening-screen.is-playing .envelope-target { pointer-events: none; }
.opening-screen.is-playing .envelope-target { visibility: hidden; }

/* Slow, independent loops keep the physical sets alive without rerendering each frame. */
.opening-picture { animation: none; }
.invitation-picture { animation: none; }
.ambient-layer { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; transition: opacity .4s ease; }

.ambient-balloon { position: absolute; width: 20%; aspect-ratio: 4 / 5; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(6px 9px 8px #523b2926); opacity: .9; transform-origin: 50% 75%; animation: ambient-float 6.7s ease-in-out infinite alternate; will-change: transform; }
.ambient-balloon.pearl { background-image: url('../assets/images/transition-balloon-pearl.webp'); }
.ambient-balloon.cream { background-image: url('../assets/images/transition-balloon-cream.webp'); }
.ambient-balloon.satin { background-image: url('../assets/images/transition-balloon-satin.webp'); }
.ambient-balloon.warm { background-image: url('../assets/images/transition-balloon-warm.webp'); }
.ambient-balloon.drift-b { animation-duration: 7.8s; animation-delay: -2.4s; }
.ambient-balloon.drift-c { animation-duration: 5.9s; animation-delay: -1.2s; }
.ambient-balloon.drift-d { animation-duration: 8.3s; animation-delay: -3.7s; }
@keyframes ambient-float { from { transform: translate3d(-2px,4px,0) rotate(-2deg); } to { transform: translate3d(3px,-7px,0) rotate(2deg); } }
.ambient-opening .drift-a { left: -8%; top: 3%; width: 23%; }
.ambient-opening .drift-b { right: -7%; top: 8%; width: 21%; }
.ambient-opening .drift-c { left: -11%; top: 58%; width: 18%; }
.ambient-opening .drift-d { right: -11%; top: 62%; width: 18%; }
.ambient-invitation .drift-a { left: -8%; top: 3%; width: 23%; }
.ambient-invitation .drift-b { right: -7%; top: 8%; width: 21%; }
.ambient-invitation .drift-c { left: -11%; top: 58%; width: 18%; }
.ambient-invitation .drift-d { right: -11%; top: 62%; width: 18%; }
.ambient-spark { position: absolute; width: 1.1%; aspect-ratio: 1; background: #f9e7bd; clip-path: polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%); filter: drop-shadow(0 0 4px #f9d69d); opacity: 0; animation: ambient-glint 5.4s ease-in-out infinite; }
.ambient-spark.glint-b { animation-delay: -1.8s; }
.ambient-spark.glint-c { animation-delay: -3.6s; }
@keyframes ambient-glint { 0%,72%,100% { opacity: 0; transform: scale(.4) rotate(0); } 78% { opacity: .94; transform: scale(1.2) rotate(25deg); } 85% { opacity: 0; transform: scale(.65) rotate(55deg); } }
.ambient-opening .glint-a { left: 21%; top: 26%; }
.ambient-opening .glint-b { right: 17%; top: 35%; }
.ambient-opening .glint-c { left: 11%; top: 64%; }
.ambient-invitation .glint-a { left: 16%; top: 33%; }
.ambient-invitation .glint-b { right: 14%; top: 53%; }
.ambient-invitation .glint-c { left: 22%; top: 74%; }
.scene-loader { position: fixed; z-index: 101; inset: 0; display: grid; place-content: center; gap: 1rem; justify-items: center; background: radial-gradient(circle at 50% 35%,#fffaf0,#eee1d0 65%,#dcc3a6); color: #795437; text-align: center; }
.scene-loader p { margin: 0; font: italic 1.2rem/1.2 var(--font-display); }
.loader-balloon { display: flex; gap: .55rem; align-items: flex-end; height: 4.2rem; }
.loader-balloon i { display: block; width: 2.1rem; height: 2.55rem; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 30% 20%,#fff,#f5ebdd 55%,#cbb298); box-shadow: inset -5px -6px 10px #91735829, 2px 8px 12px #76594124; animation: loading-float 1.3s ease-in-out infinite alternate; }
.loader-balloon i:nth-child(2) { height: 3rem; animation-delay: .28s; background: radial-gradient(circle at 28% 20%,#fff4dd,#e5c599 55%,#b78b55); }
.loader-balloon i:nth-child(3) { animation-delay: .55s; }
.loader-track { width: min(16rem,65vw); height: .32rem; overflow: hidden; border-radius: 1rem; background: #d9c2a4; }
.loader-track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#b9894e,#f1d39e,#a7753d); animation: loading-bar 1.65s ease-in-out infinite; }
@keyframes loading-float { to { transform: translateY(-.48rem); } }
@keyframes loading-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(340%); } }

.balloon-wipe { position: fixed; z-index: 20; inset: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.wipe-veil { position: absolute; inset: 0; background: #ead4bd; opacity: 0; }
.wipe-balloon { position: absolute; width: clamp(205px, 40vw, 540px); aspect-ratio: 4 / 5; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(12px 18px 16px #67412645); opacity: 0; will-change: transform, opacity; }
.balloon-1,.balloon-5,.balloon-9 { background-image: url('../assets/images/transition-balloon-warm.webp'); }
.balloon-2,.balloon-6,.balloon-10 { background-image: url('../assets/images/transition-balloon-cream.webp'); }
.balloon-3,.balloon-7,.balloon-11 { background-image: url('../assets/images/transition-balloon-pearl.webp'); }
.balloon-4,.balloon-8,.balloon-12 { background-image: url('../assets/images/transition-balloon-satin.webp'); }
.wipe-star { position: absolute; color: #bf9153; font-size: clamp(1.4rem, 3vw, 2.6rem); opacity: 0; text-shadow: 0 1px #fff9; }

.invitation-screen { position: relative; width: 100vw; height: 100dvh; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 25%, #f8e9d4 0%, #ddbb96 65%, #b98e67 100%); }
.js:not(.is-revealed) .invitation-screen { visibility: hidden; }
.invitation-artboard { position: absolute; top: 50%; left: 50%; width: max(100vw, 56.25dvh); aspect-ratio: 9 / 16; transform: translate(-50%,-50%); }
.invitation-picture, .invitation-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bear-motion { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 40%; object-fit: fill; pointer-events: none; }
.rendered-hotspot { position: absolute; z-index: 3; top: 74.5%; width: 17%; height: 11%; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hotspot-rsvp { left: 20.7%; }
.hotspot-gifts { left: 41.5%; }
.hotspot-map { right: 20.7%; }
.rendered-hotspot:focus-visible { outline: 3px solid #87562e; outline-offset: 3px; }

.rsvp-dialog { width: min(calc(100% - 2rem), 30rem); max-height: min(92svh, 48rem); overflow: auto; padding: 3.1rem clamp(1.25rem, 6vw, 2.8rem) 2.5rem; border: 1px solid #b98c58; background: #fff9f0; color: #594331; box-shadow: 0 20px 75px #21190d5e; text-align: center; }
.rsvp-dialog::backdrop { background: #322319a6; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: .6rem; right: .7rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: #745339; font-size: 1.7rem; }
.section-kicker { margin: 0; color: #a0794d; font-size: .64rem; font-weight: 700; letter-spacing: .22em; }
.rsvp-dialog h2 { margin: .8rem 0 .6rem; color: #6b4730; font: 400 clamp(2rem, 7vw, 2.7rem)/1.12 var(--font-display); }
.rsvp-dialog p:not(.section-kicker) { color: #735f4e; font: .96rem/1.5 var(--font-display); }
.rsvp-dialog form { margin-top: 1.5rem; text-align: left; }
.rsvp-dialog label { display: block; margin-bottom: .45rem; color: #674831; font-size: .78rem; font-weight: 700; }
.rsvp-dialog input { width: 100%; min-height: 3.2rem; padding: .75rem .9rem; border: 1px solid #c9ab86; background: #fff; color: #46372d; font-size: 1rem; }
.rsvp-dialog input::placeholder { color: #9c8b7d; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-feedback { min-height: 1.5rem; margin: .5rem 0 !important; color: #923d31 !important; font: .8rem/1.35 var(--font-body) !important; }
.form-submit, .secondary-button { min-height: 3.1rem; padding: .7rem 1.3rem; border: 1px solid #ae7c45; border-radius: 100px; background: linear-gradient(155deg,#f9e7c7,#dfbd8f); color: #694323; font-size: .82rem; font-weight: 700; }
.form-submit { width: 100%; }
.form-submit:disabled { cursor: wait; opacity: .7; }
.rsvp-dialog .form-privacy { margin: .8rem 0 0; font: .7rem/1.4 var(--font-body) !important; text-align: center; }
.rsvp-success > span { display: inline-block; color: #b98b4c; font-size: 1.8rem; }

.gift-options { display: grid; gap: .85rem; margin: 1.35rem 0 1.4rem; text-align: left; }
.gift-diapers, .gift-hygiene { padding: 1rem 1.1rem; border: 1px solid #dfc7a7; border-radius: .75rem; background: #fffdf8; box-shadow: 0 4px 18px #8e654514; }
.gift-diapers { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: .5rem; }
.gift-diapers > span:first-child { grid-row: span 2; color: #be8e51; font-size: 1.4rem; }
.gift-diapers strong, .gift-hygiene strong { color: #674831; font-size: .92rem; }
.gift-diapers > span:last-child { color: #735f4e; font-size: .9rem; }
.gift-hygiene ul { margin: .65rem 0 0; padding-left: 1.2rem; color: #735f4e; font-size: .86rem; line-height: 1.55; }
.gifts-dialog .secondary-button { width: 100%; }

@media (min-width: 50rem) {
  .opening-screen::before, .invitation-screen::before { content: ''; position: absolute; inset: 0; background-position: center; background-size: cover; }
  .opening-screen::before { background-image: url('../assets/images/golden-landscape.webp'); }
  .invitation-screen::before { background-image: url('../assets/images/golden-landscape.webp'); }
  .opening-artboard { width: 56.25dvh; height: 100dvh; aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
  .opening-video { left: 0; width: 100%; transform: none; }
  .invitation-screen { height: 100dvh; }
  .invitation-artboard { top: 50%; left: 50%; width: 56.25dvh; height: 100dvh; aspect-ratio: auto; transform: translate(-50%,-50%); -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bear-motion { display: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}




















/* Audio and animation share one media clock. Only one teddy video is visible. */
.presentation-control { position: absolute; z-index: 4; bottom: max(.85rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-width: 8.5rem; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid #b58b5a; border-radius: 100px; background: linear-gradient(145deg,#fff8e9f5,#ead2b3f5); box-shadow: 0 4px 14px #7651352a,inset 0 1px #fff; color: #68482d; font: 600 .76rem/1.2 var(--font-body); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.presentation-control:disabled { cursor: wait; }
.presentation-control[data-state="playing"]::before { content: 'Ⅱ'; display: inline-block; margin-right: .45rem; }