/* ==========================================================================
   ENVELOPE — shell, address side, inside, pocket, lid and seal.
   Colours come from theme.css.
   ========================================================================== */
.scene { perspective: 1100px; width: var(--env-w); height: var(--env-h); max-width: 100%; }

.envelope {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 2.7s ease-in-out;          /* flip speed */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.envelope:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px;
}

/* ---- address side, seen first ---- */
.address {
  background: var(--noise), linear-gradient(160deg, var(--paper), var(--paper-2));
  box-shadow: 0 30px 60px -18px rgba(40,50,35,.45), 0 8px 18px -6px rgba(40,50,35,.3),
              inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 24px rgba(120,100,60,.12);
  display: grid;
  place-items: center;
}
.address .to { text-align: center; display: grid; gap: .2em; color: var(--green); translate: 0 8%; }
.address .to small {
  font-family: var(--caps);
  font-size: calc(var(--env-w) * .024);
  letter-spacing: .3em;
  color: var(--ink-soft);
}
.address .to span { font-family: var(--script); font-size: calc(var(--env-w) * .1); line-height: 1.1; }
.address .to i {
  display: block; width: 70%; height: 1px; margin: .1em auto 0;
  background: color-mix(in srgb, var(--green) 30%, transparent);
}

/* ---- flap side ---- */
.flapside { transform: rotateY(180deg); perspective: 900px; perspective-origin: 50% 0; }

.inner {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 4px;
  background: var(--noise), linear-gradient(180deg, var(--inside-1) 0%, var(--inside-2) 18%, var(--inside-2) 45%, var(--inside-pocket) 52%);
  box-shadow: 0 30px 60px -18px rgba(40,50,35,.45), 0 8px 18px -6px rgba(40,50,35,.3);
}

/* ---- front pocket ---- */
.pocket { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 4px; overflow: hidden; }
.pocket svg, .lid svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ---- top lid ---- */
.lid {
  position: absolute; z-index: 5;
  left: 0; right: 0; top: 0;
  height: 91.5%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transition: transform .9s ease-in-out;           /* lid speed */
}
.lid > .out, .lid > .in { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lid > .in { transform: rotateY(180deg); }
.lid .shade { fill: var(--lid-shade); transition: opacity .45s ease-in; }
.lid .out .shade { opacity: 0; }
.lid .in .shade { opacity: .45; transition: opacity .45s ease-out .45s; }

/* ---- wax seal ---- */
.seal {
  position: absolute;
  left: 50%; top: 86%;
  width: 17%;
  aspect-ratio: 1;
  translate: -50% -50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 36% 30%, var(--seal-hi), var(--green) 58%, var(--seal-lo) 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 -3px 5px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.12);
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--gold) 85%, white);
  font-family: var(--script);
  font-size: calc(var(--env-w) * .06);
}
.seal::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(220,200,150,.35); }

/* ---- SVG paint, driven by theme tokens ---- */
.c-paper-hi { stop-color: var(--paper-hi); }
.c-paper    { stop-color: var(--paper); }
.c-paper-mid{ stop-color: var(--paper-mid); }
.c-paper-2  { stop-color: var(--paper-2); }
.c-paper-lo { stop-color: var(--paper-lo); }
.c-fold     { stop-color: var(--paper-fold); }
.c-in-1     { stop-color: var(--inside-1); }
.c-in-2     { stop-color: var(--inside-2); }
.c-in-3     { stop-color: var(--inside-3); }
.gum        { stroke: var(--gum); }
.fold-shadow{ flood-color: var(--fold-shadow); }

/* ---- animation states ---- */
.st-flip .envelope { transform: rotateY(180deg); }
.st-lid .lid { transform: rotateX(-160deg); }
.st-lid .lid .out .shade { opacity: .32; }
.st-lid .lid .in .shade { opacity: 0; }
.st-lidback .lid { z-index: 2; }