/* Envelop + uitnodigingskaart. Gedeeld door de landingspagina en de demo.
   De envelop opent met één georkestreerde beweging:
   zegel los → klep open → kaart schuift omhoog en komt naar voren. */

.env {
  --env-front: #EFC9C3;
  --env-bottom: #F3D3CE;
  --env-flap: #E9BDB6;
  --env-inside: #E2ADA6;
  --env-edge: rgba(90, 26, 44, .28);
  --liner: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%2740%27 viewBox=%270 0 40 40%27%3E%3Cg fill=%27%235A1A2C%27 fill-opacity=%27.42%27%3E%3Cpath transform=%27translate%285 13%29 rotate%28-35%29%27 d=%27M0 0C3-3.6 9-3.6 12 0C9 3.6 3 3.6 0 0Z%27/%3E%3Cpath transform=%27translate%2825 33%29 rotate%28-35%29%27 d=%27M0 0C3-3.6 9-3.6 12 0C9 3.6 3 3.6 0 0Z%27/%3E%3Ccircle cx=%2730%27 cy=%2710%27 r=%271.1%27/%3E%3Ccircle cx=%2710%27 cy=%2730%27 r=%271.1%27/%3E%3C/g%3E%3C/svg%3E");
  --t-seal: .55s;
  --t-flap: .75s;
  --t-card: 1.5s;
  --d-seal: .5s;
  --d-flap: 1s;
  --d-card: 1.6s;
  position: relative;
  width: var(--env-w, 340px);
  aspect-ratio: 100 / 140;
  perspective: 1800px;
  container-type: inline-size;
}

.env__back {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background-color: var(--env-inside);
  background-image: var(--liner);
  background-size: 9cqi 9cqi;
}

.env__card {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 2.5%;
  height: 93%;
  z-index: 2;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 .4cqi 1.2cqi rgba(90, 26, 44, .14), 0 0 0 .3cqi rgba(90, 26, 44, .04);
  transform-origin: 50% 60%;
}

.env__pocket {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1.6cqi 3cqi rgba(90, 26, 44, .16));
}
.e-front { fill: var(--env-front); }
.e-bottom { fill: var(--env-bottom); }
.e-flap { fill: var(--env-flap); }
.e-edge { fill: none; stroke: var(--env-edge); }

.env__flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 35.72%;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.env__flap-out,
.env__flap-in {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.env__flap-in {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-color: var(--env-inside);
  background-image: var(--liner);
  background-size: 9cqi 9cqi;
  transform: rotateX(180deg);
}

.env__seal {
  position: absolute;
  left: 50%;
  top: 35.72%;
  z-index: 5;
  width: 23%;
  aspect-ratio: 1;
  transform: translate(-50%, -64%);
  filter: drop-shadow(0 .8cqi 1cqi rgba(70, 10, 25, .35));
}
.env__seal .seal { display: block; width: 100%; height: 100%; }
.seal__mono {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  font-style: italic;
  font-size: 23px;
  font-weight: 500;
  fill: #6A1222;
  stroke: #E0687C;
  stroke-width: .9px;
  paint-order: stroke;
}

/* ── De kaart zelf ─────────────────────────────────────────────── */
.ivc {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 7cqi 5cqi 6cqi;
  color: #5A1A2C;
  font-family: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  background: #fff;
}
:where(.ivc) p { margin: 0; }
.ivc__sprig { width: 30cqi; color: #56613F; margin-bottom: 4cqi; }
.ivc__kicker { font-size: 3.6cqi; letter-spacing: .06em; color: #7A4A55; }
.ivc__names {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14.5cqi;
  line-height: .95;
  letter-spacing: -.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3cqi 0 4cqi;
}
.ivc__amp { font-size: .62em; line-height: 1.15; color: #9E2236; font-weight: 400; }
.ivc__date {
  font-size: 4.3cqi;
  font-weight: 500;
  letter-spacing: .02em;
}
.ivc__place { font-size: 3.6cqi; color: #7A4A55; margin-top: 1cqi; }
.ivc__count {
  display: flex;
  gap: 2.4cqi;
  margin: auto 0 4cqi;
  padding-top: 4cqi;
  border-top: 1px solid rgba(90, 26, 44, .18);
  font-size: 2.8cqi;
  color: #7A4A55;
}
.ivc__count span { display: flex; flex-direction: column; align-items: center; min-width: 9cqi; }
.ivc__count b {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 500;
  font-size: 6cqi;
  line-height: 1.1;
  color: #5A1A2C;
  font-variant-numeric: lining-nums tabular-nums;
}
.ivc__btn {
  display: inline-block;
  padding: 2.2cqi 4.5cqi;
  border-radius: 1cqi;
  background: #5A1A2C;
  color: #FFFAF7;
  font-size: 3.4cqi;
  letter-spacing: .02em;
}

/* ── Openingsbeweging ──────────────────────────────────────────── */
@keyframes env-seal {
  0%   { transform: translate(-50%, -64%) scale(1); opacity: 1; }
  35%  { transform: translate(-50%, -64%) scale(1.09); opacity: 1; }
  100% { transform: translate(-50%, -20%) scale(.62) rotate(-16deg); opacity: 0; }
}
@keyframes env-flap {
  0%   { transform: rotateX(0deg); z-index: 4; }
  48%  { z-index: 4; }
  52%  { z-index: 1; }
  100% { transform: rotateX(180deg); z-index: 1; }
}
@keyframes env-card {
  0%   { transform: translateY(0); z-index: 2; }
  52%  { transform: translateY(-62%); z-index: 2; }
  53%  { z-index: 6; }
  100% { transform: translateY(-31%) rotate(-1.6deg) scale(1.03); z-index: 6; }
}

.env--auto .env__seal,
.env.is-opening .env__seal { animation: env-seal var(--t-seal) cubic-bezier(.4, 0, .2, 1) var(--d-seal) both; }
.env--auto .env__flap,
.env.is-opening .env__flap { animation: env-flap var(--t-flap) cubic-bezier(.45, .05, .25, 1) var(--d-flap) both; }
.env--auto .env__card,
.env.is-opening .env__card { animation: env-card var(--t-card) cubic-bezier(.25, .8, .25, 1) var(--d-card) both; }

/* Wanneer de envelop al open moet staan (of bij minder beweging) */
.env.is-open .env__seal { opacity: 0; animation: none; }
.env.is-open .env__flap { transform: rotateX(180deg); z-index: 1; animation: none; }
.env.is-open .env__card { transform: translateY(-31%) rotate(-1.6deg) scale(1.03); z-index: 6; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .env--auto .env__seal { animation: none; opacity: 0; }
  .env--auto .env__flap { animation: none; transform: rotateX(180deg); z-index: 1; }
  .env--auto .env__card { animation: none; transform: translateY(-31%) rotate(-1.6deg) scale(1.03); z-index: 6; }
}