/* ==========================================================
   Birthday Gift — Love Edition
   Mobile-first. Palette = rose / blush / crimson / wine.
   ========================================================== */

:root{
  --blush: #ffe3ec;
  --blush-2: #ffc2d6;
  --pink: #ff4f81;
  --rose: #e11d5a;
  --crimson: #c1123f;
  --wine: #5a0f2e;
  --gold: #ffc857;
  --cream: #fff6f8;
  --white: #fff;

  --photo: clamp(210px, 60vw, 300px);
  --font-title: "Titan One", "Arial Black", Impact, sans-serif;
  --font-hand: "Sriracha", "Segoe Print", "Comic Sans MS", cursive;
  --font-script: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
}

*{ padding:0; margin:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{ min-height:100%; }

body{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  font-size:16px;
  color:var(--wine);
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.95) 0, transparent 42%),
    radial-gradient(circle at 92% 88%, #ff8fb3 0, transparent 46%),
    linear-gradient(160deg, #ffdfe9 0%, #ffbfd2 55%, #ffa3c0 100%);
  background-attachment: fixed;
  overflow-x:hidden;
}

/* ---------- Wrapper + soft grid ---------- */
#wrapper{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  z-index:1;
  background-image:
    linear-gradient(0deg, transparent 24%, rgba(255,255,255,.55) 25%, rgba(255,255,255,.55) 26%, transparent 27%, transparent 74%, rgba(255,255,255,.55) 75%, rgba(255,255,255,.55) 76%, transparent 77%),
    linear-gradient(90deg, transparent 24%, rgba(255,255,255,.55) 25%, rgba(255,255,255,.55) 26%, transparent 27%, transparent 74%, rgba(255,255,255,.55) 75%, rgba(255,255,255,.55) 76%, transparent 77%);
  background-size:72px 72px;
}

/* ---------- Floating background hearts ---------- */
.bg-hearts{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg-heart{
  position:absolute; bottom:-60px;
  opacity:0;
  animation: floatUp var(--d,12s) linear var(--delay,0s) infinite;
}
@keyframes floatUp{
  0%   { transform: translate3d(0,0,0) scale(.8); opacity:0; }
  10%  { opacity: var(--o,.4); }
  50%  { transform: translate3d(var(--sway,20px), -55vh, 0) scale(1); }
  90%  { opacity: var(--o,.4); }
  100% { transform: translate3d(calc(var(--sway,20px) * -1), -112vh, 0) scale(1.15); opacity:0; }
}

/* ---------- Bunting flags ---------- */
.flag__birthday{
  position:absolute; top:-6px; left:0; right:0;
  display:flex; justify-content:center;
  z-index:3; pointer-events:none;
  transform:translateY(-120px);
  animation: dropFlag 1.1s .2s cubic-bezier(.2,1.2,.4,1) forwards;
}
.flag__birthday img{ width:54%; max-width:380px; height:auto; }
.flag__birthday .flag__left{ transform: rotate(-3deg) translateX(6px); }
.flag__birthday .flag__right{ transform: rotate(3deg) translateX(-6px) scaleX(-1); }
@keyframes dropFlag{ to{ transform:translateY(0); } }

/* ---------- Main grid (mobile: one column) ---------- */
.content{
  position:relative; z-index:2;
  display:grid;
  grid-template-areas: "title" "photo" "date" "btn";
  justify-items:center;
  align-items:center;
  align-content:center;
  min-height:100vh; min-height:100svh;
  row-gap:clamp(18px, 3.4svh, 30px);
  padding: clamp(58px, 15vw, 84px) 20px 92px;
  max-width:1200px; margin:0 auto;
}

/* ---------- Title ---------- */
.title{
  grid-area:title;
  position:relative; z-index:4;
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--font-title);
  font-size:clamp(2.4rem, 14vw, 3.9rem);
  line-height:1.08;
  letter-spacing:.03em;
}
.title h1{
  position:relative;
  display:inline-flex; justify-content:center;
  font-size:1em;
  font-weight:400;
  text-shadow:
     .07em .07em 0 var(--wine),
    -.07em .07em 0 var(--wine),
     .07em -.07em 0 var(--wine),
    -.07em -.07em 0 var(--wine),
     .07em .13em 0 var(--wine);
}
.title .happy{ color:var(--white); }
.title .birthday{ color:var(--pink); }
.title h1 span{
  display:inline-block;
  transform:translateY(40px) scale(.6);
  opacity:0; visibility:hidden;
  animation: popLetter .55s var(--t) cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes popLetter{ to{ transform:none; opacity:1; visibility:visible; } }

.title .hat{
  position:absolute;
  right:-.35em; top:-1.05em;
  width:1.4em; z-index:-1;
  transform-origin: 30% 100%;
  opacity:0;
  animation: dropHat 1.2s 3.1s cubic-bezier(.2,1.3,.4,1) forwards;
  pointer-events:none;
}
.title .hat img{ display:block; width:100%; height:auto; filter:drop-shadow(0 4px 4px rgba(90,15,46,.25)); }
@keyframes dropHat{
  0%  { opacity:0; transform: translateY(-260px) rotate(-50deg); }
  60% { opacity:1; transform: translateY(6px) rotate(14deg); }
  100%{ opacity:1; transform: translateY(0) rotate(10deg); }
}

/* ---------- Photo ---------- */
.box__account{
  grid-area:photo;
  position:relative;
  width:var(--photo); height:var(--photo);
  transform:translateY(90vh);
  animation: risePhoto 2.2s 2.2s cubic-bezier(.16,.9,.3,1.08) forwards;
}
@keyframes risePhoto{ to{ transform:translateY(0); } }

.box__account .image{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  border:6px solid var(--wine);
  background:var(--blush-2);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.75),
    0 20px 44px rgba(193,18,63,.38);
  z-index:2;
}
.box__account .image img{ width:100%; height:100%; object-fit:cover; display:block; }

