/* Celebriza invitation engine. One page structure for every engine design; the look comes from the
   design's palette, fonts, art and opening. Phone first (440 wide), grows into two panes on monitors. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden;height:var(--screen,100svh)}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:root{--r:22px;--gap:clamp(14px,3.6vw,22px);--pad:clamp(18px,5.2vw,34px)}

/* background: soft colour field that drifts, grain, particles */
.cz-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(170deg,var(--bg) 0%,var(--bg2) 58%,var(--bg3) 100%)}
.cz-blob{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.cz-blob.b1{width:70vmax;height:70vmax;left:-25vmax;top:-20vmax;background:radial-gradient(circle,var(--accent) 0,transparent 66%);opacity:.28;animation:czDrift1 26s ease-in-out infinite alternate}
.cz-blob.b2{width:60vmax;height:60vmax;right:-22vmax;top:18vh;background:radial-gradient(circle,var(--accent2) 0,transparent 66%);opacity:.3;animation:czDrift2 31s ease-in-out infinite alternate}
.cz-blob.b3{width:56vmax;height:56vmax;left:10vw;bottom:-28vmax;background:radial-gradient(circle,var(--bg3) 0,transparent 70%);opacity:.6;animation:czDrift1 37s ease-in-out infinite alternate-reverse}
@keyframes czDrift1{to{transform:translate3d(8vw,6vh,0) scale(1.08)}}
@keyframes czDrift2{to{transform:translate3d(-7vw,-5vh,0) scale(.94)}}
.cz-grain{position:absolute;inset:-50%;opacity:var(--grain,.07);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.dark .cz-grain{mix-blend-mode:screen;opacity:calc(var(--grain,.07) * .7)}
.cz-fx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.cz-burst{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}

/* page */
.cz-wrap{position:relative;z-index:2}
.cz-hero{position:relative;min-height:var(--screen,100svh);display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 72px) var(--pad) 96px;overflow:hidden;isolation:isolate}
.cz-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cz-art img{position:absolute;width:var(--w,30%);height:auto;filter:drop-shadow(0 18px 24px rgba(20,10,30,.16));will-change:transform;opacity:0}
.is-open .cz-art img{animation:czPop .9s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i,0) * 70ms + .15s)}
.cz-art img.float{animation:czFloat var(--t,6s) ease-in-out infinite alternate;opacity:1}
@keyframes czPop{from{opacity:0;transform:translate3d(0,40px,0) scale(.4) rotate(var(--rot,0deg))}to{opacity:1;transform:none}}
@keyframes czFloat{from{transform:translate3d(0,0,0) rotate(calc(var(--rot,0deg) * -1))}to{transform:translate3d(0,-14px,0) rotate(var(--rot,0deg))}}
/* six places in the frame around the words, never under them */
.cz-art .s1{left:2.5%;top:5%;--w:31%}
.cz-art .s2{right:2.5%;top:8%;--w:28%}
.cz-art .s3{left:2.5%;top:41%;--w:21%}
.cz-art .s4{right:2.5%;top:49%;--w:20%}
.cz-art .s5{left:3%;bottom:2%;--w:29%}
.cz-art .s6{right:2%;bottom:3%;--w:30%}
.cz-txt{position:relative;text-align:center;max-width:min(92vw,640px);display:flex;flex-direction:column;align-items:center;gap:10px}
.cz-kicker{margin:0;font:600 13px/1.3 var(--fb);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-wrap:balance}
.cz-kicker.script{font:400 clamp(26px,7.6vw,40px)/1.1 var(--fs);letter-spacing:0;text-transform:none;color:var(--accent)}
.cz-big{font:var(--bigw,800) clamp(150px,47vw,300px)/.82 var(--fd);padding:.12em .08em;margin:calc(4px - .12em) -.08em -.04em;letter-spacing:-.04em;background:linear-gradient(160deg,var(--accent) 10%,var(--accent2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--accent) 30%,transparent))}
.cz-big.amp{font-size:clamp(90px,28vw,170px);font-family:var(--fs);font-weight:400;line-height:.9;margin:calc(-6px - .12em) -.08em calc(-14px - .12em)}
.cz-name{margin:0;font:var(--namew,700) clamp(48px,15vw,96px)/.95 var(--fd);letter-spacing:var(--namels,-.02em);color:var(--ink);text-wrap:balance}
.cz-name.script{font-family:var(--fs);font-weight:400;font-size:clamp(58px,17vw,112px);line-height:1;letter-spacing:0}
.cz-name .and{display:block;font:400 .5em/1.2 var(--fs);color:var(--accent);margin:.04em 0}
.cz-sub{margin:4px 0 0;font:500 clamp(17px,4.6vw,21px)/1.45 var(--fb);color:var(--ink);opacity:.86;max-width:30ch;text-wrap:balance}
.cz-date{margin-top:14px;display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;background:var(--card);color:var(--cardInk);font:600 15px/1.2 var(--fb);box-shadow:0 10px 30px -12px rgba(20,10,40,.35)}
.cz-date i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:block}
.cz-photo{margin-top:18px;width:min(62vw,300px);aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(20,10,40,.45)}
.cz-photo img{width:100%;height:100%;object-fit:cover}
.cz-scroll{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:600 11px/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .6s 1.6s}
.is-open .cz-scroll{opacity:1}
.cz-scroll span{width:22px;height:34px;border:2px solid currentColor;border-radius:12px;position:relative}
.cz-scroll span::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:currentColor;animation:czWheel 1.6s ease-in-out infinite}
@keyframes czWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}

/* hero words enter after the opening */
.cz-txt>*{opacity:0;transform:translate3d(0,18px,0)}
.is-open .cz-txt>*{opacity:1;transform:none;transition:opacity .7s ease,transform .9s cubic-bezier(.2,1,.3,1);transition-delay:calc(var(--d,0) * 90ms + .1s)}
.is-open .cz-big{transition-duration:.7s,1.1s}

/* arch hero: the main art or the photo in an arched window */
.h-arch .cz-window{position:relative;width:min(70vw,330px);aspect-ratio:3/3.6;border-radius:24px;background:radial-gradient(120% 90% at 50% 20%,var(--card) 0,color-mix(in srgb,var(--accent) 22%,var(--card)) 100%);box-shadow:inset 0 0 0 6px var(--card),0 30px 70px -30px rgba(20,10,40,.5);display:grid;place-items:end center;overflow:hidden;margin-bottom:6px}
.h-arch .cz-window img{width:86%;margin-bottom:6%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.18))}
.h-arch .cz-window img.ph{width:100%;height:100%;object-fit:cover;margin:0}

