/* ===== extras2: open-on capsules, plane, candles ===== */
/* ---- open on…: folded notes, each closed with a wax seal ---- */
.cap-list{display:grid;gap:18px;max-width:420px;margin:0 auto}
.cap{position:relative;display:block;width:100%;min-height:152px;padding:0;border:0;border-radius:6px;text-align:center;cursor:pointer;font:inherit;color:var(--ink);-webkit-tap-highlight-color:transparent;perspective:900px;
  background: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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(175deg,#fffdf8 0%,#fbf3e6 100%);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(154,106,18,.16),0 2px 4px rgba(111,29,71,.06),0 18px 30px -22px rgba(111,29,71,.55);transition:transform .35s var(--ease)}
.cap::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,160,70,.45);border-radius:3px;pointer-events:none}
.cap:active{transform:scale(.985)}
.cap-under{position:absolute;left:34px;right:34px;top:30px;display:flex;flex-direction:column;gap:9px;opacity:0;transition:opacity .4s ease}
.cap-under i{display:block;height:1.5px;border-radius:1px;background:rgba(163,44,99,.22)}.cap-under i:nth-child(2){width:86%}.cap-under i:nth-child(3){width:62%}
.cap-flap{position:absolute;left:0;right:0;top:0;height:62px;z-index:2;display:flex;align-items:flex-start;justify-content:center;padding-top:20px;box-sizing:border-box;border-radius:6px 6px 0 0;
  background: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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#fbf2e2 0%,#f5e6cf 100%);box-shadow:0 0 0 1px rgba(154,106,18,.14),0 7px 9px -6px rgba(111,29,71,.28);
  transform-origin:50% 0;transform:rotateX(0);transition:transform .8s cubic-bezier(.5,0,.25,1),box-shadow .8s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cap-flap::after{content:"";position:absolute;inset:7px 7px 0;border:1px solid rgba(201,160,70,.4);border-bottom:0;border-radius:3px 3px 0 0;pointer-events:none}
.cap-flap small{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d)}
.cap-seal{position:absolute;left:50%;top:62px;z-index:3;width:54px;height:54px;margin:-27px 0 0 -27px;filter:drop-shadow(0 3px 3px rgba(77,13,38,.32));transition:transform .5s var(--ease),opacity .5s ease}
.cap-wax{display:block;width:100%;height:100%;overflow:visible}
.cap-txt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:96px 18px 20px}
.cap-txt b{font-family:var(--serif);font-variant-numeric:lining-nums;font-size:28px;font-weight:600;line-height:1.05;color:var(--berry)}
.cap.locked .cap-txt b{color:#8b4a69}
.cap-when{display:flex;align-items:center;gap:6px;font-style:normal;font:400 13px/1.2 var(--sans);letter-spacing:.06em;color:var(--rose);margin-top:6px}
.cap.locked .cap-when{color:#9b8790}
.cap-lk svg{display:block;width:11px;height:11px;color:#b09aa4}
.cap.open:not(.seen) .cap-seal::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 0 rgba(242,193,78,.55);animation:capPing 2.2s ease-out infinite}
@keyframes capPing{70%{box-shadow:0 0 0 12px rgba(242,193,78,0)}100%{box-shadow:0 0 0 0 rgba(242,193,78,0)}}
.cap.shake .cap-seal{animation:capShake .55s cubic-bezier(.36,.07,.19,.97)}
.cap.shake{animation:capNudge .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes capShake{20%{transform:rotate(-9deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
@keyframes capNudge{30%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
/* opening: the seal cracks and lifts, the fold opens up, the note rises */
.cap.opening{animation:capRise 1.05s var(--ease)}
.cap.opening .cap-seal{transform:translateY(-10px) scale(1.12) rotate(-14deg);opacity:0;transition:transform .45s var(--ease),opacity .4s ease .1s}
.cap.opening .cap-flap{transform:rotateX(-178deg);box-shadow:0 0 0 1px rgba(154,106,18,.1),0 -6px 12px -6px rgba(111,29,71,.2);transition-delay:.18s}
.cap.opening .cap-under{opacity:1;transition-delay:.5s}
@keyframes capRise{0%{transform:none}60%{transform:translateY(-6px)}100%{transform:translateY(-4px)}}
.cap-sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(40,16,30,0);transition:background .35s ease;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
.cap-sheet[hidden]{display:none}
.cap-sheet.show{background:rgba(40,16,30,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cap-paper{position:relative;width:min(100%,380px);padding:40px 26px 22px;border-radius:4px;text-align:left;color:var(--ink);
  background: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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#fffdf7,#fbf2e2);box-shadow:0 0 0 1px rgba(154,106,18,.16),0 30px 60px -20px rgba(30,8,20,.7);
  opacity:0;transform:translateY(46px) scale(.96);transition:opacity .4s ease,transform .65s var(--ease)}
.cap-paper::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,160,70,.42);border-radius:2px;pointer-events:none}
.cap-paper-seal{position:absolute;left:50%;top:-22px;width:46px;height:46px;margin-left:-23px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 36% 30%,#fff1c2 0%,#e9bd55 32%,#a8781c 78%,#5e400c 100%);box-shadow:0 3px 6px rgba(77,13,38,.35),inset 0 0 0 7px rgba(94,64,12,.18)}
.cap-paper-seal::after{content:"♥";position:absolute;inset:0;display:grid;place-items:center;font-size:19px;line-height:1;color:#c8962e;text-shadow:-.5px -.5px 0 rgba(255,250,220,.6),.6px .8px 0 rgba(94,64,12,.5)}
.cap-sheet.show .cap-paper{opacity:1;transform:none}
.cap-sheet-when{font-variant-numeric:lining-nums;margin:0 0 16px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);text-align:center}
.cap-sheet-text{position:relative;z-index:1;margin:0;font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--berry-d)}
.cap-sheet-sign{margin:12px 0 0;text-align:right;font-family:var(--script);font-size:31px;color:var(--rose)}
.cap-close{display:block;margin:14px auto 0;border:1px solid rgba(201,160,70,.55);background:transparent;color:var(--gold-d);border-radius:999px;padding:9px 20px;font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.cap-open body{overflow:hidden}
.cap-paper-in{position:relative;z-index:1;max-height:72vh;overflow:auto}
@media (prefers-reduced-motion: reduce){.cap,.cap-flap,.cap-seal,.cap-paper,.cap-sheet,.cap-under{transition:none!important;animation:none!important}.cap.open:not(.seen) .cap-seal::after{animation:none}}

/* ---- the plane: in the open space after the first-date card, never over a photo ---- */
.flight{position:relative;list-style:none;margin:-34px 0 6px;padding:0 0 0 42px;pointer-events:none}
.fl-svg{display:block;width:100%;max-width:440px;height:auto;overflow:visible}
.fl-trail{fill:none;stroke:url(#flTrail);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fl-haze{fill:none;stroke:rgba(242,193,78,.16);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:blur(2.5px)}
.fl-jet{transition:opacity .9s ease}
.fl-body{fill:url(#flGold);stroke:#8a6114;stroke-width:.35;stroke-linejoin:round}
.fl-shadow{fill:rgba(111,29,71,.16)}
.fl-shine{stroke:rgba(255,250,228,.9);stroke-width:.7;stroke-linecap:round}
.flight.gone .fl-jet{opacity:0}
.fl-words{margin:-26px 0 0;padding-right:12px;text-align:right;font-family:var(--script);font-size:34px;line-height:1.1;color:var(--berry);
  opacity:0;transform:translateY(8px);filter:blur(3px);transition:opacity 1.4s ease .2s,transform 1.6s var(--ease) .2s,filter 1.4s ease .2s}
.fl-words::after{content:"";display:block;width:84px;height:1px;margin:6px 6px 0 auto;background:linear-gradient(90deg,rgba(242,193,78,0),rgba(242,193,78,.85))}
.flight.landed .fl-words{opacity:1;transform:none;filter:none}
@keyframes plFly{from{opacity:0}to{opacity:1}}
@media (min-width:600px){.flight{padding-left:56px}}
@media (prefers-reduced-motion: reduce){.fl-words,.fl-jet{transition:none}}

/* ---- blow out the candles: a dark, candle-lit stage ---- */
.ck-stage{position:relative;max-width:420px;margin:0 auto;padding:26px 18px 26px;border-radius:28px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 70% at 50% 30%,#3a1828 0%,#21101a 48%,#120910 100%);box-shadow:0 0 0 1px rgba(242,193,78,.28),0 30px 60px -30px rgba(40,10,25,.9);
  --lit:1;transition:background 1.2s ease}
.ck-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:calc(.35 + .65 * var(--lit));transition:opacity 1.4s ease;
  background:radial-gradient(42% 30% at 50% 26%,rgba(255,190,110,.32),transparent 72%),radial-gradient(3px 3px at 14% 22%,rgba(255,220,160,.55),transparent),radial-gradient(4px 4px at 86% 16%,rgba(255,200,160,.45),transparent),
  radial-gradient(18px 18px at 10% 64%,rgba(242,193,78,.13),transparent),radial-gradient(26px 26px at 90% 58%,rgba(227,118,157,.14),transparent),radial-gradient(14px 14px at 78% 84%,rgba(242,193,78,.12),transparent)}
.cake{max-width:300px;margin:0 auto}
.cake-svg{display:block;width:100%;height:auto;overflow:visible}
.cake-svg>*:not(.ck-bloom){transition:filter 1.4s ease}
.ck-stage.dim .cake-svg>*:not(.ck-bloom){filter:brightness(.62) saturate(.85)}
.ck-bloom{opacity:var(--lit);transition:opacity 1.2s ease;mix-blend-mode:screen}
.ck-warm{opacity:var(--lit);transition:opacity 1.2s ease}
.cdl{cursor:pointer}
.cdl .fl{transition:opacity .22s ease}
.cdl .flame{transform-box:fill-box;transform-origin:50% 100%;animation:ckFlick 2.2s ease-in-out infinite;transition:transform .25s ease}
.cdl[data-i="1"] .flame{animation-duration:1.7s;animation-delay:-.6s}.cdl[data-i="2"] .flame{animation-duration:2.6s;animation-delay:-1.1s}
@keyframes ckFlick{0%,100%{transform:scale(1,1) skewX(0)}18%{transform:scale(.97,1.05) skewX(-2deg)}35%{transform:scale(1.02,.97) skewX(1.5deg)}52%{transform:scale(.96,1.07) skewX(-1deg)}70%{transform:scale(1.03,.98) skewX(2deg)}86%{transform:scale(.98,1.03) skewX(-.5deg)}}
.cdl .glow{transform-box:fill-box;transform-origin:50% 50%;animation:ckGlow 1.9s ease-in-out infinite alternate}
@keyframes ckGlow{0%{opacity:.85;transform:scale(1)}100%{opacity:1;transform:scale(1.08)}}
.cdl .ember{opacity:0}
.cdl .smoke path{fill:none;stroke:rgba(225,215,220,.5);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70;opacity:0;filter:url(#ckBlur)}
.cdl.out .fl{opacity:0}
.cdl.out .flame,.cdl.out .glow{animation:none}
.cdl.out .ember{animation:ckEmber 1.6s ease-out forwards}
@keyframes ckEmber{0%{opacity:1}100%{opacity:0}}
.cdl.out .smoke path{animation:ckSmoke 2.8s cubic-bezier(.3,.6,.4,1) forwards}
.cdl.out .smoke path+path{animation-duration:3.3s;animation-delay:.15s}
@keyframes ckSmoke{0%{opacity:0;stroke-dashoffset:70;transform:translate(0,0)}12%{opacity:.75}100%{opacity:0;stroke-dashoffset:0;transform:translate(3px,-14px) scaleX(1.6)}}
.ck-spark{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.cake-msg{position:relative;z-index:4;margin:8px 0 0;min-height:1.3em;text-align:center;font:500 italic 24px/1.3 var(--serif);letter-spacing:.005em;color:#f5d58c;
  opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity 1.4s ease,transform 1.6s var(--ease),filter 1.4s ease}
.cake-msg.show{opacity:1;transform:none;filter:none}
.ck-gold{background:linear-gradient(120deg,#f7d98a,#f2c14e 45%,#f7a9c2);-webkit-background-clip:text;background-clip:text;color:transparent}
.ck-emo{font-style:normal;font-size:20px}
.cake-ctl{position:relative;z-index:4;text-align:center;margin-top:10px}
.cake-mic{position:relative;overflow:hidden;border:0;border-radius:999px;padding:12px 22px;background:rgba(255,240,225,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f7dfa6;font:500 14.5px/1 var(--sans);letter-spacing:.03em;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(242,193,78,.45),0 10px 24px -14px rgba(0,0,0,.8);-webkit-tap-highlight-color:transparent;transition:box-shadow .15s ease}
.cake-mic.on{box-shadow:inset 0 0 0 1px rgba(247,169,194,.8),0 0 0 calc(var(--lvl,0) * 12px) rgba(247,169,194,.18),0 10px 24px -14px rgba(0,0,0,.8)}
.cake-or{margin:10px 0 0;font-size:12.5px;letter-spacing:.06em;color:rgba(246,226,214,.6)}
@media (prefers-reduced-motion: reduce){.cdl .flame,.cdl .glow{animation:none!important}.cdl.out .smoke path,.cdl.out .ember{animation:none}.cake-msg,.ck-sky,.ck-bloom,.ck-warm,.cake-svg>*{transition:none!important}}