/* The big envelope (static/envelope.js builds it), shared by the landing page and the reader.
   Five stacked layers in one frame (1200 x 1336). Frame landmarks, as shares of the frame: the
   envelope's top edge (the flap's hinge) is 40.49% down; the card sits in the pocket and slides up
   39.8% of the frame; the seal centre is 69.2% down. */
.stage { position: relative; width: 100%; aspect-ratio: 1200 / 1336; pointer-events: none; perspective: 1400px; perspective-origin: 50% 40.49%; }
.stage > img, .stage .card, .stage .flap { position: absolute; left: 0; top: 0; width: 100%; }
.stage img { display: block; width: 100%; }
.stage .panel { z-index: 1; }
.stage .card { z-index: 2; transition: transform .95s cubic-bezier(.2,.8,.25,1.04); }
.stage .pocket { z-index: 3; }
.stage .sticker { position: absolute; z-index: 3; display: block; transform-origin: 50% 50%;
  filter: drop-shadow(0 .5px .5px rgba(31,26,20,.35)) drop-shadow(0 2px 3px rgba(31,26,20,.16)); }
.stage .flap { z-index: 4; aspect-ratio: 1200 / 1336; transform-origin: 50% 40.49%; transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.5,.05,.3,1); }
.stage .flap .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stage .flap .back { transform-origin: 50% 40.49%; transform: rotateX(180deg); }
.stage.is-open .flap { transform: rotateX(180deg); }
.stage.is-open:not(.is-done) .flap .face { animation: turnlight .72s ease-in-out; }
@keyframes turnlight { 50% { filter: brightness(.8); } }
.stage.is-flat .flap { z-index: 0; }
.stage.is-out .card { transform: translateY(-39.8%); }

/* The seal, and its breaking (envelope.js): crack lines, then four pieces and a few crumbs. */
.stage .seal, .stage .crack { position: absolute; z-index: 5; left: 39.6%; top: 60.17%; width: 20.5%; }
.stage .crack { z-index: 6; aspect-ratio: 1; overflow: visible; }
.stage .crack polyline { fill: none; stroke: rgba(28,10,8,.62); stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.stage .frag { z-index: 6; will-change: transform, opacity; }
.stage .crumb { position: absolute; z-index: 6; border-radius: 40% 55% 45% 60%; aspect-ratio: 1; box-shadow: inset -1px -1px 0 rgba(0,0,0,.25); }
.stage.is-done .seal { display: none; }
.stage.is-later .layer, .stage.is-later .flap { filter: saturate(.85); }
.sealbtn { position: absolute; z-index: 7; left: 50%; top: 69.2%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.sealbtn:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.stage.is-done, .stage.is-done * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .stage, .stage * { transition: none !important; animation: none !important; } }

/* The small envelopes (week rows): a sticker on the back, placed by envelope.js. */
.env { position: relative; }
.env .sticker { position: absolute; display: block; filter: drop-shadow(0 .5px .5px rgba(31,26,20,.3)); }

/* Handwriting (envelope.js write): each letter is wiped in left to right, like a pen stroke, and the
   ink settles from a little darker and softer. The delays are set per letter; `ink-go` (or the
   reader's card coming out) starts them. */
.ink-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ink .ink-w { white-space: nowrap; }
.ink .ink-ch { display: inline-block; opacity: 0; }
.ink.ink-go .ink-ch, .stage.is-out .cardface.ink .ink-ch { animation: inkch .32s cubic-bezier(.3,.6,.4,1) both; }
.ink .ink-after { opacity: 0; }
.ink.ink-go .ink-after { animation: inkfade .5s ease-out both; }
@keyframes inkch {
  from { opacity: 0; clip-path: inset(-25% 100% -25% -10%); filter: blur(.5px); transform: translateY(.04em); }
  45% { opacity: 1; }
  to { opacity: 1; clip-path: inset(-25% -15% -25% -10%); filter: none; transform: none; }
}
@keyframes inkfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ink .ink-ch, .ink .ink-after { opacity: 1; animation: none !important; } }