/* Generated textile components share one light direction. The transparent pocket and flap
   contain their real stitched edges; CSS supplies only thickness, hinges and moving contact light. */
.cold { color: #5e5546; cursor: pointer; background: radial-gradient(ellipse at 32% 24%, #faf8f2, #eee9de 76%, #e5dfd1); }
.device:has(.cold:not(.cutting)) #sound { color: #776e5b; border-color: #776e5b30; background: #fffdf940; }
.cold .cue { position: absolute; left: 24px; right: 24px; top: calc(var(--safe-top) + 84px); z-index: 3; text-align: center; pointer-events: none; }
.cold .cue .title { font-size: clamp(34px, 9vw, 44px); font-weight: 300; letter-spacing: -.05em; color: #5e5546; }
.cold .open-hint { position: absolute; top: calc(55% + var(--env-h) / 2 + 66px); left: 0; right: 0; text-align: center; color: #81765f; pointer-events: none; font-size: 10px; letter-spacing: .22em; }

.env-wrap { position: absolute; inset: 0; z-index: 2; }
.stationery-loading .env-stage { visibility: hidden; }
.env-stage { position: absolute; left: 50%; top: 55%; width: var(--env-w); height: var(--env-h); margin-left: calc(var(--env-w) / -2); margin-top: calc(var(--env-h) / -2); perspective: 1400px; }
.env-shadow { position: absolute; inset: 6% -2% -6%; z-index: 0; border-radius: 8%; background: radial-gradient(ellipse, #4d412b28, #4d412b0c 62%, transparent 76%); filter: blur(11px); transform: translate(4px, 16px) rotate(-2deg); pointer-events: none; }
.env-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.env { position: absolute; inset: 0; perspective: 1400px; user-select: none; -webkit-user-select: none; will-change: transform; }
.env .body { position: absolute; inset: 0; z-index: 1; border-radius: 3px; background: #e6dcc6 var(--stationery-paper) center/100% 100%; box-shadow: 0 1px 0 #cabda1, 0 2px 0 #b9aa8d, 1px 3px 2px #58452724, 0 12px 22px #58452717; }
.env-lining { position: absolute; inset: 2px 2px 3px; z-index: 2; border-radius: 2px; background: linear-gradient(#5347311a, #53473103 72%), var(--stationery-paper) center/100% 100%; box-shadow: inset 0 12px 12px -12px #46372070; }
/* Fold seams are photographed into one alpha-cut pocket, never separate gradient triangles. */
.fold { display: none; }
.env .front { position: absolute; inset: 0; z-index: 6; pointer-events: none; filter: drop-shadow(0 -1px 1px #5b4c3426); }
.pocket-art { display: block; width: 100%; height: 100%; object-fit: fill; }
.envelope-names { position: absolute; left: 17%; right: 17%; top: 76%; margin: 0; text-align: center; font: italic 400 19px/1.1 var(--display); letter-spacing: -.025em; color: #847452; text-shadow: 0 1px #fff9eab3; mix-blend-mode: multiply; }
.env .flap { position: absolute; left: 0; right: 0; top: -1px; height: 64%; z-index: 7; transform-origin: 50% 0%; backface-visibility: visible; will-change: transform; filter: drop-shadow(0 2px 1px #54432a35); }
.env .flap::before { content: ""; position: absolute; left: 1%; right: 1%; top: 2px; height: 1px; z-index: 1; background: #fff9e896; }
.env .flap::after { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(#5b4c3420, transparent 64%), var(--stationery-paper) center/100% 145%; clip-path: polygon(0 0, 100% 0, 54% 97%, 50% 100%, 46% 97%); }
.env .flap.inner { z-index: 0; filter: drop-shadow(0 -1px 1px #54432a22); }
.env .flap.inner::after { opacity: 1; }
.crease-shadow { position: absolute; inset: 0 0 40%; z-index: 4; pointer-events: none; opacity: .16; background: linear-gradient(#44351f44, #44351f05 70%, transparent); }

/* The original photograph sits underneath the transparent stitched circle. Shared weave and
   matte print treatment integrate it with the flap without changing the couple's faces. */
.envelope-portrait { position: absolute; inset: 0 0 auto; height: calc(var(--env-w) * .548); margin: 0; backface-visibility: hidden; }
.envelope-flap-art { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; object-fit: fill; }
.envelope-cover-photo { position: absolute; left: 36.5%; top: 11.4%; width: 27%; height: auto; aspect-ratio: 1; z-index: 1; display: block; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(.94); mix-blend-mode: multiply; }
.envelope-portrait.has-cover::after { content: ""; position: absolute; left: 36.5%; top: 11.4%; width: 27%; height: auto; aspect-ratio: 1; z-index: 3; border-radius: 50%; pointer-events: none; background: var(--stationery-paper) center/350px auto; mix-blend-mode: soft-light; opacity: .12; }
.envelope-portrait figcaption { position: absolute; top: 59%; left: 30%; right: 30%; text-align: center; font: 400 5px/1 var(--sans); color: #8b7f68; }
.env .flap.inner .envelope-portrait { visibility: hidden; }

/* The photographic strip is printed on a matching stitched linen mount. */
.env .card { position: absolute; left: calc(50% - var(--card-w) / 2); top: 12px; z-index: 3; width: var(--card-w); height: var(--card-h); display: flex; flex-direction: column; padding: 16px 16px 24px; background: #f0e8d5 var(--stationery-strip) center/100% 100%; color: #5f5747; border-radius: 2px; transform-origin: 50% 50%; box-shadow: 0 1px 0 #dbd0b8, 0 2px 0 #c8b99b, 0 10px 24px #4b39282b; will-change: transform, clip-path; }
.strip-photos { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(3,minmax(0,1fr)); gap: 10px; }
.strip-frame { position: relative; min-height: 0; margin: 0; overflow: hidden; background: transparent; border: 1px solid #f7f0dbb3; box-shadow: 0 0 0 1px #8a775820; }
.strip-frame img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(.94); mix-blend-mode: multiply; opacity: .92; }
.strip-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--stationery-paper) center/350px auto; mix-blend-mode: soft-light; opacity: .15; }
.strip-footer { flex: none; padding: 14px 0 27px; text-align: center; }
.strip-names { margin: 0 0 9px; font: 300 clamp(27px,6.8vw,30px)/1 var(--display); letter-spacing: -.055em; color: #6a5c41; mix-blend-mode: multiply; }
.invite-heading { margin: 0; color: #8c7b58; font: 500 7px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* Supplied olive wax artwork carries its own rim and embossed monogram. */
.env .seal { position: absolute; left: 50%; top: calc(64% - 24px); margin-left: -24px; z-index: 8; width: 48px; height: 48px; display: grid; place-items: center; will-change: transform, opacity; filter: drop-shadow(0 2px 2px #4d412c38); }
.seal-wax { display: none; }
.env .seal .glyph { position: relative; z-index: 1; display: block; width: 100%; height: 100%; font: italic 12px var(--display); color: #f8f1e2; }
.env .seal-monogram { width: 100%; height: 100%; object-fit: contain; }
.env-hit { position: absolute; inset: -24px; z-index: 4; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.env-hit:focus-visible { outline: 1px solid #a58c64; outline-offset: 4px; }
.env-hit:disabled { pointer-events: none; }

.no-gsap .env { animation: stationeryIn .9s ease both; }
@keyframes stationeryIn { from { opacity: 0; transform: translateY(15px) rotate(-3deg); } to { opacity: 1; transform: rotate(-1.5deg); } }
.no-gsap .env .seal { transition: opacity .3s; }
.no-gsap .env .flap { transition: transform .65s ease, z-index 0s .325s; }
.no-gsap .env .card { transition: transform .85s ease .6s, clip-path .85s ease .6s; }
.no-gsap .env.open { transform: translateY(var(--env-drop)); transition: transform .85s ease .6s; }
.no-gsap .env.open .seal { opacity: 0; }
.no-gsap .env.open .envelope-portrait { opacity: 0; transition: opacity .2s; }
.no-gsap .env.open .flap { transform: rotateX(180deg); z-index: 0; }
.no-gsap .env.open .flap::after { opacity: 1; }
.no-gsap .env.open .card { transform: translateY(var(--card-lift)); clip-path: inset(0px 0px 0px 0px) !important; z-index: 8; }
@media (prefers-reduced-motion: reduce) { .no-gsap .env { animation: none; } }