:root {
  --pink-1: #ff7eb9;
  --pink-2: #ff65a3;
  --pink-3: #f15bb5;
  --gold: #ffd166;
  --bg-1: #fff0f8;
  --bg-2: #ffe6f2;
  --bg-3: #ffeef8;
  --text: #4a2340;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 20% 20%, #fff8fc, #ffe5f3 60%, #ffd5ea);
  overflow: hidden;
}

.app {
  width: 100vw;
  height: 100vh;
}

.page {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.page.active {
  display: flex;
  animation: fadeIn 0.8s ease;
}

.page-1 {
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
}

.page-2 {
  background:
    linear-gradient(to bottom, rgba(45, 94, 66, 0.08), rgba(45, 94, 66, 0.12)),
    linear-gradient(160deg, #fff1f8, #ffe5f0);
}

.page-3 {
  background:
    radial-gradient(circle at top, rgba(255, 209, 102, 0.25), transparent 40%),
    linear-gradient(160deg, var(--bg-3), #ffe3f3);
}

.content {
  width: min(700px, 92vw);
  padding: 2rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(4px);
  box-shadow: 0 16px 34px rgba(180, 47, 120, 0.16);
  animation: floaty 4s ease-in-out infinite;
}

h1,
h2 {
  margin-top: 0;
}

p {
  line-height: 1.5;
  font-size: 1.1rem;
}

.small {
  font-size: 1rem;
}

.hint {
  color: #35624a;
  font-weight: 600;
}

.next-button {
  margin-top: 1.5rem;
  border: none;
  border-radius: 999px;
  padding: 0.95rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(120deg, var(--pink-1), var(--pink-2), var(--pink-3));
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 24px rgba(217, 50, 130, 0.35);
}

.next-button:hover {
  transform: translateY(-2px) scale(1.02);
}

.next-button:active {
  transform: translateY(1px);
}

.ticket {
  margin: 1rem auto 1.2rem;
  width: min(320px, 100%);
  border-radius: 18px;
  padding: 1.1rem;
  display: grid;
  gap: 0.35rem;
  background: linear-gradient(160deg, #1f5138, #2f7e55);
  color: #fff8df;
  box-shadow: 0 16px 28px rgba(22, 74, 49, 0.35);
  transform: scale(0.95);
  animation: ticketPop 1.2s ease 0.3s forwards;
}

.ticket-top,
.ticket-bottom {
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.ticket-main {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
}

.hearts,
.sparkles,
.motifs {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.heart {
  position: absolute;
  bottom: -12vh;
  font-size: 1.4rem;
  opacity: 0.7;
  animation: rise linear forwards;
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff3c2;
  box-shadow: 0 0 12px #fff3c2;
  opacity: 0.8;
  animation: twinkle 2s ease-in-out infinite;
}

.motif {
  position: absolute;
  bottom: -10vh;
  opacity: 0.5;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.08));
  animation: driftUp linear forwards;
}

.motif--label {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

@keyframes rise {
  to {
    transform: translateY(-120vh) rotate(35deg);
    opacity: 0;
  }
}

@keyframes driftUp {
  to {
    transform: translateY(-120vh) translateX(24px) rotate(-10deg);
    opacity: 0;
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.35);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floaty {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes ticketPop {
  to {
    transform: scale(1);
  }
}

@media (max-width: 600px) {
  .content {
    padding: 1.5rem 1.2rem;
  }
  h1 {
    font-size: 1.7rem;
  }
  h2 {
    font-size: 1.45rem;
  }
}