.box__account::before{               /* heartbeat glow */
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:3px solid rgba(255,79,129,.55);
  animation: beatRing 1.6s ease-out 4.4s infinite;
  z-index:1; pointer-events:none;
}
@keyframes beatRing{
  0%  { transform:scale(.98); opacity:.9; }
  100%{ transform:scale(1.22); opacity:0; }
}

.name{
  position:absolute; z-index:4;
  left:50%; bottom:-18px;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.5em;
  padding:.15em 1.1em;
  white-space:nowrap;
  font-family:var(--font-hand);
  font-size:1.25rem; font-weight:700;
  color:var(--white);
  background:linear-gradient(135deg, var(--pink), var(--crimson));
  border:3px solid var(--wine);
  border-radius:50px;
  box-shadow:0 6px 14px rgba(90,15,46,.3);
}
.heart-ico{
  display:inline-block; color:#ffd1e0;
  animation: scaleHeart 1s infinite linear;
  text-shadow:0 0 6px rgba(255,255,255,.7);
}
@keyframes scaleHeart{ 50%{ transform:scale(1.25); } }

.balloon_one, .balloon_two{ position:absolute; z-index:1; pointer-events:none; }
.balloon_one{ width:26%; top:-16%; left:-25%; transform-origin:bottom right; animation: sway1 2.4s ease-in-out infinite; }
.balloon_two{ width:25%; top:34%; right:-26%; z-index:0; transform-origin:bottom left; animation: sway2 2.4s ease-in-out infinite; }
.balloon_one img, .balloon_two img{ width:100%; height:auto; display:block; }
@keyframes sway1{ 0%,100%{ transform:rotate(0deg);} 25%{ transform:rotate(4deg);} 75%{ transform:rotate(-4deg);} }
@keyframes sway2{ 0%,100%{ transform:rotate(10deg);} 25%{ transform:rotate(6deg);} 75%{ transform:rotate(14deg);} }

