/*
 * Track E's stylesheet: the envelope on the RSVP page, its opening and its options (track E plan,
 * sections 1 and 2). Paper and ink come from the event's swatch (Event::ENVELOPE_COLORS) as
 * --ev-envelope-paper and --ev-envelope-ink on the root; the shapes come from EnvelopeHelper, which the
 * preview images share.
 *
 * States are classes on the .ev-envelope root: ev-is-sealed (as rendered), ev-is-opening, ev-is-open.
 * Layers, back to front: the liner and the flap, then the card, then the pocket and what's on it. The
 * opener (the <button>) must never form a stacking context (no transform, opacity, filter or z-index
 * on it), or the card couldn't rise from between its layers.
 * Only transform and opacity animate. No CSS nesting here: iOS 16.0 to 16.4 Safari would drop it.
 */

/* Caveat, SIL Open Font License 1.1 (caveat-OFL.txt beside it). */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/caveat-latin-70265b2a.woff2") format("woff2");
}

.ev-envelope {
  --ev-envelope-paper: #f6ebdd;
  --ev-envelope-ink: #4a3426;
  --ev-envelope-seal-size: clamp(2.5rem, 13vw, 3.75rem);
  --ev-envelope-wax: #b5483b;
}

/* The card and the envelope share one grid cell; the envelope sits centered on the card's space, so
   nothing below moves when the card comes out. */
.ev-envelope__stage {
  position: relative;
  isolation: isolate;
  display: grid;
}

.ev-envelope__opener,
.ev-envelope__card {
  grid-area: 1 / 1;
}

/* The envelope: a 7 by 5 button, shown only while sealed or opening. */
.ev-envelope__opener {
  display: none;
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 7 / 5;
  padding: 0;
  border: 0;
  border-radius: 2% / 2.8%;
  background: none;
  color: var(--ev-envelope-ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ev-envelope.ev-is-sealed .ev-envelope__opener,
.ev-envelope.ev-is-opening .ev-envelope__opener {
  display: block;
}

.ev-envelope__opener:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 4px;
}

/* The liner: the inside of the envelope, seen in the V once the flap lifts. A dot pattern in the ink
   over shaded paper; ::before carries the dots so their strength doesn't depend on the ink's color. */
.ev-envelope__back,
.ev-envelope__flap-inside {
  background: linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.1)), var(--ev-envelope-paper);
}

.ev-envelope__back::before,
.ev-envelope__flap-inside::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, currentColor 0.09rem, transparent 0.13rem) 0 0 / 0.625rem 0.625rem;
  opacity: 0.18;
}

.ev-envelope__back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2% / 2.8%;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.05),
    0 0.75rem 1.75rem -0.25rem rgb(40 25 10 / 0.3),
    0 0.125rem 0.375rem rgb(40 25 10 / 0.12);
}

/* The flap fills the pocket's V exactly. It lifts as a 2D fold, scaleY(1) to scaleY(-1) from its top
   edge, without relying on iOS Safari's uneven 3D transforms; its inside face shows from the halfway
   point, when it's edge-on. */
.ev-envelope__flap {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 50%;
  transform-origin: top center;
}

.ev-envelope__flap-face {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ev-envelope__flap-inside {
  position: absolute;
  inset: 0;
  border-radius: 2% 2% 0 0 / 5.6% 5.6% 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: 0;
}

/* The envelope's face: everything but the V under the flap, with its fold lines. */
.ev-envelope__pocket {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ev-envelope__paper {
  fill: var(--ev-envelope-paper);
}

.ev-envelope__flap-shade {
  fill: #000;
  fill-opacity: 0.05;
}

.ev-envelope__edge {
  stroke: currentColor;
  stroke-opacity: 0.2;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.ev-envelope__fold {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.12;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* The wax seal, at the flap's point, with the host's one or two letters (or one emoji). */
.ev-envelope__seal {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--ev-envelope-seal-size);
  height: var(--ev-envelope-seal-size);
  margin: calc(var(--ev-envelope-seal-size) / -2) 0 0 calc(var(--ev-envelope-seal-size) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d06a58 0%, var(--ev-envelope-wax) 45%, #8c3227 100%);
  box-shadow:
    0 0.15rem 0.35rem rgb(70 20 10 / 0.35),
    inset 0 -0.15rem 0.3rem rgb(0 0 0 / 0.2);
  color: #f6e6df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--ev-envelope-seal-size) * 0.5);
  font-style: italic;
  line-height: 1;
}

/* The pressed ring. */
.ev-envelope__seal::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 0.125rem solid rgb(110 30 22 / 0.55);
  border-radius: 50%;
}

.ev-envelope__seal--pair {
  font-size: calc(var(--ev-envelope-seal-size) * 0.36);
}

.ev-envelope__seal-text {
  position: relative;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.25);
}

/* The stamp, on the face's upper right, clear of the flap. */
.ev-envelope__stamp {
  position: absolute;
  z-index: 4;
  top: 24%;
  right: 5%;
  width: 15%;
}

.ev-envelope__stamp-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 130 / 160;
  transform: rotate(4deg);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.15));
}

/* FROM: and TO:, on the face below the seal; both always show before any tap. The names are
   handwritten; the labels are set small in a serif. */
