:root {
  --cream: #fff8f3;
  --blush: #f8d9d2;
  --coral: #e99b8e;
  --ink: #473f48;
  --muted: #8e7e84;
  --sage: #b8c8b2;
  --lilac: #d9cce1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: #eadfdc;
  font-family: "DM Sans", sans-serif;
}

button { font: inherit; }

.page-shell {
  position: relative;
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 18%, rgba(217, 204, 225, .62) 0 12%, transparent 12.2%),
    radial-gradient(circle at 89% 82%, rgba(184, 200, 178, .52) 0 15%, transparent 15.2%),
    linear-gradient(135deg, #fffaf5 0%, var(--cream) 48%, #f8e6e2 100%);
}

.page-shell::before,
.page-shell::after {
  position: absolute;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  border: 1px solid rgba(71, 63, 72, .08);
  border-radius: 48% 52% 54% 46%;
  content: "";
}

.page-shell::before { top: -16rem; right: -4rem; transform: rotate(25deg); }
.page-shell::after { bottom: -18rem; left: -5rem; transform: rotate(-35deg); }

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

.welcome-screen,
.celebration {
  width: min(100% - 3rem, 48rem);
  margin: auto;
  text-align: center;
}

.welcome-screen { animation: appear .9s ease both; }
.tiny-label, .eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; font-family: "Playfair Display", serif; font-weight: 500; }
h1 { margin-top: .55rem; color: var(--coral); font-size: clamp(4.5rem, 16vw, 9rem); line-height: .95; letter-spacing: .01em; }
.welcome-copy, .celebration-copy { margin: 1.7rem 0 2.4rem; color: var(--muted); font-size: 1rem; line-height: 1.8; }

.start-button {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.35rem;
  border: 1px solid rgba(71, 63, 72, .18);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 .6rem 1.5rem rgba(130, 91, 94, .08);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.start-button:hover, .start-button:focus-visible { background: #fff; box-shadow: 0 .8rem 2rem rgba(130, 91, 94, .15); transform: translateY(-3px); }
.start-button:focus-visible, .music-toggle:focus-visible { outline: 3px solid rgba(233, 155, 142, .4); outline-offset: 4px; }
.button-dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 .25rem rgba(233, 155, 142, .18); }
.music-note { margin: 1.4rem 0 0; color: #aa999c; font-size: .72rem; line-height: 1.6; }

.celebration { position: relative; animation: rise .85s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { margin-top: .8rem; color: var(--coral); }
h2 { margin-top: 1rem; color: var(--ink); font-size: clamp(3.3rem, 11vw, 6.3rem); line-height: 1; }
.celebration-copy { margin: 1.5rem 0 1.8rem; }
.time-together { margin: -0.65rem 0 1.8rem; color: var(--coral); font-family: "Playfair Display", serif; font-size: .95rem; font-style: italic; }
.signature { color: var(--muted); font-family: "Playfair Display", serif; font-size: 1.2rem; font-style: italic; }
.signature span { color: var(--coral); font-size: 1.5rem; }

.music-toggle { display: inline-flex; align-items: center; gap: .65rem; margin-top: 3rem; padding: .65rem .85rem; border: 0; border-top: 1px solid rgba(71, 63, 72, .15); color: var(--muted); background: transparent; cursor: pointer; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.sound-bars { display: flex; align-items: center; gap: 2px; height: 1rem; }
.sound-bars i { display: block; width: 2px; height: .45rem; border-radius: 4px; background: var(--coral); animation: sound 1s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { animation-delay: -.4s; height: .8rem; }.sound-bars i:nth-child(3) { animation-delay: -.7s; height: .6rem; }.sound-bars i:nth-child(4) { animation-delay: -.2s; height: .95rem; }
.music-toggle.is-paused .sound-bars i { animation-play-state: paused; height: 2px; }
#youtubePlayer { position: absolute; width: 200px; height: 200px; overflow: hidden; opacity: 0; pointer-events: none; }

.magic-heart { position: fixed; z-index: 30; color: var(--coral); font-family: "Playfair Display", serif; font-size: 1.8rem; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); animation: magic-float .95s ease-out forwards; }

.confetti { position: absolute; width: .7rem; height: 2.7rem; border-radius: 99px; opacity: .85; }
.confetti-one { top: -4rem; left: 19%; background: var(--sage); transform: rotate(32deg); }.confetti-two { top: 1rem; right: 13%; height: 1.9rem; background: var(--lilac); transform: rotate(-45deg); }.confetti-three { bottom: 2rem; left: 10%; height: 1.7rem; background: var(--coral); transform: rotate(65deg); }

[hidden] { display: none; }
@keyframes appear { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(2rem) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sound { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes magic-float { 0% { opacity: 0; transform: translate(-50%, -35%) scale(.7); } 20% { opacity: .78; } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1.15) rotate(-8deg); } }

@media (max-width: 480px) {
  .welcome-screen, .celebration { width: min(100% - 2rem, 48rem); }
  .welcome-copy, .celebration-copy { font-size: .92rem; }
  .confetti-one { left: 8%; }.confetti-two { right: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}