/*  Envelope scene wrapper */

.envelope-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: clamp(16px, 4vmin, 40px);
  box-sizing: border-box;
}

/*  Closed envelope  */

.envelope-closed {
  position: relative;
  width: min(840px, 92vw, calc(80vh * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: clamp(6px, 2cqw, 20px);
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.14),
    0 28px 70px rgba(0, 0, 0, 0.12);
  container-type: inline-size;
  cursor: pointer;
  perspective: 1000px;
  perspective-origin: 50% 30%;
}

.envelope-closed:not(.envelope-open):hover {
  transform: translateY(-3px);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.16),
    0 34px 80px rgba(0, 0, 0, 0.14);
}

/* Envelope interior */

.envelope-interior {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, #eae7e0 0%, #dedad2 55%, #d0ccc4 100%);
  z-index: 0;
}

/* Four triangular flap sections */

.envelope-flap-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;

  background: linear-gradient(to bottom, #e4e0d7 0%, #dad6cd 55%, #ccc8bf 100%);

  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

  transform-origin: top center;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.6, 1);
  z-index: 3;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 4px rgba(255, 252, 244, 0.5);
}

.envelope-flap-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;

  background: linear-gradient(to top,
    #a09b93 0%,
    #b2ada6 45%,
    #c8c3bb 100%
  );

  clip-path: polygon(0% 100%, 100% 100%, 50% 0%);

  z-index: 1;

  filter: drop-shadow(0 -4px 7px rgba(0, 0, 0, 0.24));
}

.envelope-flap-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;

  background: linear-gradient(140deg,
    #dedad0 0%,
    #d0cbc1 50%,
    #c4bfb4 100%
  );

  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);

  z-index: 1;

  filter: drop-shadow(5px 0 8px rgba(0, 0, 0, 0.24));
}

.envelope-flap-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;

  background: linear-gradient(220deg,
    #d4cfc5 0%,
    #c8c3b9 50%,
    #bcb7ad 100%
  );

  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);

  z-index: 1;

  filter: drop-shadow(-5px 0 8px rgba(0, 0, 0, 0.24));
}

/* Crease lines */

.envelope-creases {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

/* Wax seal */

.wax-seal {
  position: absolute;
  top: 53%;
  left: 50%;
  width: 24cqw;
  z-index: 4;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.4s ease 0.75s,
    transform 0.4s ease 0.75s;
}

.wax-seal-img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* Seal fades out on click */
.envelope-open .wax-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition:
    opacity 0.45s ease 0s,
    transform 0.45s ease 0s;
}

.envelope-open .envelope-flap-top {
  transform: rotateX(-165deg);
  transition: transform 1.05s cubic-bezier(0.3, 0, 0.15, 1) 0.3s;
}