/* =====================================================================
   00 · Opening envelope gate
   Hidden unless JS is running; can never trap content (see inline script in index.html).
   ===================================================================== */
.envelope-gate {
  position: fixed; inset: 0; z-index: 200;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: max(56px, env(safe-area-inset-top)) var(--gutter) max(32px, env(safe-area-inset-bottom));
  overflow: hidden;
  background-color: var(--paper);
  background-image: var(--tex-paper);
  background-size: 384px 384px;
}
.js:not(.intro-done) .envelope-gate, .envelope-gate.is-replaying { display: flex; }

.gate__backdrop { position: absolute; inset: 0; pointer-events: none; }
.gate__wash-a { width: 130vmax; height: 100vmax; left: 50%; top: 46%; transform: translate(-50%, -50%); --wash-opacity: 0.5; }
.gate__wash-b { width: 70vmax; height: 56vmax; left: 62%; top: 30%; transform: translate(-50%, -50%); --wash-opacity: 0.22; }
.gate__wisteria { position: absolute; top: -2vw; width: min(78vw, 720px); }
.gate__wisteria--l { left: -10vw; transform: scaleX(-1); }
.gate__wisteria--r { right: -10vw; }
.gate__wisteria .art { position: relative; width: 100%; }
.gate__corner { display: none; position: absolute; top: -2vw; width: min(36vw, 620px); }
.gate__corner .art { position: relative; width: 100%; }
.gate__corner--l { left: -3vw; }
.gate__corner--r { right: -3vw; transform: scaleX(-1); }
.gate__lotus { bottom: -2vh; }
.gate__lotus--a { left: 3vw; width: clamp(56px, 15vw, 120px); }
.gate__lotus--b { left: 16vw; width: clamp(70px, 20vw, 150px); bottom: -4vh; }
.gate__lotus--c { right: 6vw; width: clamp(60px, 17vw, 130px); }
.gate__lotus--d { right: 24vw; width: clamp(26px, 7vw, 54px); bottom: -1vh; }

/* keyboard-only: the envelope itself is the way in; Esc also skips */
.gate__skip {
  position: absolute; z-index: 3; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
  min-height: 44px; padding: 10px 14px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(248, 243, 230, 0.85); border-radius: 3px;
}
.gate__skip:not(:focus-visible) { opacity: 0; pointer-events: none; }

.gate__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }

/* ---------------------------------------------------------------- the envelope (a 3D scene, js/envelope3d.js)
   `.envelope` is the layout slot and the button; the canvas behind it is framed so the envelope lands on it. */
.envelope {
  position: relative; width: min(90vw, 560px); max-width: 100%; aspect-ratio: 600 / 410;
  border-radius: 8px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.envelope[data-dragging] { cursor: grabbing; }
.envelope:focus-visible { outline-offset: 10px; border-radius: 8px; }
/* soft paper silhouette while the scene loads */
.envelope::before {
  content: ''; position: absolute; inset: 9% 1.5% 4%; border-radius: 6px;
  background: var(--paper-deep) var(--tex-paper); box-shadow: var(--shadow-paper);
  opacity: 0.45; transition: opacity 0.6s var(--ease-out);
}
.envelope-gate.is-3d .envelope::before { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .envelope-gate:not(.is-3d) .envelope::before { animation: envelope-loading 1.4s var(--ease-soft) infinite alternate; }
}
@keyframes envelope-loading { from { opacity: 0.25; } to { opacity: 0.55; } }

.envelope-3d {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease-out);
}
.envelope-gate.is-3d .envelope-3d { opacity: 1; }

@media (min-width: 900px) {
  .gate__corner { display: block; }
  .gate__wisteria--l { display: none; }
  .gate__wisteria--r { right: auto; left: 50%; top: -1.8vw; width: min(36vw, 620px); transform: translateX(-50%) scaleX(-1); }
  .gate__lotus--a { left: 12vw; }
  .gate__lotus--b { left: 18vw; }
  .gate__lotus--c { right: 14vw; }
  .gate__lotus--d { right: 26vw; }
}
@media (max-height: 640px) {
  .envelope { width: min(84vw, 480px, 68vh); }
}