/* =============================================================================
   IMMETRICA — footer_button_mail.css
   Envelope animation at 40px display width.

   All transform-origin / clip-path / translateY values are percentages
   derived from the 876 × 990 px PNG canvases; they scale automatically.

   Pixel derivations (for reference):
     transform-origin flap-ext : 50% 38.48%   (hinge y = 381 / 990)
     transform-origin flap-int : 50% 42.93%   (hinge y = 425 / 990)
     clip-path letter-wrap     : inset(0 0 58.08% 0)   (opening y = 415 / 990)
     letter start              : translateY(27%)        (content safely below clip)
============================================================================= */

/* ── Outer shell ─────────────────────────────────────────────────────────── */
.env-outer {
  display: inline-block;
  width: 68px;          /* body content = 68 × 642/876 ≈ 50px, matching old mail.png */
  aspect-ratio: 876 / 990;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  overflow: visible;
  vertical-align: middle;
  transform: rotate(-11.4deg);   /* permanent clockwise tilt matching original mail.png */
  transform-origin: center center;
}

/* ── Scene — the stacking context for all layers ─────────────────────────── */
.env-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 876 / 990;
  overflow: visible;
}

/* ── Shared full-canvas layer rules ──────────────────────────────────────── */
.env-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ── Individual z-order ──────────────────────────────────────────────────── */

#env-rear     { z-index: 1; }

#env-body     { z-index: 2; }

/* Flap interior — starts back-facing (hidden); JS opens with rotateX */
#env-flap-int {
  z-index: 3;
  transform-origin: 50% 42.93%;
  opacity: 0;
  will-change: transform, opacity;
}

/* Letter wrapper — clip-path hides everything below the envelope opening */
#env-letter-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  clip-path: inset(0 0 58.08% 0);
  pointer-events: none;
  overflow: visible;
}

/* Letter image — starts below the clip boundary (translateY set by JS) */
#env-letter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transform: translateY(27%);
  will-change: transform;
}

/* ── Logo scatter container ──────────────────────────────────────────────── */
#env-logos {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

/* Each dynamically created logo instance */
.env-logo-fly {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  object-fit: cover;
  will-change: transform, opacity;
}

/* Flap exterior + baked drop-shadow — topmost when closed */
#env-flap-ext {
  z-index: 6;
  transform-origin: 50% 38.48%;
  will-change: transform, opacity;
}