@font-face{font-family:Invitation;src:url('assets/wedding-serif.woff2');font-display:swap}
:root{color-scheme:light;--ink:#405767;--paper:#f7f7f3;--blue:#e6edf3;font-family:Invitation,Georgia,serif;color:var(--ink);background:#e9eef1}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #456c85;outline-offset:4px}[hidden]{display:none!important}
.stage{width:min(100vw,calc(100svh * .5625));height:100svh;position:relative;isolation:isolate;overflow:hidden;background:#e6edf3;container-type:size;color:var(--ink)}
video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.scene{position:absolute;left:50%;top:0;width:calc(100svh * .5625);height:100%;transform:translateX(-50%);container-type:size}
.content-mask{position:absolute;inset:0;pointer-events:none;opacity:0;mask-image:url('assets/opening/reveal-mask.webp');mask-size:1100% 1100%;mask-repeat:no-repeat;mask-position:var(--mx,0%) var(--my,0%);-webkit-mask-image:url('assets/opening/reveal-mask.webp');-webkit-mask-size:1100% 1100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:var(--mx,0%) var(--my,0%)}
.copy{position:absolute;inset:0;text-align:center;text-shadow:0 1px 6px #ffffff40}.copy p,.copy h1,.copy h2{margin:0;font-weight:400}.kicker,.invite-line,.weekday,.date,.time{position:absolute;left:8%;right:8%;text-transform:uppercase}.kicker{top:22.65%;font-size:2.6cqw;letter-spacing:.11em}.names{position:absolute;top:27.5%;left:11%;right:11%;font-size:11.5cqw;line-height:1.08;font-style:italic;overflow-wrap:anywhere}.names>span{display:block}.names .amp{font-size:4.7cqw;margin:1.8cqh 0 1cqh}.invite-line{top:48.3%;font-size:2.2cqw;line-height:1.8;letter-spacing:.08em}.date-block{position:absolute;top:56.1%;left:8%;right:8%;height:7.5%;padding-top:1.9cqh}.date-block:before{content:'';position:absolute;top:0;left:34%;right:34%;border-top:1px solid #40576740}.weekday{font-size:2.6cqw;letter-spacing:.1em}.date{top:5.1cqh;font-size:4.3cqw;letter-spacing:.025em}.venue{position:absolute;top:65.4%;left:10%;right:10%;font-size:5cqw;font-style:italic;line-height:1.2}.time{top:70.2%;font-size:2.3cqw;letter-spacing:.08em;line-height:1.4}
.yacht{position:absolute;width:43%;height:auto;left:28%;top:75.55%;animation:passYacht 22s linear infinite;animation-play-state:paused;will-change:transform}.stage.revealing .yacht{animation-play-state:running}@keyframes passYacht{0%{transform:translateX(-30%) translateY(0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translateX(40%) translateY(1px);opacity:0}}
.topline{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:9px}.topline>span,.topline button,.stage-controls button{color:var(--ink);background:#f7f7f3d9;backdrop-filter:blur(7px);border:1px solid #ffffff90;border-radius:30px;padding:9px 11px}.topline>span{font:8px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.topline button{font-size:11px}.seal-hit{position:absolute;left:29%;top:39%;width:42%;height:25%;background:transparent;border:0;border-radius:50%}.tap-hint{position:absolute;bottom:6%;left:5%;right:5%;text-align:center;font-size:13px;letter-spacing:.025em;text-shadow:0 1px 8px #fff;background:#f7f7f370;border-radius:30px;padding:11px;transition:opacity .3s}.stage.started .seal-hit,.stage.started .tap-hint{pointer-events:none;opacity:0}.stage-controls{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;display:flex;align-items:center;justify-content:space-between}.stage-controls button{font-size:11px}.stage-controls #musicToggle{margin-left:auto;width:36px;height:36px;padding:0;font-size:18px}
.edit-toggle{position:fixed;right:24px;bottom:24px;border:1px solid #b9cad5;border-radius:30px;padding:13px 19px;background:#f7f7f3;color:var(--ink);font-size:13px;box-shadow:0 4px 25px #25384712}.details{position:fixed;right:22px;top:50%;transform:translateY(-50%);width:330px;max-height:90svh;overflow:auto;background:#f7f7f3;box-shadow:0 15px 70px #243a4a26;border:1px solid #d5e0e6;border-radius:18px;padding:24px;z-index:20}.panel-heading{display:flex;align-items:start;justify-content:space-between;gap:10px}.eyebrow{font:8px Arial,sans-serif;letter-spacing:.15em;color:#718897}.panel-heading h2{font-size:25px;font-weight:400;margin:7px 0 0}.panel-heading>button{font-size:25px;border:0;background:none;color:var(--ink);padding:0 4px}.panel-note{font-size:13px;line-height:1.6;color:#71818b;margin:13px 0 20px}.details label{display:block;font-size:12px;margin-bottom:13px}.details input{display:block;width:100%;border:1px solid #cfdbe2;border-radius:7px;padding:10px 11px;margin-top:5px;color:var(--ink);background:#fff;font-size:15px}.primary,.secondary{width:100%;border-radius:8px;padding:12px;border:1px solid #405767;font-size:14px}.primary{background:#405767;color:#fff;margin-top:7px}.secondary{background:transparent;color:var(--ink);margin-top:10px;border-color:#cad7df}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.details{overflow-x:hidden}.details .timeline-label{margin:24px 0 5px}.timeline-label output{float:right;color:#718897}.details #timeline{padding:0;border:0;background:transparent;accent-color:#405767}
.content-mask{--handoff:0;mask-image:linear-gradient(rgba(255,255,255,var(--handoff)),rgba(255,255,255,var(--handoff))),url('assets/opening/reveal-mask.webp');mask-size:100% 100%,1100% 1100%;mask-position:center,var(--mx,0%) var(--my,0%);mask-composite:add;-webkit-mask-image:linear-gradient(rgba(255,255,255,var(--handoff)),rgba(255,255,255,var(--handoff))),url('assets/opening/reveal-mask.webp');-webkit-mask-size:100% 100%,1100% 1100%;-webkit-mask-position:center,var(--mx,0%) var(--my,0%);-webkit-mask-composite:source-over}
.content-mask{z-index:2}.coded-waterfront,.coded-foreground{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.coded-waterfront{z-index:1;opacity:var(--scene-fade,0)}.water-glimmer{position:absolute;z-index:1;left:29.6%;right:29.6%;top:81%;height:7%;opacity:.13;filter:opacity(var(--scene-fade,0));background:repeating-linear-gradient(177deg,transparent 0 6px,#fff 8px 9px,transparent 12px 18px);animation:waterShimmer 6s ease-in-out infinite}.yacht{z-index:2;width:36.1%;left:23.1%;top:78.75%;filter:opacity(var(--scene-fade,0))}.coded-foreground{z-index:3;pointer-events:none;opacity:var(--scene-fade,0)}.coded-foreground-left{clip-path:inset(70% 70.37% 0 0)}.coded-foreground-right{clip-path:inset(70% 0 0 70.37%)}
.legacy-copy{inset:auto;top:21%;left:13%;right:13%;height:50%;z-index:4;text-align:center;color:#415a70;text-shadow:0 1px 9px #fff9}.legacy-copy .kicker,.legacy-copy .invite-line,.legacy-copy .weekday,.legacy-copy .at,.legacy-copy .time{position:static;font-family:Arial,sans-serif;font-weight:400;letter-spacing:2px;text-transform:uppercase}.legacy-copy .kicker{font-size:1.75cqw;line-height:1.8}.legacy-copy .names{position:static;font-size:12cqw;font-weight:400;font-style:italic;line-height:1.02;margin:3cqh 0 2.5cqh}.legacy-copy .names .amp{display:block;font-size:5cqw;margin:.5cqh 0}.legacy-copy .invite-line{font-size:1.75cqw;line-height:1.85;letter-spacing:1.25px}.wedding-date{display:flex;justify-content:center;align-items:center;gap:3cqw;margin-top:2.5cqh}.wedding-date span{font:1.9cqw Arial,sans-serif;text-transform:uppercase;letter-spacing:1.4px;border-block:1px solid #8296a759;padding:1cqh .8cqw}.wedding-date strong{font-size:12cqw;font-weight:400;line-height:.9}.legacy-copy .weekday{font-size:1.6cqw;margin-top:1cqh}.legacy-copy .at{font-size:1.6cqw;margin-top:3cqh}.legacy-copy .venue{position:static;font-size:5.5cqw;font-weight:400;font-style:italic;margin-top:1.2cqh}.legacy-copy .time{font-size:1.5cqw;margin-top:1.7cqh;letter-spacing:1.5px}
@keyframes waterShimmer{0%,100%{transform:translateX(-3px) scaleX(.98);opacity:.09}50%{transform:translateX(3px) scaleX(1.02);opacity:.16}}
.scene video{z-index:10;mask-image:var(--foreground-image,none);mask-size:1600% 1600%;mask-position:var(--fx,0%) var(--fy,0%);mask-repeat:no-repeat;-webkit-mask-image:var(--foreground-image,none);-webkit-mask-size:1600% 1600%;-webkit-mask-position:var(--fx,0%) var(--fy,0%);-webkit-mask-repeat:no-repeat}.content-mask{mask-image:none;-webkit-mask-image:none}.coded-waterfront,.coded-foreground{opacity:1}.yacht,.water-glimmer{filter:none}.reset-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:11;display:none}.resetting .reset-cover{display:block}
@media(max-width:800px){.edit-toggle{right:8px;bottom:60px;font-size:10px;padding:9px 12px;background:#f7f7f3d9}.details{top:auto;bottom:10px;right:10px;left:10px;transform:none;width:auto;max-width:390px;margin-left:auto;max-height:85svh}}@media(prefers-reduced-motion:reduce){.yacht{animation:none;opacity:1}.water-glimmer{animation:none}.tap-hint{transition:none}}

/* One video clock drives the complete opening. Fixed artwork stays beneath it. */
.scene{left:0;width:100%;transform:none;perspective:1100px}
.clip-defs{position:absolute;pointer-events:none}
.sequence-film,.gate-overlay{position:absolute;inset:0;clip-path:url(#gateAperture);pointer-events:none;overflow:hidden}
.sequence-film{z-index:10}.gate-overlay{z-index:9;perspective:1100px}
.sequence-film video{mask:none!important;-webkit-mask:none!important;object-fit:fill}
.gate-leaf{position:absolute;top:0;width:50%;height:100%;overflow:hidden;backface-visibility:hidden;will-change:transform}
.gate-leaf img{position:absolute;top:0;width:200%;height:100%;max-width:none;object-fit:fill}
.gate-left{left:0;transform-origin:13.8% 50%}.gate-left img{left:0}
.gate-right{right:0;transform-origin:86.2% 50%}.gate-right img{right:0}
.content-mask{opacity:1}.legacy-copy{opacity:0;transition:none}
.yacht{opacity:1}

.envelope{position:absolute;inset:0;z-index:15;perspective:1100px;pointer-events:none;transform-style:preserve-3d}
.envelope img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;backface-visibility:hidden}
.envelope-crown{z-index:1;clip-path:inset(0 0 85.5% 0)}
.envelope-shell{position:absolute;inset:0;z-index:2;will-change:transform}
.envelope-front{clip-path:polygon(0 28%,50% 56%,100% 28%,100% 100%,0 100%)}
.envelope-paper{position:absolute;inset:0;background-image:url('assets/powder-blue-envelope.png');background-size:1000% 1000%;background-position:50% 75%;clip-path:polygon(0 28%,50% 56%,100% 28%,100% 100%,0 100%);mask-image:radial-gradient(ellipse 17% 11% at 50% 55%,#000 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 17% 11% at 50% 55%,#000 65%,transparent 100%)}
.envelope-flap{z-index:3;clip-path:url(#envelopeFlap);transform-origin:50% 14.5%;will-change:transform}
.seal-hit{z-index:22;left:37%;top:47%;width:26%;height:15%}.tap-hint{z-index:23}
.topline,.stage-controls{z-index:25}.details{z-index:50}.edit-toggle{z-index:30}
.stage.resetting .sequence-film{visibility:visible!important}.stage.resetting .envelope{visibility:visible!important;opacity:1!important}
.stage:not(.revealing) .water-glimmer{animation-play-state:paused}