/* =========================================================
   ENVELOPE COMPONENT
   Comes after the FAQ. Scroll-driven: the flap opens, the letter
   rises out of the envelope, then settles forward while a black
   layer fades in. Progress is driven by js/envelope/main.js.
   All class names are prefixed "envelope-" because .layer / .back /
   .front etc. are already used by the folder and other components.
   ========================================================= */

/* ---------- Scroll area + sticky stage ---------- */
.envelope-section {
  /* sits above the fixed dots layer, like the camera and FAQ sections */
  position: relative;
  z-index: 1;
  height: 500vh;
  /* js/envelope/main.js gives this a negative top margin so the envelope pins early (PIN_TOP).
     The section then overlaps the bottom of the FAQ, so it must not catch clicks meant for it. */
  pointer-events: none;
}
/* The envelope is the last thing on the page. Once its animation has finished
   (js/envelope/main.js adds .envelope-done) nothing can be scrolled / bounced past it. */
html.envelope-done {
  overscroll-behavior-y: none;
}
.envelope-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Fixed-size design space; scaled to fit the screen by js/envelope/main.js */
.envelope-world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 960px;
  transform-origin: 50% 50%;
}
.envelope-env {
  position: absolute;
  left: 28px;
  top: 480px;
  width: 704px;
  height: 453px;
}

/* ---------- Envelope layers (bottom to top) ---------- */
.envelope-layer {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.envelope-back   { left: -5px; top: 0; width: 714px; height: auto; z-index: 1; clip-path: inset(0 5px 0 5px); }
.envelope-letter { left: 9px; top: 2px; width: 685px; height: 449px; z-index: 2; will-change: transform; }
.envelope-front  { left: 0; top: 0; width: 704px; height: 453px; z-index: 4; }

/* Full-screen black layer (sits above the envelope, below the letter copy) */
.envelope-lbg {
  position: absolute;
  left: -6000px;
  top: -6000px;
  width: 12704px;
  height: 12453px;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* ---------- Flap ---------- */
.envelope-perspective {
  position: absolute;
  left: 0;
  top: 0;
  width: 704px;
  height: 453px;
  perspective: 1600px;
  pointer-events: none;
  z-index: 5;
}
.envelope-flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 704px;
  height: 275px;
  transform-origin: 50% 0;
  will-change: transform;
}
.envelope-flap img {
  position: absolute;
  left: -8px;
  top: -9px;
  width: 720px;
  height: auto;
  transform: scaleY(-1);
  clip-path: inset(0 8px 9px 8px);
}