/* Draft 02, revised: a tactile opening followed by an immersive garden journey. */
[hidden] { display: none !important; }
html.intro-active, .intro-active body { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; }
.envelope-intro { position: fixed; inset: 0; z-index: 60; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2rem, 8vh, 5rem); overflow: hidden; color: #e9dabb; background: #112b25; perspective: 1600px; transition: opacity 1.25s ease, visibility 1.25s; }
.intro-glow { position: absolute; z-index: -1; inset: -25%; background: radial-gradient(ellipse at 50% 42%, #68715155, transparent 48%), url('assets/garden.jpg') center 55% / cover; filter: blur(12px); opacity: .2; animation: intro-breathe 9s ease-in-out infinite alternate; }
.intro-overline { font-family: var(--sans); text-transform: uppercase; font-size: .58rem; letter-spacing: .29em; text-align: center; padding: 0 1rem; }
.intro-branch { position: absolute; z-index: -1; width: 20vw; min-width: 9rem; height: 65vh; bottom: -10%; color: #ab9461; opacity: .25; transform-origin: bottom; animation: sprig-sway 10s ease-in-out infinite alternate; }
.intro-branch-left { left: -5%; }
.intro-branch-right { right: -5%; scale: -1 1; animation-delay: -5s; }
.envelope-float { position: relative; width: min(78vw, 31rem); aspect-ratio: 1.55; transform: rotate(-5deg); animation: envelope-hover 6s ease-in-out infinite; perspective: 1400px; }
.envelope-object { position: absolute; inset: 0; filter: drop-shadow(0 2rem 2rem #0006); }
.envelope-back { position: absolute; inset: 0; border-radius: 4px; background: #c6b697; box-shadow: inset 0 0 0 1px #7d684d55; }
.envelope-pocket { position: absolute; z-index: 4; inset: 0; border-radius: 3px; background: linear-gradient(32deg, #e5d7bd 49.6%, #b3a07c 50%, #ecdec5 50.4%); clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%); }
.envelope-pocket::after { content: ''; position: absolute; inset: 0; background: linear-gradient(-32deg, #f2e8d3 49.6%, #b3a07c 50%, transparent 50.4%); clip-path: polygon(0 100%, 50% 45%, 100% 100%); }
.envelope-flap { position: absolute; z-index: 6; inset: 0 0 auto; height: 57%; transform-origin: center top; transition: transform 1.25s var(--ease), z-index 0s .6s; transform-style: preserve-3d; }
.envelope-flap > div { position: absolute; inset: 0; background: linear-gradient(160deg, #f4ead8, #d5c3a0); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.envelope-flap > div::after { content: ''; position: absolute; inset: 8px 12px 12px; background: #a28b6222; clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0, 50% 96%, 97% 3%, 3% 3%); }
.invitation-card { position: absolute; z-index: 2; inset: 5% 6%; border: 1px solid #c9ba97; background: #fffcf0; color: #294334; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: .8rem; text-align: center; box-shadow: inset 0 0 0 7px #fffcf0, inset 0 0 0 8px #d9caa6; transition: transform 1.6s var(--ease) .85s; }
.invitation-card > svg { width: .8rem; height: .8rem; fill: #a28249; margin-bottom: .7rem; }
.invitation-card > span, .invitation-card small { font-family: var(--sans); font-size: clamp(.4rem, 1vw, .55rem); letter-spacing: .2em; text-transform: uppercase; }
.invitation-card p { font-size: clamp(1.3rem, 4vw, 2.2rem); line-height: 1.05; margin-top: .6rem; }
.invitation-card p em { color: #a28249; font-size: .7em; }
.invitation-card > i { font-size: .8rem; line-height: .8; margin-top: .4rem; }
.invitation-card small { margin-top: .9rem; }
.envelope-seal { position: absolute; z-index: 7; top: 48%; left: 50%; translate: -50% -50%; width: clamp(3.4rem, 12vw, 5.2rem); aspect-ratio: 1; border: 0; border-radius: 48% 52% 49% 51%; background: radial-gradient(circle at 35% 25%, #f1d99e, #b48b43 70%, #e4c27f); box-shadow: 0 6px 12px #30200844, inset 0 0 0 3px #bd9455, inset 0 0 0 5px #e9c988; color: #685026; transition: scale .5s var(--ease), opacity .5s, transform .5s; }
.envelope-seal span { display: block; font-size: clamp(1.2rem, 4vw, 1.9rem); font-style: italic; line-height: 1; }
.envelope-seal svg { width: .45rem; height: .45rem; fill: currentColor; margin: .3rem auto 0; }
.envelope-seal:hover { scale: 1.1; }
.intro-caption { text-align: center; transition: opacity .5s; }
.intro-caption p { font-size: clamp(1.15rem, 3vw, 1.65rem); font-style: italic; }
.intro-caption > span { display: block; margin-top: 1rem; font-family: var(--sans); font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; animation: invitation-pulse 3s ease-in-out infinite; }
.skip-opening { position: absolute; bottom: max(1.5rem, env(safe-area-inset-bottom)); background: none; border: none; padding: .75rem; font-family: var(--sans); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.skip-opening span { padding-left: .5rem; }
.is-unsealing .envelope-float { animation: none; transform: rotate(0); transition: transform .7s var(--ease); }
.is-unsealing .envelope-seal { opacity: 0; transform: scale(1.3) rotate(14deg); pointer-events: none; }
.is-unsealing .envelope-flap { transform: rotateX(180deg); z-index: 1; }
.is-unsealing .invitation-card { transform: translateY(-64%) scale(1.03); }
.is-unsealing .intro-caption { opacity: 0; }
.envelope-intro.is-departing { opacity: 0; visibility: hidden; pointer-events: none; }
.is-departing .envelope-float { transform: translateY(-15vh) scale(1.3); transition: transform 1.3s var(--ease); }
.intro-active main .entrance, .intro-active .garden-window, .intro-active .arch-outline { animation: none; }
.intro-active main .entrance { opacity: 0; }
.intro-active main, .intro-active .masthead { visibility: hidden; }
.replay-opening { border: 0; padding: 0; background: none; text-transform: inherit; letter-spacing: inherit; font: inherit; }

/* The cover now fills the screen; the garden moves behind the names. */
.masthead { position: absolute; top: 0; left: 0; right: 0; color: #f6ebd3; border-bottom-color: #ead5a322; }
.masthead-date { color: #cfc5a9; }
.cover { min-height: max(52rem, 100svh); display: flex; justify-content: center; padding: 10rem var(--gutter) 8rem; color: #fbf1dc; background: #102c25; text-align: center; overflow: hidden; isolation: isolate; }
.cover-art { position: absolute; inset: 0; width: 100%; max-width: none; padding: 0; z-index: -2; }
.garden-window { height: 100%; min-height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; animation: garden-arrival 3s var(--ease) both; }
.garden-window > img { object-position: center 56%; animation: garden-breathe 20s ease-in-out infinite alternate; }
.garden-veil { background: linear-gradient(180deg, #09261bcc, #09261b66 48%, #09261bd9), radial-gradient(ellipse, transparent, #061b1855); }
.window-caption, .art-note, .arch-outline { display: none; }
.cover-sprig { display: none; }
.cover-copy { padding: 0; width: 100%; }
.cover-copy > .eyebrow { color: #d7c49c; margin-bottom: 2.8rem; }
.cover h1 { font-size: clamp(4rem, 8.3vw, 9rem); line-height: 1.02; }
.name-line { padding-bottom: .2em; }
.name-line i { font-weight: 400; }
.name-line em { color: #dfc087; font-size: .5em; }
.joining { color: #d9c9a8; font-size: clamp(1.2rem, 2vw, 1.7rem); margin: .4rem 0 1.4rem; }
.cover-bottom { justify-content: center; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.cover-bottom p { color: #d9dac7; text-align: center; font-size: 1.15rem; }
.scroll-cue svg { stroke: #e8cca0; }
.cover-foot { border-top-color: #d9c9a833; color: #c9c9ae; }
.petal-field { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.petal-field i { position: absolute; top: -8%; left: var(--left); width: var(--size); height: calc(var(--size) * .55); border-radius: 80% 0 80% 0; background: linear-gradient(45deg, #dfc38a11, #f4dfb888); animation: petal-fall var(--duration) linear infinite; animation-delay: var(--delay); }
.invitation { background: radial-gradient(ellipse at 40% 30%, #fffbf0, #eae7d8); }
.invitation::after { content: ''; display: block; position: absolute; bottom: 0; left: 50%; width: 1px; height: 5rem; background: linear-gradient(transparent, #9c865b); transform-origin: top; animation: thread-grow 4s ease-in-out infinite; }
.little-star { animation: star-turn 16s linear infinite; }
.invitation-sprig { animation: branch-wave 9s ease-in-out infinite alternate; transform-origin: bottom; }
.date-panel { box-shadow: 0 25px 40px -28px #2d402842; }
.date-flower { animation: branch-wave 8s ease-in-out infinite alternate; transform-origin: bottom; }
.between-days svg { animation: star-turn 16s linear infinite; }
.date-rule { transform-origin: top; animation: thread-grow 5s ease-in-out infinite; }
.reception-top svg { animation: star-turn 12s linear infinite; }
.reception-scene img { animation: garden-breathe 22s ease-in-out infinite alternate; }
.reception::after { content: ''; position: absolute; z-index: -1; inset: -50%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, #eacb7710 49%, transparent 55%); animation: moonlight-sweep 15s ease-in-out infinite; }
.closing-sprig { animation: sprig-sway 6s ease-in-out infinite alternate; }
.motion-ready [data-reveal] { transform: translateY(3.5rem); filter: blur(4px); transition: opacity 1.2s var(--ease), transform 1.5s var(--ease), filter 1.2s var(--ease), clip-path 1.6s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.motion-ready h2[data-reveal], .motion-ready h3[data-reveal] { transform: translateY(3rem); }
.motion-ready .date-panel[data-reveal] { transform: perspective(800px) rotateY(-14deg) translateY(3rem); }
.motion-ready .ceremony-second .date-panel[data-reveal] { transform: perspective(800px) rotateY(14deg) translateY(3rem); }
.motion-ready [data-reveal].is-visible { transform: none; filter: none; clip-path: none; }
/* Start the heading wipe only after observation; unclipped targets can enter view. */
.motion-ready h2[data-reveal].is-visible, .motion-ready h3[data-reveal].is-visible { animation: heading-unveil 1.6s var(--ease) var(--reveal-delay, 0ms) backwards; }
.motion-ready .ceremony-second .date-panel.is-visible { transform: none; }

@keyframes envelope-hover { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(-3deg); } }
@keyframes heading-unveil { from { clip-path: inset(0 0 100%); } to { clip-path: inset(-.3em); } }
@keyframes intro-breathe { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes invitation-pulse { 50% { opacity: .35; } }
@keyframes garden-arrival { from { opacity: .4; transform: scale(1.14); } to { opacity: 1; transform: scale(1); } }
@keyframes garden-breathe { from { scale: 1; } to { scale: 1.07; } }
@keyframes petal-fall { 0% { transform: translate3d(0, -2rem, 0) rotate(0deg); opacity: 0; } 12% { opacity: .6; } 85% { opacity: .4; } 100% { transform: translate3d(70px, 115vh, 0) rotate(420deg); opacity: 0; } }
@keyframes thread-grow { 0%, 100% { transform: scaleY(.6); opacity: .35; } 50% { transform: scaleY(1); opacity: .9; } }
@keyframes star-turn { to { rotate: 360deg; } }
@keyframes branch-wave { from { transform: rotate(-25deg); } to { transform: rotate(-16deg); } }
@keyframes moonlight-sweep { 0%, 100% { transform: translateX(-12%) rotate(-5deg); opacity: .2; } 50% { transform: translateX(12%) rotate(5deg); opacity: 1; } }
@media (max-width: 760px) {
  .cover { min-height: max(44rem, 100svh); padding: 8rem 1.2rem 7rem; }
  .cover-art { width: 100%; padding: 0; }
  .garden-window { min-height: 100%; aspect-ratio: auto; }
  .cover h1 { font-size: clamp(3.2rem, 10.8vw, 5rem); }
  .cover-copy > .eyebrow { margin-bottom: 2rem; }
  .cover-bottom { gap: 1rem; }
  .cover-bottom p { text-align: center; }
  .joining { font-size: 1.08rem; margin-bottom: 1.1rem; }
  .intro-overline { max-width: 17rem; font-size: .5rem; line-height: 1.8; }
  .envelope-intro { gap: 3.5rem; }
  .invitation-card > svg { margin-bottom: .25rem; }
  .invitation-card p { margin-top: .35rem; }
  .invitation-card small { margin-top: .5rem; }
}
@media (max-height: 600px) and (min-width: 761px) {
  .envelope-intro { gap: 1.5rem; }
  .envelope-float { width: min(52vh, 26rem); }
  .invitation-card p { font-size: 1.35rem; }
  .intro-caption > span { margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { opacity: 1; transform: none !important; filter: none; clip-path: none; }
  .petal-field { display: none; }
  .intro-active main .entrance { opacity: 1; }
}