.wedding-page[data-intro=covered]{opacity:0;visibility:hidden;transform:scale(.98)}.wedding-page[data-intro=revealing],.wedding-page[data-intro=done]{opacity:1;visibility:visible;transition:opacity 1.1s,transform 1.8s cubic-bezier(.2,.65,.25,1);transform:scale(1)}.wedding-page:focus,.gate-intro:focus{outline:none}.gate-intro{z-index:1000;perspective:2200px;background:#e6dfd4;justify-content:center;transition:background 1.5s;display:flex;position:fixed;inset:0;overflow:hidden}.gate-canvas{perspective:2000px;isolation:isolate;width:min(100vw,56.25svh);height:100svh;position:relative}.gate-leaf{-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;background-image:url(/assets/v4/embossed-gate-clean.webp);background-repeat:no-repeat;background-size:200% 100%;width:50%;transition:transform .9s cubic-bezier(.2,.7,.2,1);position:absolute;top:0;bottom:0;box-shadow:0 0 25px #5d48391a}.gate-left{transform-origin:0;transform:translate3d(calc(var(--gate-open) * -18%),0,0) rotateY(calc(var(--gate-open) * -105deg));background-position:0 0;left:0}.gate-right{transform-origin:100%;transform:translate3d(calc(var(--gate-open) * 18%),0,0) rotateY(calc(var(--gate-open) * 105deg));background-position:100% 0;right:0}.gate-heading{text-align:center;color:#6b5940;opacity:calc(1 - var(--pull) * 4);pointer-events:none;text-shadow:0 1px 1px #fff9;transition:opacity .5s;position:absolute;top:8%;left:12%;right:12%}.gate-heading>span{letter-spacing:.2px;font-family:Plex,sans-serif;font-size:10px}.gate-heading h1{margin:7px 0;font-family:Meshref,serif;font-size:44px;font-weight:400;line-height:1.6}.gate-heading h1 i{color:#a88b59;margin:0 7px;font-size:25px;font-style:normal}.gate-heading>p{letter-spacing:4px;color:#948164;font:9px Georgia,serif}.gate-seal{z-index:5;aspect-ratio:1;width:22%;max-width:116px;transform:translate(-50%,calc(-50% - var(--pull) * 135px)) scale(calc(1 - var(--pull) * .13));opacity:calc(1 - var(--pull) * .9);touch-action:none;cursor:grab;background:linear-gradient(135deg,#d2bc91,#b69865 30%,#e0cfaa 56%,#b0915e);border:0;border-radius:48% 52% 49% 51%/51% 48% 52% 49%;padding:6px;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s;position:absolute;top:50%;left:50%;box-shadow:0 7px 12px #5f462f35,inset 1px 1px 3px #fff3cecc,inset -2px -2px 5px #785c36aa}.gate-seal:active{cursor:grabbing}.gate-seal:disabled{opacity:0}.gate-seal>span{border:1px solid #f5e5c2b3;border-radius:50%;place-items:center;width:100%;height:100%;display:grid;position:relative;box-shadow:inset 0 0 0 1px #97764450}.gate-seal img{object-fit:contain;filter:brightness(0)invert();opacity:.85;pointer-events:none;width:auto;max-width:60%;height:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.gate-instruction{text-align:center;color:#806d50;opacity:calc(1 - var(--pull) * 3);pointer-events:none;transition:opacity .5s;position:absolute;top:83%;left:17%;right:17%}.gate-instruction svg{margin:0 auto 12px;animation:2.6s ease-in-out infinite pull-hint;display:block}.gate-instruction p{font-family:Plex,sans-serif;font-size:11px;line-height:1.8}.gate-instruction small{opacity:.8;font-family:Plex,sans-serif;font-size:8px}.gate-skip{color:#8d7b5c;white-space:nowrap;opacity:calc(1 - var(--pull) * 3);background:0 0;border:0;border-bottom:1px solid #baa78588;padding:5px 0;font-family:Plex,sans-serif;font-size:8px;transition:opacity .5s;position:absolute;bottom:2.5%;left:50%;transform:translate(-50%)}.gate-dragging .gate-leaf,.gate-dragging .gate-seal,.gate-dragging .gate-heading,.gate-dragging .gate-instruction,.gate-dragging .gate-skip{transition:none}.gate-opening{pointer-events:none;background:0 0}.gate-opening .gate-leaf{transition:transform 1.85s cubic-bezier(.19,.75,.2,1)}.gate-opening .gate-seal{opacity:0;transition:transform 1.2s cubic-bezier(.15,.7,.2,1),opacity .7s}.gate-opening .gate-heading,.gate-opening .gate-instruction,.gate-opening .gate-skip{opacity:0}@keyframes pull-hint{0%,to{opacity:.55;transform:translateY(4px)}50%{opacity:1;transform:translateY(-4px)}}@media (min-width:900px){.gate-canvas{filter:drop-shadow(0 0 40px #4f3d2a12)}.gate-heading h1{font-size:55px}.gate-heading>span{font-size:12px}.gate-heading>p{font-size:11px}.gate-instruction p{font-size:13px}.gate-instruction small,.gate-skip{font-size:10px}}@media (prefers-reduced-motion:reduce){.gate-leaf,.gate-seal,.gate-heading,.gate-instruction,.gate-skip{transition:none!important}.gate-instruction svg{animation:none!important}.gate-opening{opacity:0;transition:opacity .15s!important}.gate-opening .gate-leaf{transform:none}.wedding-page[data-intro=revealing]{transform:none;transition:opacity .15s!important}}
