:root {
  color-scheme: light;
  --ink: #3a2428;
  --muted: #8a5c58;
  --line: #f0d4c8;
  --paper: #fff6f1;
  --teal: #2c6b62;
  --teal-dark: #21564f;
  --danger: #9d2438;
  --gold: #f0c14b;
  --gold-deep: #c48a12;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(880px 480px at 50% -8%, #ffe4d6 0%, transparent 62%),
    radial-gradient(520px 380px at 100% 100%, #f8d9c6 0%, transparent 58%),
    radial-gradient(420px 320px at 0% 86%, #fde8c4 0%, transparent 55%),
    var(--paper);
}

button, input { font: inherit; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 32px;
  gap: 8px;
}

.intro { text-align: center; }

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-size: clamp(2.1rem, 7vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.hero {
  flex: 1;
  width: min(100%, 560px);
  min-height: 280px;
  display: grid;
  place-items: center;
  position: relative;
}

.present {
  position: relative;
  width: 220px;
  height: 248px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.present:disabled { opacity: 1; }

.stage[data-state="ready"] .present { cursor: pointer; }

.glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 160, 0.85), rgba(255, 190, 160, 0) 68%);
  z-index: 0;
}

.gift-art {
  position: absolute;
  inset: 8px 16px 18px;
  z-index: 1;
}

.floor {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 18px;
  border-radius: 50%;
  background: rgba(176, 72, 62, 0.22);
  filter: blur(5px);
}

.box {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 10px;
  height: 48%;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(180deg, #ff6b78 0%, #ef3d52 46%, #d1253c 100%);
  box-shadow:
    inset 0 -12px 16px rgba(120, 10, 30, 0.16),
    0 16px 24px rgba(180, 40, 55, 0.16);
}

.band {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 22%;
  background: linear-gradient(180deg, #e2a41e, #ffe38a 46%, #e0aa2c);
}

.ribbon, .lid-ribbon {
  position: absolute;
  left: 50%;
  width: 28px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #d59a16, #ffe7a0 42%, #f0c14b 58%, #c48a12);
}

.ribbon {
  top: 0;
  bottom: 0;
  z-index: 2;
}

.lid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52%;
  height: 17%;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 42%),
    linear-gradient(180deg, #ff8490, #f04b5f);
  box-shadow: 0 8px 0 rgba(176, 28, 48, 0.28);
  transform-origin: 50% 100%;
}

.lid-ribbon { top: 0; bottom: 0; }

.sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.42) 48%, transparent 62%);
  transform: translateX(-130%);
  z-index: 3;
}

.bow {
  position: absolute;
  left: 50%;
  bottom: 62%;
  width: 150px;
  height: 86px;
  transform: translateX(-50%);
  z-index: 3;
}

.loop {
  position: absolute;
  top: 6px;
  width: 62px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #fff4c4, #f2c14e 42%, #d39212 78%);
  box-shadow: inset -7px -8px 0 rgba(150, 84, 8, 0.22);
}

.loop-l { left: 12px; transform: rotate(-28deg); }
.loop-r { right: 12px; transform: rotate(28deg); }

.knot {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9a6, #e3a51c 60%, #b47d10);
  z-index: 2;
}

