/* Closed envelope → broken seal → open flap → raised invitation (4 seconds). */
.intro { --envelope-width: min(92vw, 460px, 60vh); height: 100vh; min-height: 360px; overflow: hidden; position: relative; display: grid; place-items: center; isolation: isolate; background: radial-gradient(ellipse at 48% 42%, #fffdf7, #f4f0e8 65%, #eae3d7); }
.intro.is-opening { min-height: max(100vh, calc(140px + var(--envelope-width) * 2.368)); }
.intro::after { content: ''; position: absolute; inset: 0; z-index: 8; opacity: .09; pointer-events: none; background: url('../images/paper.svg'); }
.intro > .eyebrow { position: absolute; top: max(20px, env(safe-area-inset-top)); font-size: clamp(8px, 1.5vw, 10px); }
.scene { width: var(--envelope-width); aspect-ratio: 1.325; position: absolute; left: 50%; top: 50vh; transform: translate(-50%, calc(-50% + min(14vh, 100px))); perspective: 1400px; container-type: inline-size; transition: top 1s ease, transform 1s ease; }
.is-opening .scene { top: calc(60px + var(--envelope-width) * 1.614); transform: translate(-50%, 0); }
.envelope { width: 100%; height: 100%; position: relative; filter: drop-shadow(0 3px 2px #40251d30) drop-shadow(0 16px 17px #40251d35); }
.envelope-back { position: absolute; inset: 0; clip-path: polygon(.2% .3%, 17% 0, 35% .2%, 58% 0, 79% .3%, 99.8% .1%, 100% 18%, 99.8% 43%, 100% 69%, 99.7% 99.8%, 76% 100%, 52% 99.7%, 28% 100%, .1% 99.8%, .3% 74%, 0 50%, .2% 24%); background: radial-gradient(ellipse at 50% 15%, #3f1e2270, transparent 65%), linear-gradient(135deg, #713b37, #96554b 55%, #7a403b); box-shadow: inset 0 0 18px #391a1d55; }
.invitation { position: absolute; z-index: 2; width: 94%; height: 210%; bottom: 3%; left: 3%; background: #fffdfa; color: #59443d; box-shadow: 0 0 0 1px #8f76521a, 0 3px 15px #5d412718; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.1cqw; text-align: center; padding: 6cqw 5cqw; border-radius: 2px; clip-path: inset(55% 0 0); font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.invitation::before { content: ''; position: absolute; inset: 9px; border: 1px solid #bfa17940; pointer-events: none; }
.title-prefix { margin: 0; font: 300 3.3cqw/1.3 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; color: inherit; }
.names { margin: 0 0 1cqw; font: 400 16cqw/1.05 'Mrs Saint Delafield', 'Segoe Script', cursive; letter-spacing: 0; white-space: nowrap; }
.names .ampersand { display: inline; font: inherit; margin: 0 .1em; }
.fine-rule { width: 7cqw; height: 1px; flex-shrink: 0; background: #bca07e; margin: 2cqw 0; }
.invitation-date { font: 400 6.8cqw/1.2 'Mrs Saint Delafield', 'Segoe Script', cursive; color: inherit; white-space: nowrap; }
.invitation-date-row { display: flex; align-items: center; gap: 2cqw; width: 100%; margin: 1.2cqw 0; }
.invitation-date-row::before, .invitation-date-row::after { content: ''; flex: 1; height: 1px; background: #745a4d; }
.invitation-copy { margin: 0; font: 300 max(12px, 3.6cqw)/1.4 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-wrap: pretty; }
.invitation-details { margin-top: .5cqw; }
.invitation-rsvp { margin-top: .5cqw; }
.invitation-sprig { width: 6cqw; height: 6cqw; object-fit: contain; opacity: .75; }
.invitation > * { flex-shrink: 0; }
.invitation-time { margin: 1.2cqw 0 0; font-size: 3.3cqw; color: #8c513c; }
.invitation-place { margin: 2cqw 0 0; font-size: 3.3cqw; line-height: 1.5; color: #715a44; }
.invitation-place span { display: block; font-size: 2.9cqw; font-style: italic; }
.envelope-front { position: absolute; inset: 0; z-index: 4; overflow: hidden; border-radius: 0 0 2px 2px; clip-path: polygon(0 0, 50% 57%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(32deg, #7b403b, #96564d 56%, #884940); }
.envelope-front::before { content: ''; position: absolute; inset: 0; clip-path: polygon(0 100%, 50% 57%, 100% 100%); background: linear-gradient(180deg, #98594e, #80413b); }
.envelope-front::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L50 57L100 100' fill='none' stroke='%23a18a6b' stroke-opacity='.3' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.envelope-flap { position: absolute; inset: 0; z-index: 5; transform-origin: top center; backface-visibility: visible; -webkit-backface-visibility: visible; filter: drop-shadow(0 2px 1px #2e151980) drop-shadow(0 7px 5px #35191b55); }
.envelope-flap-paper { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 99.6% 2.4%, 98.7% 4.9%, 97.2% 7.3%, 94.8% 9.8%, 93.9% 10.5%, 92.1% 13.1%, 89.4% 16%, 87.8% 17.2%, 85.3% 20.5%, 83.7% 21.7%, 81.2% 25.1%, 78.9% 27%, 76.7% 30.3%, 74.4% 32%, 72.1% 35.1%, 69.8% 36.8%, 67.4% 40.1%, 65.2% 41.9%, 62.9% 45%, 60.6% 46.7%, 58.3% 50.1%, 56.1% 51.7%, 53.8% 55%, 51.5% 57.3%, 50% 58.5%, 48.4% 57.4%, 46.2% 55.2%, 44% 52%, 41.7% 50.3%, 39.5% 47.2%, 37.1% 45.3%, 34.9% 42.2%, 32.6% 40.4%, 30.2% 37%, 27.9% 35.2%, 25.5% 32.2%, 23.2% 30.4%, 21% 27.2%, 18.5% 25.3%, 16.3% 22.1%, 14% 20.4%, 11.6% 17.3%, 9.5% 15.5%, 7.1% 12.3%, 5.2% 9.9%, 3.4% 7.3%, 1.5% 4.6%, .5% 2.3%); background: radial-gradient(ellipse at 34% 7%, #c58a6840, transparent 65%), linear-gradient(165deg, #a56659, #8a4b43 70%, #754039); box-shadow: inset 0 1px 1px #edb9a655; }
.envelope-back::after, .envelope-front > span, .envelope-flap-paper::after { content: ''; position: absolute; inset: 0; background: url('../images/paper.svg'); mix-blend-mode: soft-light; opacity: .72; pointer-events: none; }
.seal { position: absolute; z-index: 6; width: clamp(58px, 16cqw, 74px); aspect-ratio: 1; left: 50%; top: 46%; transform: translateX(-50%); display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; background: radial-gradient(ellipse at 37% 32%, #fff9e9, #e8d9b8 70%, #c8ad7b 90%); border-radius: 47% 51% 45% 49%; box-shadow: 1px 5px 9px #3e231d60, inset 0 0 0 3px #ddc99f, inset 0 0 0 5px #fff4d7a0; transition: box-shadow .25s; }
.seal:hover { box-shadow: 1px 6px 13px #3e231d70, inset 0 0 0 3px #ddc99f, inset 0 0 0 5px #fff4d7a0; }
.seal img { width: 76%; height: 76%; filter: drop-shadow(0 1px 0 #fff8e9); }
.seal > span { font: 17px Georgia, serif; text-shadow: 0 1px 1px #4b2f2c; }
.seal-amp { font-size: 11px; margin: 0 2px; font-style: italic; }
.seal-hint { position: absolute; bottom: 9%; margin: 0; font: 11px/1.5 Arial, sans-serif; letter-spacing: .08em; color: var(--color-muted); transition: opacity .35s; }
.is-opening .seal-hint { opacity: 0; pointer-events: none; }
.botanical { pointer-events: none; position: absolute; width: min(30vw, 300px); opacity: .37; z-index: -1; }
.botanical--left { bottom: -35px; left: -45px; transform: rotate(22deg); }
.botanical--right { right: -60px; top: -70px; transform: rotate(198deg); opacity: .24; }
.scroll-cue { position: absolute; z-index: 9; bottom: 3.5%; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 20px; color: var(--color-muted); text-decoration: none; animation: cue-appear .8s ease both; }
.scroll-cue span { font: 9px/1.5 Arial, sans-serif; letter-spacing: .14em; }
.scroll-cue svg { animation: arrow-drift 2.8s ease-in-out infinite; }
.is-open .scroll-cue { position: fixed; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 21; flex-direction: column; align-items: center; gap: 7px; padding: 10px 18px; text-align: center; white-space: nowrap; background: #fffaf0ed; border-radius: 16px; }
.spotify-section { padding: 36px 20px calc(40px + env(safe-area-inset-bottom)); background: var(--color-background); }
.spotify-player { width: min(100%, 640px); margin: 0 auto; text-align: center; }
.spotify-player iframe { display: block; border: 0; border-radius: 12px; }
.spotify-player > a { display: inline-block; padding: 14px; color: var(--color-muted); font: 11px Arial, sans-serif; }
.is-opening .seal { animation: break-seal var(--intro-duration) both; pointer-events: none; }
.is-opening .envelope-flap { animation: open-flap var(--intro-duration) both; }
.is-opening .invitation { animation: reveal-card var(--intro-duration) both; }
.is-opening .seal, .is-opening .envelope-flap, .is-opening .invitation { animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
@keyframes break-seal { 0%, 5% { opacity: 1; transform: translateX(-50%) scale(1); } 19%, 100% { opacity: 0; transform: translate(-50%, 14px) scale(.94); } }
@keyframes open-flap { 0%, 14% { transform: rotateX(0); z-index: 5; } 35% { z-index: 5; } 36%, 100% { z-index: 1; } 46%, 100% { transform: rotateX(180deg); } }
@keyframes reveal-card { 0%, 35% { transform: translateY(0); clip-path: inset(55% 0 0); } 60% { clip-path: inset(0); } 100% { transform: translateY(-48%); clip-path: inset(0); } }
@keyframes cue-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes arrow-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-height: 500px) { .intro > .eyebrow { top: 4%; } .seal-hint { bottom: 5%; } .is-open .scroll-cue { bottom: calc(6px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .scene { transition: none; } .is-opening .seal, .is-opening .envelope-flap, .is-opening .invitation { animation-duration: .01ms; } .scroll-cue, .scroll-cue svg { animation: none; } }

/* Contact shadows and fibers remain attached to the individual paper layers. */
.envelope-front { box-shadow: inset 0 -2px 3px #3d1e2266, inset 2px 0 2px #e6ac8c30, inset -2px 0 3px #32191d30; background: radial-gradient(ellipse at 22% 35%, #c18b6b30, transparent 60%), linear-gradient(115deg, #6d3635, #995b50 48%, #7e403c); }
.envelope-front::before { background: radial-gradient(ellipse at 50% 7%, #49232855, transparent 60%), linear-gradient(175deg, #a56857, #8a4a42 65%, #784039); }
.envelope-front > span, .envelope-flap-paper::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48' numOctaves='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='1.6' diffuseConstant='.8' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='225' elevation='48'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Cpath d='M0 0h140v140H0z' filter='url(%23f)'/%3E%3C/svg%3E"); background-size: 140px 140px; opacity: .32; mix-blend-mode: soft-light; }

/* The invitation uses the same classic serif as the rest of the website. */
.title-prefix { font: 400 3.3cqw/1.3 Georgia, 'Times New Roman', serif; }
.invitation-copy { font: 400 max(12px, 3.6cqw)/1.45 Georgia, 'Times New Roman', serif; }

/* Wider paper on desktops and large tablets; keep the mobile dimensions,
   invitation height, typography and opening animation unchanged. */
@media (min-width: 1024px) and (min-height: 600px) {
  .envelope { width: 125%; left: -12.5%; }
}