/* ==========================================================================
   CARD — the invitation itself. Portrait 928:1282, starts lying sideways.
   ========================================================================== */
.card {
  position: absolute;
  z-index: 3;
  top: 50%; left: 50%;
  height: 127%;                       /* sideways, this is its width inside the envelope */
  aspect-ratio: 928 / 1282;
  box-sizing: border-box;
  translate: -50% -50%;
  transform: rotate(-90deg) scale(1);
  transform-origin: center;
  transition: top 1.4s ease-in-out, left 1.5s ease-in-out, transform 1.4s ease-in-out, box-shadow 1.4s, filter 1.4s;
  background: var(--noise), var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  filter: brightness(.93);            /* slightly dim while inside the envelope */
  border-radius: 2px;
  font-size: var(--card-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 26% 10% 10%;
  text-align: center;
}
.card::before {
  content: "";
  position: absolute; inset: 4.5%;
  border: 1px solid var(--gold);
  outline: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  outline-offset: 3px;
  pointer-events: none;
}

.card .parents {
  position: absolute;
  top: 9%; left: 10%; right: 10%;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-family: var(--caps);
  font-size: .74em;
  letter-spacing: .12em;
  line-height: 1.6;
  color: var(--ink-soft);
}
.card .parents span:first-child { text-align: left; }
.card .parents span:last-child { text-align: right; }

.card .line { font-style: italic; font-size: 1.15em; color: var(--ink-soft); text-wrap: balance; }
.card .names {
  margin: .1em 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: 4.4em;
  line-height: .95;
  color: var(--green);
  display: grid;
}
.card .names em { font-style: normal; font-size: .55em; color: var(--gold); }
.card .rule { width: 3em; height: 1px; background: var(--gold); }
.card .date { font-family: var(--caps); letter-spacing: .2em; font-size: 1em; display: grid; gap: .3em; }
.card .date strong { font-weight: 500; font-size: 1.35em; letter-spacing: .14em; }
.card .schedule { display: grid; gap: .25em; font-size: 1.1em; }
.card .schedule b {
  font-family: var(--caps); font-weight: 500; font-size: .8em; letter-spacing: .14em;
  color: var(--green); margin-right: .4em;
}
.card .venue { font-size: 1.1em; }

/* ---- animation states ---- */
.st-rise .card { top: -55%; filter: none; box-shadow: 0 12px 24px -10px rgba(0,0,0,.35); }
.st-turn .card { z-index: 6; top: 25%; transform: rotate(0deg) scale(1.3); box-shadow: 0 30px 60px -20px rgba(30,40,25,.5); }
.st-settle .card { top: var(--final-top); left: var(--final-left); transform: rotate(0deg) scale(var(--final-scale)); }