/* frame hero: an engraved card, flowers at the corners */
.h-frame .cz-txt{padding:clamp(40px,11vw,70px) clamp(18px,6vw,44px);border-radius:var(--r);background:color-mix(in srgb,var(--card) 82%,transparent);box-shadow:0 30px 80px -40px rgba(20,10,40,.45);outline:1px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:-12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.h-frame .cz-name{color:var(--cardInk)}
.h-frame .cz-sub{color:var(--cardInk)}
.h-frame .cz-date{background:var(--btnBg);color:var(--btnInk)}
.h-frame .cz-art .s1{left:2.5%;top:1%;--w:36%}
.h-frame .cz-art .s2{right:2.5%;top:2%;--w:33%}
.h-frame .cz-art .s5{left:2.5%;bottom:1%;--w:34%}
.h-frame .cz-art .s6{right:2.5%;bottom:1%;--w:35%}

/* sections */
.cz-main{position:relative;padding:8px var(--pad) 40px;display:flex;flex-direction:column;gap:var(--gap);max-width:600px;margin:0 auto}
.cz-sec{position:relative;border-radius:var(--r);padding:clamp(22px,6vw,32px);background:var(--card);color:var(--cardInk);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 24px 60px -34px rgba(20,10,40,.4)}
.c-glass .cz-sec{background:color-mix(in srgb,var(--card) 72%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid color-mix(in srgb,var(--card) 60%,rgba(255,255,255,.5))}
.c-line .cz-sec{background:color-mix(in srgb,var(--card) 35%,transparent);border:1.5px solid color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:none}
.cz-h{margin:0 0 14px;font:600 12px/1.2 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cz-h2{margin:0 0 6px;font:var(--h2w,700) clamp(28px,8vw,40px)/1.05 var(--fd);color:var(--cardInk);letter-spacing:-.01em;text-wrap:balance}
.cz-p{margin:0;color:var(--cardInk);opacity:.8}
.rv{opacity:0;transform:translate3d(0,26px,0) scale(.985);transition:opacity .6s ease,transform .8s cubic-bezier(.2,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* countdown */
.cz-count{text-align:center}
.cz-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.cz-tile{border-radius:16px;padding:14px 4px 10px;background:color-mix(in srgb,var(--accent) 12%,transparent);position:relative;overflow:hidden}
.cz-num{display:block;height:1em;font:var(--numw,700) clamp(30px,9vw,44px)/1 var(--fd);color:var(--cardInk);font-variant-numeric:lining-nums tabular-nums;overflow:hidden}
.cz-num b{display:block;font-weight:inherit}
.cz-num b.roll{animation:czRoll .32s cubic-bezier(.3,1.3,.5,1)}
@keyframes czRoll{from{transform:translateY(-35%);opacity:.25}to{transform:none;opacity:1}}
.cz-lbl{display:block;margin-top:8px;font:600 10.5px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--cardInk);opacity:.6}
.cz-today{font:700 clamp(28px,8vw,40px)/1.1 var(--fd);color:var(--accent);margin-top:10px}

/* note */
.cz-note{text-align:center;padding-top:clamp(30px,8vw,44px);padding-bottom:clamp(30px,8vw,44px)}
.cz-note blockquote{margin:0;font:var(--qw,400) clamp(20px,5.6vw,26px)/1.45 var(--fq,var(--fd));color:var(--cardInk);text-wrap:pretty}
.cz-note::before{content:"\201C";display:block;font:400 72px/.6 var(--fd);color:var(--accent);opacity:.5;margin-bottom:8px}

/* when */
.cz-when{display:grid;grid-template-columns:auto 1fr;gap:18px 20px;align-items:center}
.cz-cal{width:92px;border-radius:18px;overflow:hidden;text-align:center;background:var(--bg);box-shadow:0 10px 26px -14px rgba(20,10,40,.5)}
.cz-cal b{display:block;background:var(--btnBg);color:var(--btnInk);font:700 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;padding:9px 0 8px}
.cz-cal strong{display:block;font-variant-numeric:lining-nums;font:800 44px/1 var(--fd);color:var(--ink);padding:10px 0 4px}
.cz-cal em{display:block;font:600 11px/1 var(--fb);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:11px}
.cz-when .cz-h2{font-size:clamp(24px,6.4vw,32px)}
.cz-when .cz-btns{grid-column:1/-1}

/* buttons */
.cz-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cz-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 20px;border-radius:999px;border:0;background:var(--btnBg);color:var(--btnInk);font:700 15.5px/1.1 var(--fb);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 26px -14px color-mix(in srgb,var(--accent) 80%,black)}
.cz-btn:active{transform:scale(.97)}
.cz-btn.ghost{background:transparent;color:var(--cardInk);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cardInk) 35%,transparent)}
.cz-btn svg{width:18px;height:18px;flex:none}
.cz-btn:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}

