/* ================= Seite 1 · Umschlag ================= */
.view-envelope {
  --s: 1;          /* Skalierung, per JS gesetzt */
  --tip: 520px;    /* y der Klappenspitze, per JS gesetzt */
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--env) url("../assets/svg/texture-felt.svg");
  color: var(--cream);
}
.env-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.env-content { position: absolute; inset: 0; }
.env-kicker, .env-names, .env-open, .env-seal {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
}
.env-kicker {
  top: calc(var(--tip) - 313px * var(--s));
  font-size: max(17px, calc(26px * var(--s)));
  letter-spacing: .02em;
}
.env-names {
  top: calc(var(--tip) - 250px * var(--s));
  font-family: var(--script);
  font-size: max(42px, calc(64px * var(--s)));
  line-height: 1.2;
}
.env-seal {
  top: calc(var(--tip) + 8px * var(--s));
  width: calc(190px * var(--s));
  display: block;
  border-radius: 50%;
  transition: filter .35s var(--ease), transform .35s var(--ease);
}
.env-seal-img { display: block; }
.env-seal:hover, .env-seal:focus-visible { transform: translate(-50%, calc(-50% - 3px)); filter: brightness(1.03); }
.env-open {
  top: calc(var(--tip) + 235px * var(--s));
  font-size: max(17px, calc(23px * var(--s)));
  text-decoration: none;
  padding: 10px 14px;
  letter-spacing: .02em;
}
.env-open::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s var(--ease);
}
.env-open:hover::after, .env-open:focus-visible::after { transform: scaleX(1); }

/* Buchstabenweise Einblendung */
.js-split .ch { opacity: 0; }
.view-envelope.is-in .js-split .ch {
  animation: letter-in .5s ease forwards;
  animation-delay: calc(var(--base, 0ms) + var(--i) * 38ms);
}
.view-envelope .env-names { --base: 520ms; }
@keyframes letter-in { from { opacity: 0; } to { opacity: 1; } }

.view-envelope.is-in .env-seal { animation: seal-in .9s var(--ease) backwards; animation-delay: .15s; }
.view-envelope.is-in .env-open { animation: fade-up .8s var(--ease) backwards; animation-delay: 1.5s; }
@keyframes seal-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fade-up { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Öffnen: Siegel hebt ab, Ansicht blendet aus */
.view-envelope.is-opening .env-seal { animation: seal-lift .55s var(--ease) forwards; }
@keyframes seal-lift { to { opacity: 0; transform: translate(-50%, calc(-50% - 24px)) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .js-split .ch { opacity: 1; }
}