/* ============================================================
   THE MEMBERS' PLACES, EACH WITH ITS OBJECT (rooms/vault.js)    P, 19 October 2026
   Documents: an ivory envelope, its black wax lifts, the flap opens and the certificate rises out of it.
   Private collection: a black lacquer frame and its cotton mat, waiting; a slow light crosses its glass.
   ============================================================ */
.mbr-s{ position:relative; }
.mh{ position:absolute; z-index:1; right:max(var(--margin, 5vw), 4vw); top:clamp(190px, 30vh, 320px); pointer-events:none; perspective:1200px; }

/* ---- the envelope ---- */
.mh-env{ width:clamp(240px, 26vw, 420px); aspect-ratio:3 / 2; }
.mh-env > *{ position:absolute; }
.mh-env-back, .mh-env-front{ inset:0; border-radius:3px; }
.mh-env-back{ background:#E9E3D6; box-shadow:0 30px 60px -18px rgba(20,18,15,.35), 0 8px 18px -8px rgba(20,18,15,.2); }
.mh-env-front{
  background:
    linear-gradient(to top right, #F3EEE4 49.6%, transparent 50%) left bottom / 50.4% 100% no-repeat,
    linear-gradient(to top left, #F1ECE1 49.6%, transparent 50%) right bottom / 50.4% 100% no-repeat,
    linear-gradient(to top, #F5F1E8 0 46%, transparent 46%);
  filter:drop-shadow(0 -1px 0 rgba(0,0,0,.05));
}
.mh-env-flap{
  left:0; right:0; top:0; height:58%; transform-origin:50% 0; transform:rotateX(0deg); z-index:3;
  background:linear-gradient(to bottom, #EFE9DE, #E6DFD1); clip-path:polygon(0 0, 100% 0, 50% 100%);
  animation:mh-flap 1.1s var(--settle, ease) .85s forwards;
}
.mh-seal{
  position:absolute; left:50%; top:100%; width:clamp(42px, 4.4vw, 70px); aspect-ratio:1; translate:-50% -62%; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #3a3a3e 0 8%, #0d0d0e 40%, #050506 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset, 0 6px 10px rgba(0,0,0,.35);
  display:grid; place-items:center; animation:mh-seal .6s var(--lift, ease) .45s forwards;
}
.mh-seal b{ font:400 clamp(18px, 2vw, 30px)/1 var(--display); color:#1c1c1f; text-shadow:0 1px 0 rgba(255,255,255,.18), 0 -1px 0 rgba(0,0,0,.6); }
/* the flap is cut so the seal can sit on its point and stay visible: the clip is relaxed by a pseudo hold */
.mh-env-flap{ clip-path:none; background:none; }
.mh-env-flap::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, #EFE9DE, #E3DCCD); clip-path:polygon(0 0, 100% 0, 50% 100%); box-shadow:0 2px 6px rgba(0,0,0,.08); }
.mh-cert{
  left:7%; right:7%; top:8%; height:84%; z-index:2; background:#FCFBF8; border-radius:2px; padding:7% 9%; box-sizing:border-box;
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 10px 22px -10px rgba(20,18,15,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em;
  transform:translateY(0); animation:mh-cert-out 2.1s var(--settle, ease) 1.45s forwards;
}
.mh-cert-k{ margin:0; font:400 clamp(7px, .65vw, 10px)/1 var(--mono); letter-spacing:.3em; color:#6b665c; }
.mh-cert-t{ margin:0; font:400 clamp(26px, 2.8vw, 46px)/1 var(--display); filter:url(#cp-vinyl-s); color:#141413; }
.mh-cert-nn{ display:inline-block; }
.mh-cert-n{ margin:0; font:400 clamp(12px, 1vw, 16px)/1 var(--num, var(--display)); filter:url(#cp-vinyl-xs); color:#141413; }
.mh-cert-rule{ width:40%; height:1px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.25), transparent); }
@keyframes mh-seal{ to{ transform:translateY(-18px) scale(.9); opacity:0; } }
@keyframes mh-flap{ to{ transform:rotateX(178deg); z-index:0; } }
/* 20 October: the certificate slides up out of the pocket until it is clear of it, then is laid down in front of the
   envelope, a little turned, as a hand lays a letter it has just taken out (one movement, settle, no bounce) */
@keyframes mh-cert-out{
  0%{ transform:translate3d(0, 0, 0) rotate(0deg); z-index:2; animation-timing-function:cubic-bezier(.45, 0, .2, 1); }
  48%{ transform:translate3d(0, -86%, 0) rotate(0deg); z-index:2; animation-timing-function:cubic-bezier(.3, 0, .15, 1); }
  52%{ z-index:5; }
  100%{ transform:translate3d(16%, 22%, 40px) rotate(-3.2deg); z-index:5; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 26px 40px -16px rgba(20,18,15,.38); }
}

/* ---- the frame, waiting ---- */
.mh-frame{ width:clamp(190px, 16vw, 290px); }
/* the envelope sits beside the title and is done before the certificate's own sheet begins below it */
.mbr-s[data-sec="documents"] .mh{ top:clamp(150px, 20vh, 190px); }
.mbr-s[data-sec="documents"] .mh-env{ width:clamp(220px, 20vw, 340px); }
.mbr-s[data-sec="private"] .mh{ top:clamp(220px, 40vh, 420px); right:max(var(--margin, 5vw), 6vw); }
.mh-frame-f{ --mx:0; --my:0; }
.mh-frame-m{ aspect-ratio:4 / 5; display:grid; place-items:center; }
.mh-frame-w{ width:62%; aspect-ratio:3 / 4; background:linear-gradient(160deg, #FBFAF7, #F1EEE7); box-shadow:inset 2px 3px 6px rgba(0,0,0,.08), 0 0 0 3px #FFFFFF, 0 0 0 4px rgba(0,0,0,.06); }
.mh-frame-glass{
  position:absolute; inset:clamp(6px, .75vmin, 11px); pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 40%, rgba(255,255,255,0) 50%) no-repeat;
  background-size:240% 100%; background-position:140% 0; mix-blend-mode:screen;
  animation:mh-glass 5.5s var(--breath, ease-in-out) 1.4s infinite;
}
@keyframes mh-glass{ 0%{ background-position:140% 0; } 45%, 100%{ background-position:-60% 0; } }
.mh-frame{ animation:mh-rise 1.4s var(--settle, ease) .6s both; }
.mh-env{ animation:mh-rise 1.2s var(--settle, ease) .1s both; }
@keyframes mh-rise{ from{ opacity:0; transform:translateY(5vh); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }

/* the private collection's old empty mat in the body is the frame now */
.mbr-s[data-sec="private"] .mbr-mat{ display:none; }

@media (max-width:1023px){
  .mh{ position:relative; right:auto; top:auto; margin:24px auto 0; display:block; }
  /* 20 October: on a phone and a small window the object stands in the flow under the letterhead, with room above it
     for the certificate that leaves it, and the title comes after it: it never covers the place's name */
  .mbr-s > .mh, .mbr-s[data-sec] > .mh{ top:auto; right:auto; margin:calc(var(--nav-h, 64px) + clamp(84px, 13vh, 130px)) auto 0; }
  .mbr-s > .mh + .mbr-docs{ padding-top:clamp(56px, 9vh, 96px); }
}
@media (prefers-reduced-motion:reduce){
  .mh, .mh *{ animation:none !important; }
}