/* envelope.css -- idle + opening of the envelope intro (js/motion/envelope.js).
   Every node styled here is created by envelope.js only when motion runs, and is
   transparent at rest, so no-JS / reduced motion / frame 0 is the bare PSD. */

/* 3D only while opening: the flaps fold toward the viewer around their hinges.
   The stage is 100svh tall, so 3000 design px = 100svh * 3000/1920. */
html.motion .intro.is-opening .stage {
  perspective: calc(100svh * 3000 / 1920);
  perspective-origin: 50% 50%;
}
html.motion .intro [data-layer="flap-top"] { transform-origin: 50% 0%; }
html.motion .intro [data-layer="flap-bottom"] { transform-origin: 50% 100%; }

/* Warm halo behind the wax seal (centre 540,960). Above the flaps, below text. */
html.motion .env-glow {
  position: absolute;
  left: calc(260 * var(--u));
  top: calc(680 * var(--u));
  width: calc(560 * var(--u));
  height: calc(560 * var(--u));
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 220, 156, 0.8), rgba(246, 196, 116, 0.34) 46%, rgba(246, 196, 116, 0) 100%);
}

/* .env-seal-in breathes; the seal .ly wrapper does the opening. */
html.motion .env-seal-in { position: absolute; inset: 0; display: block; }