/* where */
.cz-where .cz-p{margin-top:2px}
.cz-mapbox{position:relative;margin:16px calc(clamp(22px,6vw,32px) * -1) 0;aspect-ratio:16/11;overflow:hidden;background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.cz-mapbox img{width:100%;height:100%;object-fit:cover}
.cz-where .cz-btns{margin-top:16px}
.cz-park{margin-top:14px;font-size:15px;opacity:.75}

/* plan */
.cz-plan ol{list-style:none;margin:8px 0 0;padding:0;position:relative}
.cz-plan ol::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:color-mix(in srgb,var(--accent) 35%,transparent);border-radius:2px}
.cz-plan li{position:relative;padding:0 0 18px 34px}
.cz-plan li:last-child{padding-bottom:0}
.cz-plan li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 4px var(--accent)}
.cz-plan time{display:block;font:700 13px/1.2 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cz-plan strong{display:block;font:var(--h2w,700) 21px/1.25 var(--fd);color:var(--cardInk);margin-top:3px}
.cz-plan span{display:block;font-size:15px;opacity:.72;margin-top:2px}

/* extras */
.cz-extras{display:grid;gap:12px}
.cz-chip{display:flex;gap:14px;align-items:center}
.cz-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.cz-ico svg{width:22px;height:22px}
.cz-chip b{display:block;font:600 11.5px/1.2 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cz-chip span{display:block;font:600 17px/1.35 var(--fb);color:var(--cardInk);margin-top:3px}
.cz-chip .cz-btn{flex:none;margin-left:auto;min-height:42px;padding:10px 16px;font-size:14px}

/* rsvp */
.cz .cz-sec.cz-rsvp{text-align:center;padding-top:clamp(30px,8vw,42px);padding-bottom:clamp(30px,8vw,42px);background:linear-gradient(160deg,var(--btnBg) 0%,var(--rsvp2) 100%);color:var(--btnInk);border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.cz-rsvp .cz-h{color:var(--btnInk);opacity:.8}
.cz-rsvp .cz-h2{color:var(--btnInk);font-size:clamp(32px,9vw,46px)}
.cz-rsvp .cz-p{color:var(--btnInk);opacity:.85}
.cz-rsvp .cz-btns{flex-direction:column;max-width:340px;margin:22px auto 0}
.cz-rsvp .cz-btn{background:var(--btnInk);color:var(--btnBg);box-shadow:0 16px 30px -16px rgba(0,0,0,.5);min-height:56px;font-size:17px}
.cz-rsvp .cz-btn.ghost{background:transparent;color:var(--btnInk);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--btnInk) 55%,transparent);min-height:50px;font-size:15.5px}
.cz-foot{text-align:center;padding:18px 0 calc(env(safe-area-inset-bottom) + 28px);font:500 13px/1.4 var(--fb);color:var(--muted)}
.cz-foot a{text-decoration:none;font-weight:700;color:var(--ink)}

/* opening layer */
.cz-open{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 80% at 50% 30%,var(--obg2,var(--bg2)) 0,var(--obg,var(--bg)) 100%);color:var(--oink,var(--ink));-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cz-open.gone{animation:czOut .75s cubic-bezier(.6,0,.2,1) forwards}
@keyframes czOut{to{opacity:0;transform:scale(1.08);visibility:hidden}}
.cz-stage{position:relative;width:min(84vw,380px);aspect-ratio:1/1.12;display:grid;place-items:center}
.cz-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 9vh);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.cz-hint b{font:700 13px/1 var(--fb);letter-spacing:.26em;text-transform:uppercase;animation:czBreath 2.2s ease-in-out infinite}
.cz-hint small{font:400 15px/1.3 var(--fb);opacity:.7}
.cz-for{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 9vh);text-align:center;padding:0 24px}
.cz-for p{margin:0;font:600 12px/1.3 var(--fb);letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.cz-for h2{margin:10px 0 0;font:var(--namew,700) clamp(34px,10vw,54px)/1 var(--fd);letter-spacing:-.01em}
.cz-for h2.script{font-family:var(--fs);font-weight:400}
@keyframes czBreath{0%,100%{opacity:.5}50%{opacity:1}}
.cz-skip{position:absolute;right:max(14px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 14px);z-index:5;border:0;background:color-mix(in srgb,var(--oink,var(--ink)) 12%,transparent);color:inherit;font:600 13px/1 var(--fb);padding:10px 14px;border-radius:999px;cursor:pointer}
.cz-tapzone{position:absolute;inset:0;z-index:4;cursor:pointer;background:none;border:0}

/* envelope: back, card, pocket with true seams, a flap that opens in 3D, a wax seal */
.ev{position:relative;width:100%;aspect-ratio:3/2;perspective:1100px}
.ev-float{position:absolute;inset:0;animation:czEvFloat 4.2s ease-in-out infinite;filter:drop-shadow(0 26px 30px rgba(20,10,30,.28))}
@keyframes czEvFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
.ev-back{position:absolute;inset:0;z-index:1;border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--env) 72%,black) 0,color-mix(in srgb,var(--env) 90%,black) 70%)}
.ev-card{position:absolute;left:7%;right:7%;top:7%;height:86%;z-index:3;border-radius:7px;background:var(--card);color:var(--cardInk);display:flex;flex-direction:column;align-items:center;padding:9% 6% 0;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.14);transition:transform 1s cubic-bezier(.3,1.15,.4,1) 1.05s}
.ev-card p{margin:0;font:600 10px/1.3 var(--fb);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.ev-card h3{margin:8px 0 0;font:var(--namew,700) clamp(22px,6.6vw,32px)/1.05 var(--fd);text-wrap:balance}
.ev-card i{display:block;width:34px;height:1px;background:var(--accent);margin-top:12px;opacity:.6}
.ev-pocket{position:absolute;inset:0;width:100%;height:100%;z-index:4;border-radius:10px;overflow:visible}
.ev-pocket .pk{fill:var(--env)}
.ev-pocket .sd{fill:none;stroke:rgba(0,0,0,.12);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ev-flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:5;transform-origin:50% 0;transition:transform .95s cubic-bezier(.45,0,.2,1) .3s,z-index 0s .78s;filter:drop-shadow(0 3px 3px rgba(0,0,0,.14))}
.ev-flap svg{display:block;width:100%;height:100%;overflow:visible}
.ev-flap .fl{fill:color-mix(in srgb,var(--env) 88%,white)}
.ev-flap .fe{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1;vector-effect:non-scaling-stroke}
.ev-seal{position:absolute;left:50%;top:58%;width:22%;aspect-ratio:1;z-index:6;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--seal) 55%,white) 0,var(--seal) 45%,color-mix(in srgb,var(--seal) 70%,black) 100%);box-shadow:0 5px 12px rgba(0,0,0,.32),inset 0 0 0 4px color-mix(in srgb,var(--seal) 78%,black);font:400 clamp(22px,6.4vw,32px)/1 var(--fs);color:color-mix(in srgb,var(--seal) 30%,white);animation:czSealGlow 3s ease-in-out infinite}
@keyframes czSealGlow{50%{box-shadow:0 5px 16px rgba(0,0,0,.32),0 0 0 6px color-mix(in srgb,var(--seal) 25%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--seal) 78%,black)}}
.op-envelope.open .ev-seal{animation:czSealGo .45s ease-in forwards}
@keyframes czSealGo{40%{transform:translate(-50%,-50%) scale(1.18)}100%{transform:translate(-50%,-50%) scale(.15);opacity:0}}
.op-envelope.open .ev-flap{transform:rotateX(178deg);z-index:2}
.op-envelope.open .ev-card{transform:translateY(-60%)}
.op-envelope.open .ev-float{animation:none;transform:translateY(16%);transition:transform 1.2s cubic-bezier(.3,1,.3,1) .9s}
.op-envelope.out .ev-back,.op-envelope.out .ev-pocket,.op-envelope.out .ev-flap{transition:opacity .5s;opacity:0}
.op-envelope.out .ev-card{transition:transform .9s cubic-bezier(.3,1,.3,1);transform:translateY(-45%) scale(1.22)}

