/* MEMORY CARD (theme memory-card). GENERATED by tools/make-app-page.py from site/index.html. */
:root{--gold:#b8862b;--ink:#3b2a22;--cream:#fbf6ec;--glass:rgba(255,250,242,.62);--line:rgba(160,110,50,.45);--rose:#b8566a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#e9e2d8;overflow:hidden;color:var(--ink);font-family:'Outfit',system-ui,sans-serif}
button{font-family:inherit}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.fx{position:fixed;inset:0;pointer-events:none}
#petals{z-index:2}
#vig{z-index:1;background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(40,18,10,.32) 100%)}
/* gold foil (paris-hen .ttl recipe, retuned from rose-gold to deep gold so it reads on cream paper) */
.foil{background:linear-gradient(100deg,#8a5a14 0%,#d4a347 20%,#fff1c0 36%,#b07a22 52%,#f2d27e 70%,#7d5210 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:foil 6s ease-in-out infinite;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 1px 1.5px rgba(90,55,10,.45));padding:0 .14em}
@keyframes foil{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.tw{position:absolute;width:12px;height:12px;pointer-events:none;background:radial-gradient(circle,#fff 0 18%,rgba(255,230,180,0) 60%);animation:tw 2.6s ease-in-out infinite;opacity:0}
.tw::before,.tw::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:12px;margin:-6px 0 0 -1px;background:linear-gradient(transparent,#fff,transparent)}
.tw::after{transform:rotate(90deg)}
@keyframes tw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes bob{50%{transform:translateY(-5px)}}
.pill{pointer-events:auto;border:1px solid var(--line);background:var(--glass);color:var(--ink);font:400 14px 'Outfit',sans-serif;letter-spacing:.03em;padding:9px 15px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
.hide{opacity:0!important;pointer-events:none!important}
.hide *{pointer-events:none!important}

/* ---------- the card ---------- */
#cardStage{position:fixed;inset:0;z-index:8;overflow:hidden;background:#e9e2d8;transition:opacity .7s}
#cardStage.gone{opacity:0;pointer-events:none}
#cardScene{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#cardScene.push{transition:transform 2.6s cubic-bezier(.7,0,.6,1)}
#magic{position:fixed;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;transition:opacity .7s}
#glow{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fffaf0 0%,#ffeccc 35%,rgba(255,214,160,.85) 70%,rgba(255,200,150,.6) 100%)}
#cardBase{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
#cardWrap{position:absolute;perspective:1500px;cursor:pointer}
#inside{position:absolute;inset:.4% .5%;background:#fbf6ec url(/themes/memory-card/assets/card/paper.jpg) center/cover;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(150,110,70,.18),inset 14px 0 18px -12px rgba(90,60,30,.35)}
#window{position:absolute;overflow:hidden;border-radius:50% 50% 4px 4px / 22% 22% 4px 4px;box-shadow:0 0 0 2px #c9a25a,0 0 0 4px #fbf6ec,0 0 0 5px rgba(160,120,60,.6),inset 0 0 18px rgba(60,30,10,.35);background-repeat:no-repeat}
#insideTxt{position:absolute;left:0;right:0;text-align:center;font:700 22px 'Caveat',cursive;color:#7a4a3a}
#cover{position:absolute;inset:0;transform-origin:0% 50%;transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.45,.05,.25,1)}
#cover.open{transform:rotateY(-178deg)}
#cover .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#cover .front{background:url(/themes/memory-card/assets/card/front-a.jpg?v=2) 0 0/100% 100%;box-shadow:0 1px 2px rgba(60,40,20,.15)}
#cover.open .front{box-shadow:-30px 10px 40px rgba(60,40,20,.25)}
/* 16/10 Gary: "like a real book - you see the light on the left-hand side when it opens". The front darkens as it lifts away
   from the light; the inside of the cover is lit softly with a shadow into the fold and comes up out of shade as it lands;
   the lifting cover throws a moving shadow across the inside page. (The card also slides right as it opens - openCard.) */
#cover .front::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(40,25,10,.05),rgba(40,25,10,.4));opacity:0;transition:opacity .7s ease-in}
#cover.open .front::after{opacity:1}
#cover .back::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(80,55,30,.34) 0%,rgba(80,55,30,.1) 9%,rgba(80,55,30,0) 26%),radial-gradient(ellipse at 30% 28%,rgba(255,249,235,.55),rgba(255,249,235,0) 62%),linear-gradient(180deg,rgba(255,244,225,.18),rgba(120,90,60,.12))}
#cover .back::after{content:'';position:absolute;inset:0;pointer-events:none;background:rgba(40,25,10,.5);opacity:1;transition:opacity 1.1s ease-out .55s}
#cover.open .back::after{opacity:0}
#inside::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:2px;background:linear-gradient(90deg,rgba(50,30,15,.5),rgba(50,30,15,.18) 22%,rgba(50,30,15,0) 55%);opacity:0;transform-origin:0 50%}
#cardWrap.opening #inside::after{animation:castShadow 1.6s cubic-bezier(.45,.05,.25,1) forwards}
@keyframes castShadow{0%{opacity:0;transform:scaleX(1)}35%{opacity:1;transform:scaleX(1)}100%{opacity:.35;transform:scaleX(.22)}}
#cover .back{transform:rotateY(180deg);overflow:hidden;background:#fbf6ec url(/themes/memory-card/assets/card/paper.jpg) center/cover;display:flex;align-items:center;justify-content:center;padding:18%;text-align:center;font:700 20px 'Caveat',cursive;color:#8a5a48}
/* 16/10 Gary picked front A (champagne toast, after two Etsy bestsellers): our watercolour art, every word and the age
   are live ink-black type - spaced caps at the top, "To a very special" + a script name at the bottom, the age on the
   bottle label (measured: label x 27.3-46.4%, y 62.8-75%). Sizes are set by fitCardText from the card width. */
#ctext{position:absolute;inset:0;color:#2b2522;pointer-events:none}
#ctext .t{position:absolute;left:3%;right:3%;text-align:center;white-space:nowrap;line-height:1.15}
#ctext .t span{display:inline-block}
#ctext .l,#ctext .tv{font-family:Outfit,sans-serif;font-weight:500;letter-spacing:.32em;text-transform:uppercase}
#ctext .l span,#ctext .tv span{padding-left:.32em}
#ctext .l{top:10.5%}   /* 16/10 Gary: bring the heading down a wee bit */
#ctext .tv{top:83.6%}   /* 16/10 Gary: move that line up slightly */
#ctext .nm{top:86.4%;font-family:Allura,cursive;line-height:1.25}
#ctext .age{left:29.1%;width:17.6%;right:auto;top:57.1%;height:11.2%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-weight:600;font-variant-numeric:lining-nums;color:#2f2a24;line-height:1}
#tapOpen{position:absolute;left:0;right:0;text-align:center;font:600 13px 'Outfit',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#7a5236;animation:bob 2.4s ease-in-out infinite;pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.6)}
#tapOpen small{display:block;font:400 11px 'Outfit';letter-spacing:.18em;color:#9a7a60;margin-top:6px;text-transform:none;opacity:.0;transition:opacity .4s}
#tapOpen.wait small{opacity:1}

/* ---------- walk UI ---------- */
#top{position:fixed;top:0;left:0;right:0;z-index:3;padding:max(14px,env(safe-area-inset-top)) 62px 30px 16px;pointer-events:none;background:linear-gradient(rgba(255,236,215,.55),rgba(255,236,215,0));transition:opacity .6s}
#ttl{font:400 30px/1.1 'Great Vibes',cursive;position:relative;display:inline-block;white-space:nowrap;color:#6e2f24;text-shadow:0 0 10px rgba(255,240,225,.9),0 0 2px rgba(255,240,225,.9)}
#bottom{position:fixed;left:0;right:0;bottom:0;z-index:3;padding:40px 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;transition:opacity .6s;background:linear-gradient(rgba(40,25,15,0),rgba(40,25,15,.45))}
#hint{font-size:15px;letter-spacing:.04em;color:#fff6ea;text-shadow:0 1px 8px #000;transition:opacity .6s;text-align:center}
#walk{pointer-events:auto;min-width:56px;height:56px;border-radius:999px;border:1px solid rgba(255,240,215,.6);background:rgba(60,35,25,.42);color:#ffe6b0;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:bob 2.4s ease-in-out infinite;font:600 15px 'Outfit',sans-serif;letter-spacing:.03em;padding:0 16px}
#walk.party{background:#e9c46a;color:#3a2410;border-color:#e9c46a;box-shadow:0 0 22px rgba(255,200,90,.6)}
#bar{width:min(220px,60vw);height:2px;background:rgba(255,230,190,.3);border-radius:2px;overflow:hidden}
#bar i{display:block;height:100%;width:0;background:#ffd98a}
#snd{position:fixed;right:14px;top:max(12px,env(safe-area-inset-top));z-index:12;width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}

/* ---------- a print, big ---------- */
#lb{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(35,22,14,.72);opacity:0;pointer-events:none;transition:opacity .45s;padding:20px}
#lb.on{opacity:1;pointer-events:auto}
#lbCard{background:#f6efe3;padding:14px 14px 10px;border-radius:3px;box-shadow:0 0 0 7px #8f6a36,0 0 0 9px #c9a25a,0 20px 50px rgba(0,0,0,.55);transform:scale(.92) rotate(-1.2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);max-width:min(84vw,380px)}
#lb.on #lbCard{transform:scale(1) rotate(-1.2deg)}
#lbImg{display:block;width:100%;max-height:58vh;aspect-ratio:3/4;object-fit:cover}
#lbCap{font:700 30px/1.1 'Caveat',cursive;color:#3b2f28;text-align:center;margin-top:10px;overflow-wrap:anywhere}
#lb .pill{background:rgba(255,248,236,.9)}

/* ---------- v2 ending (Gary 15/10): the walk ends at a flower table; tap the letter, then the present ---------- */
#end{position:fixed;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .9s;background:#c9b49a;overflow:hidden;overflow:clip}   /* clip: focus/scrollIntoView can't scroll it */
#end.on{opacity:1;pointer-events:auto}
#end{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}   /* a drag over the gift card selected the page (blue wash) */
#end .lc{-webkit-user-select:text;user-select:text}
#tableBlur{position:absolute;inset:-40px;background:center/cover;filter:blur(24px) brightness(.92)}
#tableStage{position:absolute;transform-origin:0 0;transition:transform 1.7s cubic-bezier(.3,.55,.25,1)}
/* the zoom: a soft oval around the table that opens out as the photo grows, so no hard photo edge shows over the garden */
#tableStage.zoom{-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 85%;mask-position:50% 85%;-webkit-mask-size:105% 70%;mask-size:105% 70%;transition:transform 1.7s cubic-bezier(.3,.55,.25,1),-webkit-mask-size 1.7s ease-in,mask-size 1.7s ease-in}
#tableStage.zoom.grow{-webkit-mask-size:420% 420%;mask-size:420% 420%}
#end.zooming{background:transparent}
#end.zooming #tableBlur{opacity:0}
#tableImg{display:block;width:100%;height:100%}
.hot{position:absolute;border:0;padding:0;background:none;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent}
.hot[hidden]{display:none}
/* 15/10 Gary: no glowing boxes - a wee pulsing circle on each thing to tap (same pulse as the other Tap2Open pages) */
.hot::before{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid rgba(255,244,215,.95);background:rgba(255,240,205,.2);opacity:0;transition:opacity .4s;pointer-events:none}
.hot.glow::before{opacity:1;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,236,190,.85)}70%{box-shadow:0 0 0 18px rgba(255,236,190,0)}100%{box-shadow:0 0 0 0 rgba(255,236,190,0)}}
#endHint{position:absolute;left:16px;right:16px;bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px));text-align:center;font:600 17px 'Outfit',sans-serif;letter-spacing:.04em;color:#fff6ea;text-shadow:0 1px 10px rgba(0,0,0,.8);transition:opacity .5s;pointer-events:none}
#endHint.off{opacity:0}
.ov{position:absolute;inset:0;background:rgba(40,22,14,.62);opacity:0;pointer-events:none;transition:opacity .7s}
.ov.on{opacity:1;pointer-events:auto}
#endRow{position:absolute;left:0;right:0;bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));z-index:3;opacity:0;transform:translateY(10px);transition:opacity .8s,transform .8s;pointer-events:none}
#endRow.on{opacity:1;transform:none;pointer-events:auto}
#endScroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(64px,calc(env(safe-area-inset-top) + 56px)) 16px max(100px,calc(env(safe-area-inset-bottom) + 90px))}
#giftBox{display:flex;align-items:center;justify-content:center;padding:16px 16px 90px}
#letter{position:relative;width:min(350px,100%);margin:0 auto;perspective:1400px}
#letter .pan{position:relative;transform-style:preserve-3d;z-index:0}
#letter .ff{position:absolute;inset:0;overflow:hidden;background:#fbf6ec url(/themes/memory-card/assets/card/paper.jpg) center/cover;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#letter .p0{transform-origin:50% 100%;transition:transform 1s cubic-bezier(.4,.1,.25,1);z-index:2}
#letter .p2{transform-origin:50% 0%;transition:transform 1s cubic-bezier(.4,.1,.25,1);z-index:1}
#letter .p0 .ff{box-shadow:inset 0 -1px 0 rgba(120,90,60,.14)}
#letter .p2 .ff{box-shadow:inset 0 1px 0 rgba(120,90,60,.14)}
#letter.folded .p0{transform:rotateX(-179deg)}
#letter.folded .p2{transform:rotateX(179deg)}
#letter .fold-back{position:absolute;inset:0;background:linear-gradient(#f3e9d8,#e9dcc6);transform:rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(150,110,70,.15)}
#letter .p0 .fold-back{display:flex;align-items:center;justify-content:center}
#letter .p0 .fold-back::after{content:'';width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d0707f,#9c3446 70%);box-shadow:0 2px 4px rgba(60,10,20,.4),inset 0 0 0 5px rgba(255,255,255,.08)}
#letterShadow{position:absolute;inset:0;transition:top 1s,bottom 1s;z-index:-1;box-shadow:0 22px 50px rgba(30,15,5,.5);pointer-events:none;border-radius:2px}
.lc{padding:30px 26px 26px;color:#3b2a22}
.lc .dear{font:700 34px/1.1 'Caveat',cursive;color:#7a3e30;margin-bottom:10px}
.lc .msg{font:500 25px/1.32 'Caveat',cursive;white-space:pre-wrap;overflow-wrap:anywhere}
.lc .from{font:700 27px/1.2 'Caveat',cursive;color:#7a3e30;margin-top:16px;text-align:right;overflow-wrap:anywhere}
.lc .from .lf,.lc .from .nmz{display:block}
.lc .from .lf{font-size:.85em;opacity:.9;margin-bottom:2px}
.lc .occ{font:400 13px 'Outfit';letter-spacing:.24em;text-transform:uppercase;color:#a07a5a;text-align:center;margin-bottom:16px}
#letter.folded #letterShadow{top:33.3%;bottom:33.3%}
#afterLetter{width:min(350px,100%);margin:22px auto 0;display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;transform:translateY(10px);transition:opacity .8s,transform .8s;pointer-events:none}
#afterLetter.on{opacity:1;transform:none;pointer-events:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px 'Outfit',sans-serif;letter-spacing:.03em;padding:12px 20px;border-radius:999px;border:1px solid rgba(255,240,215,.7);background:rgba(255,250,242,.9);color:#4a2e20;cursor:pointer;text-decoration:none}
.btn.primary{background:#e9c46a;border-color:#e9c46a;color:#3a2410;box-shadow:0 6px 18px rgba(120,80,20,.35)}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#playMsg[hidden]{display:none}
/* gift */
#gift{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff6ea;text-align:center}
#gift[hidden]{display:none}
#gift .gh{font:700 30px 'Caveat',cursive;text-shadow:0 1px 8px rgba(0,0,0,.6)}
#scratch{position:relative;width:min(300px,86vw);height:170px;border-radius:12px;background:#fbf6ec;box-shadow:0 0 0 3px #c9a25a,0 14px 30px rgba(0,0,0,.4);touch-action:none;display:none;transform:scale(.9);opacity:0;transition:transform .5s,opacity .5s}
#scratch.on{display:block}
#scratch.in{transform:none;opacity:1}
#scUnder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 18px;color:#5a2f24}
#scUnder small{display:none;font:600 11px 'Outfit';letter-spacing:.26em;text-transform:uppercase;color:#a0784a;margin-bottom:6px}
#giftText{font:700 30px/1.12 'Caveat',cursive;overflow-wrap:anywhere}
#foil{position:absolute;inset:0;width:100%;height:100%;border-radius:12px}
#foil.fade{transition:opacity .8s;opacity:0;pointer-events:none}
#scLbl{font:600 13px 'Outfit';letter-spacing:.14em;text-transform:uppercase;color:#ffe9c2;text-shadow:0 1px 6px #000;min-height:1.2em}
#vidBox{position:fixed;inset:0;z-index:13;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:16px}
#vidBox.on{display:flex}
#vidBox video{max-width:100%;max-height:75vh;border-radius:10px;background:#000}
#confetti{position:fixed;inset:0;z-index:11;pointer-events:none}
body.fast #cardStage,body.fast #cardScene.push,body.fast #end,body.fast #afterLetter,body.fast #letter .p0,body.fast #letter .p2,body.fast #letterShadow,body.fast #tableStage,body.fast .ov,body.fast #endRow,body.fast #scratch,body.fast #foil.fade,body.fast #lb,body.fast #lbCard,body.fast #top,body.fast #bottom,body.fast #hint{transition-duration:.08s!important;transition-delay:0s!important}
body.fast #cover{transition-duration:.25s!important}

/* app fix 17/10: the closed lightbox's pill must not catch taps */
#lb:not(.on) .pill{pointer-events:none}