:root {
  --navy: #08283c;
  --deep: #061d2c;
  --blue: #0d6084;
  --cyan: #70cae1;
  --gold: #caa76d;
  --cream: #f5f0e7;
  --ink: #183340;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #071d2b; }
body { margin: 0; color: var(--ink); font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif; background: #071d2b; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.h5-shell { min-height: 100svh; overflow-x: hidden; }
.invitation { width: min(100%, 520px); margin: 0 auto; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .8s ease .15s, transform .8s ease .15s, visibility 0s linear 1s; }
.h5-shell.is-entered .invitation { opacity: 1; visibility: visible; transform: none; transition-delay: .1s; }
.section { position: relative; overflow: hidden; }

.opening { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; min-height: 100svh; color: white; background: #0c4e6d; transition: opacity .8s ease, visibility 0s linear .8s, transform .8s ease; }
.is-entered .opening { opacity: 0; visibility: hidden; transform: scale(1.03); }
.opening__sky { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,34,55,.03) 0%, rgba(3,32,49,.23) 36%, rgba(3,22,35,.88) 100%), url("/canal-city.jpg") center/cover no-repeat; transform: scale(1.03); animation: slowZoom 12s ease-out both; }
.opening__grain { position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.7) .45px, transparent .6px); background-size: 5px 5px; }
.opening__content { position: relative; width: min(88vw, 430px); text-align: center; padding: 7vh 24px 13vh; text-shadow: 0 2px 14px rgba(1,16,28,.28); animation: openingRise 1s cubic-bezier(.2,.7,.2,1) both; }
.opening__company { position: absolute; top: 0; left: 0; width: 100%; margin: 0; font-family: "PingFang SC", sans-serif; font-size: 12px; letter-spacing: .28em; font-weight: 500; }
.opening__seal { width: 43px; height: 43px; margin: 0 auto 22px; display: grid; place-items: center; border: 1px solid rgba(220,188,134,.75); color: #f1d7a6; font-size: 22px; transform: rotate(45deg); }
.opening__seal::first-letter { transform: rotate(-45deg); }
.opening__eyebrow { margin: 0 0 8px; font-family: Georgia, serif; font-size: 10px; letter-spacing: .55em; color: #e4c993; }
.opening h1 { margin: 0; white-space: nowrap; font-size: clamp(32px, 10vw, 50px); font-weight: 400; letter-spacing: .08em; text-indent: .08em; }
.opening__issue { display: inline-block; margin: 9px 0 18px; padding: 4px 16px; border: 1px solid rgba(255,255,255,.58); font-family: "PingFang SC", sans-serif; font-size: 11px; letter-spacing: .35em; text-indent: .35em; }
.opening__rule { width: 110px; height: 9px; margin: 0 auto 19px; border-top: 1px solid rgba(215,187,139,.7); position: relative; }
.opening__rule span { position: absolute; width: 5px; height: 5px; left: 50%; top: -3px; background: #d9ba85; transform: rotate(45deg); }
.opening__theme { margin: 0 0 5px; color: #f1d7a6; font-size: 20px; letter-spacing: .42em; text-indent: .42em; }
.opening__subtitle { margin: 0; font-family: "PingFang SC", sans-serif; font-size: 13px; letter-spacing: .08em; }
.opening__date { margin: 26px 0 0; font-family: Georgia, serif; font-size: 12px; letter-spacing: .22em; }
.enter-button { margin-top: 31px; min-width: 164px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 11px 17px 11px 24px; background: rgba(6,35,51,.25); backdrop-filter: blur(8px); color: white; cursor: pointer; font-family: "PingFang SC", sans-serif; font-size: 13px; letter-spacing: .18em; box-shadow: 0 8px 28px rgba(0,17,29,.18); }
.enter-button i { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 13px; border-radius: 50%; background: rgba(255,255,255,.16); font-style: normal; animation: bob 1.6s ease-in-out infinite; }
.opening__water { position: absolute; left: 0; right: 0; bottom: 4.5vh; display: flex; flex-direction: column; align-items: center; gap: 7px; opacity: .38; }
.opening__water i { display: block; height: 1px; background: linear-gradient(90deg, transparent, white, transparent); }
.opening__water i:nth-child(1) { width: 68%; }.opening__water i:nth-child(2) { width: 46%; }.opening__water i:nth-child(3) { width: 25%; }

.hero { min-height: 100svh; color: white; background: #0d5272; }
.hero__photo { position: absolute; inset: 0; background: url("/canal-city.jpg") 54% center/cover no-repeat; transform: scale(1.03); animation: slowZoom 16s ease-out both; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,38,57,.3) 0%, rgba(4,33,48,.22) 35%, rgba(4,32,48,.88) 88%, #062739 100%), linear-gradient(90deg, rgba(0,42,68,.16), transparent); }
.hero__content { position: relative; z-index: 1; min-height: 100svh; padding: max(26px, env(safe-area-inset-top)) 24px 28px; display: flex; flex-direction: column; }
.hero__header { display: flex; justify-content: space-between; align-items: center; font-family: "PingFang SC", sans-serif; }
.hero__header p { margin: 0; font-size: 11px; letter-spacing: .2em; }
.hero__header button { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.56); border-radius: 50%; background: rgba(4,30,45,.16); backdrop-filter: blur(6px); color: white; cursor: pointer; font-size: 20px; }
.hero__title { margin-top: 11vh; text-align: center; }
.kicker { margin: 0 0 13px; color: #e5c990; font-family: Georgia, serif; font-size: 10px; letter-spacing: .5em; }
.hero__title h2 { margin: 0; display: flex; justify-content: center; gap: 16px; font-size: clamp(50px, 15vw, 74px); font-weight: 400; line-height: 1; text-shadow: 0 4px 25px rgba(0,20,35,.3); }
.hero__title h2 span:nth-child(2) { transform: translateY(0); }
.hero__edition { margin: 27px auto 0; display: flex; align-items: center; justify-content: center; gap: 15px; }
.hero__edition i { width: 34px; height: 1px; background: rgba(225,194,141,.8); }
.hero__edition p { margin: 0; font-family: "PingFang SC", sans-serif; font-size: 12px; letter-spacing: .18em; }
.hero__theme { margin-top: auto; padding: 18px 20px; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.hero__theme span { display: block; float: left; margin: 3px 13px 0 0; padding: 3px 6px; border: 1px solid #e5c990; color: #e5c990; font-family: "PingFang SC", sans-serif; font-size: 9px; letter-spacing: .2em; }
.hero__theme h3 { margin: 0; color: #f0d7a6; font-size: 25px; font-weight: 400; letter-spacing: .14em; }
.hero__theme p { clear: both; margin: 8px 0 0; font-family: "PingFang SC", sans-serif; font-size: 13px; letter-spacing: .06em; }
.hero__meta { display: flex; align-items: center; margin-top: 20px; }
.hero__meta > div { display: flex; align-items: center; }
.hero__meta strong { font-family: Georgia, serif; font-size: 43px; line-height: 1; font-weight: 400; }
.hero__meta span { margin-left: 8px; font-family: Georgia, serif; font-size: 9px; line-height: 1.45; letter-spacing: .1em; }
.hero__meta > i { width: 1px; height: 35px; margin: 0 18px; background: rgba(255,255,255,.34); }
.hero__meta > p { margin: 0; font-family: "PingFang SC", sans-serif; font-size: 10px; line-height: 1.6; letter-spacing: .1em; }
.hero__meta b { font-size: 11px; font-weight: 500; }
.scroll-cue { margin: 25px auto 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: Georgia, serif; font-size: 7px; letter-spacing: .35em; opacity: .7; }
.scroll-cue i { font-style: normal; font-size: 14px; animation: bob 1.6s ease-in-out infinite; }

.details { padding: 66px 24px 72px; color: white; background: radial-gradient(circle at 90% 3%, rgba(74,161,190,.38), transparent 30%), linear-gradient(160deg, #0b5a79 0%, #07394f 48%, #062b3e 100%); }
.details::after { content: "CANAL"; position: absolute; right: -18px; top: 33px; color: rgba(255,255,255,.035); font-family: Georgia, serif; font-size: 80px; letter-spacing: .02em; writing-mode: vertical-rl; }
.section-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
.section-heading > span { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 2px; border: 1px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 10px; opacity: .76; }
.section-heading p { margin: 0 0 4px; font-family: Georgia, serif; font-size: 8px; letter-spacing: .42em; opacity: .7; }
.section-heading h2 { margin: 0; font-size: 27px; font-weight: 400; letter-spacing: .2em; }
.section-heading.light { color: #f3e9d8; }.section-heading.dark { color: var(--ink); }
.date-card { position: relative; z-index: 1; display: grid; grid-template-columns: 42% 58%; overflow: hidden; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); backdrop-filter: blur(10px); box-shadow: 0 24px 55px rgba(0,20,31,.18); }
.date-card__calendar { padding: 21px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--deep); background: var(--cream); }
.date-card__calendar span, .date-card__calendar small { font-family: Georgia, serif; font-size: 9px; letter-spacing: .18em; }
.date-card__calendar strong { margin: 4px 0 2px; font-family: Georgia, serif; font-size: 57px; line-height: .98; font-weight: 400; }
.date-card__info { padding: 20px 18px; }
.date-card__info p { margin: 0; }.date-card__info p + p { margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.16); }
.date-card__info span { display: block; margin-bottom: 5px; color: #d9bd89; font-family: Georgia, serif; font-size: 8px; letter-spacing: .3em; }
.date-card__info strong { font-family: "PingFang SC", sans-serif; font-size: 14px; line-height: 1.55; font-weight: 500; letter-spacing: .04em; }
.venue-card { position: relative; z-index: 1; margin-top: 15px; padding: 19px 16px; display: grid; grid-template-columns: 30px 1fr 25px; gap: 11px; align-items: center; border: 1px solid rgba(255,255,255,.18); background: rgba(2,31,45,.25); }
.venue-card__pin { position: relative; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #d4b475; border-radius: 50%; color: #d4b475; font-size: 6px; }
.venue-card p { margin: 0 0 5px; color: #d9bd89; font-family: Georgia, serif; font-size: 7px; letter-spacing: .28em; }
.venue-card h3 { margin: 0 0 4px; font-family: "PingFang SC", sans-serif; font-size: 15px; font-weight: 500; }
.venue-card div > span { font-family: "PingFang SC", sans-serif; font-size: 10px; opacity: .68; }
.venue-card > i { font-style: normal; font-size: 20px; opacity: .7; }
.detail-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.detail-actions a { padding: 12px; text-align: center; border: 1px solid rgba(255,255,255,.22); font-family: "PingFang SC", sans-serif; font-size: 11px; letter-spacing: .12em; }
.detail-actions a:first-child { color: var(--deep); background: #e8d5b2; border-color: #e8d5b2; }
.detail-actions span { margin-right: 7px; }
.organizer { position: relative; z-index: 1; margin: 32px 0 0; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.15); font-family: "PingFang SC", sans-serif; font-size: 11px; letter-spacing: .08em; }
.organizer span { margin-right: 13px; color: #d9bd89; font-size: 9px; letter-spacing: .2em; }

.letter { padding: 70px 22px 78px; background: #eae4d8; }
.letter::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(#776e61 .45px, transparent .7px); background-size: 4px 4px; }
.letter__watermark { position: absolute; right: -24px; top: 22px; color: rgba(80,88,76,.055); font-size: 104px; writing-mode: vertical-rl; letter-spacing: .04em; }
.letter-paper { position: relative; padding: 31px 25px 26px; background: rgba(250,247,240,.92); box-shadow: 0 20px 55px rgba(57,45,28,.14); border-top: 3px solid #b89965; }
.letter-paper::before, .letter-paper::after { content: ""; position: absolute; width: 19px; height: 19px; border-color: #b89965; opacity: .55; }
.letter-paper::before { left: 10px; top: 10px; border-left: 1px solid; border-top: 1px solid; }.letter-paper::after { right: 10px; bottom: 10px; border-right: 1px solid; border-bottom: 1px solid; }
.letter-salutation { margin: 0 0 18px; font-size: 16px; letter-spacing: .08em; }
.letter-copy { max-height: 210px; overflow: hidden; transition: max-height .8s cubic-bezier(.22,.8,.2,1); }
.letter-paper.is-open .letter-copy { max-height: 900px; }
.letter-copy p { margin: 0 0 13px; text-align: justify; text-indent: 2em; font-size: 14px; line-height: 2.05; letter-spacing: .03em; }
.letter-fade { position: absolute; left: 25px; right: 25px; top: 184px; height: 92px; pointer-events: none; background: linear-gradient(transparent, rgba(250,247,240,.97) 76%); transition: opacity .35s; }
.letter-paper.is-open .letter-fade { opacity: 0; }
.letter-toggle { position: relative; z-index: 1; margin: 12px auto 3px; display: block; padding: 8px 13px; border: 0; background: transparent; color: #967342; cursor: pointer; font-family: "PingFang SC", sans-serif; font-size: 11px; letter-spacing: .12em; }
.letter-toggle span { margin-left: 8px; }
.letter-signature { display: none; margin-top: 25px; text-align: right; font-family: "PingFang SC", sans-serif; font-size: 12px; line-height: 1.8; animation: fadeIn .5s ease both; }
.letter-paper.is-open .letter-signature { display: block; }
.letter-signature p { margin: 0 0 20px; text-align: left; }.letter-signature strong, .letter-signature span { display: block; }.letter-signature strong { font-weight: 500; }

.agenda { padding: 70px 25px 90px; color: white; background: linear-gradient(rgba(3,31,45,.88), rgba(3,29,43,.96)), url("/canal-city.jpg") 29% center/cover fixed; }
.agenda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(93,185,208,.14), transparent 48%); pointer-events: none; }
.agenda-list { position: relative; z-index: 1; }
.agenda-item { display: grid; grid-template-columns: 47px 1fr; min-height: 126px; }
.agenda-item__track { position: relative; text-align: center; }
.agenda-item__track::after { content: ""; position: absolute; left: 50%; top: 28px; bottom: 0; width: 1px; background: linear-gradient(#bfa16d, rgba(191,161,109,.13)); }
.agenda-item:last-child .agenda-item__track::after { display: none; }
.agenda-item__track i { display: block; width: 12px; height: 12px; margin: 5px auto 7px; border: 1px solid #d8bd8d; transform: rotate(45deg); background: #123f53; }
.agenda-item__track span { color: #d8bd8d; font-family: Georgia, serif; font-size: 8px; }
.agenda-item__body { padding: 0 0 32px 16px; }
.agenda-item time { color: #ddc292; font-family: Georgia, serif; font-size: 11px; letter-spacing: .1em; }
.agenda-item h3 { margin: 8px 0 5px; font-size: 20px; font-weight: 400; letter-spacing: .1em; }
.agenda-item p { margin: 0; font-family: "PingFang SC", sans-serif; font-size: 10px; letter-spacing: .08em; opacity: .6; }
.agenda-quote { position: relative; z-index: 1; margin: 6px 18px 0; padding: 25px 10px; text-align: center; border-top: 1px solid rgba(216,189,141,.36); border-bottom: 1px solid rgba(216,189,141,.36); }
.agenda-quote span { position: absolute; left: 6px; top: 3px; color: #d8bd8d; font-family: Georgia, serif; font-size: 40px; opacity: .45; }
.agenda-quote p { margin: 0; color: #f0e4d0; font-size: 15px; line-height: 1.85; letter-spacing: .13em; }

.closing { min-height: 87svh; color: white; display: grid; place-items: center; background: #082c40; }
.closing__photo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,37,53,.12), rgba(4,29,42,.82)), url("/canal-city.jpg") 74% center/cover no-repeat; filter: saturate(.87); }
.closing__content { position: relative; z-index: 1; width: 100%; padding: 60px 28px 105px; text-align: center; text-shadow: 0 3px 18px rgba(0,18,30,.38); }
.closing__content > p:first-child { margin: 0 0 28px; font-family: "PingFang SC", sans-serif; font-size: 10px; letter-spacing: .22em; }
.closing h2 { margin: 0; font-size: 46px; line-height: 1.4; font-weight: 400; letter-spacing: .18em; text-indent: .18em; }
.closing h2 span { color: #efd6a8; }
.closing__line { width: 75px; height: 1px; margin: 25px auto; background: #d8bd8d; }
.closing__date { margin: 0 0 28px; font-family: Georgia, serif; font-size: 12px; letter-spacing: .2em; }
.closing__content > a { display: inline-flex; align-items: center; gap: 18px; padding: 12px 22px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font-family: "PingFang SC", sans-serif; font-size: 12px; letter-spacing: .12em; backdrop-filter: blur(5px); }
.closing__content > a span { font-size: 18px; }
.closing small { position: absolute; left: 0; right: 0; bottom: 38px; font-family: "PingFang SC", sans-serif; font-size: 9px; letter-spacing: .25em; opacity: .7; }

.floating-nav { position: fixed; z-index: 20; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 28px), 470px); height: 58px; padding: 6px 9px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255,255,255,.21); border-radius: 17px; background: rgba(5,31,44,.84); backdrop-filter: blur(18px); box-shadow: 0 14px 35px rgba(0,15,24,.3); }
.floating-nav a, .floating-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: rgba(255,255,255,.73); cursor: pointer; font-family: "PingFang SC", sans-serif; font-size: 9px; }
.floating-nav span { height: 20px; color: #e0c38f; font-family: Georgia, serif; font-size: 15px; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: 88px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 999px; background: rgba(2,23,34,.92); color: white; font-family: "PingFang SC", sans-serif; font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.23); animation: toastIn .28s ease both; }

@keyframes slowZoom { from { transform: scale(1.08); } to { transform: scale(1.02); } }
@keyframes openingRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 521px) {
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(4,27,40,.82), rgba(4,27,40,.94)), url("/canal-city.jpg") center/cover; }
  .invitation { box-shadow: 0 0 70px rgba(0,0,0,.36); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Cinematic motion layer */
.h5-shell { --gold-glow: rgba(226, 190, 126, .72); position: relative; }
.ambient-canvas { position: fixed; z-index: 18; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 1.6s ease 1s; }
.is-entered .ambient-canvas { opacity: .55; }

.opening { clip-path: circle(145% at 50% 56%); transition: clip-path 1.45s cubic-bezier(.72,0,.24,1), opacity .9s ease .48s, visibility 0s linear 1.5s, transform 1.5s cubic-bezier(.2,.7,.2,1); }
.is-entered .opening { clip-path: circle(0 at 50% 58%); opacity: 0; visibility: hidden; transform: scale(1.12); }
.opening::before { content: ""; position: absolute; z-index: 1; inset: -18%; pointer-events: none; background: radial-gradient(circle at 50% 43%, rgba(116,211,235,.22), transparent 23%), conic-gradient(from 160deg at 50% 62%, transparent 0 38%, rgba(231,203,150,.13) 43%, transparent 49% 100%); animation: auroraTurn 14s linear infinite; }
.opening::after { content: ""; position: absolute; z-index: 2; top: -25%; left: -65%; width: 42%; height: 155%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,244,215,.2), transparent); filter: blur(10px); transform: rotate(16deg); animation: openingSweep 5.8s ease-in-out infinite 1.4s; }
.opening__sky { filter: saturate(1.16) contrast(1.05); animation: cinematicZoom 16s ease-out both; }
.opening__grain { z-index: 3; animation: grainDrift 8s steps(8) infinite; }
.opening__content { z-index: 7; }
.opening__company { animation: fadeDrop 1.2s cubic-bezier(.2,.8,.2,1) .1s both; }
.opening__seal { position: relative; box-shadow: 0 0 0 0 rgba(229,199,145,0); animation: sealArrival 1.3s cubic-bezier(.17,.84,.33,1) .28s both, sealPulse 3s ease-in-out 1.8s infinite; }
.opening__seal::after { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(236,211,163,.28); animation: sealOrbit 8s linear infinite; }
.opening h1 { text-shadow: 0 2px 18px rgba(0,20,34,.6), 0 0 34px rgba(174,228,240,.22); }
.opening h1 span { display: inline-block; opacity: 0; transform: translateY(24px) scale(.9); filter: blur(5px); animation: titleChar 1s cubic-bezier(.17,.84,.33,1) forwards; }
.opening__issue { animation: lineReveal 1s cubic-bezier(.2,.8,.2,1) 1.15s both; }
.opening__rule { overflow: visible; transform: scaleX(0); animation: ruleDraw 1.2s cubic-bezier(.2,.8,.2,1) 1.3s forwards; }
.opening__theme, .opening__subtitle, .opening__date { opacity: 0; animation: fadeRise .9s ease forwards; }
.opening__theme { animation-delay: 1.5s; }.opening__subtitle { animation-delay: 1.68s; }.opening__date { animation-delay: 1.85s; }
.enter-button { position: relative; overflow: hidden; opacity: 0; animation: fadeRise .9s ease 2s forwards, buttonBreath 2.6s ease-in-out 3s infinite; }
.enter-button::before { content: ""; position: absolute; inset: -80% auto -80% -55%; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: rotate(18deg); animation: buttonSweep 3.4s ease-in-out 2.6s infinite; }
.opening__halo { position: absolute; z-index: 4; left: 50%; top: 47%; width: min(88vw,430px); aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; }
.opening__halo i { position: absolute; inset: 50%; border: 1px solid rgba(222,195,143,.23); border-radius: 50%; animation: haloExpand 4.8s ease-out infinite; }
.opening__halo i:nth-child(2) { animation-delay: 1.6s; }.opening__halo i:nth-child(3) { animation-delay: 3.2s; }
.opening__flare { position: absolute; z-index: 5; left: 50%; bottom: 17%; width: 1px; height: 1px; border-radius: 50%; box-shadow: 0 0 45px 16px rgba(232,203,147,.25), 0 0 110px 40px rgba(109,204,229,.12); animation: flareFloat 4s ease-in-out infinite; }
.opening__water { z-index: 6; }
.opening__water i { transform-origin: center; animation: waterBreathe 3.4s ease-in-out infinite; }
.opening__water i:nth-child(2) { animation-delay: .55s; }.opening__water i:nth-child(3) { animation-delay: 1.1s; }

.h5-shell.is-entered .invitation { transition: opacity 1.1s ease .65s, transform 1.25s cubic-bezier(.17,.84,.33,1) .65s, visibility 0s linear .65s; }
.hero__photo { background-position: 54% calc(50% + var(--parallax, 0px)); filter: saturate(1.08) contrast(1.04); animation: heroZoom 18s ease-out both; }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 18%, rgba(95,209,234,.22), transparent 24%), linear-gradient(115deg, transparent 35%, rgba(255,226,171,.12) 48%, transparent 61%); background-size: 100% 100%, 240% 100%; animation: heroLight 8s ease-in-out infinite; mix-blend-mode: screen; }
.hero__header { animation: fadeDrop 1s ease 1.2s both; }
.hero__title .kicker { animation: trackingIn 1.1s ease 1.25s both; }
.hero__title h2 span { opacity: 0; animation: heroGlyph 1.15s cubic-bezier(.17,.84,.33,1) forwards; }
.hero__title h2 span:nth-child(1) { animation-delay: 1.38s; }.hero__title h2 span:nth-child(2) { animation-delay: 1.52s; }.hero__title h2 span:nth-child(3) { animation-delay: 1.66s; }
.hero__edition { opacity: 0; animation: fadeRise .9s ease 1.82s forwards; }
.hero__theme { position: relative; overflow: hidden; animation: glassGlow 4.5s ease-in-out infinite; }
.hero__theme::after, .date-card::after, .venue-card::after { content: ""; position: absolute; top: -80%; bottom: -80%; left: -45%; width: 23%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,244,219,.22), transparent); transform: rotate(17deg); animation: cardSweep 6.2s ease-in-out infinite; }
.hero__meta { opacity: 0; animation: fadeRise .9s ease 2s forwards; }
.scroll-cue { animation: fadeRise .9s ease 2.2s forwards; opacity: 0; }

.reveal-motion { opacity: 0; transform: translateY(44px) scale(.975); filter: blur(8px); transition: opacity .9s ease, transform 1s cubic-bezier(.17,.84,.33,1), filter 1s ease; }
.reveal-motion.is-visible { opacity: 1; transform: none; filter: blur(0); }
.reveal-motion.delay-1 { transition-delay: .12s; }.reveal-motion.delay-2 { transition-delay: .24s; }.reveal-motion.delay-3 { transition-delay: .36s; }
.section-heading.is-visible > span { animation: compassSpin 1.2s cubic-bezier(.17,.84,.33,1) both; }
.section-heading.is-visible h2 { animation: headingTracking 1.1s ease both; }
.date-card, .venue-card, .letter-paper { will-change: transform; }
.date-card.is-visible, .venue-card.is-visible, .letter-paper.is-visible { box-shadow: 0 28px 70px rgba(0,18,31,.26), 0 0 0 1px rgba(227,201,151,.08) inset; }
.venue-card { overflow: hidden; }
.venue-card::after { animation-delay: 1.3s; }
.details::before { content: ""; position: absolute; inset: -15%; pointer-events: none; background: radial-gradient(circle at 15% 55%, rgba(95,206,226,.16), transparent 25%); animation: ambientDrift 9s ease-in-out infinite alternate; }
.letter-paper { transform-origin: top center; }
.letter-paper.is-visible { animation: paperFloat 6s ease-in-out 1s infinite; }
.letter__watermark { animation: watermarkDrift 8s ease-in-out infinite alternate; }
.agenda-item__track::after { transform: scaleY(0); transform-origin: top; transition: transform 1.1s ease; }
.agenda.section-visible .agenda-item__track::after { transform: scaleY(1); }
.agenda.section-visible .agenda-item:nth-child(1) .agenda-item__track::after { transition-delay: .35s; }.agenda.section-visible .agenda-item:nth-child(2) .agenda-item__track::after { transition-delay: .75s; }
.agenda-item__track i { transition: box-shadow .6s ease, background .6s ease; }
.agenda-item.is-visible .agenda-item__track i { box-shadow: 0 0 18px 4px rgba(216,189,141,.3); background: #d8bd8d; }
.agenda::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 28%, rgba(117,211,231,.1) 48%, transparent 68%); background-size: 240% 100%; animation: agendaAurora 9s ease-in-out infinite; }
.closing__photo { background-position: 74% calc(50% + var(--parallax, 0px)); transform: scale(1.08); transition: transform 5s ease; }
.closing.section-visible .closing__photo { transform: scale(1.01); }
.closing h2 span { display: inline-block; animation: goldTextGlow 3.3s ease-in-out infinite; }
.closing__line { transform: scaleX(0); }.closing.section-visible .closing__line { animation: ruleDraw 1.3s ease .5s forwards; }
.floating-nav { transform: translate(-50%, 100px); opacity: 0; transition: transform 1s cubic-bezier(.17,.84,.33,1) 1.2s, opacity .8s ease 1.2s; }
.is-entered .floating-nav { transform: translateX(-50%); opacity: 1; }

@keyframes cinematicZoom { from { transform: scale(1.16); } to { transform: scale(1.03); } }
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: scale(1.03); } }
@keyframes auroraTurn { to { transform: rotate(360deg); } }
@keyframes openingSweep { 0%,24% { left:-65%; opacity:0; } 42% { opacity:1; } 68%,100% { left:130%; opacity:0; } }
@keyframes grainDrift { 0% { transform:translate(0); } 25% { transform:translate(2%,-1%); } 50% { transform:translate(-1%,2%); } 75% { transform:translate(1%,1%); } }
@keyframes fadeDrop { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:none; } }
@keyframes sealArrival { from { opacity:0; transform:rotate(135deg) scale(.3); filter:blur(8px); } to { opacity:1; transform:rotate(45deg) scale(1); filter:blur(0); } }
@keyframes sealPulse { 50% { box-shadow:0 0 28px 5px rgba(229,199,145,.2); } }
@keyframes sealOrbit { to { transform:rotate(360deg); } }
@keyframes titleChar { to { opacity:1; transform:none; filter:blur(0); } }
@keyframes lineReveal { from { opacity:0; transform:scaleX(.4); } to { opacity:1; transform:scaleX(1); } }
@keyframes ruleDraw { to { transform:scaleX(1); } }
@keyframes fadeRise { from { opacity:0; transform:translateY(18px); filter:blur(4px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes buttonBreath { 50% { box-shadow:0 8px 35px rgba(0,17,29,.22),0 0 24px rgba(225,194,141,.2); } }
@keyframes buttonSweep { 0%,35% { left:-55%; } 70%,100% { left:135%; } }
@keyframes haloExpand { 0% { inset:50%; opacity:.8; } 75%,100% { inset:2%; opacity:0; } }
@keyframes flareFloat { 50% { transform:translateY(-13px); opacity:.7; } }
@keyframes waterBreathe { 50% { transform:scaleX(.72); opacity:.55; } }
@keyframes heroLight { 0%,100% { background-position:center,0 0; } 50% { background-position:center,100% 0; } }
@keyframes trackingIn { from { opacity:0; letter-spacing:1.2em; } to { opacity:1; letter-spacing:.5em; } }
@keyframes heroGlyph { from { opacity:0; transform:translateY(35px) scale(.8); filter:blur(7px); } to { opacity:1; filter:blur(0); } }
@keyframes glassGlow { 50% { box-shadow:0 0 35px rgba(105,198,222,.13) inset; } }
@keyframes cardSweep { 0%,48% { left:-45%; opacity:0; } 62% { opacity:1; } 82%,100% { left:135%; opacity:0; } }
@keyframes compassSpin { from { opacity:0; transform:rotate(-180deg) scale(.4); } to { opacity:.76; transform:none; } }
@keyframes headingTracking { from { opacity:0; letter-spacing:.55em; } to { opacity:1; letter-spacing:.2em; } }
@keyframes ambientDrift { to { transform:translate(18%,8%) scale(1.25); } }
@keyframes paperFloat { 50% { transform:translateY(-5px); box-shadow:0 28px 65px rgba(57,45,28,.18); } }
@keyframes watermarkDrift { to { transform:translateY(22px); } }
@keyframes agendaAurora { 0%,100% { background-position:130% 0; } 50% { background-position:-40% 0; } }
@keyframes goldTextGlow { 50% { color:#fff0cd; text-shadow:0 0 28px rgba(226,190,126,.55); } }

@media (max-width: 380px) {
  .opening__halo { width: 104vw; }
  .reveal-motion { transform: translateY(30px) scale(.985); }
}