/* gift: a box that jiggles, a lid with a bow that flies off, light and the age come out */
.op-gift .cz-stage{aspect-ratio:1/1.05}
.gb{position:relative;width:60%;aspect-ratio:1/1.05;margin-top:22%;animation:czGbIdle 2.8s ease-in-out infinite}
@keyframes czGbIdle{0%,68%,100%{transform:none}74%{transform:translateY(-7px) rotate(-3deg)}80%{transform:translateY(0) rotate(3deg)}86%{transform:translateY(-3px) rotate(-1.5deg)}92%{transform:none}}
.gb-box{position:absolute;left:7%;right:7%;bottom:0;height:64%;z-index:2;border-radius:6px 6px 14px 14px;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 28%,transparent 72%,rgba(0,0,0,.18)),linear-gradient(180deg,var(--box2) 0,var(--box) 100%);box-shadow:inset 0 12px 14px -8px rgba(0,0,0,.35)}
.gb-rib{position:absolute;left:43%;width:14%;top:0;bottom:0;background:linear-gradient(90deg,var(--ribbonLo),var(--ribbon) 30%,var(--ribbonHi) 50%,var(--ribbon) 70%,var(--ribbonLo))}
.gb-lid{position:absolute;left:0;right:0;top:22%;height:19%;z-index:4;border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--box2) 78%,white) 0,var(--box2) 42%,var(--box) 100%);box-shadow:0 10px 12px -6px rgba(0,0,0,.35);transform-origin:50% 100%}
.gb-lid .gb-rib{left:43%}
.gb-bow{position:absolute;left:50%;bottom:72%;width:76%;transform:translateX(-50%);overflow:visible;filter:drop-shadow(0 4px 4px rgba(0,0,0,.22))}
.gb-shadow{position:absolute;left:6%;right:6%;bottom:-8%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,10,30,.3),transparent);z-index:0}
.gb-glow{position:absolute;left:50%;top:36%;width:170%;aspect-ratio:1;z-index:0;transform:translate(-50%,-50%) scale(.2);border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(255,250,225,.95) 0,rgba(255,240,205,.55) 22%,transparent 58%),repeating-conic-gradient(from 0deg,rgba(255,245,215,.5) 0 5deg,transparent 5deg 16deg);-webkit-mask:radial-gradient(circle,#000 28%,transparent 66%);mask:radial-gradient(circle,#000 28%,transparent 66%)}
.gb-pop{position:absolute;left:50%;top:44%;z-index:1;transform:translate(-50%,0) scale(.35);opacity:0;font:var(--bigw,800) clamp(96px,30vw,170px)/1 var(--fd);color:var(--accent);text-shadow:0 10px 30px rgba(0,0,0,.2)}
.op-gift.open .gb{animation:czGbSquash .5s ease-in-out forwards}
@keyframes czGbSquash{0%{transform:none}45%{transform:scale(1.05,.88) translateY(4%)}100%{transform:none}}
.op-gift.open .gb-lid{animation:czGbLid 1.15s .38s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes czGbLid{0%{transform:none}22%{transform:translateY(-80%) rotate(-7deg)}100%{transform:translate(-60%,-560%) rotate(-52deg);opacity:0}}
.op-gift.open .gb-glow{animation:czGbGlow 1.8s .5s ease-out forwards}
@keyframes czGbGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}30%{opacity:1}100%{opacity:.9;transform:translate(-50%,-50%) scale(1.15) rotate(50deg)}}
.op-gift.open .gb-pop{animation:czGbPop 1s .62s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes czGbPop{to{transform:translate(-50%,-112%) scale(1);opacity:1}}

/* balloons */
.op-balloons .cz-stage{aspect-ratio:1/1.4}
.bal{position:absolute;bottom:-60%;width:30%;aspect-ratio:1/1.25;transform-origin:50% 120%}
.bal svg{width:100%;overflow:visible}
.bal .bal-t{position:absolute;left:0;right:0;top:24%;text-align:center;font:800 clamp(40px,14vw,72px)/1 var(--fd);color:rgba(255,255,255,.95);text-shadow:0 3px 10px rgba(0,0,0,.15)}
.bal.main{width:46%}
.bal.popped{animation:czBurst .3s ease-out forwards!important}
@keyframes czBurst{to{transform:scale(1.5);opacity:0}}
@keyframes czRise{from{transform:translateY(0)}to{transform:translateY(var(--y,-140%))}}
@keyframes czSway{from{rotate:-4deg}to{rotate:4deg}}

/* globe */
.op-globe .globe{position:relative;width:86%;aspect-ratio:1/1.15}
.glass{position:absolute;left:4%;right:4%;top:0;aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--accent2) 30%,var(--bg)) 0,var(--obg2,var(--bg2)) 75%);box-shadow:inset 0 -20px 40px rgba(255,255,255,.35),inset 0 10px 30px rgba(255,255,255,.4),0 20px 60px -20px rgba(0,0,0,.45)}
.glass img{position:absolute;left:50%;bottom:6%;width:62%;transform:translateX(-50%)}
.glass canvas{position:absolute;inset:0;width:100%;height:100%}
.glass::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.8) 0,rgba(255,255,255,0) 18%),radial-gradient(circle at 72% 80%,rgba(255,255,255,.25) 0,transparent 30%);pointer-events:none}
.globe-base{position:absolute;left:15%;right:15%;bottom:0;height:21%;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,black) 0,var(--accent) 22%,color-mix(in srgb,var(--accent) 55%,white) 42%,var(--accent) 62%,color-mix(in srgb,var(--accent) 50%,black) 100%)}
.globe-base::before{content:"";position:absolute;left:0;right:0;top:0;height:16%;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 40%,white),color-mix(in srgb,var(--accent) 80%,black))}
.globe-base::after{content:"";position:absolute;left:30%;right:30%;top:44%;height:26%;border-radius:4px;background:linear-gradient(180deg,#f8e9b8,#c9a24a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.globe::after{content:"";position:absolute;left:8%;right:8%;bottom:-5%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,10,30,.3),transparent);z-index:-1}
.op-globe .gw{position:absolute;inset:0;animation:czGlobeIdle 5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes czGlobeIdle{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-4px)}}
.glass img{animation:czSnowman 3.2s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes czSnowman{from{transform:translateX(-50%) rotate(-3deg)}to{transform:translateX(-50%) rotate(3deg) translateY(-3px)}}
.op-globe.shake .gw{animation:czGlobe 1.2s ease-in-out}
@keyframes czGlobe{12%{transform:rotate(-11deg) translateX(-12px)}30%{transform:rotate(10deg) translateX(12px)}48%{transform:rotate(-8deg) translateX(-8px)}66%{transform:rotate(6deg) translateX(6px)}84%{transform:rotate(-3deg)}100%{transform:none}}
.op-globe.open .globe{animation:czDive 1.1s cubic-bezier(.6,0,.3,1) forwards}
@keyframes czDive{to{transform:scale(7) translateY(6%);opacity:0}}

/* scratch */
.op-scratch .card{position:relative;width:100%;aspect-ratio:1/1.1;border-radius:26px;background:var(--card);color:var(--cardInk);box-shadow:0 30px 60px -24px rgba(0,0,0,.45);display:grid;place-items:center;text-align:center;padding:12%;overflow:hidden}
.op-scratch .card p{margin:0;font:600 12px/1.3 var(--fb);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.op-scratch .card h3{margin:10px 0 4px;font:var(--namew,700) clamp(30px,9vw,44px)/1.05 var(--fd);white-space:nowrap}
.op-scratch .card small{display:block;font:600 14px/1.2 var(--fb);letter-spacing:.3em;color:var(--muted);margin-bottom:12px}
.op-scratch .card em{font:400 clamp(22px,6.4vw,30px)/1.2 var(--fs);font-style:normal;color:var(--accent)}
.op-scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;border-radius:26px}
.op-scratch.open canvas{transition:opacity .6s;opacity:0}

/* curtain */
.op-curtain{background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,var(--accent2) 50%,#fff) 0,var(--obg,#120a12) 75%)}
.cur{position:absolute;top:0;bottom:0;width:52%;z-index:3;background:repeating-linear-gradient(90deg,var(--velvet) 0,color-mix(in srgb,var(--velvet) 60%,white) 3.2%,var(--velvet) 6.5%,color-mix(in srgb,var(--velvet) 55%,black) 9%,var(--velvet) 11%);box-shadow:inset 0 -80px 120px rgba(0,0,0,.5);transition:transform 1.6s cubic-bezier(.6,0,.2,1)}
.cur.l{left:0;transform-origin:0 0;border-radius:0 0 40% 0}
.cur.r{right:0;transform-origin:100% 0;border-radius:0 0 0 40%}
.cur-top{position:absolute;left:0;right:0;top:0;height:9%;z-index:4;background:repeating-radial-gradient(circle at 50% 0,var(--velvet) 0,color-mix(in srgb,var(--velvet) 60%,black) 30px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.op-curtain.open .cur.l{transform:translateX(-96%) skewX(4deg)}
.op-curtain.open .cur.r{transform:translateX(96%) skewX(-4deg)}
.spot{position:absolute;left:50%;top:-10%;width:120%;height:130%;transform:translateX(-50%);background:conic-gradient(from 168deg at 50% 0,transparent 0,rgba(255,250,230,.35) 6deg,rgba(255,250,230,.35) 18deg,transparent 24deg);mix-blend-mode:screen;pointer-events:none;z-index:2;animation:czSpot 4s ease-in-out infinite alternate}
@keyframes czSpot{from{transform:translateX(-56%) rotate(-6deg)}to{transform:translateX(-44%) rotate(6deg)}}
.cur-title{position:relative;z-index:1;text-align:center;color:#fff;opacity:0;transform:scale(.9);transition:opacity 1s .9s,transform 1.4s .9s}
.op-curtain.open .cur-title{opacity:1;transform:none}
.cur-title p{margin:0;font:600 12px/1.3 var(--fb);letter-spacing:.3em;text-transform:uppercase;color:var(--accent2)}
.cur-title h3{margin:8px 0 0;font:700 clamp(44px,14vw,80px)/1 var(--fd);color:#fff;text-shadow:0 0 40px color-mix(in srgb,var(--accent2) 60%,transparent)}

/* egg: a whole egg that rocks and hops, cracks grow with each tap, the top half flies off */
.eg{position:relative;width:56%;aspect-ratio:200/250}
.eg-hop{position:absolute;inset:0;animation:czEgIdle 2.6s ease-in-out infinite;transform-origin:50% 96%}
@keyframes czEgIdle{0%,55%,100%{transform:none}62%{transform:rotate(-7deg)}70%{transform:rotate(6deg)}78%{transform:translateY(-10px) rotate(-2deg)}86%{transform:translateY(0) rotate(2deg)}93%{transform:none}}
.eg.knock .eg-hop{animation:czEgKnock .42s ease-in-out}
@keyframes czEgKnock{25%{transform:rotate(-10deg) translateY(-4px)}60%{transform:rotate(9deg)}85%{transform:rotate(-3deg)}}
.eg-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 18px rgba(20,10,30,.22))}
.eg-spots{fill:var(--spot);opacity:.9}
.eg-hi{fill:#fff;opacity:.45}
.eg-crack{fill:none;stroke:color-mix(in srgb,var(--egg2) 45%,black);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset .35s ease-out}
.eg.t1 .c1,.eg.t2 .c2,.eg.t3 .c3{stroke-dashoffset:0}
.eg.t2 .c1,.eg.t3 .c1,.eg.t3 .c2{stroke-dashoffset:0}
.eg-top{transform-box:view-box;transform-origin:50% 48%;transition:transform .95s cubic-bezier(.3,.7,.3,1),opacity .9s}
.op-egg.open .eg-top{transform:translate(-14%,-62%) rotate(-38deg);opacity:0}
.op-egg.open .eg-cracks,.op-egg.open .eg-hi{opacity:0;transition:opacity .2s}
.op-egg.open .eg-hop{animation:none}
.eg-shadow{position:absolute;left:14%;right:14%;bottom:-6%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,10,30,.28),transparent);z-index:-1;animation:czEgShadow 2.6s ease-in-out infinite}
@keyframes czEgShadow{0%,72%,100%{transform:none}78%{transform:scale(.82);opacity:.7}86%{transform:none}}
.eg-pop{position:absolute;left:50%;top:40%;z-index:0;transform:translate(-50%,-30%) scale(.3);opacity:0;font:var(--bigw,800) clamp(110px,34vw,180px)/1 var(--fd);color:var(--accent);text-shadow:0 12px 30px rgba(0,0,0,.22)}
.op-egg.open .eg-pop{animation:czEggPop2 1s .25s cubic-bezier(.2,1.6,.4,1) forwards;z-index:3}
@keyframes czEggPop2{to{transform:translate(-50%,-78%) scale(1);opacity:1}}

/* neon */
.op-neon{background:radial-gradient(90% 70% at 50% 40%,color-mix(in srgb,var(--neon) 12%,#0d0b12) 0,#07060a 80%);color:#fff}
.op-neon .wall{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.025) 2px,transparent 2px);background-size:64px 32px,64px 64px;opacity:.8}
.neon-sign{position:relative;text-align:center;z-index:1}
.neon-sign p{margin:0;font:400 clamp(28px,8vw,42px)/1.1 var(--fs);color:var(--neon2);text-shadow:0 0 6px var(--neon2),0 0 18px var(--neon2),0 0 40px var(--neon2);opacity:.12}
.neon-sign h3{margin:6px 0 0;font:800 clamp(80px,26vw,150px)/1 var(--fd);color:#fff;text-shadow:0 0 4px #fff,0 0 12px var(--neon),0 0 28px var(--neon),0 0 60px var(--neon),0 0 100px var(--neon);opacity:.08}
.op-neon.on .neon-sign p,.op-neon.on .neon-sign h3{animation:czFlick 1.4s linear forwards}
.op-neon.on .neon-sign h3{animation-delay:.25s}
@keyframes czFlick{0%{opacity:.1}8%{opacity:1}10%{opacity:.2}18%{opacity:1}22%{opacity:.3}30%,100%{opacity:1}}
.neon-sw{margin-top:9vh;width:54px;height:84px;border-radius:12px;background:#1b1820;box-shadow:inset 0 0 0 2px #2c2834;position:relative;z-index:1}
.neon-sw::after{content:"";position:absolute;left:14px;right:14px;top:12px;height:30px;border-radius:7px;background:#e7e3ea;transition:transform .2s}
.op-neon.on .neon-sw::after{transform:translateY(30px);background:var(--neon)}

/* bubble */
.op-bubble{background:linear-gradient(180deg,var(--sea1,#bfe8f4) 0,var(--sea2,#2a7ea6) 100%)}
.op-bubble .rays{position:absolute;inset:0;background:repeating-conic-gradient(from 180deg at 50% -10%,rgba(255,255,255,.14) 0 4deg,transparent 4deg 13deg);mask-image:linear-gradient(180deg,#000,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);animation:czRays 9s ease-in-out infinite alternate}
@keyframes czRays{to{transform:rotate(4deg) scale(1.05)}}
.big-bub{position:relative;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0,rgba(255,255,255,.15) 16%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.3) 96%);box-shadow:inset 0 0 30px rgba(255,255,255,.5),inset -10px -16px 40px color-mix(in srgb,var(--accent2) 50%,transparent),0 20px 50px -20px rgba(0,40,80,.5);display:grid;place-items:center;animation:czBob 3.4s ease-in-out infinite alternate}
.big-bub img{width:66%}
@keyframes czBob{to{transform:translateY(-16px) scale(1.02)}}
.op-bubble.open .big-bub{animation:czBubPop .45s ease-in forwards}
@keyframes czBubPop{60%{transform:scale(1.12)}100%{transform:scale(1.5);opacity:0}}

/* ticket */
.op-ticket .tk{position:relative;width:100%;display:flex;filter:drop-shadow(0 26px 40px rgba(0,0,0,.4));transform:rotate(-4deg)}
.tk-main,.tk-stub{background:linear-gradient(160deg,var(--card) 0,color-mix(in srgb,var(--card) 85%,var(--accent)) 100%);color:var(--cardInk);padding:26px 22px;position:relative}
.tk-main{flex:1;border-radius:16px 0 0 16px;-webkit-mask:radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px) top right/51% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px) bottom right/51% 51% no-repeat,linear-gradient(#000,#000) left/50% 100% no-repeat;mask:radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px) top right/51% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px) bottom right/51% 51% no-repeat,linear-gradient(#000,#000) left/50% 100% no-repeat}
.tk-stub{width:30%;border-radius:0 16px 16px 0;border-left:2px dashed color-mix(in srgb,var(--cardInk) 30%,transparent);display:grid;place-items:center;transition:transform .9s cubic-bezier(.3,.1,.3,1),opacity .9s}
.tk-main p{margin:0;font:700 10px/1.2 var(--fb);letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.tk-main h3{margin:8px 0 8px;font:var(--namew,800) clamp(24px,7vw,34px)/1 var(--fd);text-wrap:balance}
.tk-main span{font:600 13px/1.3 var(--fb);opacity:.75}
.tk-stub b{writing-mode:vertical-rl;font:800 15px/1 var(--fb);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.op-ticket.open .tk-stub{transform:translate(40%,60%) rotate(32deg);opacity:0}
.op-ticket.open .tk{animation:czTk 1s .5s cubic-bezier(.6,0,.3,1) forwards}
@keyframes czTk{to{transform:rotate(0) scale(1.6) translateY(-30%);opacity:0}}

/* stars */
.op-stars{background:radial-gradient(120% 90% at 50% 10%,var(--night2,#2a2a6a) 0,var(--night,#0b0b2a) 70%);color:#fff}
.op-stars canvas{position:absolute;inset:0;width:100%;height:100%}

/* door */
.op-door .doors{position:relative;width:86%;aspect-ratio:1/1.3;perspective:1200px;border-radius:22px;background:radial-gradient(circle at 50% 60%,#fff8e0 0,color-mix(in srgb,#ffd98a 55%,var(--accent)) 42%,color-mix(in srgb,var(--accent) 62%,#1a1206) 100%);box-shadow:0 0 0 14px var(--frame),0 30px 60px -20px rgba(0,0,0,.5);overflow:hidden}
.door{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,var(--wood) 0,color-mix(in srgb,var(--wood) 80%,white) 50%,var(--wood) 100%);transition:transform 1.5s cubic-bezier(.5,0,.2,1)}
.door::before{content:"";position:absolute;inset:10% 14%;border-radius:10px;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--wood) 60%,black),inset 0 0 0 9px color-mix(in srgb,var(--wood) 85%,white)}
.door::after{content:"";position:absolute;top:52%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8,#c9a23a 60%,#7a5a10)}
.door.l{left:0;transform-origin:0 50%;border-radius:22px 0 0 22px}
.door.l::after{right:10%}
.door.r{right:0;transform-origin:100% 50%;border-radius:0 22px 22px 0}
.door.r::after{left:10%}
.door-wreath{position:absolute;left:50%;top:14%;width:34%;transform:translateX(-50%);z-index:2;transition:opacity .4s}
.op-door.open .door.l{transform:rotateY(-105deg)}
.op-door.open .door.r{transform:rotateY(105deg)}
.op-door.open .door-wreath{opacity:0}
.op-door.open .doors{animation:czDive 1.1s 1.1s cubic-bezier(.6,0,.3,1) forwards}

/* lights */
.op-lights{background:radial-gradient(90% 60% at 50% 40%,#2a2d33 0,#0e0f12 80%);color:#fff}
.lt-row{display:flex;gap:10px;padding:16px;border-radius:20px;background:#15161a;box-shadow:inset 0 0 0 2px #2b2d33,0 20px 40px rgba(0,0,0,.5)}
.lt{width:clamp(38px,11vw,54px);aspect-ratio:1;border-radius:50%;background:#2a0b0b;box-shadow:inset 0 -6px 10px rgba(0,0,0,.5);transition:background .1s,box-shadow .1s}
.lt.on{background:radial-gradient(circle at 40% 35%,#ffb3a8 0,#ff2a1a 45%,#a50d05 100%);box-shadow:0 0 24px #ff2a1a,0 0 60px rgba(255,42,26,.6)}
.lt.go{background:radial-gradient(circle at 40% 35%,#d4ffd0 0,#29d43a 45%,#0a7a16 100%);box-shadow:0 0 24px #29d43a,0 0 60px rgba(41,212,58,.6)}
.lt-go{margin-top:28px;font:800 clamp(50px,15vw,84px)/1 var(--fd);letter-spacing:.02em;opacity:0;transform:scale(.6);transition:all .5s cubic-bezier(.2,1.6,.4,1);text-align:center}
.op-lights.open .lt-go{opacity:1;transform:none}
.op-lights .flag{position:absolute;inset:auto 0 0 0;height:12vh;background:conic-gradient(#fff 25%,#111 0 50%,#fff 0 75%,#111 0) 0 0/36px 36px;opacity:.9;transform:perspective(400px) rotateX(45deg);transform-origin:50% 100%}
.op-lights .flag.court{background:linear-gradient(transparent 30%,rgba(255,255,255,.92) 30% 36%,transparent 36%),repeating-linear-gradient(90deg,#c98b4e 0 34px,#a8703a 34px 36px,#d39a5c 36px 70px,#a8703a 70px 72px)}
.op-lights .flag.field{background:linear-gradient(transparent 44%,rgba(255,255,255,.92) 44% 52%,transparent 52%) 0 0/100% 50%,repeating-linear-gradient(0deg,#2f8a3e 0 16px,#287a36 16px 32px)}
.op-lights .flag.none{display:none}

/* bloom */
.op-bloom .blm{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.op-bloom .cz-stage{width:min(92vw,430px,44vh);margin-top:6vh}
.op-bloom .blm .pc{position:absolute;display:block;animation:czBloomSway 3.6s ease-in-out infinite alternate}
.op-bloom .blm .pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(0) rotate(-40deg);transition:transform 1.2s cubic-bezier(.2,1.3,.4,1)}
@keyframes czBloomSway{from{transform:translate3d(0,3%,0) rotate(-2deg)}to{transform:translate3d(0,-4%,0) rotate(2deg)}}
.op-bloom .blm .mono{position:relative;z-index:2;text-align:center;max-width:40%;font:400 clamp(56px,17vw,96px)/1 var(--fs);color:var(--accent);opacity:0;transition:opacity 1s .2s}
.op-bloom .blm .mono.num{font-size:clamp(64px,21vw,112px);font-family:var(--fd);font-weight:var(--namew,700);letter-spacing:-.02em}
.op-bloom.show .blm .mono{opacity:1}
.op-bloom.show .blm .pc img{transform:var(--to)}
.op-bloom.open .blm{animation:czDive 1.1s .2s cubic-bezier(.6,0,.3,1) forwards}

/* cover: the art itself opens */
.op-cover .cov{position:relative;width:100%;aspect-ratio:1/1.15}
.op-cover .cov img{position:absolute;width:36%;transition:transform 1s cubic-bezier(.6,0,.3,1),opacity 1s}
.op-cover .cov .seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--accent);color:var(--btnInk);box-shadow:0 20px 40px -14px color-mix(in srgb,var(--accent) 80%,black),inset 0 0 0 6px color-mix(in srgb,var(--btnInk) 30%,transparent);font:800 clamp(44px,15vw,74px)/1 var(--fd);animation:czBreathe 2.4s ease-in-out infinite}
.op-cover .cov .seal small{display:block;font:700 10px/1.2 var(--fb);letter-spacing:.24em;text-transform:uppercase;margin-top:4px}
@keyframes czBreathe{50%{transform:translate(-50%,-50%) scale(1.05)}}
.op-cover.open .cov img{opacity:0}
.op-cover.open .cov .seal{animation:czSeal2 .8s cubic-bezier(.6,0,.3,1) forwards}
@keyframes czSeal2{to{transform:translate(-50%,-50%) scale(5);opacity:0}}

/* monitors: the hero stays on the left, details scroll on the right */
@media (min-width:1000px){
  .cz-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,620px);align-items:start}
  .cz-hero{position:sticky;top:0;height:var(--screen,100vh);min-height:0;padding:72px 4vw}
  .cz-main{padding:12vh 48px 60px 8px;max-width:none;margin:0}
  .cz-scroll{display:none}
  .cz-art .s1{left:4%;top:5%;--w:24%}
  .cz-art .s2{right:3%;top:7%;--w:22%}
  .cz-art .s3{left:1%;top:40%;--w:17%}
  .cz-art .s4{right:1%;top:44%;--w:17%}
  .cz-art .s5{left:8%;bottom:3%;--w:21%}
  .cz-art .s6{right:7%;bottom:4%;--w:22%}
  /* the card leaves room at its sides, so the art stands beside it whole instead of shrinking to crumbs */
  .h-frame .cz-txt{max-width:min(58%,560px)}
  .h-frame .cz-art .s1{left:2%;top:4%;--w:21%}
  .h-frame .cz-art .s2{right:2%;top:6%;--w:20%}
  .h-frame .cz-art .s3{left:1%;top:40%;--w:17%}
  .h-frame .cz-art .s4{right:1%;top:44%;--w:17%}
  .h-frame .cz-art .s5{left:3%;bottom:3%;--w:20%}
  .h-frame .cz-art .s6{right:2%;bottom:3%;--w:21%}
  .cz-big{font-size:clamp(170px,17vw,300px)}
  .cz-name{font-size:clamp(60px,6vw,104px)}
  .cz-stage{width:min(48vh,420px)}
}
@media (min-width:1000px) and (max-height:760px){.cz-big{font-size:min(17vw,30vh)}}

/* art around the opening, in the corners only */
.cz-amb{position:absolute;z-index:0;width:min(25vw,150px);height:auto;filter:drop-shadow(0 12px 18px rgba(20,10,30,.18));animation:czFloat 5.5s ease-in-out infinite alternate;pointer-events:none}
.cz-amb.a1{left:2.5%;top:calc(env(safe-area-inset-top) + 1.5vh);--rot:-8deg}
.cz-amb.a2{right:2.5%;bottom:calc(env(safe-area-inset-bottom) + 2vh);--rot:8deg;animation-duration:6.4s}
.cz-amb.a3{left:2.5%;bottom:calc(env(safe-area-inset-bottom) + 3vh);--rot:6deg;animation-duration:7.1s}
.cz-open.gone .cz-amb{transition:transform .7s;transform:scale(1.4)}
.cz-measure .cz-art,.cz-measure .cz-art img,.cz-measure .cz-txt>*,.cz-measure .cz-fart img{animation:none!important;transform:none!important;transition:none!important}
.cz-bigword .gb-pop,.cz-bigword .eg-pop{font-size:clamp(56px,17vw,96px)}
.cz-bigword .bal .bal-t{font-size:clamp(22px,7vw,34px)}
.gb-box::before{content:"";position:absolute;left:4%;right:4%;top:0;height:13%;border-radius:3px 3px 40% 40%/3px 3px 100% 100%;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.12))}
.gb-art{width:58%;height:auto;left:50%;top:30%;font:inherit;filter:drop-shadow(0 14px 18px rgba(20,10,30,.25))}
.op-gift.open .gb-art{animation:czGbArt 1.1s .62s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes czGbArt{to{transform:translate(-50%,-118%) scale(1.15);opacity:1}}
.eg-lip{fill:var(--egg2);opacity:0;transition:opacity .2s .2s}
.op-egg.open .eg-lip{opacity:1}
.eg-hop{z-index:1}
.op-egg.open .eg-pop{z-index:0}
/* idle motion everywhere, so nothing sits still before the tap */
.op-ticket .tk{animation:czTkIdle 3.8s ease-in-out infinite}
@keyframes czTkIdle{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-8px)}}
.op-ticket.open .tk{animation:czTk 1s .5s cubic-bezier(.6,0,.3,1) forwards}
.op-scratch .card::after{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:czShine 2.8s ease-in-out infinite;z-index:2}
@keyframes czShine{0%{background-position:-150% 0}60%,100%{background-position:250% 0}}
.op-scratch.open .card::after{display:none}
.op-curtain:not(.open) .cur.l{animation:czCurL 5s ease-in-out infinite;transform-origin:0 0}
.op-curtain:not(.open) .cur.r{animation:czCurR 5s ease-in-out infinite;transform-origin:100% 0}
@keyframes czCurL{50%{transform:skewX(1.4deg) translateX(-1.5%)}}
@keyframes czCurR{50%{transform:skewX(-1.4deg) translateX(1.5%)}}
.op-door .doors::after{content:"";position:absolute;left:50%;top:6%;bottom:0;width:6px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(255,244,200,.95) 30%,rgba(255,244,200,.95) 80%,transparent);filter:blur(3px);animation:czLeak 2.4s ease-in-out infinite;z-index:1}
@keyframes czLeak{50%{opacity:.35;width:3px}}
.op-door.open .doors::after{opacity:0}
.op-door .door-wreath{animation:czWreath 3.6s ease-in-out infinite;transform-origin:50% 0}
@keyframes czWreath{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}}
.op-lights .lt-row{animation:czTkIdle2 3.4s ease-in-out infinite}
@keyframes czTkIdle2{50%{transform:translateY(-6px)}}

/* full page: portrait, gallery, dress code, good to know, guest count, share, photo places in the showcase */
.cz-ph{display:none!important}
.cz-demo .cz-ph:not([hidden]){display:block!important}
.cz-phbox{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10px;color:color-mix(in srgb,var(--cardInk) 70%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 16%,var(--card)) 0,color-mix(in srgb,var(--accent2) 22%,var(--card)) 100%)}
.cz-phbox::before{content:"";position:absolute;inset:8px;border-radius:inherit;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.cz-phi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--accent)}
.cz-phi svg{width:24px;height:24px}
.cz-phbox b{font:600 11px/1.3 var(--fb);letter-spacing:.16em;text-transform:uppercase}
.cz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.cz-grid figure{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:1;background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.cz-grid figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
.cz-gallery[data-n="2"] .cz-grid figure:first-child,.cz-gallery[data-n="4"] .cz-grid figure:first-child{grid-column:auto;aspect-ratio:1}
.cz-gallery[data-n="4"] .cz-grid figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
.cz-gallery[data-n="4"] .cz-grid figure:nth-child(4){grid-column:1/-1;aspect-ratio:16/9}
.cz-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,1,.3,1)}
.cz-grid figure:hover img{transform:scale(1.04)}
.cz-dress .cz-h2{font-size:clamp(24px,6.6vw,32px)}
.cz-sw{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.cz-sw i{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 4px 10px -4px rgba(0,0,0,.3)}
.cz-sw span{margin-left:6px;font:600 11.5px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--cardInk);opacity:.6}
.cz-faq details{border-top:1px solid color-mix(in srgb,var(--cardInk) 14%,transparent);padding:2px 0}
.cz-faq details:first-of-type{border-top:0}
.cz-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font:var(--h2w,700) 18px/1.3 var(--fd);color:var(--cardInk)}
.cz-faq summary::-webkit-details-marker{display:none}
.cz-faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font:600 18px/1 var(--fb);transition:transform .3s}
.cz-faq details[open] summary::after{transform:rotate(45deg)}
.cz-faq details p{margin:0 0 14px;color:var(--cardInk);opacity:.78;font-size:16px}
.cz-count-pick{margin:18px auto 0;max-width:340px}
.cz-count-pick span{display:block;font:600 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:10px}
.cz-count-pick div{display:flex;gap:8px;justify-content:center}
.cz-count-pick button{flex:1;min-height:44px;border-radius:12px;border:0;cursor:pointer;background:color-mix(in srgb,var(--btnInk) 16%,transparent);color:var(--btnInk);font:700 16px/1 var(--fb);transition:background .2s,transform .2s}
.cz-count-pick button[aria-pressed="true"]{background:var(--btnInk);color:var(--btnBg)}
.cz-count-pick button:active{transform:scale(.95)}
.cz-share{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;min-height:44px;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;background:var(--card);color:var(--cardInk);font:600 14.5px/1 var(--fb);box-shadow:0 10px 24px -14px rgba(20,10,40,.45)}
.cz-share svg{width:18px;height:18px}
.cz-foot p{margin:0}

/* the photo: its own moment on the phone, beside the words on a monitor */
.cz-hero .cz-photo{display:none!important}
.cz-demo .cz-hero .cz-photo.cz-ph{display:none!important}
@media (min-width:1000px){
  .cz-hero .cz-photo:not([hidden]):not(.cz-ph){display:block!important;width:min(26vh,230px);margin-top:14px}
  .cz-demo .cz-hero .cz-photo.cz-ph:not([hidden]){display:block!important;width:min(26vh,230px);margin-top:14px}
  .cz-portrait,.cz-demo .cz-sec.cz-portrait.cz-ph{display:none!important}
}

/* photos: a clean rounded frame with a slow camera drift and the name on the picture, no arches */
.cz-portrait{padding:0!important;overflow:hidden}
.cz-pic{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:inherit;background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.cz-pic img{width:100%;height:100%;object-fit:cover;animation:czDrift 14s ease-in-out infinite alternate}
@keyframes czDrift{from{transform:scale(1.06) translate(1%,1%)}to{transform:scale(1.0) translate(-1%,-.5%)}}
.cz-pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 20px;text-align:left;background:linear-gradient(180deg,transparent,rgba(10,6,14,.62));color:#fff}
.cz-pic figcaption span{display:block;font:600 11.5px/1.2 var(--fb);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.cz-pic figcaption b{display:block;margin-top:6px;font:var(--namew,700) clamp(28px,8vw,40px)/1.05 var(--fd);letter-spacing:-.01em}
.cz-pic .cz-phbox{position:absolute;inset:0}
.cz-pic .cz-phbox::before{border-radius:16px}
.cz-photo{border-radius:20px!important;border:0!important;aspect-ratio:4/5;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 24px 50px -26px rgba(20,10,40,.5)!important;overflow:hidden}
.cz-photo img{animation:czDrift 14s ease-in-out infinite alternate}
.cz-photo .cz-phbox::before{border-radius:14px}
.cz-portrait.cz-ph .cz-pic figcaption{background:linear-gradient(180deg,transparent,rgba(10,6,14,.32))}

/* reply: adults, kids, a note; personal greeting */
.cz-reply{margin:18px auto 0;max-width:360px;display:grid;gap:12px;text-align:left}
.cz-pick span,.cz-note-in span{display:block;font:600 11.5px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:8px}
.cz-pick div{display:flex;gap:6px}
.cz-pick button{flex:1;min-height:44px;border-radius:12px;border:0;cursor:pointer;background:color-mix(in srgb,var(--btnInk) 16%,transparent);color:var(--btnInk);font:700 16px/1 var(--fb);transition:background .2s,transform .2s}
.cz-pick button[aria-pressed="true"]{background:var(--btnInk);color:var(--btnBg)}
.cz-pick button:active{transform:scale(.95)}
.cz-note-in input{width:100%;min-height:46px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--btnInk) 30%,transparent);background:color-mix(in srgb,var(--btnInk) 8%,transparent);color:var(--btnInk);padding:0 14px;font:500 16px/1.2 var(--fb)}
.cz-note-in input::placeholder{color:color-mix(in srgb,var(--btnInk) 60%,transparent)}
.cz-note-in input:focus{outline:2px solid var(--btnInk);outline-offset:1px}
.cz-rsvp .cz-btns .cz-btn[data-r="maybe"]{min-height:46px}
.cz-dear{margin:0 0 2px;font:400 clamp(24px,7vw,34px)/1.1 var(--fs);color:var(--accent)}
.cz-count-pick{display:none!important}

/* host notice, what to bring, our story */
.cz .cz-sec.cz-notice{display:flex;flex-direction:column;gap:4px;padding:16px 20px;background:var(--btnBg);color:var(--btnInk);border:0}
.cz-notice b{font:600 11.5px/1.2 var(--fb);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.cz-notice span{font:600 17px/1.4 var(--fb)}
.cz-bring span{display:block;font:600 11.5px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:8px}
.cz-bring div{display:flex;flex-wrap:wrap;gap:6px}
.cz-bring button{min-height:40px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;background:color-mix(in srgb,var(--btnInk) 16%,transparent);color:var(--btnInk);font:600 14.5px/1 var(--fb)}
.cz-bring button[aria-pressed="true"]{background:var(--btnInk);color:var(--btnBg)}
.cz-story ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:18px}
.cz-story li{display:grid;grid-template-columns:64px 1fr;gap:2px 14px;align-items:baseline}
.cz-story li b{grid-row:1/3;font:var(--h2w,700) 22px/1 var(--fd);color:var(--accent)}
.cz-story li strong{font:var(--h2w,700) 20px/1.25 var(--fd);color:var(--cardInk)}
.cz-story li span{font-size:15.5px;opacity:.75}

/* the closing screen */
.cz-finale{position:relative;text-align:center;padding:clamp(150px,40vw,210px) 10px clamp(130px,34vw,190px);overflow:hidden}
.cz-fart img{position:absolute;width:min(27%,150px);max-height:clamp(120px,32vw,170px);object-fit:contain;height:auto;filter:drop-shadow(0 14px 18px rgba(20,10,30,.18));animation:czFloat 6s ease-in-out infinite alternate}
.cz-fart .fl{left:2%;top:14px;--rot:-8deg}
.cz-fart .fr{right:2%;bottom:14px;--rot:8deg;animation-duration:7s}
.cz-finale .cz-kicker{position:relative;opacity:1;transform:none;color:var(--muted)}
.cz-fdate{position:relative;margin:calc(8px - .1em) -.06em -.1em;padding:.1em .06em;font:var(--bigw,800) clamp(54px,17vw,96px)/.95 var(--fd);letter-spacing:-.02em;background:linear-gradient(160deg,var(--accent) 10%,var(--accent2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}
.cz-fname{position:relative;margin:14px 0 0;font:var(--namew,700) clamp(26px,7vw,36px)/1.1 var(--fd);color:var(--ink)}
.cz-fline{position:relative;margin:10px auto 0;max-width:26ch;font:500 18px/1.45 var(--fb);color:var(--ink);opacity:.8}

/* forecast for the day */
.cz-wx{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--cardInk);font:600 14px/1.3 var(--fb);width:fit-content}
.cz-wx[hidden]{display:none}
.cz-wx svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* wedding party */
.cz-people{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cz-people div{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cz-people i{grid-row:1/3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:400 22px/1 var(--fs);font-style:normal;color:var(--btnInk);background:var(--btnBg)}
.cz-people b{font:var(--h2w,700) 17px/1.2 var(--fd);color:var(--cardInk)}
.cz-people span{font-size:13px;opacity:.7}

/* The reply kept for the host: name field, thank-you card, reminder */
.cz-name-in.cz-need input{border-color:var(--btnInk);box-shadow:0 0 0 3px color-mix(in srgb,var(--btnInk) 35%,transparent)}
.cz-name-in.cz-need span::after{content:"  \00b7  needed";letter-spacing:.06em}
.cz-btn.cz-busy{opacity:.6;pointer-events:none}
.cz-done{max-width:360px;margin:18px auto 0;display:grid;gap:10px;animation:czUp .5s cubic-bezier(.16,1,.3,1)}
@keyframes czUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cz-done p{margin:0}
.cz-done-t{font:var(--h2w,700) clamp(26px,7.4vw,34px)/1.08 var(--fd);color:var(--btnInk)}
.cz-done-s{font:500 16px/1.45 var(--fb);color:var(--btnInk);opacity:.9}
.cz-remind{display:grid;gap:8px;text-align:left;margin-top:4px}
.cz-remind span{font:600 11.5px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;opacity:.85;color:var(--btnInk)}
.cz-remind div{display:flex;gap:6px}
.cz-remind input{flex:1;min-width:0;min-height:46px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--btnInk) 30%,transparent);background:color-mix(in srgb,var(--btnInk) 8%,transparent);color:var(--btnInk);padding:0 12px;font:500 16px/1.2 var(--fb)}
.cz-remind input::placeholder{color:color-mix(in srgb,var(--btnInk) 60%,transparent)}
.cz-remind button{flex:none;min-height:46px;padding:0 14px;border-radius:12px;border:0;background:var(--btnInk);color:var(--btnBg);font:700 14.5px/1 var(--fb);cursor:pointer}
.cz-remind button:disabled{opacity:.6}
.cz-err{font:600 13px/1.3 var(--fb);font-style:normal;color:var(--btnInk)}
.cz-done-a{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px}
.cz-done-a .cz-btn{width:100%}
.cz-also{font:600 14.5px/1.3 var(--fb);color:var(--btnInk);opacity:.9;text-underline-offset:4px}