:root { --ink:#26070d; --wine:#741523; --red:#a92938; --gold:#dfb466; --paper:#f6ecdf; --light:#fff8ec; }
* { box-sizing:border-box; } html,body { height:100%; } body { margin:0; overflow:hidden; color:var(--light); background:#e7d8ca; font-family:"Songti SC","STSong","Noto Serif SC",serif; } button,input,select,textarea { font:inherit; }
.entry-gate { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; overflow:hidden; color:#fff9ef; text-align:center; background:#1b2028; transition:opacity .55s ease,visibility .55s; }.entry-fallback { position:absolute; inset:0; z-index:0; overflow:hidden; background:linear-gradient(180deg,rgba(16,37,55,.08),rgba(48,20,7,.18) 50%,rgba(33,9,7,.68)),url("./opening-cover.jpg") center 56%/cover no-repeat; transform:scale(1.04); animation:entry-photo-drift 10s ease-in-out infinite alternate; transition:opacity .7s ease; }.entry-fallback::after { content:""; position:absolute; inset:-20%; background:linear-gradient(112deg,transparent 38%,rgba(255,224,149,.32) 49%,transparent 60%); animation:entry-gold-sweep 5.5s 1s ease-in-out infinite; }.entry-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; background:#1b2028; transition:opacity .7s ease; }.entry-canvas { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }.entry-gate::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(13,37,59,.1),rgba(39,22,11,.34) 48%,rgba(27,12,8,.78)); }.entry-gate::after { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(circle at 24% 20%,rgba(255,236,176,.14),transparent 23%),linear-gradient(180deg,transparent 30%,rgba(25,8,6,.42) 100%); }.entry-gate__frame { position:absolute; inset:18px; z-index:3; border:1px solid rgba(255,235,189,.72); }.entry-gate__animation { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }.gate-glow { position:absolute; top:16%; left:24%; width:270px; height:270px; border-radius:50%; background:radial-gradient(circle,rgba(255,226,151,.28),transparent 68%); transform:translateX(-50%); animation:breathe 4s ease-in-out infinite; }.gate-sunray { position:absolute; top:-30%; left:-45%; width:95%; height:150%; opacity:.32; background:linear-gradient(105deg,transparent 40%,rgba(255,229,173,.55) 50%,transparent 60%); transform:rotate(13deg); animation:sunray 9s ease-in-out infinite; }.gate-ring { position:absolute; top:42%; left:50%; border:1px solid rgba(255,229,176,.46); border-radius:50%; transform:translate(-50%,-50%); }.gate-ring-one { width:116px; height:116px; animation:orbit 12s linear infinite; }.gate-ring-two { width:170px; height:170px; border-color:rgba(255,229,176,.22); animation:orbit 17s linear infinite reverse; }.sun-speck { position:absolute; width:5px; height:5px; border-radius:50%; background:#ffe5a3; box-shadow:0 0 12px rgba(255,224,150,.88); opacity:0; }.speck-one { left:13%; top:25%; animation:dust-rise 7.8s .1s linear infinite; }.speck-two { left:69%; top:55%; animation:dust-rise 9s 1.7s linear infinite; }.speck-three { left:31%; top:72%; animation:dust-rise 7.3s 2.8s linear infinite; }.speck-four { left:87%; top:38%; animation:dust-rise 8.4s 4.4s linear infinite; }.speck-five { left:50%; top:66%; animation:dust-rise 9.1s 5.9s linear infinite; }.speck-six { left:9%; top:80%; animation:dust-rise 8.2s 3.5s linear infinite; }.entry-gate__content { position:relative; z-index:4; }.entry-gate p,.microtype { margin:0; color:#f4d298; font:11px Georgia,serif; letter-spacing:3.2px; }.entry-gate h1 { margin:23px 0 30px; font-size:36px; font-weight:500; letter-spacing:6px; }.entry-gate p { animation:copy-in .8s .15s both; }.entry-gate h1 { animation:copy-in 1s .35s both; }.entry-gate button { border:1px solid #f1cc86; border-radius:0; padding:13px 23px; color:#fff7e8; background:rgba(30,22,16,.34); letter-spacing:2px; cursor:pointer; animation:copy-in 1s .65s both,gate-button 2.5s 1.6s ease-in-out infinite; }.entry-gate button span { padding-left:10px; color:#f5ce8b; }.entry-gate small { display:block; margin-top:18px; color:rgba(255,247,232,.86); font-size:12px; letter-spacing:1px; animation:copy-in 1s .85s both; }.entry-gate.is-hidden { opacity:0; visibility:hidden; pointer-events:none; } @keyframes entry-photo-drift { from { transform:scale(1.04) translate3d(-1.4%,.8%,0); } to { transform:scale(1.14) translate3d(1.5%,-1.2%,0); } } @keyframes entry-gold-sweep { 0%,22% { transform:translateX(-70%) rotate(5deg); opacity:0; } 38% { opacity:1; } 72%,100% { transform:translateX(70%) rotate(5deg); opacity:0; } } @keyframes sunray { 0%,100% { transform:translateX(-20%) rotate(13deg); opacity:.05; } 48% { transform:translateX(85%) rotate(13deg); opacity:.34; } } @keyframes dust-rise { 0% { opacity:0; transform:translate3d(0,20px,0) scale(.4); } 15% { opacity:.95; } 85% { opacity:.42; } 100% { opacity:0; transform:translate3d(28px,-170px,0) scale(1.3); } } @keyframes gate-button { 50% { box-shadow:0 0 0 10px rgba(246,200,119,0),0 0 22px rgba(246,200,119,.31); } }
.invitation { position:relative; width:min(100%,510px); height:100svh; margin:auto; overflow:hidden; background:var(--ink); box-shadow:0 0 55px rgba(46,8,14,.25); }.panel { position:absolute; inset:0; display:flex; flex-direction:column; min-height:100svh; padding:clamp(48px,8vh,76px) 31px max(38px,env(safe-area-inset-bottom)); overflow-y:auto; isolation:isolate; opacity:0; pointer-events:none; transform:translateX(28px); transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.25,1); }.panel.is-active { z-index:2; opacity:1; pointer-events:auto; transform:translateX(0); }.panel > :not(.photo-fill):not(.cover-shade) { position:relative; z-index:2; }
.music-button { position:fixed; top:max(15px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); z-index:10; border:1px solid rgba(255,239,207,.7); border-radius:100px; padding:8px 11px; color:#fff9ee; background:rgba(56,5,13,.35); backdrop-filter:blur(6px); font-size:12px; cursor:pointer; }.music-icon { display:inline-block; margin-right:5px; font-size:16px; vertical-align:-1px; }.music-button.playing .music-icon { animation:spin 2.3s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.photo-fill { position:absolute; inset:0; z-index:0; overflow:hidden; background:center/cover no-repeat; }.photo-cycle-layer { position:absolute; inset:0; z-index:0; background:center/cover no-repeat; opacity:0; transform:scale(1.06); transition:opacity 1.2s ease,transform 5s ease; }.photo-cycle-layer.is-visible { opacity:1; transform:scale(1); }.photo-fill::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(31,4,9,.1),rgba(31,4,9,.55)); }
.cover-panel { justify-content:center; padding:0; text-align:center; background:#26070d; }.cover-photo { background-image:url("./cover-photo.jpg"); }.cover-panel.is-active .cover-photo .photo-cycle-layer { animation:cover-kenburns 16s ease-in-out infinite alternate; }.cover-shade { position:absolute; inset:0; z-index:1; overflow:hidden; background:linear-gradient(180deg,rgba(25,3,8,.17),rgba(55,5,14,.2) 42%,rgba(28,4,10,.7)); }.cover-shade::after { content:""; position:absolute; inset:-40%; background:linear-gradient(105deg,transparent 42%,rgba(255,216,144,.16) 50%,transparent 58%); transform:translateX(-55%) rotate(8deg); animation:light-sweep 8s 1.5s ease-in-out infinite; }.cover-animation { position:absolute!important; inset:0; z-index:1!important; overflow:hidden; pointer-events:none; animation:none!important; }.cover-glow { position:absolute; top:20%; left:50%; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle,rgba(253,207,116,.27),transparent 66%); transform:translateX(-50%); animation:breathe 4.5s ease-in-out infinite; }.cover-ring { position:absolute; top:34%; left:50%; width:125px; height:125px; border:1px solid rgba(250,216,149,.44); border-radius:50%; transform:translate(-50%,-50%); }.ring-one { animation:orbit 13s linear infinite; }.ring-two { width:175px; height:175px; border-color:rgba(250,216,149,.22); animation:orbit 18s linear infinite reverse; }.petal { position:absolute; color:#f1be76; text-shadow:0 0 14px rgba(255,200,105,.7); font-size:15px; opacity:0; }.petal-one { left:15%; top:14%; animation:drift 6.8s 0s linear infinite; }.petal-two { left:78%; top:5%; animation:drift 7.2s 1.8s linear infinite; }.petal-three { left:43%; top:0; animation:drift 6.3s 3s linear infinite; }.petal-four { left:88%; top:34%; animation:drift 7.9s 4.1s linear infinite; }.maple-leaf { position:absolute; width:17px; height:22px; border-radius:85% 0 85% 0; background:linear-gradient(135deg,#f45f3d,#9b1124 70%); box-shadow:0 3px 7px rgba(34,3,6,.32); opacity:0; }.leaf-one { left:8%; top:3%; animation:leaf-fall 8.1s .2s linear infinite; }.leaf-two { left:31%; top:-6%; animation:leaf-fall 9.3s 1.8s linear infinite; }.leaf-three { left:58%; top:0; animation:leaf-fall 7.6s 3.1s linear infinite; }.leaf-four { left:88%; top:-7%; animation:leaf-fall 9.2s 4.6s linear infinite; }.leaf-five { left:73%; top:16%; animation:leaf-fall 8.5s 2.6s linear infinite; }.leaf-six { left:17%; top:27%; animation:leaf-fall 9.8s 5.2s linear infinite; }.leaf-seven { left:45%; top:10%; animation:leaf-fall 7.9s 6.3s linear infinite; }.leaf-eight { left:94%; top:30%; animation:leaf-fall 8.8s 7s linear infinite; } @keyframes cover-kenburns { 0% { transform:scale(1.02) translate3d(-.4%,0,0); } 100% { transform:scale(1.13) translate3d(.8%,-1.2%,0); } } @keyframes light-sweep { 0%,38% { transform:translateX(-55%) rotate(8deg); opacity:0; } 50% { opacity:1; } 66%,100% { transform:translateX(55%) rotate(8deg); opacity:0; } } @keyframes breathe { 50% { transform:translateX(-50%) scale(1.22); opacity:.72; } } @keyframes orbit { to { transform:translate(-50%,-50%) rotate(360deg) scale(1.1); } } @keyframes drift { 0% { opacity:0; transform:translate3d(0,-15px,0) rotate(0deg); } 12% { opacity:.9; } 88% { opacity:.42; } 100% { opacity:0; transform:translate3d(-75px,520px,0) rotate(240deg); } } @keyframes leaf-fall { 0% { opacity:0; transform:translate3d(0,-40px,0) rotate(0deg) scale(.6); } 10% { opacity:.9; } 85% { opacity:.65; } 100% { opacity:0; transform:translate3d(-120px,620px,0) rotate(380deg) scale(1.1); } }.cover-copy { margin-top:16vh; padding:26px 30px; text-shadow:0 2px 18px rgba(0,0,0,.48); }.cover-copy .microtype { color:#f9e1ad; animation:copy-in .9s .1s both; }.cover-line { width:46px; height:1px; margin:25px auto 21px; background:#f5d398; animation:line-grow 1.2s .3s both; }.cover-copy h1 { margin:0; color:#fff9ed; font-size:clamp(34px,8vw,44px); font-weight:500; letter-spacing:5px; animation:copy-in 1s .4s both; }.cover-copy h1 span { display:block; padding:11px 0 9px; color:#f2cf95; font:20px/1 Georgia,serif; }.cover-date { margin:23px 0 0; color:#ffedca; font:13px Georgia,serif; letter-spacing:3px; animation:copy-in 1s .7s both; }.tap-hint { position:absolute; z-index:2; bottom:38px; width:100%; margin:0; color:#fff6e8; font-size:12px; letter-spacing:2px; animation:pulse 2s ease-in-out infinite; } @keyframes copy-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @keyframes line-grow { from { transform:scaleX(0); opacity:0; } to { transform:scaleX(1); opacity:1; } } @keyframes pulse { 50% { opacity:.48; transform:translateY(4px); } }
.note-panel { justify-content:center; background:#26070d; }.editorial-photo { inset:0 0 37% 17%; background-image:url("./gallery-photo-1.jpg"); }.editorial-photo::before { background:linear-gradient(180deg,rgba(34,3,9,.05),rgba(38,5,11,.3)); }.letter-card { width:91%; margin-top:29vh; padding:29px 25px 26px; color:#48101a; background:rgba(255,247,232,.96); box-shadow:0 18px 35px rgba(0,0,0,.34); }.letter-card h2 { margin:17px 0; color:#761725; font-size:31px; font-weight:500; line-height:1.42; letter-spacing:3px; }.letter-card > p:not(.microtype) { margin:0; color:#6d4540; font-size:14px; line-height:2; }.letter-card .signature { margin-top:18px; color:#a05d48; font-size:12px; letter-spacing:1px; }.panel-index { position:absolute; right:27px; bottom:24px; margin:0; color:#f0c97f; font:11px Georgia,serif; letter-spacing:2px; }
.long-story-panel { padding:0; overflow:hidden; background:#1d050a; }.long-story-panel > .story-scene { position:absolute!important; inset:0; z-index:0!important; overflow:hidden; opacity:0; pointer-events:none; transform:scale(1.07); transition:opacity .85s ease,transform 1.45s ease; animation:none!important; }.long-story-panel > .story-scene.is-current { opacity:1; transform:scale(1); pointer-events:auto; }.story-scene .photo-fill { filter:saturate(.82) contrast(1.08); }.story-scene .photo-fill::before { background:linear-gradient(180deg,rgba(29,3,8,.2),rgba(33,3,8,.84)); }.story-vignette { position:absolute; inset:0; z-index:1; background:radial-gradient(circle at 50% 30%,transparent 25%,rgba(31,3,8,.46) 100%); }.story-copy { position:absolute; z-index:2; left:34px; right:30px; bottom:18%; }.story-copy .microtype { color:#f4ce87; }.story-copy h2 { margin:18px 0 17px; color:#fff4dd; font-size:31px; font-weight:500; line-height:1.42; letter-spacing:3px; text-shadow:0 3px 14px rgba(0,0,0,.42); }.story-copy > p:last-child { margin:0; color:#ffe9c0; font-size:14px; line-height:2; letter-spacing:1px; }.story-scene.is-current .story-copy > * { animation:story-text .9s both; }.story-scene.is-current .story-copy h2 { animation-delay:.16s; }.story-scene.is-current .story-copy > p:last-child { animation-delay:.3s; } @keyframes story-text { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }.story-counter { position:absolute!important; z-index:3!important; top:max(26px,env(safe-area-inset-top)); right:27px; margin:0; color:#f8d28c; font:11px Georgia,serif; letter-spacing:2px; }.story-tap { position:absolute!important; z-index:3!important; bottom:30px; left:0; width:100%; margin:0; color:#fff1d5; text-align:center; font-size:12px; letter-spacing:1px; animation:pulse 2s ease-in-out infinite; }.panel-index { position:absolute; right:27px; bottom:24px; margin:0; color:#f0c97f; font:11px Georgia,serif; letter-spacing:2px; }
.story-panel { justify-content:center; overflow:hidden; background:radial-gradient(circle at 50% 0,#791b2b 0,transparent 43%),#25070d; }.page-label { position:absolute; top:max(48px,8vh); left:31px; }.polaroid { position:absolute; overflow:hidden; padding:7px 7px 28px; background:#f8eddd; box-shadow:0 18px 35px rgba(0,0,0,.45); }.polaroid .photo-fill { position:relative; inset:auto; display:block; width:100%; height:100%; min-height:100%; }.polaroid .photo-fill::before { background:linear-gradient(180deg,rgba(35,3,9,.06),rgba(35,3,9,.16)); }.polaroid-large { top:18%; left:11%; width:67%; height:53%; transform:rotate(-4deg); }.polaroid-large .photo-fill { background-image:url("./gallery-photo-2.jpg"); }.polaroid-large span { position:absolute; bottom:8px; right:10px; color:#855149; font:italic 12px Georgia,serif; }.polaroid-small { right:7%; bottom:17%; width:45%; height:28%; transform:rotate(7deg); }.polaroid-small .photo-fill { background-image:url("./gallery-photo-3.jpg"); }.story-panel > .story-copy { position:absolute; bottom:9%; left:10%; margin:0; color:#ffe9c0; text-align:left; font-size:14px; line-height:1.9; letter-spacing:1px; text-shadow:0 2px 9px #210509; }
.date-panel { justify-content:center; background:#26070d; }.date-photo { background-image:url("./gallery-photo-4.jpg"); }.date-photo::before { background:linear-gradient(180deg,rgba(30,3,8,.42),rgba(40,4,11,.8)); }.date-card { width:84%; margin:auto; padding:31px 22px; text-align:center; background:rgba(43,5,12,.69); border:1px solid rgba(241,202,129,.68); box-shadow:0 15px 40px rgba(0,0,0,.3); }.date-number { margin:17px 0 3px; color:#f7d48d; font:102px/.85 Georgia,serif; }.date-meta { color:#ffebc2; font:11px Georgia,serif; letter-spacing:2.3px; }.date-rule { width:35px; height:1px; margin:20px auto; background:#e9be70; }.date-card > p:last-child { margin:0; color:#fff5e4; font-size:14px; line-height:2; }
.details-panel { justify-content:center; color:#f9e9cc; background:radial-gradient(circle at 48% 0,rgba(139,31,45,.72),transparent 45%),#27070e; }.details-panel h2 { margin:18px 0 30px; color:#f6d28d; font-size:31px; font-weight:500; letter-spacing:4px; }.timeline { margin:0; border-top:1px solid rgba(244,210,149,.45); }.timeline div { display:flex; gap:22px; align-items:center; padding:18px 4px; border-bottom:1px solid rgba(244,210,149,.31); }.timeline dt { color:#f1c778; font:23px Georgia,serif; }.timeline dd { display:grid; gap:6px; margin:0; text-align:left; }.timeline b { font-weight:500; letter-spacing:1px; }.timeline span { color:#efd9b7; font-size:12px; }.venue-block { margin-top:30px; padding:19px 18px; background:rgba(116,21,35,.45); border-left:2px solid #e0b363; }.venue-block p { margin:0 0 8px; color:#f2c979; font-size:12px; letter-spacing:2px; }.venue-block h3 { margin:0 0 8px; color:#fff0d5; font-size:18px; font-weight:500; letter-spacing:1px; }.venue-block span { display:block; color:#f1dbb9; font-size:13px; }.venue-block a { display:inline-block; margin-top:14px; padding-bottom:3px; border-bottom:1px solid #ebc674; color:#f5d38e; font-size:13px; text-decoration:none; }
.rsvp-panel { justify-content:flex-start; color:#f6e5c8; background:#25070d; padding:50px 27px 0; }.rsvp-photo { inset:0 0 49% 0; background-image:url("./cover-photo.jpg"); }.rsvp-photo::before { background:linear-gradient(180deg,rgba(35,3,9,.15),rgba(35,3,9,.8)); }.rsvp-card { width:100%; margin-top:26vh; padding:25px 20px 22px; background:rgba(45,6,13,.94); border:1px solid rgba(236,194,114,.55); }.rsvp-card h2 { margin:13px 0 7px; color:#f7d291; font-size:26px; font-weight:500; letter-spacing:2px; }.rsvp-card > p:not(.microtype) { margin:0 0 15px; color:#f4dfbd; font-size:12px; line-height:1.65; } form { text-align:left; } label { display:block; margin:13px 0; color:#ffe6bc; font-size:12px; letter-spacing:1px; } input,select,textarea { display:block; width:100%; margin-top:7px; padding:8px 0; border:0; border-bottom:1px solid rgba(238,202,144,.5); border-radius:0; color:#fff7e8; background:transparent; outline:0; } select option { color:#26070d; } textarea { min-height:48px; resize:vertical; } input:focus,select:focus,textarea:focus { border-color:#efc573; }.submit { width:100%; margin-top:2px; padding:12px; border:1px solid #e5b65f; color:#4f0b16; background:#f2c979; letter-spacing:2px; cursor:pointer; }.submit:disabled { opacity:.62; }.form-result { min-height:17px; margin:12px 0 0; color:#f6d28f; text-align:center; font-size:12px; } footer { margin:auto -27px 0; padding:19px 15px max(22px,env(safe-area-inset-bottom)); color:#f4d592; background:#5d101c; text-align:center; font-size:12px; letter-spacing:2px; line-height:1.9; } footer span { color:#f8e2bd; font-size:11px; }
.panel.is-active > :not(.photo-fill):not(.cover-shade) { animation:rise .65s both; }.panel.is-active > :nth-child(2) { animation-delay:.08s; }.panel.is-active > :nth-child(3) { animation-delay:.16s; }.panel.is-active > :nth-child(4) { animation-delay:.24s; } @keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:380px) { .panel { padding-left:25px; padding-right:25px; }.polaroid-large { height:49%; }.rsvp-panel { padding-left:22px; padding-right:22px; }.rsvp-card { margin-top:24vh; }.rsvp-panel footer { margin-left:-22px; margin-right:-22px; } }
.entry-gif { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.entry-story { position:absolute; inset:0; z-index:0; overflow:hidden; background:#1b0b0c; }.entry-story__scene { position:absolute; inset:0; display:flex; align-items:flex-end; padding:0 11% 22%; overflow:hidden; opacity:0; background:center/cover no-repeat; transform:scale(1.055); transition:opacity .58s ease,transform 3.25s cubic-bezier(.18,.8,.25,1); will-change:opacity,transform; }.entry-story__scene.is-active { opacity:1; transform:scale(1); }.entry-story__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,25,41,.08),rgba(44,16,8,.18) 48%,rgba(28,5,8,.82)); }.entry-story__copy { position:relative; width:100%; padding-left:18px; border-left:1px solid rgba(247,202,123,.82); color:#fff8e9; text-align:left; text-shadow:0 2px 12px rgba(22,4,4,.58); }.entry-story__copy p { margin:0 0 15px; color:#f4cb80; font:10px Georgia,serif; letter-spacing:2.2px; }.entry-story__copy h1 { margin:0; font-size:clamp(29px,8vw,41px); font-weight:500; letter-spacing:2px; line-height:1.25; }.entry-story__copy span { display:block; margin-top:14px; color:#ffead0; font-size:13px; letter-spacing:.8px; line-height:1.75; }.entry-story__copy em { display:block; margin-top:25px; color:#f2ca82; font-size:12px; font-style:normal; letter-spacing:1px; }.entry-story__copy--invite { padding:23px 20px; border:1px solid rgba(243,199,117,.7); background:rgba(45,7,11,.25); text-align:center; }.entry-story__copy--invite h1 { font-size:clamp(25px,7vw,36px); }.entry-story__copy--invite em { margin-top:18px; }.entry-gate__animation { opacity:.55; } @media (prefers-reduced-motion:no-preference) { .entry-story__scene.is-active { animation:entry-scene-zoom 3.25s ease-out both; } } @keyframes entry-scene-zoom { from { transform:scale(1.055); } to { transform:scale(1); } }