:root {
  color-scheme: light;
  --ink: #15110d;
  --paper: #fff9ec;
  --gold: #f5bf42;
  --rose: #f4717f;
  --blue: #5db7de;
  --green: #6bbf7c;
  --shadow: rgba(21, 17, 13, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 20%, rgba(244, 113, 127, 0.32), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(93, 183, 222, 0.36), transparent 27%),
    linear-gradient(135deg, #fff9ec 0%, #f7edd2 52%, #e9f8ff 100%);
  overflow-x: hidden;
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  border: 3px solid rgba(21, 17, 13, 0.13);
  content: "";
  transform: rotate(18deg);
  animation: slow-drift 12s ease-in-out infinite alternate;
}

body::before {
  top: -6rem;
  left: -5rem;
  background: repeating-linear-gradient(
    45deg,
    rgba(245, 191, 66, 0.36) 0 14px,
    transparent 14px 28px
  );
}

body::after {
  right: -7rem;
  bottom: -7rem;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    rgba(107, 191, 124, 0.28) 0 12px,
    transparent 12px 24px
  );
  animation-delay: -4s;
}

.year-stage {
  display: grid;
  min-height: 100vh;
  place-items: center;
  align-content: center;
  gap: clamp(1.25rem, 4vw, 2rem);
  padding: 2rem;
  text-align: center;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.8rem, 12vw, 9.8rem);
  line-height: 0.88;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0.06em 0.06em 0 var(--gold);
  animation: headline-arrive 700ms cubic-bezier(0.2, 0.9, 0.2, 1.15) both;
}

.reveal-button {
  min-width: 11rem;
  min-height: 4rem;
  padding: 1rem 2rem;
  border: 3px solid var(--ink);
  border-radius: 0.5rem;
  color: var(--ink);
  background: var(--rose);
  box-shadow: 0.45rem 0.45rem 0 var(--ink);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0;
  animation: button-arrive 650ms 180ms cubic-bezier(0.2, 0.9, 0.2, 1.15) both,
    button-wiggle 2800ms 1200ms ease-in-out infinite;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.reveal-button:hover,
.reveal-button:focus-visible {
  animation-play-state: paused;
  background: var(--gold);
  transform: translate(-0.15rem, -0.15rem);
  box-shadow: 0.6rem 0.6rem 0 var(--ink);
}

.reveal-button:active {
  transform: translate(0.2rem, 0.2rem);
  box-shadow: 0.25rem 0.25rem 0 var(--ink);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(21, 17, 13, 0.45);
  backdrop-filter: blur(5px);
  animation: backdrop-in 180ms ease-out both;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-backdrop.is-closing {
  animation: backdrop-out 150ms ease-in both;
}

.modal {
  position: relative;
  width: min(100%, 34rem);
  padding: clamp(2.8rem, 8vw, 4.25rem) clamp(1.5rem, 6vw, 3.25rem);
  border: 4px solid var(--ink);
  border-radius: 0.5rem;
  background: var(--paper);
  box-shadow: 0.7rem 0.7rem 0 var(--ink), 0 1.5rem 4rem var(--shadow);
  text-align: center;
  animation: modal-pop 330ms cubic-bezier(0.2, 0.9, 0.18, 1.25) both;
}

.modal-backdrop.is-closing .modal {
  animation: modal-drop 150ms ease-in both;
}

.modal p {
  margin: 0;
  font-size: clamp(2rem, 8vw, 4.2rem);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: 0;
  text-wrap: balance;
}

.close-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--blue);
  cursor: pointer;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
}

.close-button:hover,
.close-button:focus-visible {
  background: var(--green);
}

.confetti-burst {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.confetti-burst span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.72rem;
  height: 1rem;
  border: 2px solid rgba(21, 17, 13, 0.4);
  border-radius: 0.16rem;
  background: var(--color);
  box-shadow: 0 0.35rem 0.7rem rgba(21, 17, 13, 0.12);
  transform: translate(-50%, -50%);
  animation: confetti-pop 1100ms cubic-bezier(0.12, 0.7, 0.22, 1) forwards;
}

@keyframes headline-arrive {
  from {
    opacity: 0;
    transform: translateY(1rem) rotate(-1deg) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes button-arrive {
  from {
    opacity: 0;
    transform: translateY(1.4rem) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes button-wiggle {
  0%,
  82%,
  100% {
    transform: translateY(0) rotate(0);
  }

  87% {
    transform: translateY(-0.1rem) rotate(-1deg);
  }

  92% {
    transform: translateY(0.04rem) rotate(1deg);
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translateY(1.5rem) rotate(-1.5deg) scale(0.86);
  }

  70% {
    transform: translateY(-0.2rem) rotate(0.6deg) scale(1.03);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes modal-drop {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.96);
  }
}

@keyframes slow-drift {
  from {
    transform: rotate(18deg) translate3d(0, 0, 0);
  }

  to {
    transform: rotate(24deg) translate3d(0.75rem, -0.5rem, 0);
  }
}

@keyframes confetti-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }

  12% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 140px))
      scale(1)
      rotate(var(--r));
  }
}

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

@media (max-width: 520px) {
  .year-stage {
    padding: 1.25rem;
  }

  h1 {
    max-width: 10ch;
  }

  .reveal-button {
    width: min(100%, 18rem);
  }
}