/* =====================================================================
   دعوة عقد قران عبدالرحمن وسلمى — Sunny café edition (3 pages)
   ---------------------------------------------------------------------
   TUNING (the only values you normally need to touch):
     --lace-o     strength of the lace frame            (0 = hidden, 1 = full)
     --lace-s     size of the lace frame on phones      (bigger = thicker lace)
   ONE image (lace-frame.png) is used for every page.
   ===================================================================== */

:root{
  /* bright café palette: apricot · peach · cream · coral · honey gold */
  --ink:#5a2f22;
  --ink2:#7b4532;
  --muted:#94634f;
  --coral:#d9715a;
  --coral-d:#c35c47;
  --gold:#c4862f;
  --gold-l:#f3c872;
  --cream:#fff8ee;
  --peach:#fadcbc;

  /* lace frame — the SAME image on every page  ← change these */
  --lace-o:1;        /* strength: 0 = hidden, 1 = full          */
  --lace-s:.62;      /* size on phones (bigger = thicker lace)  */
  --lace-gap:6px;    /* space between the page edge and lace    */
  /* border thickness derived from the image (keep these as they are) */
  --bw-x:calc(78.5px * var(--lace-s));
  --bw-y:calc(79px * var(--lace-s));
  --edge-x:calc(var(--bw-x) + var(--lace-gap));
  --edge-y:calc(var(--bw-y) + var(--lace-gap));

  --ease:cubic-bezier(.22,1,.36,1);
  --f-ar:"Tajawal","Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  --f-disp:"Aref Ruqaa","Amiri",serif;
  --f-lat:"Cormorant Garamond",Georgia,serif;
}
@media (min-width:700px){
  :root{--lace-s:.85;--lace-gap:10px}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#f6d2a9}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font-family:var(--f-ar);line-height:1.7;
  background:linear-gradient(180deg,#fde8cf 0%,#f8d4ad 34%,#fbe1c5 66%,#f4c99d 100%);
  overflow-x:hidden;
}
body.locked{overflow:hidden}
img{max-width:100%}
button,a{font:inherit}
button{color:inherit;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p{margin:0}

/* ---------------------------------------------------------------- utility layers */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
#progress{position:fixed;top:0;right:0;height:3px;width:0;z-index:300;
  background:linear-gradient(90deg,#f3b25c,#fff1c4,#e88a74)}

#musicBtn{
  position:fixed;z-index:250;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));
  width:46px;height:46px;border-radius:50%;border:1px solid #fff;
  background:#fffaf0e6;color:var(--coral-d);font-size:1.25rem;cursor:pointer;
  box-shadow:0 8px 22px #b0663d36;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transform:translateY(-10px);transition:.4s var(--ease)
}
#musicBtn.show{opacity:1;pointer-events:auto;transform:none}
#musicBtn.on span{display:inline-block;animation:note 1.6s ease-in-out infinite}
#toast{
  position:fixed;z-index:400;left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  max-width:min(90vw,420px);padding:11px 18px;border-radius:999px;
  background:#5a2f22f0;color:#fff4e2;font-size:.82rem;text-align:center;
  transform:translate(-50%,16px);opacity:0;visibility:hidden;transition:.35s var(--ease)
}
#toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------------------------------------------------------------- opening */
#opening{
  position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));text-align:center;overflow:hidden;
  background:radial-gradient(circle at 50% 36%,#fffaf1 0,#fde7cb 44%,#f6c99c 100%);
  transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease),visibility .6s
}
#opening.opened{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.07);filter:blur(8px)}
.op-glow{position:absolute;width:min(110vw,640px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fffaf0d0 0,#f7c98066 35%,transparent 68%);animation:breathe 3.2s ease-in-out infinite}
.op-star{position:absolute;font-style:normal;color:#f0b24d;text-shadow:0 0 12px #ffe3a8;pointer-events:none;
  animation:twinkle 3.4s ease-in-out infinite}
.o1{top:16%;left:14%;font-size:1.1rem}.o2{top:22%;right:13%;font-size:1.5rem;animation-delay:-.8s;color:#e98a74}
.o3{bottom:24%;left:11%;font-size:1.3rem;animation-delay:-1.6s}.o4{bottom:17%;right:16%;font-size:1rem;animation-delay:-2.2s;color:#e98a74}
.o5{top:11%;right:38%;font-size:.9rem;animation-delay:-2.8s}.o6{bottom:11%;left:36%;font-size:1.2rem;animation-delay:-1.2s}
.op-flash{position:absolute;inset:0;z-index:6;background:radial-gradient(circle at 50% 48%,#fff 0,#ffe8c4aa 22%,transparent 60%);opacity:0;pointer-events:none}
.op-ring{position:absolute;left:50%;top:48%;z-index:4;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;
  border:2px solid #f3b25c;opacity:0;pointer-events:none}
.op-eyebrow{position:relative;margin-bottom:22px;font:600 .74rem var(--f-lat);letter-spacing:.3em;color:var(--gold)}
.op-hint{position:relative;margin-top:18px;font-size:.92rem;color:var(--muted);animation:hint 2.4s ease-in-out infinite}

.gift{
  position:relative;display:block;width:min(78vw,320px);aspect-ratio:1.4/1;padding:0;border:1px solid #fff;
  border-radius:22px;cursor:pointer;overflow:hidden;touch-action:manipulation;
  background:linear-gradient(145deg,#fffbf3,#fdeacb 70%,#f6cf9d);
  box-shadow:inset 0 0 0 8px #ffffffa8,inset 0 0 38px #e6a05c26,0 22px 46px #b0663d46;
  animation:giftFloat 3.6s ease-in-out infinite
}
.gift:focus-visible{outline:3px solid var(--coral-d);outline-offset:5px}
.gift-sheen{position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 42%,#ffffffc0 50%,transparent 58%);
  transform:translateX(-60%);animation:sheen 4.2s ease-in-out infinite}
.rib{position:absolute;background:linear-gradient(90deg,#c9533f,#f0937a,#c14b39);box-shadow:0 2px 10px #8c2f2040}
.rib-v{top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%)}
.rib-h{left:0;right:0;top:50%;height:44px;transform:translateY(-50%);
  background:linear-gradient(180deg,#c9533f,#f0937a,#c14b39)}
.seal{
  position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;display:grid;grid-auto-flow:column;place-content:center;gap:2px;align-items:center;
  background:radial-gradient(circle at 35% 30%,#ffe6a6,#d99a3a 60%,#9a5f1c);
  border:3px double #fff3d6;color:#fffaf0;font:700 1rem var(--f-disp);
  box-shadow:0 6px 18px #8a561a55;transition:transform .35s var(--ease),filter .35s;animation:sealGlow 2.6s ease-in-out infinite
}
.seal b{font-weight:700}.seal i{font-style:normal;font-size:.7rem;color:#ffe0d6}
.gift-title{position:absolute;z-index:4;left:50%;bottom:11px;transform:translateX(-50%);padding:3px 14px;border-radius:999px;
  background:#fffaf0e8;color:var(--ink);font:700 .88rem var(--f-disp);white-space:nowrap}

#opening.go .gift{animation:giftBurst .75s .1s var(--ease) forwards}
#opening.go .seal{animation:none;transform:translate(-50%,-50%) scale(1.3);filter:brightness(1.25) drop-shadow(0 0 20px #ffd98a)}
#opening.go .rib{filter:brightness(1.3)}
#opening.go .op-flash{animation:flash .8s .12s ease-out forwards}
#opening.go .op-ring.r1{animation:ring .9s .08s ease-out forwards}
#opening.go .op-ring.r2{animation:ring 1.1s .22s ease-out forwards}
#opening.go .op-eyebrow,#opening.go .op-hint{opacity:0;transition:opacity .25s}
#burst{position:absolute;inset:0;z-index:5;pointer-events:none}
.dot{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);
  border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);opacity:0;
  animation:burst var(--d) var(--delay) var(--ease) forwards}

/* ---------------------------------------------------------------- shared page styling */
main{position:relative;z-index:1;overflow:hidden;overflow:clip}
.page{
  position:relative;isolation:isolate;overflow:hidden;
  width:calc(100% - 16px);max-width:1100px;margin:14px auto;border-radius:22px;
  min-height:calc(100vh - 28px);min-height:calc(100svh - 28px);
  display:grid;place-items:center;text-align:center;
  background:
    radial-gradient(circle at 18% 8%,#fffaf0 0,transparent 46%),
    radial-gradient(circle at 88% 92%,#f9b9a366 0,transparent 52%),
    linear-gradient(165deg,#fde3c2,#f6c995)
}
.js .reveal{opacity:0;filter:blur(6px);transform:translateY(14px) scale(.985);
  transition:opacity .85s var(--ease),filter .85s var(--ease),transform .85s var(--ease)}
.js .reveal.visible{opacity:1;filter:none;transform:none}

.sec-head{text-align:center;margin-bottom:30px}
.sec-head small,.doily-body small{display:block;color:var(--gold);font:700 .72rem var(--f-lat);letter-spacing:.3em}
.sec-head h2{margin-top:4px;font:400 clamp(2rem,8vw,3.3rem)/1.25 var(--f-disp);color:var(--ink)}

.divider{display:flex;align-items:center;justify-content:center;gap:12px;width:min(78%,620px);margin:4px auto;
  color:#fffaf0;opacity:1;pointer-events:none;text-shadow:0 2px 8px #b0663d66}
.divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#fffaf0e0)}
.divider span:last-child{transform:scaleX(-1)}
.divider i{font-style:normal}.divider b{font-weight:400;color:#ffd6c8;animation:pulse 2.4s ease-in-out infinite}

.orn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin:14px auto}
.orn span{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn span:last-child{transform:scaleX(-1)}
.orn.heart{color:var(--coral)}
.orn b{font-weight:400;display:inline-block;animation:pulse 2.6s ease-in-out infinite}
.js .orn span{width:0}
.words-on .orn span{width:64px;transition:width 1.1s var(--ease);transition-delay:calc(var(--t,0s) + .2s)}

/* ---------------------------------------------------------------- LACE FRAME (lace-frame.png, 9-slice)
   The same image frames every page.  Corners keep their real proportions and the
   straight edges repeat ("round") on rosette boundaries, so nothing is stretched or
   pixelated however tall the page gets.  Slices are measured from the image itself.  */
.lace-frame{padding:var(--edge-y) var(--edge-x)}
.lace-frame::before{
  content:"";position:absolute;inset:var(--lace-gap);z-index:1;pointer-events:none;
  border:solid transparent;
  border-width:var(--bw-y) var(--bw-x);
  border-image-source:url("lace-frame.png");
  border-image-slice:80.5 74.5 77.5 82.5;
  border-image-width:1;
  border-image-outset:0;
  border-image-repeat:round;
  opacity:var(--lace-o);
  filter:drop-shadow(0 1px 1px #8f4f3466) drop-shadow(0 4px 7px #b0663d40)
}
.lace-frame>*{position:relative;z-index:2}

/* ---------------------------------------------------------------- PAGE 1 · intro */
.hero-inner{padding:18px 0;max-width:760px;width:100%;min-width:0}
.moon{position:absolute!important;top:calc(var(--edge-y) + 4px);right:calc(var(--edge-x) + 4px);z-index:3;
  width:48px;height:48px;border-radius:50%;
  box-shadow:inset -14px 6px 0 0 #f4b94e,0 0 24px #f4b94e99;animation:moonFloat 6s ease-in-out infinite}
.tw{position:absolute!important;z-index:2;font-style:normal;color:#f0b24d;text-shadow:0 0 12px #ffe3a8;pointer-events:none;animation:twinkle 3.6s ease-in-out infinite}
.tw1{top:27%;left:calc(var(--edge-x) + 6px);font-size:1rem}
.tw2{top:44%;right:calc(var(--edge-x) + 4px);font-size:1.3rem;animation-delay:-1.1s;color:#e98a74}
.tw3{top:66%;left:calc(var(--edge-x) + 4px);font-size:1.2rem;animation-delay:-2.2s}
.tw4{top:80%;right:calc(var(--edge-x) + 8px);font-size:.95rem;animation-delay:-.5s;color:#e98a74}

/* staggered entrance (only when JS is on; the page is fully visible without it) */
.js .rise{opacity:0;transform:translateY(16px);filter:blur(6px)}
.words-on .rise{opacity:1;transform:none;filter:none;
  transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease);transition-delay:var(--t,0s)}

.basmala{font:400 clamp(1.2rem,5.2vw,1.6rem)/1.8 var(--f-disp);color:var(--gold)}
.verse{margin-top:4px;font:400 clamp(1rem,4.2vw,1.2rem)/2.05 var(--f-disp);color:var(--ink2)}
.verse small{display:block;margin-top:2px;font:500 .76rem var(--f-ar);letter-spacing:.1em;color:var(--muted)}

.invite{margin:4px 0 8px;font:400 clamp(2rem,9.6vw,3.7rem)/1.5 var(--f-disp);color:var(--ink);text-wrap:balance}
.invite .w{display:inline-block}
.js .invite .w{opacity:0;transform:translateY(14px) scale(.96);filter:blur(7px)}
.words-on .invite .w{opacity:1;transform:none;filter:none;
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease);transition-delay:var(--t,0s)}

.hero-lead{color:var(--ink2);font-size:clamp(.95rem,3.9vw,1.12rem);max-width:28em;margin-inline:auto;line-height:1.95}
.occasion{margin-top:6px;font:400 clamp(1.5rem,6.6vw,2.2rem) var(--f-disp);color:var(--coral-d)}

.ar-names{margin-top:2px;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2.2vw,18px);
  font:400 clamp(1.4rem,6.8vw,4rem)/1.35 var(--f-disp);white-space:nowrap}
.ar-names .nm{
  background:linear-gradient(110deg,#5a2f22,#c4604a,#5a2f22,#d08a3c,#5a2f22);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 8s linear infinite
}
/* replaces the plain "&" : a little heart held between two gold diamonds */
.amp{display:inline-flex;align-items:center;gap:.3em;font-size:.8em;line-height:1}
.amp b{font-weight:400;color:var(--coral);filter:drop-shadow(0 0 8px #e9867099);animation:pulse 2.2s ease-in-out infinite}
.amp i{width:.26em;height:.26em;background:linear-gradient(135deg,#fff1c8,var(--gold));transform:rotate(45deg);
  box-shadow:0 0 10px #f3c872}

.scroll-cue{position:absolute!important;left:50%;bottom:calc(var(--edge-y) + 2px);transform:translateX(-50%);
  width:26px;height:36px;display:block}
.scroll-cue span{display:block;width:1px;height:100%;margin:auto;background:linear-gradient(var(--coral),transparent);animation:cue 2s ease-in-out infinite}

body.revealing .hero-inner{animation:arrive .95s .1s var(--ease) both}

/* ---------------------------------------------------------------- PAGE 2 · date & place */
.details-in{width:100%;max-width:880px;margin:0 auto}

.cards{display:grid;grid-template-columns:1fr;gap:14px;margin:0 auto}
.info{padding:30px 18px;text-align:center;border-radius:22px;border:1px solid #fff;
  background:linear-gradient(145deg,#fffaf2f6,#fdebd2ee);box-shadow:0 16px 38px #b0663d30}
.info:nth-child(2){transition-delay:.12s!important}
.info i{width:54px;height:54px;margin:0 auto 12px;display:grid;place-items:center;font-style:normal;font-size:1.5rem;
  border:1.5px solid var(--gold-l);border-radius:50%;color:var(--coral-d);background:#fff6e4}
.info span{display:block;color:var(--gold);font-size:.8rem;letter-spacing:.12em;font-weight:500}
.info h3{margin:4px 0 2px;font:400 clamp(1.45rem,6vw,1.75rem)/1.4 var(--f-disp);color:var(--ink)}
.info p{color:var(--muted);font-size:.95rem}
.map{display:flex;align-items:center;justify-content:center;gap:10px;width:min(100%,320px);min-height:50px;margin:28px auto 0;
  border-radius:999px;color:#fff;text-decoration:none;font-weight:700;
  background:linear-gradient(105deg,#c85a45,#dc8446,#c4862f);box-shadow:0 14px 30px #c4604a50;transition:transform .3s var(--ease)}
.map:active{transform:scale(.97)}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}.map:hover{transform:translateY(-3px)}}

/* ---------------------------------------------------------------- PAGE 3 · countdown (doily) + dua */
.count{align-content:center;padding:28px 0 34px;overflow:hidden;overflow:clip;gap:6px}
.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.petals i{position:absolute;top:-24px;width:11px;height:16px;border-radius:75% 25% 75% 25%;
  background:linear-gradient(140deg,#fff0e6,#f4a58f);opacity:0;animation:petal var(--p,16s) linear infinite;animation-delay:var(--pd,0s)}
.petals i:nth-child(1){left:8%;--p:15s;--pd:-3s}.petals i:nth-child(2){left:22%;--p:19s;--pd:-11s;transform:scale(.8)}
.petals i:nth-child(3){left:41%;--p:17s;--pd:-7s}.petals i:nth-child(4){left:58%;--p:21s;--pd:-15s;transform:scale(.75)}
.petals i:nth-child(5){left:74%;--p:16s;--pd:-5s}.petals i:nth-child(6){left:88%;--p:20s;--pd:-13s;transform:scale(.85)}
.petals i:nth-child(7){left:50%;--p:23s;--pd:-18s;transform:scale(.7)}
.count>*:not(.petals){position:relative;z-index:2}

.doily{position:relative;width:min(88vw,400px);aspect-ratio:382/383;margin:0 auto}   /* = the image, so it is centred exactly */
.doily-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 1px 1px #8f4f3466) drop-shadow(0 4px 7px #b0663d40);animation:breathe2 6s ease-in-out infinite}
.doily-body{position:absolute;inset:13.4% 13.8% 13.4% 13.8%;   /* opening of the lace + a small margin, symmetric */
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.doily-body small{font-size:clamp(.56rem,2.3vw,.68rem)}
.doily-body h2{font:400 clamp(.98rem,4.1vw,1.38rem)/1.35 var(--f-disp);color:var(--ink);margin-bottom:7px;text-wrap:balance}
.counter{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.counter div{padding:7px 2px 5px;border-radius:14px;background:linear-gradient(145deg,#fffaf2f6,#fdeacfee);
  border:1px solid #fff;box-shadow:0 8px 18px #b0663d2e}
.counter b{display:block;font:400 clamp(1.5rem,7.4vw,2.2rem)/1.1 var(--f-disp);color:var(--coral-d);font-variant-numeric:tabular-nums}
.counter b.pop{animation:pop .5s var(--ease)}
.counter span{display:block;font-size:clamp(.62rem,2.6vw,.78rem);color:var(--muted)}
.count-note{font:400 1.3rem var(--f-disp);color:var(--ink)}

.dua{padding:6px 20px 0;max-width:640px;margin:0 auto}
.beat{width:50px;height:50px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;
  background:#fffaf0;color:var(--coral);font-size:1.4rem;box-shadow:0 0 0 9px #fffaf070,0 14px 30px #b0663d34;animation:beat 3.6s ease-in-out infinite}
.dua h2{font:400 clamp(1.55rem,6.8vw,2.7rem)/1.65 var(--f-disp);color:var(--ink);text-wrap:balance}

/* flourish under the dua */
.flourish{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;color:var(--coral)}
.flourish b{font-weight:400;font-size:1.35rem;display:inline-block;filter:drop-shadow(0 0 10px #e9867099);animation:pulse 2.4s ease-in-out infinite}
.fl-line{display:block;height:1.5px;width:min(24vw,110px);background:linear-gradient(90deg,transparent,var(--gold))}
.fl-line:last-child{transform:scaleX(-1)}
.fl-gem{width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(135deg,#fff1c8,var(--gold));box-shadow:0 0 10px #f3c872}
.js .fl-line{width:0}
.js .reveal.visible .fl-line{width:min(24vw,110px);transition:width 1.5s .5s var(--ease)}
.fl-dots{display:flex;justify-content:center;gap:16px;margin-top:8px;color:var(--gold)}
.fl-dots i{font-style:normal;font-size:.9rem;text-shadow:0 0 10px #ffe3a8;animation:twinkle 2.6s ease-in-out infinite}
.fl-dots i:nth-child(2){animation-delay:.3s}.fl-dots i:nth-child(3){animation-delay:.6s;color:var(--coral)}
.fl-dots i:nth-child(4){animation-delay:.9s}.fl-dots i:nth-child(5){animation-delay:1.2s}

/* ---------------------------------------------------------------- floating hearts (JS) */
.fh{position:fixed;bottom:-30px;z-index:35;pointer-events:none;color:#fffaf0;opacity:0;text-shadow:0 0 10px #ffb7a6bb;
  font-size:var(--sz);animation:rise var(--dur) linear forwards}

/* ---------------------------------------------------------------- keyframes */
@keyframes breathe{50%{transform:scale(1.1);opacity:.75}}
@keyframes breathe2{50%{transform:scale(1.025)}}
@keyframes giftFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-7px) rotate(1.2deg)}}
@keyframes sheen{0%,50%{transform:translateX(-60%)}85%,100%{transform:translateX(60%)}}
@keyframes sealGlow{50%{box-shadow:0 6px 18px #8a561a55,0 0 0 8px #ffe2a055}}
@keyframes hint{50%{opacity:.45;transform:translateY(2px)}}
@keyframes giftBurst{0%,22%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.34);filter:blur(10px)}}
@keyframes flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(5.5)}}
@keyframes burst{15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.15)}}
@keyframes arrive{from{opacity:0;filter:blur(12px);transform:scale(1.08)}to{opacity:1;filter:none;transform:none}}
@keyframes flow{to{background-position:250% 0}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(70deg)}}
@keyframes pulse{50%{transform:scale(1.2)}}
@keyframes moonFloat{50%{transform:translateY(-6px) rotate(-6deg)}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes note{50%{transform:translateY(-2px) rotate(-8deg)}}
@keyframes beat{0%,24%,100%{transform:scale(1)}8%{transform:scale(1.14)}14%{transform:scale(1.04)}}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.22);color:var(--gold)}100%{transform:scale(1)}}
@keyframes petal{0%{opacity:0;transform:translate3d(0,-20px,0) rotate(0)}10%{opacity:.8}90%{opacity:.6}100%{opacity:0;transform:translate3d(48px,105vh,0) rotate(500deg)}}
@keyframes rise{12%{opacity:.8}100%{opacity:0;transform:translate(var(--drift),-112vh) rotate(30deg)}}

/* ---------------------------------------------------------------- small phones */
@media (max-width:380px){
  :root{--lace-s:.54;--lace-gap:5px}
  .doily-body h2{font-size:.92rem}
  .counter b{font-size:1.4rem}
  .moon{width:40px;height:40px;box-shadow:inset -11px 5px 0 0 #f4b94e,0 0 18px #f4b94e99}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal,.js .rise,.js .invite .w{opacity:1;filter:none;transform:none}
  .js .orn span{width:64px}.js .fl-line{width:min(24vw,110px)}
  #fx,.petals{display:none}
}