@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,600,30,1;9..144,700,30,1&display=swap');

:root {
  font-family: 'DM Sans', Arial, sans-serif;
  color: #22374a;
  background: #f7e9d5;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

button { font: inherit; }

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vh, 2rem);
  padding: clamp(1rem, 3vw, 2rem);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 8% 14%, #fff7e8 0 12%, transparent 35%),
              radial-gradient(circle at 89% 92%, #eac99e 0, transparent 30%),
              #f7e9d5;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  pointer-events: none;
}

.topline {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-transform: uppercase;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: #92634f;
  text-align: center;
}

.sparkle { color: #d77b64; font-size: 1.35rem; line-height: 1; }

.card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  width: min(100%, 1130px);
  min-height: min(71vh, 650px);
  overflow: hidden;
  background: #fffaf0;
  border: 1px solid rgba(146, 99, 79, .18);
  border-radius: 34px;
  box-shadow: 0 28px 70px rgba(100, 57, 30, .12), 0 4px 8px rgba(100, 57, 30, .05);
}

.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2.25rem, 6vw, 6.3rem);
}

.eyebrow {
  margin: 0 0 1.5rem;
  color: #c2695c;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(4.3rem, 8vw, 8.6rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.075em;
}

h1 em { color: #da7867; font-style: normal; }

.message {
  max-width: 27rem;
  margin: 2rem 0 2.15rem;
  color: #556676;
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  line-height: 1.65;
}

.wish-button {
  min-height: 3.5rem;
  padding: .8rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 0;
  border-radius: 999px;
  color: white;
  background: #22374a;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(34, 55, 74, .19);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.wish-button:hover { transform: translateY(-2px); background: #334f65; box-shadow: 0 12px 22px rgba(34, 55, 74, .23); }
.wish-button:active { transform: translateY(0); }
.wish-button:focus-visible { outline: 3px solid #da7867; outline-offset: 4px; }
.wish-button span { color: #f7c863; font-size: 1rem; }

.wish-status { min-height: 1.5em; margin: .8rem 0 0; color: #7b5a48; font-size: .9rem; }

.illustration {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background: #df9382;
  border-radius: 48% 0 0 48% / 60% 0 0 60%;
}

.illustration::before {
  content: '';
  position: absolute;
  width: 95%;
  aspect-ratio: 1;
  left: 9%;
  top: 8%;
  border-radius: 50%;
  background: #ebb4a2;
}

.orbit { position: absolute; border: 1px solid rgba(255, 250, 240, .55); border-radius: 50%; }
.orbit-one { width: 108%; aspect-ratio: 1; left: 3%; top: 0; }
.orbit-two { width: 75%; aspect-ratio: 1; left: 21%; top: 18%; }
.deco { position: absolute; z-index: 2; color: #fff1ce; line-height: 1; }
.deco-one { top: 12%; left: 25%; font-size: 3.5rem; }
.deco-two { top: 19%; right: 14%; font-size: 2.2rem; }
.deco-three { bottom: 21%; right: 8%; font-size: 2.8rem; }
.deco-four { bottom: 25%; left: 12%; font-size: 3rem; }

.cake {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 53%;
  width: min(65%, 360px);
  height: 58%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 26px 15px rgba(116, 52, 46, .2));
}

.candle {
  position: absolute;
  z-index: 1;
  bottom: 65%;
  width: 12%;
  height: 30%;
  border-radius: 6px 6px 2px 2px;
  background: repeating-linear-gradient(135deg, #fff5db 0 12px, #e9ba86 12px 17px);
}

.candle-one { left: 21%; transform: rotate(-7deg); }
.candle-two { left: 44%; height: 36%; }
.candle-three { right: 21%; transform: rotate(7deg); }
.flame {
  position: absolute;
  left: 50%;
  top: -33%;
  width: 60%;
  height: 29%;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 85% 0 85% 85%;
  background: #f8c45e;
  box-shadow: 0 0 13px 4px rgba(255, 227, 154, .75);
}

.cake-top {
  position: absolute;
  z-index: 2;
  left: 1%;
  bottom: 57%;
  width: 98%;
  height: 20%;
  border-radius: 50%;
  background: #ffdfcb;
  box-shadow: inset 0 -10px 0 #f7beaf;
}

.icing {
  position: absolute;
  z-index: 3;
  left: 1%;
  bottom: 41%;
  width: 98%;
  height: 24%;
  border-radius: 0 0 35% 35%;
  background: #ffdfcb;
}

.icing i {
  position: absolute;
  top: 75%;
  width: 11%;
  height: 60%;
  border-radius: 0 0 999px 999px;
  background: #ffdfcb;
}

.icing i:nth-child(1) { left: 11%; }
.icing i:nth-child(2) { left: 34%; height: 80%; }
.icing i:nth-child(3) { left: 59%; height: 55%; }
.icing i:nth-child(4) { left: 79%; height: 70%; }

.cake-body {
  position: absolute;
  left: 2%;
  bottom: 10%;
  width: 96%;
  height: 51%;
  overflow: hidden;
  border-radius: 2% 2% 14% 14%;
  background: #f1bd78;
  box-shadow: inset -22px -3px 0 rgba(179, 100, 68, .13);
}

.stripe {
  position: absolute;
  left: 0;
  right: 0;
  height: 10%;
  background: #dd8f6f;
}

.stripe:first-child { top: 45%; }
.stripe:last-child { top: 82%; }
.plate {
  position: absolute;
  bottom: 4%;
  left: -8%;
  width: 116%;
  height: 10%;
  border-radius: 50%;
  background: #fff2dd;
  box-shadow: 0 9px 0 #d97e70;
}

.footer { color: #92634f; font-size: .85rem; text-align: center; }
.footer span { color: #d77b64; margin-left: .2rem; }

.confetti-layer { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.confetti {
  position: absolute;
  top: -2rem;
  width: .65rem;
  height: 1.15rem;
  border-radius: 2px;
  animation: confetti-fall 3.2s linear forwards;
}

@keyframes confetti-fall {
  to { transform: translate3d(var(--drift), 110vh, 0) rotate(720deg); opacity: .7; }
}

@media (max-width: 760px) {
  .page { padding: 1rem; gap: 1.1rem; justify-content: flex-start; }
  .topline { margin-top: 1rem; font-size: .68rem; letter-spacing: .14em; }
  .card { grid-template-columns: 1fr; min-height: 0; border-radius: 26px; }
  .card-content { padding: 2.6rem 2rem 1.4rem; }
  h1 { font-size: clamp(3.8rem, 13vw, 6.5rem); }
  .message { margin: 1.5rem 0 1.5rem; }
  .illustration { min-height: 320px; border-radius: 48% 48% 0 0 / 27% 27% 0 0; }
  .illustration::before { width: 70%; left: 15%; top: 2%; }
  .cake { width: min(50%, 260px); height: 82%; top: 53%; }
  .deco-one { top: 8%; left: 13%; }
  .deco-two { top: 10%; right: 13%; }
  .footer { padding-bottom: .5rem; }
}

@media (max-width: 420px) {
  .card-content { padding: 2.2rem 1.5rem 1rem; }
  .eyebrow { font-size: .75rem; }
  h1 { font-size: 3.75rem; }
  .illustration { min-height: 260px; }
  .cake { width: 56%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}