/* =============================================================================
   ENVELOPE — shared component (intro + final letter)
   Opening sequence is driven by two classes added from JS:
     .is-open       seal pops, flap swings up, paper slides out
     .is-flap-back  flap drops behind the paper (set halfway through)
   ========================================================================== */

.envelope {
  --env-w: min(80vw, 360px);
  --env-back: #EDBDC8;
  --env-front: #F7DDE2;
  --env-flap: #F3CFD7;
  --env-flap-edge: #EBB9C4;
  --env-liner: var(--cherry);
  position: relative;
  width: var(--env-w);
  aspect-ratio: 16 / 10.4;
  perspective: 1100px;
  -webkit-user-select: none;
  user-select: none;
}

.env-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--env-back);
  box-shadow: 0 34px 60px -30px rgba(73, 52, 61, .6), 0 6px 14px -6px rgba(73, 52, 61, .2);
}

/* The paper waiting inside */
.env-paper {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 6%;
  bottom: 7%;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: 7%;
  border-radius: 10px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 21px, rgba(73, 52, 61, .07) 21px 22px) 0 44px / 100% 100% no-repeat,
    var(--paper);
  box-shadow: 0 2px 10px rgba(73, 52, 61, .14);
  transition: transform .6s var(--ease-in-out);
}
.env-paper-text {
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  font-weight: 700;
  color: var(--cherry);
  transform: rotate(-3deg);
}

/* Front pocket (V-shaped opening at the top) */
.env-front {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 16px;
  background: var(--env-front);
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}
.env-front::before,
.env-front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.env-front::before { /* left fold, catching light */
  background: linear-gradient(120deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%);
  clip-path: polygon(0 0, 50% 55%, 0 100%);
}
.env-front::after { /* right fold, in shade */
  background: rgba(73, 52, 61, .045);
  clip-path: polygon(100% 0, 50% 55%, 100% 100%);
}

.env-to {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  z-index: 1;
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(1.25rem, 5.4vw, 1.7rem);
  font-weight: 600;
  color: var(--ink-2);
  transform: rotate(-2deg);
}

/* Flap: two faces so the inside shows a liner when it opens */
.env-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 57%;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-in-out) .45s;
}
.env-flap-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.env-flap-out {
  background: linear-gradient(to bottom, var(--env-flap) 0%, var(--env-flap) 55%, var(--env-flap-edge) 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 16px 16px 0 0;
}
.env-flap-in {
  background: var(--env-liner);
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  transform: rotateX(180deg);
}

/* Wax seal */
.env-seal {
  position: absolute;
  left: 50%;
  top: 57%;
  z-index: 5;
  width: 58px;
  height: 58px;
  margin: -31px 0 0 -29px;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%;
  background: radial-gradient(circle at 34% 30%, #E7667B 0%, var(--cherry) 52%, #962637 100%);
  color: #F9C9D2;
  box-shadow:
    0 8px 16px -6px rgba(150, 38, 55, .7),
    inset 0 -3px 6px rgba(0, 0, 0, .2),
    inset 0 2px 3px rgba(255, 255, 255, .3);
  transition: transform .45s var(--ease-spring) 1s, opacity .3s ease 1s;
}
.env-seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .3);
}
.env-seal .icon { width: 24px; height: 24px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .18)); }

/* ---------- Idle charm ------------------------------------------------------ */
.envelope.is-idle { animation: env-float 5.5s ease-in-out infinite; }
.envelope.is-idle .env-seal .icon { animation: heartbeat 2.6s ease-in-out infinite; }

@media (hover: hover) {
  .envelope.is-idle:hover .env-flap { transform: rotateX(24deg); transition-delay: 0s; }
  .envelope.is-idle:hover .env-paper { transform: translateY(-6%); }
}

@keyframes env-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* ---------- Opening sequence ----------------------------------------------- */
.envelope.is-open { animation: env-wiggle .5s ease-in-out; }
.envelope.is-open .env-seal {
  transform: scale(1.35) rotate(-24deg);
  opacity: 0;
  transition: transform .4s var(--ease-out), opacity .35s ease .05s;
}
.envelope.is-open .env-flap {
  transform: rotateX(180deg);
  transition: transform .75s var(--ease-in-out) .25s;
}
.envelope.is-flap-back .env-flap { z-index: 1; }
.envelope.is-open .env-paper {
  transform: translateY(-46%);
  transition: transform .95s var(--ease-out) .95s;
}

@keyframes env-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2.5deg) scale(1.02); }
  60% { transform: rotate(2deg) scale(1.02); }
}

/* Instant reset (used when replaying) */
.envelope.no-anim,
.envelope.no-anim * { transition: none !important; animation: none !important; }