/* =========================================================
   hatikode — kartu.css
   Contoh kado: XOXO Scrapbook (portrait)
   ========================================================= */

body.kartu-page{
  background:
    radial-gradient(70% 50% at 50% 0%, #3a1a2a 0%, transparent 70%),
    radial-gradient(60% 60% at 50% 100%, #2c1220 0%, transparent 70%),
    #170a12;
  min-height:100vh;
  padding:0;
}
body.kartu-page::before{opacity:.07;mix-blend-mode:overlay}

.phone{
  position:relative;
  width:100%;
  max-width:460px;
  margin:0 auto;
  background:#FFF8F0;
  color:var(--ink);
  min-height:100vh;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 40px 120px -20px rgba(0,0,0,.7);
  overflow-x:clip;
  isolation:isolate;
}
@media (min-width:520px){
  .phone{margin-block:24px;border-radius:34px;min-height:calc(100vh - 48px);overflow:hidden}
  .phone::after{
    content:"";
    position:absolute;inset:0;
    border-radius:34px;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(43,18,32,.08);
    z-index:80;
  }
}

/* progress + sound */
.pbar{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:70;
  background:transparent;
  pointer-events:none;
}
.pbar i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  transition:width .15s linear;
}
@media (min-width:520px){
  .pbar{max-width:460px;left:50%;transform:translateX(-50%);top:24px;border-radius:34px 34px 0 0;overflow:hidden}
}

.sound{
  position:fixed;
  right:18px;bottom:18px;
  z-index:75;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(43,18,32,.9);
  color:#f7e3cf;
  display:grid;place-items:center;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
  transition:transform .3s var(--ease), background .3s;
  opacity:0;
  pointer-events:none;
}
.sound.on{opacity:1;pointer-events:auto}
.sound:hover{transform:scale(1.06)}
.sound svg{width:19px;height:19px}
.sound .wave{display:none}
.sound.playing .wave{display:block}
.sound.playing .off-ico{display:none}
.sound.playing{background:var(--rose)}

/* ============ LOCK ============ */
.lock{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:52px 26px 40px;
  text-align:center;
  background:
    radial-gradient(70% 45% at 50% 8%, rgba(211,63,99,.35), transparent 70%),
    radial-gradient(50% 40% at 15% 85%, rgba(185,135,63,.2), transparent 70%),
    linear-gradient(170deg,#3b1828 0%,#25101c 55%,#170a12 100%);
  color:#f7e6d6;
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s;
}
.lock::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,226,190,.5) .7px, transparent .9px);
  background-size:13px 13px;
  opacity:.16;
  pointer-events:none;
}
.lock.leaving{opacity:0;transform:translateY(-40px) scale(.98);filter:blur(6px);pointer-events:none}

.lock-kicker{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#c9a48f;
  margin-bottom:6px;
}
.lock-name{
  font-family:var(--font-hand);
  font-size:clamp(56px,16vw,78px);
  line-height:.9;
  color:#ffe9d0;
  margin-bottom:4px;
  transform:rotate(-3deg);
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.lock-name span{color:#f4a9bd}

.lock-card{
  position:relative;
  width:min(100%,290px);
  margin:26px auto 22px;
  background:#FFF9F0;
  color:var(--plum-2);
  border-radius:14px;
  padding:16px 16px 14px;
  transform:rotate(-1.8deg);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.8), 0 2px 0 rgba(255,255,255,.6) inset;
}
.lock-card::before{ /* washi tape */
  content:"";
  position:absolute;
  top:-13px;left:50%;
  width:96px;height:26px;
  transform:translateX(-50%) rotate(2.5deg);
  background:repeating-linear-gradient(90deg,rgba(211,63,99,.35) 0 6px,rgba(211,63,99,.18) 6px 12px);
  border-radius:2px;
  backdrop-filter:blur(1px);
}
.lock-card .lc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:7.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9a7b6c;
  margin-bottom:10px;
}
.lc-body{display:flex;align-items:center;gap:12px}
.lc-body .num{
  font-family:var(--font-display);
  font-size:56px;
  line-height:.85;
  letter-spacing:-.04em;
  color:var(--rose-2);
}
.lc-body .txt{
  text-align:left;
  font-size:9.5px;
  line-height:1.4;
  color:#7a6357;
}
.lc-body .txt b{display:block;font-family:var(--font-hand);font-size:22px;color:var(--plum-2);line-height:1}
.lc-qr{
  margin-left:auto;
  width:84px;flex:none;
  background:#fff;
  border:1px solid #ecdbca;
  border-radius:8px;
  padding:5px;
}
.lc-qr canvas{width:100%;height:auto}