.tail {
  position: absolute;
  top: 48px;
  width: 16px;
  height: 30px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(#f6c453, #c99216);
}

.tail-l { left: 52px; transform: rotate(22deg); }
.tail-r { right: 52px; transform: rotate(-22deg); }

.stage[data-state="welcome"] .gift-art {
  animation: bob 3s ease-in-out infinite;
}

.stage[data-state="welcome"] .bow {
  animation: bowTwitch 2.6s ease-in-out infinite;
}

.stage[data-state="welcome"] .sheen {
  animation: gloss 3.8s ease-in-out infinite;
}

.stage[data-state="ready"] .gift-art {
  animation: readyPulse 1.15s ease-in-out infinite;
}

.stage[data-state="opening"] .gift-art {
  animation: openPulse 1.3s ease-in-out forwards;
}

.stage[data-state="opening"] .sheen,
.stage[data-state="revealed"] .sheen { animation: none; opacity: 0; }

.stage[data-state="revealed"] .gift-art { transform: scale(1.12); }

.stage[data-state="revealed"] .lid {
  animation: lidFly 520ms cubic-bezier(0.16, 0.72, 0.24, 1) forwards;
}

.stage[data-state="revealed"] .bow {
  animation: bowFly 520ms cubic-bezier(0.16, 0.72, 0.24, 1) forwards;
}

.stage[data-state="revealed"] .box,
.stage[data-state="revealed"] .floor {
  animation: boxPop 520ms ease-in forwards;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes bowTwitch {
  0%, 72%, 100% { transform: translateX(-50%) rotate(0); }
  80% { transform: translateX(-50%) rotate(-7deg); }
  90% { transform: translateX(-50%) rotate(6deg); }
}

@keyframes gloss {
  0%, 58% { transform: translateX(-130%); }
  82%, 100% { transform: translateX(130%); }
}

@keyframes readyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@keyframes openPulse {
  0% { transform: scale(1); }
  16% { transform: scale(1.16); }
  32% { transform: scale(0.88); }
  50% { transform: scale(1.26); }
  66% { transform: scale(0.94); }
  82% { transform: scale(1.34); }
  100% { transform: scale(1.16); }
}

@keyframes lidFly {
  to { transform: translateY(-220px) rotate(-22deg) scale(1.08); opacity: 0; }
}

@keyframes bowFly {
  to { transform: translateX(-50%) translateY(-260px) rotate(28deg) scale(1.2); opacity: 0; }
}

@keyframes boxPop {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.22); opacity: 0.85; }
  100% { transform: scale(1.7); opacity: 0; }
}

.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.sparkle {
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
  opacity: 0;
  transform: rotate(var(--a)) translateY(0) scale(0.3);
  animation: spark 900ms ease-out forwards;
  animation-delay: var(--delay);
}

.sparkle.star {
  border-radius: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

@keyframes spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--dist)) scale(1); }
}

.name-form {
  width: min(100%, 440px);
  display: grid;
  gap: 12px;
}

.lead {
  margin: 0;
  text-align: center;
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.35;
}

.controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
}

input[type="text"]::placeholder { color: #c09a93; }

input[type="text"]:focus-visible { border-color: var(--teal); }

input.shake { animation: shake 280ms ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

.confirm, .again {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.confirm:hover, .again:hover { background: var(--teal-dark); }
.confirm:active, .again:active { transform: translateY(1px); }

.error {
  min-height: 1.25em;
  margin: 0;
  text-align: center;
  color: var(--danger);
  font-size: 0.95rem;
}

.tap-hint {
  margin-top: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: lowercase;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 14px 18px 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: hintPulse 1.35s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.result {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-size: clamp(2.05rem, 5.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: anywhere;
  animation: popIn 620ms cubic-bezier(0.16, 1.2, 0.32, 1) both;
}

.result[hidden] { display: none; }

@keyframes popIn {
  from { opacity: 0; transform: scale(0.7) translateY(14px); }
  to { opacity: 1; transform: none; }
}

.again { margin-top: 8px; padding-inline: 26px; }
.again[hidden], .tap-hint[hidden], .name-form[hidden] { display: none; }

.stage:not([data-state="welcome"]) .name-form { display: none; }

.noscript {
  text-align: center;
  color: var(--muted);
}

#confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

@media (min-width: 720px) {
  .stage { padding-top: 48px; }
  .hero { width: min(100%, 760px); }
  .present { width: 270px; height: 300px; }
  .controls { grid-template-columns: 1fr auto; }
  .confirm { min-width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage[data-state="welcome"] .gift-art,
  .stage[data-state="welcome"] .bow,
  .stage[data-state="welcome"] .sheen,
  .stage[data-state="ready"] .gift-art,
  .tap-hint,
  .sparkle,
  .result {
    animation: none;
  }

  .stage[data-state="revealed"] .lid,
  .stage[data-state="revealed"] .bow,
  .stage[data-state="revealed"] .box,
  .stage[data-state="revealed"] .floor {
    animation-duration: 1ms;
  }
}