/* Envelope & wax seal (core/opening/001) — library w1 (A1279), ported from themes/garden/theme.css (Wave 2, A1263):
   the paper gate with florals, the names, and the envelope whose flap swings open while the card rises. */
.op001 {
  /* envelope liner: shared by the flap's inside and the inside of the back */
  --op001-liner: radial-gradient(circle, rgb(var(--c-primary-rgb) / .22) 0 1.1px, transparent 1.6px) 0 0 / 12px 12px,
                 linear-gradient(180deg, rgb(var(--c-primary-rgb) / .14), rgb(var(--c-secondary-rgb) / .12)), var(--k-card);
}
.op001-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- gate: envelope with a wax seal ---------- */
.op001 {
  font: 600 1rem/1.4 var(--k-font-body);
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; overscroll-behavior: contain;
  color: var(--k-ink);
  background: var(--k-paper) radial-gradient(90% 60% at 50% 100%, rgb(var(--c-primary-rgb) / .07), transparent 70%);
}
.op001__floral { position: absolute; top: -5vw; width: min(52vw, 360px); height: auto; pointer-events: none; }
.op001__floral--l { left: -7vw; }
.op001__floral--r { right: -7vw; transform: scaleX(-1); }
.op001__inner {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--k-s-4);
  padding: clamp(88px, 24vw, 160px) var(--k-gutter) var(--k-s-6); text-align: center;
}
.op001__names { font: 400 clamp(3rem, 14vw, 4.5rem)/1.05 var(--k-font-script); color: var(--c-primary); }
.op001__names .k-amp { font: 400 .62em/1 var(--k-font-script); margin: 0 .06em; color: var(--k-ink-soft); }
.op001__date { font: 600 .875rem/1.4 var(--k-font-body); letter-spacing: .2em; text-transform: uppercase; }
.op001__hint { margin-top: calc(-1 * var(--k-s-1)); font: 600 .6875rem/1.4 var(--k-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--k-ink-soft); }

/* Layers, back to front: back 1 · card 2 · pocket shade 3 · pocket 4 · flap shade 5 · flap 6 (drops to 1 once open) */
.op001-env {
  position: relative;
  width: min(78vw, 340px, 45vh);
  width: min(78vw, 340px, 45svh);
  aspect-ratio: 4 / 3;
  margin: var(--k-s-4) 0 var(--k-s-5);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.op001-env__shadow { position: absolute; left: 4%; right: 4%; bottom: -9%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgb(58 52 49 / .2), transparent); }