.lock h1{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.15;
  max-width:16ch;
  margin:0 auto 8px;
  color:#fff4e6;
}
.lock .sub{
  font-size:12.5px;
  line-height:1.6;
  color:#c4a795;
  max-width:30ch;
  margin:0 auto 22px;
}

.pass{
  width:100%;
  max-width:300px;
  margin:0 auto;
}
.pass-field{
  display:flex;
  gap:8px;
  background:rgba(255,249,240,.07);
  border:1px solid rgba(255,233,208,.22);
  border-radius:14px;
  padding:6px;
  transition:border-color .3s, background .3s;
}
.pass-field:focus-within{border-color:rgba(244,169,189,.7);background:rgba(255,249,240,.1)}
.pass-field input{
  flex:1;
  min-width:0;
  background:none;
  border:0;
  outline:none;
  color:#fff4e6;
  font-family:var(--font-mono);
  font-size:16px;
  letter-spacing:.34em;
  text-align:center;
  padding:9px 0 9px 8px;
}
.pass-field input::placeholder{color:#b99b8b;letter-spacing:.24em;font-size:12px}
.pass-field button{
  flex:none;
  width:44px;
  border-radius:10px;
  background:#ffe9d0;
  color:var(--plum-2);
  display:grid;place-items:center;
  transition:background .2s, transform .2s;
}
.pass-field button:hover{background:#fff;transform:translateX(1px)}
.pass-field button svg{width:18px;height:18px}

.pass-hint{
  margin-top:11px;
  font-size:11px;
  color:#a98a7b;
  line-height:1.5;
}
.pass-hint .hand{font-size:17px;color:#d8b7a3}
.pass-err{
  margin-top:9px;
  font-size:11.5px;
  color:#ffb3c3;
  min-height:16px;
  opacity:0;
  transition:opacity .25s;
}
.pass-err.show{opacity:1}

.demo-key{
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.12em;
  color:#8d7062;
  border-top:1px dashed rgba(255,233,208,.18);
  padding-top:12px;
  width:min(100%,300px);
}
.demo-key b{color:#e8c3a8;font-weight:500}

.shake{animation:shake .45s var(--ease)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}
}

/* ============ GIFT ============ */
.gift-body{display:none}
.gift-body.show{display:block;animation:giftIn .8s var(--ease) both}
@keyframes giftIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

.g-sec{
  padding:56px 26px;
  position:relative;
}
.g-sec--tight{padding-block:40px}

.g-kicker{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--rose-2);
  margin-bottom:12px;
}
.g-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(28px,7.4vw,34px);
  line-height:1.1;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.g-title em{font-style:italic;color:var(--rose)}
.g-lead{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--ink-2);
}

/* --- hero ulang tahun --- */
.bday{
  text-align:center;
  padding-top:64px;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(211,63,99,.1), transparent 70%),
    linear-gradient(180deg,#FFF8F0,#FDF2E6);
  position:relative;
  overflow:hidden;
}
.bday .g-kicker{justify-content:center}
.bday-title{
  font-family:var(--font-display);
  font-size:clamp(34px,9.5vw,42px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:6px;
}
.bday-title em{font-style:italic;color:var(--rose)}
.bday-name{
  font-family:var(--font-hand);
  font-size:clamp(50px,15vw,64px);
  line-height:.9;
  color:var(--rose-2);
  transform:rotate(-3deg);
  display:inline-block;
  margin-bottom:10px;
}
.bday-age{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:26px;
}
.bday-age b{
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:-.02em;
  color:var(--plum);
}

/* kue */
.cake-wrap{
  position:relative;
  width:min(100%,250px);
  margin:0 auto 8px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cake-wrap svg{width:100%;height:auto;overflow:visible}
.cake-wrap .hint-blow{
  position:absolute;
  left:50%;bottom:-6px;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
  transition:opacity .3s;
}
.cake-wrap.done .hint-blow{opacity:0}

.flame{
  transform-origin:50% 100%;
  animation:flicker 1.1s ease-in-out infinite;
  transition:opacity .35s, transform .35s;
}
.flame:nth-of-type(2){animation-delay:-.35s}
.flame:nth-of-type(3){animation-delay:-.7s}
@keyframes flicker{
  0%,100%{transform:scaleY(1) scaleX(1) rotate(-1deg)}
  35%{transform:scaleY(1.12) scaleX(.94) rotate(2deg)}
  70%{transform:scaleY(.92) scaleX(1.05) rotate(-2deg)}
}
.cake-wrap.done .flame{opacity:0;transform:scaleY(.1)}
.smoke{
  opacity:0;
  transition:opacity .4s;
}
.cake-wrap.done .smoke{animation:smokeUp 2.6s ease-out forwards}
@keyframes smokeUp{
  0%{opacity:.55;transform:translateY(0) scale(.7)}
  100%{opacity:0;transform:translateY(-34px) scale(1.5)}
}

.wish{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .8s var(--ease), opacity .6s;
}
.wish.show{max-height:220px;opacity:1}
.wish p{
  font-size:13.5px;
  line-height:1.8;
  color:var(--ink-2);
  padding-top:18px;
  max-width:32ch;
  margin-inline:auto;
}
.wish .hand{
  display:block;
  font-size:22px;
  color:var(--rose-2);
  margin-top:6px;
  transform:rotate(-2deg);
}

.scroll-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:30px;
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.scroll-cue i{
  width:1px;height:30px;
  background:linear-gradient(180deg,var(--line-2),transparent);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{transform:scaleY(.4);opacity:.3;transform-origin:top}
  50%{transform:scaleY(1);opacity:1;transform-origin:top}
}

/* --- surat --- */
.letter{
  background:#FFFDF8;
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 22px;
  box-shadow:0 18px 40px -28px rgba(74,34,51,.5);
  position:relative;
  background-image:
    linear-gradient(rgba(217,198,178,.28) 1px, transparent 1px);
  background-size:100% 29px;
  background-position:0 22px;
}
.letter p{
  font-size:13.5px;
  line-height:29px;
  color:#4a3b35;
  min-height:29px;
}
.letter p + p{margin-top:29px}
.letter .sig{
  font-family:var(--font-hand);
  font-size:26px;
  color:var(--rose-2);
  margin-top:18px;
  line-height:1;
  transform:rotate(-3deg);
  display:inline-block;
}
.letter .cursor{
  display:inline-block;
  width:6px;height:14px;
  background:var(--rose);
  vertical-align:-1px;
  animation:blink 1s steps(1) infinite;
  margin-left:2px;
}
@keyframes blink{50%{opacity:0}}
.letter-tools{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}
.letter-tools button{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:6px 0;
  border-bottom:1px solid var(--line-2);
}
.letter-tools button:hover{color:var(--rose-2);border-color:var(--rose)}

/* --- foto --- */
.foto-sec{background:#FBF0E4;border-block:1px solid var(--line)}
.pols{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:18px 26px 22px;
  margin-inline:-26px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.pols::-webkit-scrollbar{display:none}
.pol{
  flex:0 0 176px;
  background:#FFFDF8;
  padding:9px 9px 0;
  border-radius:3px;
  box-shadow:0 12px 26px -16px rgba(74,34,51,.55);
  transform:rotate(var(--rot,-2deg));
  transition:transform .4s var(--ease), box-shadow .4s;
  scroll-snap-align:center;
  cursor:zoom-in;
  border:0;
  text-align:left;
  color:inherit;
}
.pol:nth-child(2n){--rot:2.4deg}
.pol:nth-child(3n){--rot:-1.2deg}
.pol:hover{transform:rotate(0) translateY(-4px);box-shadow:0 20px 34px -16px rgba(74,34,51,.5)}
.ph{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1.12;
  overflow:hidden;
  background:
    radial-gradient(24% 18% at 64% 34%, rgba(255,247,220,.95), transparent 68%),
    linear-gradient(180deg,transparent 54%,rgba(45,18,28,.42) 54.4%,rgba(20,8,14,.86) 100%),
    radial-gradient(95% 42% at 50% 104%, rgba(58,24,34,.6), transparent 72%),
    linear-gradient(180deg,#f7cdb6 0%,#eaa98c 44%,#b97263 58%,#4a2b32 100%);
  border-radius:1px;
}
.ph::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(125% 105% at 50% 45%, transparent 52%, rgba(30,10,20,.42) 100%);
}
.ph::after{
  content:"";
  position:absolute;inset:0;
  opacity:.22;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph--2{
  background:
    radial-gradient(42% 26% at 28% 72%, rgba(255,198,120,.75), transparent 70%),
    radial-gradient(34% 22% at 76% 64%, rgba(150,205,255,.5), transparent 70%),
    radial-gradient(90% 40% at 50% 106%, rgba(10,16,26,.85), transparent 72%),
    linear-gradient(180deg,#1b2740 0%,#283a55 52%,#0f1626 100%);
}
.ph--3{
  background:
    radial-gradient(34% 32% at 70% 28%, rgba(255,228,176,.95), transparent 64%),
    radial-gradient(60% 50% at 20% 90%, rgba(60,30,26,.6), transparent 70%),
    linear-gradient(160deg,#e8c9a6,#a9765c 58%,#4a2f2a);
}
.ph--4{
  background:
    radial-gradient(28% 24% at 34% 22%, rgba(255,222,240,.9), transparent 64%),
    radial-gradient(50% 40% at 80% 80%, rgba(40,20,50,.6), transparent 70%),
    linear-gradient(170deg,#bda3d4,#7a5f96 56%,#2f2238);
}
.ph--5{
  background:
    radial-gradient(38% 28% at 62% 32%, rgba(255,242,196,.95), transparent 64%),
    radial-gradient(80% 40% at 50% 104%, rgba(70,40,20,.6), transparent 72%),
    linear-gradient(180deg,#f6dca8,#d9a35a 52%,#7a4c25);
}
.ph--6{
  background:
    radial-gradient(32% 26% at 72% 20%, rgba(255,252,242,.9), transparent 60%),
    linear-gradient(180deg,transparent 52%,rgba(40,58,72,.45) 52.4%,rgba(18,26,34,.9) 100%),
    linear-gradient(180deg,#d3e0ee,#93a9c4 44%,#4c6480 70%,#26343f);
}
.pol figcaption{
  font-family:var(--font-hand);
  font-size:16px;
  color:#5a4438;
  padding:9px 3px 11px;
  line-height:1;
}

/* --- lagu --- */
.player{
  display:flex;
  align-items:center;
  gap:14px;
  background:#2C1220;
  color:#f7e6d6;
  border-radius:18px;
  padding:14px;
  box-shadow:0 20px 40px -26px rgba(43,18,32,.9);
}
.pl-btn{
  flex:none;
  width:46px;height:46px;
  border-radius:50%;
  background:var(--rose);
  color:#fff;
  display:grid;place-items:center;
  transition:transform .2s, background .2s;
}
.pl-btn:hover{transform:scale(1.05);background:#e04f74}
.pl-btn svg{width:17px;height:17px}
.pl-btn .ico-pause{display:none}
.player.playing .pl-btn .ico-pause{display:block}
.player.playing .pl-btn .ico-play{display:none}

.pl-meta{flex:1;min-width:0}
.pl-meta b{
  display:block;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl-meta small{font-size:10px;color:#b29485;letter-spacing:.04em}
.pl-bars{
  display:flex;
  align-items:flex-end;
  gap:2.5px;
  height:26px;
  margin-top:8px;
}
.pl-bars i{
  flex:1;
  background:linear-gradient(180deg,#f4a9bd,#D33F63);
  border-radius:2px;
  height:20%;
  opacity:.55;
  transition:height .25s ease, opacity .25s;
}
.player.playing .pl-bars i{opacity:1;animation:bar 1.2s ease-in-out infinite alternate}
.player.playing .pl-bars i:nth-child(2n){animation-duration:.85s}
.player.playing .pl-bars i:nth-child(3n){animation-duration:1.45s}
@keyframes bar{from{height:18%}to{height:100%}}

/* --- timeline --- */
.tl{position:relative;margin-top:24px;padding-left:26px}
.tl::before{
  content:"";
  position:absolute;left:5px;top:6px;bottom:6px;
  width:1px;
  background:linear-gradient(180deg,var(--rose),var(--line-2));
}
.tl-item{position:relative;padding-bottom:26px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";
  position:absolute;left:-25px;top:5px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--rose);
}
.tl-date{
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.tl-item h4{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:500;
  letter-spacing:-.01em;
  margin:3px 0 4px;
}
.tl-item p{font-size:12.5px;line-height:1.65;color:var(--ink-2)}

/* --- counter --- */
.counter{
  background:#2C1220;
  color:#f7e6d6;
  border-radius:20px;
  padding:24px 22px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.counter::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,226,190,.4) .6px, transparent .8px);
  background-size:12px 12px;
  opacity:.15;
}
.counter .g-kicker{color:#e9b06b;justify-content:center;position:relative}
.counter .big{
  font-family:var(--font-display);
  font-size:clamp(44px,12vw,54px);
  line-height:1;
  letter-spacing:-.03em;
  color:#ffe9d0;
  position:relative;
}
.counter .big small{
  font-family:var(--font-sans);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#c9a48f;
  display:block;
  margin-top:8px;
}
.counter .clock{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  color:#d9b6a1;
  margin-top:14px;
  position:relative;
  font-variant-numeric:tabular-nums;
}

/* --- voice note --- */
.vn{
  display:flex;
  align-items:center;
  gap:12px;
  background:#FFFDF8;
  border:1px solid var(--line);
  border-radius:999px 18px 18px 999px;
  padding:10px 16px 10px 10px;
  box-shadow:0 14px 30px -24px rgba(74,34,51,.6);
}
.vn-btn{
  flex:none;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--rose);
  color:#fff;
  display:grid;place-items:center;
}
.vn-btn svg{width:16px;height:16px}
.vn-btn .ico-pause{display:none}
.vn.playing .vn-btn .ico-pause{display:block}
.vn.playing .vn-btn .ico-play{display:none}
.vn-wave{
  flex:1;
  display:flex;
  align-items:center;
  gap:2px;
  height:26px;
  overflow:hidden;
}
.vn-wave i{
  flex:1;
  background:var(--line-2);
  border-radius:2px;
  height:30%;
  transition:background .2s, height .2s;
}
.vn.playing .vn-wave i{background:var(--rose);animation:vnbar 1.1s ease-in-out infinite alternate}
.vn.playing .vn-wave i:nth-child(2n){animation-duration:.8s}
.vn.playing .vn-wave i:nth-child(3n){animation-duration:1.4s}
@keyframes vnbar{from{height:22%}to{height:100%}}
.vn-time{
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--ink-3);
  flex:none;
}
.vn-cap{
  margin-top:12px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-2);
  min-height:44px;
  font-style:italic;
}

/* --- akhir --- */
.end{
  text-align:center;
  padding:56px 26px 44px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(211,63,99,.12), transparent 70%),
    linear-gradient(180deg,#FDF2E6,#FFF8F0);
}
.end .heart-big{
  width:52px;height:52px;
  margin:0 auto 20px;
  color:var(--rose);
  animation:beat 2.4s ease-in-out infinite;
}
@keyframes beat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.14)}
  28%{transform:scale(1)}
  42%{transform:scale(1.1)}
}
.end h2{
  font-family:var(--font-display);
  font-size:clamp(26px,7.6vw,32px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.025em;
  max-width:18ch;
  margin:0 auto 14px;
}
.end h2 em{font-style:italic;color:var(--rose)}
.end p{font-size:13px;line-height:1.75;color:var(--ink-2);max-width:30ch;margin:0 auto 20px}
.end .sig{
  font-family:var(--font-hand);
  font-size:30px;
  color:var(--rose-2);
  transform:rotate(-3deg);
  display:inline-block;
}
.end .made{
  margin-top:34px;
  padding-top:20px;
  border-top:1px dashed var(--line-2);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.end .made a{color:var(--rose-2);border-bottom:1px solid currentColor}

/* lightbox */
.lb{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(23,10,18,.94);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  padding:26px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.lb.open{opacity:1;pointer-events:auto}
.lb-inner{
  width:min(100%,340px);
  background:#FFFDF8;
  padding:12px 12px 0;
  border-radius:4px;
  transform:scale(.94) rotate(-1deg);
  transition:transform .35s var(--ease);
}
.lb.open .lb-inner{transform:scale(1) rotate(-1deg)}
.lb .ph{aspect-ratio:1/1.15}
.lb figcaption{
  font-family:var(--font-hand);
  font-size:19px;
  color:#5a4438;
  padding:12px 4px 16px;
  text-align:center;
}
.lb-close{
  position:absolute;
  top:18px;right:18px;
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  display:grid;place-items:center;
}
.lb-close svg{width:18px;height:18px}

/* reveal inside card */
.rv{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .cake-wrap .flame{animation:none}
  .end .heart-big{animation:none}
}

/* confetti canvas */
.confetti{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
}
@media (min-width:520px){
  .confetti{max-width:460px;left:50%;transform:translateX(-50%)}
}