/* ---------- Spinning badge ---------- */
.cricle{
  --b:92px;
  position:absolute; z-index:5;
  top:-3%; right:-15%;
  width:var(--b); height:var(--b);
  display:flex; justify-content:center; align-items:center;
  transform:scale(0);
  animation: pop 2s 5.4s forwards ease-in-out;
}
.text__cricle{
  width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(135deg, var(--pink), var(--crimson));
  border:5px solid var(--wine);
  border-radius:50%;
  box-shadow:0 8px 18px rgba(90,15,46,.3);
  animation: spin 7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.text__cricle span{
  position:absolute; top:0; left:50%;
  color:var(--white);
  transform:rotate(calc(var(--i) * 24deg));
  transform-origin:0 calc(var(--b) / 2 - 5px);
  font-family:var(--font-hand);
  text-transform:uppercase;
  font-size:.62rem;
}
.cricle .heart-ico{ position:absolute; font-size:1.35rem; color:#ffe3ec; }

@keyframes pop{
  0%{ transform:scale(0); }
  10%{ transform:scale(1.3); }
  20%{ transform:scale(.75); }
  30%,100%{ transform:scale(1); }
}

/* ---------- Date pill ---------- */
.date__of__birth{
  grid-area:date;
  position:relative; z-index:3;
  display:flex; justify-content:center; align-items:center; gap:.6em;
  min-height:0; width:0; height:0; overflow:hidden;
  opacity:0;
  padding:0;
  font-family:var(--font-hand);
  font-size:1.2rem; font-weight:700; color:var(--white); white-space:nowrap;
  background:linear-gradient(135deg, var(--pink), var(--crimson));
  border:3px solid var(--wine);
  border-radius:50px;
  box-shadow:0 8px 18px rgba(90,15,46,.28);
  animation: dateOpen 1.6s 4.6s forwards;
}
@keyframes dateOpen{
  0%  { opacity:1; width:0; height:0; }
  45% { opacity:1; width:min(300px, 84vw); height:0; }
  100%{ opacity:1; width:min(300px, 84vw); height:52px; }
}
.date__of__birth i{ font-style:normal; color:var(--gold); text-shadow:0 0 8px rgba(255,200,87,.8); animation: scaleHeart 1.4s infinite linear; }

/* ---------- Button ---------- */
.btn{ grid-area:btn; z-index:6; transform:scale(0); animation: pop 2s 6.2s forwards ease-in-out; }
#btn__letter{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:.5em;
  padding:.7em 1.7em;
  font-family:var(--font-hand); font-size:1.1rem; font-weight:700;
  color:var(--white);
  background:linear-gradient(135deg, #ff5c8a, #d10f4e);
  border:3px solid var(--wine);
  border-radius:50px;
  box-shadow:0 8px 0 var(--wine), 0 16px 24px rgba(90,15,46,.3);
  cursor:pointer; outline:none;
  transition:transform .15s ease, box-shadow .15s ease;
  animation: nudge 2.2s 8.6s ease-in-out infinite;
}
#btn__letter .env{ display:inline-block; font-size:1.3em; animation: wiggle 1.6s 8.6s infinite; }
#btn__letter:hover{ filter:brightness(1.06); }
#btn__letter:active{ transform:translateY(6px); box-shadow:0 2px 0 var(--wine), 0 6px 10px rgba(90,15,46,.3); }
@keyframes nudge{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
@keyframes wiggle{ 0%,60%,100%{ transform:rotate(0);} 70%{ transform:rotate(14deg);} 80%{ transform:rotate(-12deg);} 90%{ transform:rotate(8deg);} }

/* ---------- Decorations ---------- */
.decorate_star{
  position:absolute; z-index:1;
  transform:scale(0);
  background:var(--crimson);
  clip-path:polygon(0 50%, 35% 35%, 50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%);
  animation: pop 3s var(--t) forwards, twinkle 2.2s calc(var(--t) + 3s) infinite ease-in-out;
}
.decorate_star.s1{ width:20px; height:20px; top:12%; left:8%; }
.decorate_star.s2{ width:15px; height:18px; top:7%; right:9%; background:var(--gold); }
.decorate_star.s3{ width:14px; height:14px; top:44%; left:5%; background:var(--gold); }
.decorate_star.s4{ width:18px; height:18px; bottom:16%; left:9%; }
.decorate_star.s5{ width:16px; height:18px; bottom:24%; right:7%; background:var(--gold); }
@keyframes twinkle{ 25%{ transform:scale(.8);} 50%{ transform:scale(1.15);} }

.decorate_flower{
  position:absolute; z-index:1; width:20px;
  transform:scale(0);
  animation: pop 3s var(--t) forwards ease-in-out;
}
.decorate_flower img{ width:100%; display:block; }
.decorate_flower.f1{ top:30%; left:6%; }
.decorate_flower.f2{ top:19%; right:12%; }
.decorate_flower.f3{ bottom:30%; left:15%; }

.decorate_bottom{ position:absolute; right:0; bottom:-10px; width:80px; z-index:1; pointer-events:none; }
.decorate_bottom img{ width:100%; display:block; }
.smiley__icon{
  position:absolute; z-index:1;
  bottom:76px; left:16px; width:54px;
  transform:scale(0) rotate(-12deg);
  animation: pop 3s 6s forwards ease-in-out;
}
.smiley__icon img{ width:100%; display:block; }

/* ---------- Footer credit ---------- */
#copy{
  position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:20;
  display:inline-flex; align-items:center; gap:.4em;
  padding:.45em 1.1em;
  font-family:var(--font-hand); font-size:.92rem; font-weight:700; letter-spacing:.02em;
  color:var(--wine); white-space:nowrap;
  background:rgba(255,255,255,.78);
  border:2px solid var(--wine);
  border-radius:50px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(90,15,46,.2);
  opacity:0;
  animation: fadeIn 1.2s 1.2s forwards;
}
#copy .heart-ico{ color:var(--rose); text-shadow:none; }
#copy b{ color:var(--crimson); }
@keyframes fadeIn{ to{ opacity:1; } }

/* ---------- Trail hearts + confetti ---------- */
.trail{
  position:fixed; z-index:1001; pointer-events:none;
  line-height:1; user-select:none;
  animation: trailUp 1.2s ease-out forwards;
}
@keyframes trailUp{
  0%  { transform:translate(-50%,-50%) scale(.6); opacity:.95; }
  100%{ transform:translate(calc(-50% + var(--dx,0px)), calc(-50% - 90px)) scale(1.25); opacity:0; }
}
#confetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1100; }

/* ==========================================================
   Letter (modal)
   ========================================================== */
.box__letter{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(90,15,46,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.box__letter.open{ display:flex; animation: fadeIn .4s forwards; opacity:0; }

.letter__border{
  position:relative;
  width:min(100%, 520px);
  max-height:calc(100vh - 32px);
  max-height:calc(100svh - 32px);
  padding:12px;
  background:linear-gradient(135deg, #fff, #ffe3ec);
  border-radius:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  transform:translateY(40px) scale(.92); opacity:0;
}
.box__letter.open .letter__border{ animation: cardIn .7s .15s cubic-bezier(.2,1.1,.3,1) forwards; }
@keyframes cardIn{ to{ transform:none; opacity:1; } }

.letter{
  position:relative;
  max-height:calc(100vh - 56px);
  max-height:calc(100svh - 56px);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:26px 20px 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(255,79,129,.12), transparent 40%),
    var(--cream);
  border-radius:16px;
  scroll-behavior:smooth;
}

.close, .music{
  position:absolute; top:-10px;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; line-height:1;
  color:var(--wine); background:#fff;
  border:2px solid var(--wine); border-radius:50%;
  box-shadow:0 4px 10px rgba(90,15,46,.25);
  cursor:pointer; z-index:5;
}
.close{ right:-8px; }
.music{ left:-8px; }
.music.off{ opacity:.6; }

/* polaroid */
.polaroid{
  position:relative; width:min(72%, 250px);
  margin:4px auto 6px;
  padding:9px 9px 26px;
  background:#fff;
  border-radius:4px;
  box-shadow:0 10px 24px rgba(90,15,46,.28);
  transform:rotate(-3deg) scale(.7); opacity:0;
}
.polaroid img.photo{ display:block; width:100%; height:auto; border-radius:2px; }
.polaroid .tape{
  position:absolute; top:-12px; left:50%;
  width:78px; height:24px; transform:translateX(-50%) rotate(3deg);
  background:rgba(255,120,160,.55);
  border-left:2px dashed rgba(255,255,255,.7); border-right:2px dashed rgba(255,255,255,.7);
}
.polaroid .cap{
  position:absolute; left:0; right:0; bottom:4px;
  text-align:left; padding-left:12px; font-family:var(--font-script); font-weight:700;
  font-size:1.05rem; color:var(--crimson);
}
.polaroid .sticker{ position:absolute; right:-30px; bottom:-40px; width:78px; transform:rotate(8deg); }
.polaroid .heart{ position:absolute; opacity:0; width:20px; }
.polaroid .h1{ top:-6px; left:-24px; }
.polaroid .h2{ top:40%; right:-30px; }
.polaroid .h3{ bottom:30px; left:-30px; }
.polaroid .h4{ top:-22px; right:12px; }
.polaroid.show{ animation: polaroidIn .9s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes polaroidIn{ to{ transform:rotate(-3deg) scale(1); opacity:1; } }
.polaroid.show .heart{ animation: heartPop 1.4s var(--t) infinite ease-in-out; }
@keyframes heartPop{
  0%  { opacity:1; transform:scale(0); }
  15% { opacity:1; transform:scale(1.4); }
  30% { opacity:1; transform:scale(.8); }
  50%,100%{ opacity:1; transform:scale(1); }
}

.title__letter{
  min-height:2.6rem;
  margin-top:30px;
  text-align:center;
  font-family:var(--font-script); font-weight:700;
  font-size:clamp(1.9rem, 8vw, 2.4rem);
  color:var(--crimson);
}
.title__letter .heart-ico{ font-size:.55em; margin-left:.25em; color:var(--rose); }

.text__letter{
  padding:6px 6px 0;
  font-family:var(--font-script); font-weight:700;
  font-size:clamp(1.18rem, 5.2vw, 1.4rem);
  line-height:1.5;
  color:#4a1030;
  text-align:center;
}
.text__letter p{ white-space:pre-wrap; min-height:4em; }
.caret{
  display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.15em;
  background:var(--rose); animation: blink .8s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.letter__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-top:14px; min-height:96px;
}
.letter__foot .stamp{ width:110px; opacity:0; transform:rotate(-6deg); }
.letter__foot .sign{
  align-self:center; text-align:center;
  font-family:var(--font-script); font-weight:700; font-size:1.3rem; color:var(--crimson);
  opacity:0;
}
#mewmew{ width:84px; height:84px; opacity:0; }
.foot-on .stamp, .foot-on .sign, .foot-on #mewmew{ animation: fadeIn 1s forwards; }
.foot-on .sign{ animation-delay:.3s; }
.foot-on #mewmew{ animation-delay:.6s; }

/* ==========================================================
   Larger screens
   ========================================================== */
@media (min-width: 900px){
  :root{ --photo: min(400px, 40vw, 62vh); }

  .flag__birthday img{ width:36%; }
  .content{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title photo"
      "date  photo"
      "btn   photo";
    grid-template-rows:auto auto auto;
    align-content:center;
    min-height:100vh; min-height:100svh;
    column-gap:4vw;
    padding-top:70px; padding-bottom:70px;
  }
  .title{ font-size:clamp(3.6rem, 6.2vw, 5.4rem); }
  .box__account .image{ border-width:7px; }
  .cricle{ --b:104px; right:-12%; top:-7%; }
  .text__cricle span{ font-size:.7rem; }
  .name{ font-size:1.55rem; bottom:-22px; }
  .decorate_bottom{ width:120px; }
  .smiley__icon{ width:80px; left:40px; bottom:110px; }
  .letter{ padding:30px 34px 26px; }
}

/* very short/small phones */
@media (max-width: 360px){
  .cricle{ --b:80px; }
  .text__cricle span{ font-size:.55rem; }
}
@media (max-height: 640px) and (max-width: 899px){
  :root{ --photo: clamp(170px, 48vw, 230px); }
  .content{ row-gap:16px; padding-bottom:78px; }
}

@media (prefers-reduced-motion: reduce){
  .bg-heart{ display:none; }
}