/* A paper opening, a photograph fan, and an aperture: three distinct scene transitions. */
.letter{perspective:1300px;isolation:isolate}
.letter::before{content:"";position:absolute;left:-3%;right:-3%;top:-43px;height:48px;background:#f9f4eb;border-radius:50% 50% 0 0 / 100% 100% 0 0;box-shadow:0 -9px 20px #2318110a;pointer-events:none}
.letter-main{transform-origin:top center;rotate:x -8deg;clip-path:inset(0 0 12% 0);opacity:.55;transition:rotate 1.6s var(--ease),clip-path 1.6s var(--ease),opacity 1s}
.letter.is-unfolding .letter-main{rotate:x 0deg;clip-path:inset(0);opacity:1}
.letter.is-unfolding .letter-dear{animation:signatureDraw 1.7s var(--ease) both}
.venue-image{clip-path:ellipse(28% 38% at 50% 50%);transition:clip-path 1.8s var(--ease)}
.venue.is-arriving .venue-image{clip-path:ellipse(82% 86% at 50% 50%)}
.party-symbols{position:absolute;width:0;height:0;overflow:hidden}
.party-track{height:250svh;position:relative;background:#e8dfd1}
.party-stage{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden;color:#6e5744;isolation:isolate}
.party-backdrop{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 38%,#f9f4e9,#e7dcc9);transition:background 1.2s}
.party-backdrop::after{content:"Together.";position:absolute;bottom:0;left:-4%;font:italic clamp(110px,19vw,250px)/1 Georgia,serif;color:#b7996a0a;letter-spacing:-9px;white-space:nowrap;transition:translate 1.5s var(--ease)}
.party-stage.is-women .party-backdrop{background:radial-gradient(ellipse at 50% 38%,#fff6f0,#e8d9d1)}
.party-stage.is-women .party-backdrop::after{translate:10% 0}
.party-heading{position:absolute;left:8%;right:8%;top:6%;text-align:center;z-index:3}
.party-heading .eyebrow{font-size:8px;letter-spacing:3px;color:#ab9170}
.party-heading h2{font-size:40px;font-weight:400;letter-spacing:5px;line-height:1.5;margin:23px 0 13px;color:#795842}
.party-heading>p:not(.eyebrow){font-size:11px;letter-spacing:2px;line-height:1.9;color:#ac9379;margin:0}
.party-heading>i{position:absolute;right:0;top:58px;font:italic 42px Georgia,serif;color:#bb9b79;transform:rotate(-8deg);opacity:.65;transition:color .8s}
.party-stage.is-women .party-heading h2{color:#925c57}.party-stage.is-women .party-heading>i{color:#bc9690}
.party-gallery{position:absolute;top:27%;left:50%;width:86%;max-width:1080px;height:58%;transform:translateX(-50%);perspective:1400px}
.party-group{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}
.party-card{margin:0;min-width:0;opacity:0;transform:translate3d(0,70px,0) rotateX(9deg) rotate(var(--card-tilt)) scale(.92);transform-origin:50% 110%;transition:transform 1.2s var(--ease),opacity .75s;transition-delay:calc(var(--card-index)*80ms);will-change:transform,opacity}
.party-stage.is-entered:not(.is-women) .party-men .party-card{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotate(var(--card-tilt)) scale(1)}
.party-stage.is-women .party-men .party-card{opacity:0;transform:translate3d(-95px,25px,0) rotate(-13deg) scale(.94);transition-delay:calc(var(--card-index)*40ms)}
.party-women .party-card{opacity:0;transform:translate3d(100px,30px,0) rotate(12deg) scale(.94);transition-delay:calc(var(--card-index)*45ms)}
.party-stage.is-entered.is-women .party-women .party-card{opacity:1;transform:translate3d(0,0,0) rotate(var(--card-tilt)) scale(1);transition-delay:calc(150ms + var(--card-index)*80ms)}
.party-women{pointer-events:none}.party-stage.is-women .party-women{pointer-events:auto}.party-stage.is-women .party-men{pointer-events:none}
.party-window{position:relative;aspect-ratio:3/4;background:linear-gradient(145deg,#e3d7c2,#eee5d5);overflow:hidden;box-shadow:0 12px 25px #6751321a;border:7px solid #fffaf1;outline:1px solid #bfa58155}
.party-card:nth-child(2) .party-window{background:linear-gradient(145deg,#e4dfd2,#e8decb)}.party-card:nth-child(3) .party-window{background:linear-gradient(145deg,#eadfce,#dfd0b9)}.party-card:nth-child(4) .party-window{background:linear-gradient(145deg,#e8e1d2,#e4d7c1)}
.party-women .party-window{background:linear-gradient(145deg,#eedfd5,#e8d5c9)}.party-women .party-card:nth-child(2) .party-window{background:linear-gradient(145deg,#f1e2d9,#e4d7c9)}.party-women .party-card:nth-child(3) .party-window{background:linear-gradient(145deg,#e6d7ce,#f4e9de)}.party-women .party-card:nth-child(4) .party-window{background:linear-gradient(145deg,#e9d9cf,#eaddce)}
.party-window>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;z-index:2}
.party-window>img[hidden],.party-empty[hidden],.member-thumb img[hidden],.member-thumb span[hidden]{display:none}
.party-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#b19a78}
.party-empty svg{width:68%;height:70%;opacity:.5}.party-empty>span{font-size:9px;letter-spacing:3px;position:absolute;bottom:8%;color:#b19a7f}
.party-card-number{position:absolute;left:10px;top:10px;font:italic 23px Georgia,serif;color:#9f8260;opacity:.5;z-index:3}
.party-card figcaption{text-align:center;padding:18px 4px 0}
.party-card h3{font-size:17px;line-height:1.5;font-weight:400;letter-spacing:3px;color:#8c6a4d;margin:0;overflow-wrap:anywhere}
.party-card figcaption>span{display:block;margin-top:7px;font:6px Arial,sans-serif;letter-spacing:2px;color:#b89d7c}
.party-stage.is-women .party-card h3{color:#956b60}
.party-bottom{position:absolute;left:8%;right:8%;bottom:95px;display:flex;align-items:center;justify-content:space-between;gap:25px;z-index:4}
.party-team-tabs{display:flex;align-items:center;gap:20px}
.party-team-tabs button{background:transparent;border:0;border-bottom:1px solid transparent;color:#ad9276;font-size:10px;letter-spacing:2px;padding:9px 0;white-space:nowrap}
.party-team-tabs button.active{border-bottom-color:#ab805a;color:#876145}.party-stage.is-women .party-team-tabs button.active{color:#9a625a;border-bottom-color:#b38b7d}
.party-team-tabs>i{width:30px;height:1px;background:#bea17d55}
.party-bottom>span{font-size:9px;letter-spacing:2px;color:#b49a7f}
/* Each of the eight people can be named and previewed independently. */
.member-editor-heading{font-size:13px;font-weight:400;letter-spacing:2px;color:#9c7656;margin:25px 0 14px}
.member-editor-row{display:grid;grid-template-columns:59px minmax(0,1fr) 90px;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #cbb59444}
.member-thumb{position:relative;width:59px;height:76px;padding:0;border:1px solid #d0b999;background:#ebe0cd;overflow:hidden;color:#af9877}
.member-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;z-index:2}
.member-thumb>span{position:absolute;inset:0;display:grid;place-items:center}
.member-thumb svg{width:90%;height:90%;opacity:.5}.member-thumb b{position:absolute;right:4px;bottom:2px;font-size:14px;font-weight:400;color:#a58259}
.member-editor-row label{font-size:10px;letter-spacing:1px;color:#aa8a66;min-width:0}
.member-editor-row input{display:block;width:100%;min-width:0;padding:11px 8px;margin-top:8px;border:1px solid #d7c4a5;background:#fffbf2;color:#846247;font:13px Arial,"Microsoft YaHei",sans-serif;border-radius:0}
.member-editor-row input:focus{outline:2px solid #b48c5c;outline-offset:2px}
.member-photo-action{padding:8px 0;border:0;border-bottom:1px solid #bfa17a;background:transparent;color:#aa835d;font-size:9px;letter-spacing:1px;white-space:nowrap}
#party-form .editor-actions{margin-top:28px}
.editor-tabs{gap:22px}.editor-tabs button{white-space:nowrap}
@keyframes signatureDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media(max-width:900px){.party-group{gap:17px}.party-heading>i{font-size:32px;top:60px;right:-2%}.party-heading h2{font-size:34px}.party-card h3{font-size:14px;letter-spacing:2px}.party-card figcaption>span{font-size:5px;letter-spacing:1px}.party-window{border-width:5px}.party-empty>span{font-size:8px;letter-spacing:1px}.party-team-tabs{gap:15px}.party-team-tabs button{font-size:9px;letter-spacing:1px}.party-bottom>span{font-size:8px;letter-spacing:1px}}
@media(max-width:600px){.letter::before{top:-26px;height:30px}.party-track{height:250svh}.party-stage{min-height:760px}.party-heading{top:5%;left:8%;right:8%}.party-heading .eyebrow{font-size:6px;letter-spacing:2px}.party-heading h2{font-size:29px;letter-spacing:2px;margin:17px 0 10px}.party-heading>p:not(.eyebrow){font-size:9px;letter-spacing:1px;line-height:1.9}.party-heading>i{display:none}.party-gallery{top:23%;width:81%;height:60%;max-width:360px}.party-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}.party-card{transform-origin:50% 80%}.party-window{aspect-ratio:3/3.8;border-width:5px;box-shadow:0 8px 20px #67513216}.party-card h3{font-size:12px;letter-spacing:2px;line-height:1.4}.party-card figcaption{padding-top:10px}.party-card figcaption>span{font-size:5px;letter-spacing:1px;margin-top:5px}.party-card-number{font-size:17px;left:6px;top:6px}.party-empty>span{font-size:7px;letter-spacing:1px;bottom:7%}.party-empty svg{width:68%;height:70%}.party-bottom{left:9%;right:9%;bottom:100px;justify-content:center}.party-team-tabs{gap:18px}.party-team-tabs button{font-size:8px;letter-spacing:1px;padding:8px 0}.party-team-tabs>i{width:20px}.party-bottom>span{display:none}.party-backdrop::after{font-size:105px;bottom:80px;letter-spacing:-4px}.member-editor-row{grid-template-columns:52px minmax(0,1fr) 75px;gap:11px}.member-thumb{width:52px;height:68px}.member-photo-action{font-size:8px;letter-spacing:0}.member-editor-row input{font-size:12px;padding:10px 7px}.member-editor-heading{font-size:12px;letter-spacing:1px}.editor-tabs{gap:20px}.editor-tabs button{font-size:11px;letter-spacing:1px}.venue-image{clip-path:ellipse(28% 38% at 50% 50%)}}
@media(max-width:600px) and (max-height:700px){.party-stage{min-height:640px}.party-heading{top:4%}.party-heading h2{font-size:26px;margin:12px 0 7px}.party-heading>p:not(.eyebrow){font-size:8px}.party-gallery{top:23%;width:77%;max-width:315px}.party-group{gap:14px 17px}.party-window{aspect-ratio:3/3.45}.party-card h3{font-size:11px}.party-card figcaption{padding-top:8px}.party-card figcaption>span{font-size:4.5px;margin-top:4px}.party-bottom{bottom:95px}.party-empty>span{font-size:6px}}
@media(prefers-reduced-motion:reduce){.letter-main{rotate:none;clip-path:none;opacity:1}.letter.is-unfolding .letter-dear{animation:none}.venue-image{clip-path:none}.party-card{will-change:auto}.party-stage.is-entered:not(.is-women) .party-men .party-card,.party-stage.is-entered.is-women .party-women .party-card{transform:none}.party-stage.is-women .party-men .party-card,.party-women .party-card{transform:none;transition:none}}

.letter::before{left:0;right:0}

@media(max-width:600px) and (max-height:700px){.party-gallery{top:20.5%;width:74%;max-width:300px}}
/* Five arrival sequences: portrait, red thread, paper, calendar, opening doors. */
.hero.motion-active .hero-image img{animation:portraitDrift 13s ease-in-out infinite alternate;will-change:transform}
.hero.motion-active .hero-copy h2{animation:titleRise 1.5s .15s both}
.hero.motion-active .hero-english{animation:inkWrite 2s .7s both}
.hero-image::after{content:"";position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 35%,#fff9e345 49%,transparent 63%);pointer-events:none;transform:translateX(-90%)}
.hero.motion-active .hero-image::after{animation:portraitLight 8s 1s ease-in-out infinite}
@keyframes portraitDrift{from{transform:scale(1.04) translate(-.7%,.5%)}to{transform:scale(1.16) translate(1%,-1%)}}
@keyframes portraitLight{0%,20%{transform:translateX(-90%)}70%,100%{transform:translateX(90%)}}
@keyframes titleRise{from{opacity:0;translate:0 45px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes inkWrite{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0);opacity:1}}
.opening-note{isolation:isolate;overflow:hidden}
.opening-note .fate-thread{opacity:.55;pointer-events:none;z-index:-1}
.opening-note.motion-active .fate-thread path{animation:threadDraw 3.3s .2s both;stroke-dasharray:2200;stroke-dashoffset:0;stroke-width:1.6}
.opening-note.motion-active h2{animation:storyInk 1.8s .2s both}
.opening-note.motion-active h2 span{display:inline-block;animation:heartBeat 3.5s 1.8s ease-in-out infinite;transform-origin:50% 70%}
.opening-note.motion-active .opening-note-copy{animation:titleRise 1.6s .7s both}
.opening-note.motion-active .note-bottom{animation:inkWrite 2s 1s both}
@keyframes threadDraw{from{stroke-dashoffset:2200;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes storyInk{from{opacity:0;clip-path:inset(0 0 100% 0);translate:0 24px}to{opacity:1;clip-path:inset(0);translate:0 0}}
@keyframes heartBeat{0%,100%{transform:scale(1)}45%{transform:scale(1.08);text-shadow:0 6px 25px #a35b4b40}}
.letter::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(163deg,#fdf8ed 0 48%,#c9b99b55 49%,#f1e6d4 50%,#faf3e6 100%);box-shadow:0 -15px 45px #5a362015;transform-origin:top;pointer-events:none}
.letter.motion-active::after{animation:paperOpen 2s both}
.letter.motion-active .letter-main{animation:letterLift 1.8s .2s both;transform-origin:top}
.letter.motion-active .letter-dear{animation:inkWrite 2.4s .35s both}
.letter.motion-active .letter-main h2{animation:storyInk 2s .55s both}
.letter.motion-active .signature{animation:inkWrite 2.2s 1.2s both}
@keyframes paperOpen{from{transform:rotateX(-65deg) scaleY(.55);filter:brightness(.8)}to{transform:rotateX(0) scaleY(1);filter:brightness(1)}}
@keyframes letterLift{from{transform:perspective(1100px) rotateX(-22deg) translateY(65px);opacity:0;clip-path:inset(0 0 45% 0)}to{transform:perspective(1100px) rotateX(0) translateY(0);opacity:1;clip-path:inset(0)}}
.date-scene{position:relative;isolation:isolate;overflow:hidden}
.date-scene::after{content:"";position:absolute;width:420px;height:420px;right:-180px;top:30px;border:1px solid #dfba7f33;border-radius:50%;box-shadow:0 0 0 28px #dfba7f09,0 0 0 60px #dfba7f07;z-index:-1;pointer-events:none}
.date-scene.motion-active::after{animation:dateOrbit 10s ease-in-out infinite alternate}
.date-number{perspective:900px}
.date-number>span{display:inline-block;transform-origin:50% 0;backface-visibility:hidden}
.date-scene.motion-active .date-number>span{animation:calendarFlip 1.6s .3s both}
.date-scene.motion-active .date-number>span:last-child{animation-delay:.65s}
.date-scene.motion-active .date-year{animation:inkWrite 2s .9s both}
.date-scene.motion-active .schedule>div{animation:scheduleSlide 1.3s both}
.date-scene.motion-active .schedule>div:nth-child(1){animation-delay:.7s}
.date-scene.motion-active .schedule>div:nth-child(2){animation-delay:1s}
.date-scene.motion-active .schedule>div:nth-child(3){animation-delay:1.3s}
@keyframes calendarFlip{0%{transform:rotateX(-100deg) translateY(-35px);opacity:0}65%{transform:rotateX(12deg);opacity:1}100%{transform:rotateX(0);opacity:1}}
@keyframes scheduleSlide{from{opacity:0;transform:translateX(45px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes dateOrbit{from{transform:translate(-15px,0) scale(.8);opacity:.4}to{transform:translate(-45px,60px) scale(1.2);opacity:1}}
.venue .venue-image,.venue.is-arriving .venue-image{clip-path:inset(0 round 46% 46% 0 0);overflow:hidden;isolation:isolate;perspective:1000px}
.venue-image::before,.venue-image::after{content:"";position:absolute;top:0;bottom:0;width:50.5%;z-index:2;pointer-events:none;background:linear-gradient(110deg,#c9b89a,#e9dbc1 55%,#b5a17f);border:1px solid #a3885b55;box-shadow:inset 0 0 0 12px #e9dcc233,inset 0 0 0 13px #9f815444;backface-visibility:hidden}
.venue-image::before{left:0;transform-origin:left}
.venue-image::after{right:0;transform-origin:right}
.venue.motion-active .venue-image::before{animation:doorLeft 2.6s .1s both}
.venue.motion-active .venue-image::after{animation:doorRight 2.6s .1s both}
.venue.motion-active .venue-image img{animation:venueDrift 12s ease-in-out infinite alternate}
.venue.motion-active .venue-copy h2{animation:storyInk 1.8s .5s both}
.venue.motion-active .venue-info{animation:titleRise 1.8s .9s both}
@keyframes doorLeft{0%,10%{transform:rotateY(0);opacity:1}85%{opacity:1}100%{transform:rotateY(-105deg);opacity:0}}
@keyframes doorRight{0%,10%{transform:rotateY(0);opacity:1}85%{opacity:1}100%{transform:rotateY(105deg);opacity:0}}
@keyframes venueDrift{from{transform:scale(1.04)}to{transform:scale(1.15) translateY(-2%)}}
@media(max-width:600px){.venue .venue-image{margin:22px 8% 0;height:280px;width:84%}.date-scene::after{width:270px;height:270px;right:-150px}.opening-note .fate-thread{opacity:.42}}
@media(prefers-reduced-motion:reduce){.venue-image::before,.venue-image::after{display:none}.letter-main,.letter.motion-active .letter-main{opacity:1;transform:none;clip-path:inset(0)}.date-number>span{transform:none}.hero-copy h2,.hero-english,.opening-note h2,.opening-note-copy,.signature,.date-year,.venue-info{clip-path:inset(0);opacity:1}}
/* Keep the photograph visible outside the entry sequence. */
.venue-image::before{transform:rotateY(-105deg);opacity:0}
.venue-image::after{transform:rotateY(105deg);opacity:0}