.ev-envelope__address {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 5%;
  left: 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.ev-envelope__from {
  font-size: clamp(1rem, 4.6vw, 1.375rem);
}

.ev-envelope__to {
  font-size: clamp(1.25rem, 6.4vw, 2rem);
}

.ev-envelope__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.5em;
  letter-spacing: 0.14em;
  vertical-align: 0.2em;
}

.ev-envelope__name {
  font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  font-weight: 600;
}

/* The card: in its own place at full width, hidden while sealed. */
.ev-envelope__card {
  position: relative;
  z-index: 2;
  align-self: start;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgb(40 25 10 / 0.16);
  transform-origin: top center;
}

.ev-envelope.ev-is-sealed .ev-envelope__card {
  visibility: hidden;
}

.ev-envelope__card:focus {
  outline: none;
}

.ev-envelope__card:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 4px;
}

.ev-envelope__image {
  display: block;
  width: 100%;
  height: auto;
}

/* No card uploaded yet: a plain card, so a new event still opens. */
.ev-envelope__placeholder {
  display: grid;
  place-content: center;
  gap: 0.5rem;
  aspect-ratio: 5 / 7;
  padding: 2rem;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: inherit;
  text-align: center;
  overflow-wrap: anywhere;
}

.ev-envelope__placeholder-title {
  margin: 0;
  font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.1;
}

/* "Open the envelope again", once it's open and the controller is running. */
.ev-envelope__again {
  display: none;
  margin-top: 0.5rem;
  text-align: center;
}

.ev-envelope--live.ev-is-open .ev-envelope__again {
  display: block;
}

/* 44px tall with 1rem text and Bootstrap's 1px borders. */
.ev-envelope__replay {
  --bs-btn-padding-y: 0.5625rem;
}

/*
 * The opening, 1.75 seconds: the seal breaks (0 to 0.25s), the flap folds back (0.18 to 0.64s), the
 * card rises out of the pocket (0.6 to 1.15s), the envelope falls away (1.1 to 1.45s) and the card
 * settles into its place (to 1.75s). envelope_controller.js sets the card's two starting transforms;
 * it switches to ev-is-open when the card's animation ends.
 */

.ev-envelope.ev-is-opening .ev-envelope__seal {
  animation: ev-envelope-seal-break 250ms ease-in both;
}

.ev-envelope.ev-is-opening .ev-envelope__flap {
  animation:
    ev-envelope-flap-lift 460ms 180ms both,
    ev-envelope-flap-away 350ms ease-in 1100ms forwards;
}

.ev-envelope.ev-is-opening .ev-envelope__flap-inside {
  animation: ev-envelope-flap-inside 460ms 180ms both;
}

.ev-envelope.ev-is-opening .ev-envelope__card {
  animation: ev-envelope-card-out 1150ms 600ms both;
}

.ev-envelope.ev-is-opening .ev-envelope__back,
.ev-envelope.ev-is-opening .ev-envelope__pocket,
.ev-envelope.ev-is-opening .ev-envelope__stamp,
.ev-envelope.ev-is-opening .ev-envelope__address {
  animation: ev-envelope-away 350ms ease-in 1100ms both;
}

@keyframes ev-envelope-seal-break {
  to {
    opacity: 0;
    transform: scale(1.3) rotate(-10deg);
  }
}

/* Widening a touch at the halfway point reads as the flap swinging toward the viewer. */
@keyframes ev-envelope-flap-lift {
  0% {
    transform: scale(1, 1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }

  50% {
    transform: scale(1.03, 0);
    animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
  }

  100% {
    transform: scale(1, -1);
  }
}

@keyframes ev-envelope-flap-inside {
  0%,
  49.9% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}

@keyframes ev-envelope-flap-away {
  from {
    opacity: 1;
    transform: scale(1, -1);
  }

  to {
    opacity: 0;
    transform: scale(1, -1);
  }
}

@keyframes ev-envelope-card-out {
  0% {
    opacity: 0;
    transform: var(--ev-envelope-card-inside, none);
    animation-timing-function: linear;
  }

  8% {
    opacity: 1;
    transform: var(--ev-envelope-card-inside, none);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }

  48% {
    opacity: 1;
    transform: var(--ev-envelope-card-risen, none);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes ev-envelope-away {
  to {
    opacity: 0;
    transform: translateY(2rem);
  }
}

/* Reduced motion: the envelope crossfades to the card, which stays in its place. */
@media (prefers-reduced-motion: reduce) {
  .ev-envelope.ev-is-opening .ev-envelope__card {
    animation: ev-envelope-fade-in 400ms ease both;
  }

  .ev-envelope.ev-is-opening .ev-envelope__back,
  .ev-envelope.ev-is-opening .ev-envelope__flap,
  .ev-envelope.ev-is-opening .ev-envelope__pocket,
  .ev-envelope.ev-is-opening .ev-envelope__seal,
  .ev-envelope.ev-is-opening .ev-envelope__stamp,
  .ev-envelope.ev-is-opening .ev-envelope__address {
    animation: ev-envelope-fade-out 400ms ease both;
  }

  .ev-envelope.ev-is-opening .ev-envelope__flap-inside {
    animation: none;
  }
}

@keyframes ev-envelope-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes ev-envelope-fade-out {
  to {
    opacity: 0;
  }
}