/* ===================================
   Davetiye zarfı — açılış splash
   =================================== */

.envelope-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #FFF5F8 0%, #FDE4EA 45%, #F5D0DC 100%);
  transition: opacity 0.85s ease, visibility 0.85s ease;
}

.envelope-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope-splash__sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.9) 50%, transparent 50%),
    radial-gradient(1px 1px at 80% 15%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 65% 70%, rgba(255, 200, 218, 0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 25% 80%, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  opacity: 0.6;
  animation: splashSparkle 4s ease-in-out infinite;
}

@keyframes splashSparkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.75; }
}

.envelope-scene {
  position: relative;
  width: min(300px, 82vw);
  height: min(220px, 58vw);
  perspective: 900px;
  transform-style: preserve-3d;
}

.envelope {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Zarf gövdesi */
.envelope__back {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #FFF8FA 0%, #F8D4E0 50%, #F0B8CA 100%);
  border-radius: 6px;
  box-shadow:
    0 20px 50px rgba(196, 92, 122, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.envelope__back::before,
.envelope__back::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 55%;
  background: linear-gradient(to top, rgba(232, 137, 158, 0.35), transparent);
  pointer-events: none;
}

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

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

/* Davetiye kartı (zarfın içinden çıkan) */
.envelope__letter {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 88%;
  height: 78%;
  transform: translateX(-50%) translateY(0);
  z-index: 2;
  transition: none;
}

.envelope__letter-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8FA 100%);
  border-radius: 4px;
  border: 1px solid rgba(245, 184, 200, 0.5);
  box-shadow: 0 4px 20px rgba(196, 92, 122, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.envelope__letter-ornament {
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--pink-light, #F5B8C8), transparent);
  margin: 10px 0;
}

.envelope__names {
  font-family: var(--font-script, 'Great Vibes', cursive);
  font-size: clamp(2rem, 8vw, 2.6rem);
  color: var(--pink-dark, #C45C7A);
  line-height: 1.2;
}

.envelope__tagline {
  font-family: var(--font-body, 'Cormorant Garamond', serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--brown-mid, #9A7A7E);
  letter-spacing: 0.5px;
}

.envelope__date {
  font-family: var(--font-numeric, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pink-mid, #E8899E);
  margin-top: 8px;
  letter-spacing: 1px;
}

/* Ön cep */
.envelope__pocket {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(180deg, #F5C4D4 0%, #E8899E 100%);
  clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);
  z-index: 3;
  border-radius: 0 0 6px 6px;
  opacity: 0.95;
}

/* Üst kapak */
.envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54%;
  background: linear-gradient(180deg, #FFD6E8 0%, #F0A8BE 100%);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: top center;
  transform: rotateX(0deg);
  z-index: 5;
  backface-visibility: hidden;
  box-shadow: 0 4px 12px rgba(196, 92, 122, 0.15);
}

/* Mühür */
.envelope__seal {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E8899E, #C45C7A);
  z-index: 6;
  box-shadow:
    0 4px 14px rgba(196, 92, 122, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.envelope__seal span {
  font-family: var(--font-script, 'Great Vibes', cursive);
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* --- Animasyon aşamaları --- */
.envelope-splash.is-opening .envelope__flap {
  animation: envelopeFlapOpen 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.envelope-splash.is-opening .envelope__seal {
  animation: sealFade 0.5s ease forwards;
}

.envelope-splash.is-revealing .envelope__letter {
  animation: letterSlideOut 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.envelope-splash.is-revealing .envelope__pocket {
  animation: pocketFade 0.6s ease forwards;
}

.envelope-splash.is-expanding .envelope-scene {
  animation: sceneExpand 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.envelope-splash.is-expanding .envelope__letter-inner {
  animation: letterGlow 0.95s ease forwards;
}

@keyframes envelopeFlapOpen {
  0% {
    transform: rotateX(0deg);
    z-index: 5;
  }
  99% {
    z-index: 1;
  }
  100% {
    transform: rotateX(180deg);
    z-index: 1;
  }
}

@keyframes sealFade {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
}

@keyframes letterSlideOut {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  55% {
    transform: translateX(-50%) translateY(-95%) scale(1.02);
  }
  100% {
    transform: translateX(-50%) translateY(-130%) scale(1.08);
  }
}

@keyframes pocketFade {
  to {
    opacity: 0;
  }
}

@keyframes sceneExpand {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@keyframes letterGlow {
  0% {
    box-shadow: 0 4px 20px rgba(196, 92, 122, 0.12);
  }
  100% {
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.95);
    background: #FFFBFC;
  }
}

/* Açılış metni */
.envelope-splash__intro {
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-sans, 'Quicksand', sans-serif);
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brown-light, #C4A8AC);
  opacity: 0;
  animation: introPulse 2s ease 0.4s infinite;
  transition: opacity 0.3s ease;
}

.envelope-splash.is-opening .envelope-splash__intro,
.envelope-splash.is-revealing .envelope-splash__intro,
.envelope-splash.is-expanding .envelope-splash__intro {
  opacity: 0;
  animation: none;
}

.envelope-splash:not(.is-opening):not(.is-revealing):not(.is-expanding):not(.is-hidden) .envelope-splash__intro {
  opacity: 1;
}

@keyframes introPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

body.splash-active {
  overflow: hidden;
  height: 100%;
}

body.splash-active .flower-canvas {
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}

body.splash-done .flower-canvas {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .envelope-splash {
    display: none !important;
  }

  body.splash-active {
    overflow: auto;
    height: auto;
  }
}

@media (max-width: 480px) {
  .envelope-scene {
    width: min(270px, 88vw);
    height: min(195px, 52vw);
  }

  .envelope__seal {
    width: 38px;
    height: 38px;
  }
}