.op001-env__body { position: absolute; inset: 0; }
.op001-env__back { position: absolute; inset: 0; z-index: 1; border-radius: 4px; background: var(--k-grain), #EDE3D6; }
.op001-env__liner { position: absolute; left: 3.5%; right: 3.5%; top: 3%; height: 64%; border-radius: 2px; background: var(--op001-liner); }
.op001-env__card {
  position: absolute; left: 7%; right: 7%; top: 7%; height: 82%; z-index: 2;
  display: flex; justify-content: center; padding-top: 9%;
  border-radius: 3px; background: var(--k-grain), var(--k-card); box-shadow: 0 1px 3px rgb(58 52 49 / .12);
  will-change: transform;
}
.op001-env__card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgb(var(--c-secondary-rgb) / .4); border-radius: 2px; pointer-events: none; }
.op001-env__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 12px 26px rgb(58 52 49 / .18); opacity: 0; pointer-events: none; }
.op001-env__card span { position: relative; font: 400 clamp(1.375rem, 6.5vw, 1.875rem)/1 var(--k-font-script); color: var(--c-primary); }
/* soft shadows: blurred wrappers sit outside the 3D flap, so the filter flattens nothing */
.op001-env__pocketshade, .op001-env__flapshade { position: absolute; inset: 0; pointer-events: none; filter: blur(1.5px); }
.op001-env__pocketshade { z-index: 3; }
.op001-env__flapshade { z-index: 5; }
.op001-env__pocketshade i, .op001-env__flapshade i { position: absolute; inset: 0; background: rgb(58 52 49 / .16); }
.op001-env__pocketshade i {
  -webkit-clip-path: polygon(0 0, 50% calc(54% - 4px), 100% 0, 50% 54%);
  clip-path: polygon(0 0, 50% calc(54% - 4px), 100% 0, 50% 54%);
}
.op001-env__flapshade i {
  -webkit-clip-path: polygon(0 0, 50% 60%, 100% 0, 50% calc(60% + 5px));
  clip-path: polygon(0 0, 50% 60%, 100% 0, 50% calc(60% + 5px));
}
.op001-env__pocket {
  position: absolute; inset: 0; z-index: 4; border-radius: 4px;
  background:
    var(--k-grain),
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(58 52 49 / .09) 50%, transparent calc(50% + 1px)) left bottom / 50% 46% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), rgb(58 52 49 / .09) 50%, transparent calc(50% + 1px)) right bottom / 50% 46% no-repeat,
    linear-gradient(170deg, #F8F0E6, #EFE3D4);
  -webkit-clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.op001-env__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 6;
  transform-origin: 50% 0; transform: perspective(900px) rotateX(0deg); transform-style: preserve-3d;
  will-change: transform;
}
.op001-env__face {
  position: absolute; inset: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.op001-env__face--front { background: var(--k-grain), linear-gradient(180deg, #F6EEE3, #EEE2D2); }
/* rotateY, not rotateX: the triangle is left-right symmetric, so after the flap swings 180deg
   the liner's base sits on the hinge instead of floating above the envelope on its tip */
.op001-env__face--back { transform: rotateY(180deg); background: var(--op001-liner); }
.op001-env__face::after { content: ""; position: absolute; inset: 0; background: #3A3431; opacity: 0; }

/* the seal rides on the flap and turns away with it */
.op001-seal {
  position: absolute; left: 50%; top: 100%;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center; text-decoration: none; border-radius: 50%;
  transform: translateZ(2px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
.op001-seal__inner { position: relative; display: grid; place-items: center; width: 100%; height: 100%; will-change: transform; }
.op001-seal__wax { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-primary-deep); filter: drop-shadow(0 3px 4px rgb(58 52 49 / .28)); }
.op001-seal__mono { position: relative; font: 400 1.5rem/1 var(--k-font-script); color: #FFF6F2; text-shadow: 0 1px 0 rgb(0 0 0 / .18); }
/* A1508 (D-071, eye review #4): at 1.5rem the initials ran past the 76 px seal; they now keep inside its face */
.op001-seal__mono { font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
html:not(.motion-reduce) .op001:not(.is-opening) .op001-seal__inner { animation: op001-seal-hint 2.6s var(--k-ease) 1.2s infinite; }

/* opening sequence (runtime adds .is-opening on the tap; the gate is removed at opening.ms = 2600)
   0 seal press + text fades · 180-980 flap swings (90deg at 580, layer swap there) · 760-1560 card rises
   1560-1800 hold · 1800-2350 gate fades */
.op001.is-opening { pointer-events: none; animation: op001-gate-out 550ms ease 1800ms forwards; }
.op001__inner > .k-kicker, .op001__names, .op001__date { transition: opacity .35s ease, transform .35s ease; }
.op001__inner > .k-btn, .op001__hint { transition: opacity .3s ease; }
.op001.is-opening .op001__inner > .k-kicker,
.op001.is-opening .op001__names,
.op001.is-opening .op001__date { opacity: 0; transform: translateY(-6px); }
.op001.is-opening .op001__inner > .k-btn, .op001.is-opening .op001__hint { opacity: 0; }
.op001.is-opening .op001-seal__inner { animation: op001-seal-press 260ms ease-out both; }
.op001.is-opening .op001-seal { animation: op001-fade-out 120ms linear 460ms both; }
.op001.is-opening .op001-env__flapshade { animation: op001-fade-out 300ms ease-out 180ms both; }
.op001.is-opening .op001-env__flap { animation: op001-flap-swing 800ms linear 180ms both, op001-flap-under 800ms linear 180ms both; }
.op001.is-opening .op001-env__face--front::after { animation: op001-shade-in 400ms cubic-bezier(.55, .085, .68, .53) 180ms both; }
.op001.is-opening .op001-env__face--back::after { animation: op001-shade-out 400ms cubic-bezier(.25, .46, .45, .94) 580ms both; }
.op001.is-opening .op001-env__card { animation: op001-card-rise 800ms cubic-bezier(.4, 0, .2, 1) 760ms both; }
.op001.is-opening .op001-env__card::after { animation: op001-fade-in 800ms ease 760ms both; }
@keyframes op001-flap-swing {
  0%   { transform: perspective(900px) rotateX(0deg);   animation-timing-function: cubic-bezier(.55, .085, .68, .53); }
  50%  { transform: perspective(900px) rotateX(90deg);  animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
  100% { transform: perspective(900px) rotateX(180deg); }
}
@keyframes op001-flap-under { 0%, 49.9% { z-index: 6; } 50%, 100% { z-index: 1; } }
@keyframes op001-shade-in { from { opacity: 0; } to { opacity: .22; } }
@keyframes op001-shade-out { from { opacity: .28; } to { opacity: 0; } }
@keyframes op001-card-rise { from { transform: translateY(0); } to { transform: translateY(-62%); } }
@keyframes op001-seal-press { 0% { transform: scale(1); } 45% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes op001-seal-hint { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.06); } }
@keyframes op001-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes op001-fade-out { to { opacity: 0; } }
/* no scale: the gate florals must stay pixel-aligned with the Garden florals hero underneath */
@keyframes op001-gate-out { to { opacity: 0; } }

html.motion-reduce .op001.is-opening { animation: op001-gate-out .4s ease forwards; }
html.motion-reduce .op001.is-opening *,
html.motion-reduce .op001.is-opening *::after { animation: none !important; transition: none !important; }