/* scenes — ConstellationScene and the GiftEnvelope you open first */

.scene {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2rem 1.2rem;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.scene.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scene__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene__title {
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 13vw, 6rem);
  line-height: 1;
  color: #f0dcb6;
  text-shadow: 0 0 40px rgba(207, 169, 108, 0.35);
  animation: title 2.6s ease both 0.5s;
}

@keyframes title {
  from {
    opacity: 0;
    letter-spacing: 0.3em;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.02em;
    filter: blur(0);
  }
}

.scene__hint {
  position: relative;
  font-family: "Caveat", cursive;
  font-size: 1.25rem;
  color: rgba(207, 169, 108, 0.8);
  animation: breathe 3.4s ease-in-out infinite 2.4s both;
}

/* ── GiftEnvelope ───────────────────────────── */
.gift {
  position: relative;
  width: min(70vw, 320px);
  aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  perspective: 900px;
  animation: giftIn 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both 1.5s;
}

@keyframes giftIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
}

.gift__card {
  position: absolute;
  left: 6%;
  top: 6%;
  width: 88%;
  height: 88%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fbf4e6, #ecdfc6);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold);
  z-index: 1;
}

.gift__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(160deg, #2b2019, #1a1310);
  border: 1px solid rgba(207, 169, 108, 0.28);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
}

.gift__body::before,
.gift__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 52%;
  height: 100%;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.05), transparent);
}

.gift__body::before {
  left: 0;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
}

.gift__body::after {
  right: 0;
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}

.gift__flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 58%;
  z-index: 3;
  transform-origin: top center;
  background: linear-gradient(180deg, #35271d, #221913);
  border: 1px solid rgba(207, 169, 108, 0.28);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 0.9s cubic-bezier(0.3, 0.1, 0.2, 1);
}

.scene.is-opening .gift__flap {
  transform: rotateX(-180deg);
}

.gift__seal {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 4;
  width: 3.6rem;
  height: 3.6rem;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 30%, #b05a4f, #7c3831);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s ease, opacity 0.5s ease;
  animation: sealGlow 3s ease-in-out infinite 2.8s;
}

.gift__seal:hover {
  transform: translate(-50%, -50%) scale(1.07);
}

.scene.is-opening .gift__seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}

.gift__seal-mark {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  color: rgba(255, 226, 196, 0.85);
}

@keyframes sealGlow {
  0%,
  100% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5),
      inset 0 -3px 8px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(207, 169, 108, 0);
  }
  50% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5),
      inset 0 -3px 8px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(207, 169, 108, 0.07);
  }
}

.scene.is-opening .gift__card {
  transform: translateY(-58%);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .scene__title,
  .scene__hint,
  .gift,
  .gift__seal {
    animation: none;
  }
}