/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: transparent;
}

/* ── Body ─────────────────────────────────────────────────── */
body {
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #2d3620;
  /* Keep the original outer background or change it? I will leave body bg as is, maybe a dark green */
  opacity: 0;
  animation: fadeIn 1.3s ease 0.15s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* ── Envelope ─────────────────────────────────────────────── */
.envelope {
  position: fixed;
  inset: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  overflow: hidden;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  perspective: 1100px;
  transform-style: preserve-3d;
  min-height: 100svh;
  --flap-y: 50%; /* Default intersection point */
  --corner-top: 0px;
  --corner-bottom: 100%;

  /* Dark sage paper envelope body */
  background-color: #3b4d41;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.08), transparent 15%),
    linear-gradient(132deg, rgba(255, 255, 255, 0.03), transparent 35%, rgba(0, 0, 0, 0.015) 55%, transparent 100%),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 255, 255, 0.008) 10px 10.5px, transparent 10.5px 20px),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(255, 255, 255, 0.008) 16px 17px, transparent 17px 28px);
  background-blend-mode: normal, overlay, normal, normal;

  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.02),
    inset 0 0 60px rgba(0, 0, 0, 0.03);
}

@media (max-width: 768px) {
  .envelope {
    /* Mathematically perfect 45-degree folds on tall screens */
    --corner-top: calc(var(--flap-y) - 50vw);
    --corner-bottom: calc(var(--flap-y) + 50vw);
  }
}

/* ── Flaps ────────────────────────────────────────────────── */
.flap-left-wrap, .flap-right, .flap-bottom-wrap, .flap-top-wrap,
.flap-left, .flap-bottom, .flap-top {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.flap-left, .flap-right, .flap-bottom, .flap-top {
  background-color: #3b4d41;
  background-image: inherit;
}

.flap-right {
  clip-path: polygon(100% var(--corner-top), 50% var(--flap-y), 100% var(--corner-bottom));
  z-index: 0;
}

.flap-left-wrap {
  z-index: 1;
  /* Casts shadow rightwards onto the right flap */
  filter: drop-shadow(2px 0 4px rgba(0,0,0,0.5)) drop-shadow(1px 0 1px rgba(255,255,255,0.1));
}
.flap-left {
  clip-path: polygon(0 var(--corner-top), 50% var(--flap-y), 0 var(--corner-bottom));
}

.flap-bottom-wrap {
  z-index: 2;
  /* Casts shadow upwards onto the side flaps */
  filter: drop-shadow(0 -3px 5px rgba(0,0,0,0.5)) drop-shadow(0 -1px 1px rgba(255,255,255,0.1));
}
.flap-bottom {
  clip-path: polygon(0 100%, 100% 100%, 100% var(--corner-bottom), 50% var(--flap-y), 0 var(--corner-bottom));
}

/* ── Top flap ─────────────────────────────────────────────── */
.flap-top-wrap {
  z-index: 3;
  /* Casts shadow downwards onto all other flaps */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.55)) drop-shadow(0 1px 1px rgba(255,255,255,0.15));
}
.flap-top {
  clip-path: polygon(0 0, 100% 0, 100% var(--corner-top), 50% var(--flap-y), 0 var(--corner-top));
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
}

.flap-top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.04), transparent 40%);
  opacity: 0;
  transition: opacity 0.85s ease;
  pointer-events: none;
}

.flap-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.16), transparent 24%);
  opacity: 0.35;
  transition: opacity 0.85s ease, transform 0.85s ease;
  pointer-events: none;
}

.flap-top.open {
  transform: rotateX(-18deg);
}

.flap-top.open::after {
  opacity: 0;
  transform: translateY(-8px) scaleX(1.02);
}

.flap-top.open::before {
  opacity: 1;
}

/* ── Wax seal ─────────────────────────────────────────────── */
/* Sits exactly where the flaps intersect. */
.seal-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  width: clamp(120px, 32vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  z-index: 5;
  /* Subtle drop-shadow to lift the seal off the envelope */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.seal-wrap.pressed {
  transform: translate(-50%, -50%) translateY(-6px) scale(1.02);
}

.seal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.seal-wrap.open {
  transform: translate(-50%, -50%) translateY(-24px) scale(1.04);
}

/* ── Hint text ───────────────────────────────────────────── */
.hint {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 3.8vw, 18px);
  letter-spacing: 1.5px;
  color: #a88d55;
  opacity: 0;
  animation: fadeIn 1.2s ease 2s forwards;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 10;
}

@media (max-width: 520px) {
  .envelope {
    padding: 12px;
  }

  .seal-wrap {
    width: clamp(96px, 30vw, 130px);
  }

  .hint {
    font-size: 15px;
    bottom: calc(max(24px, env(safe-area-inset-bottom, 24px)) + 8px);
  }
}