/* ===================== Wedding invitation cards =====================
   The invitation's own photo fills the tile. At rest only the title sits at
   the bottom edge; hover (or keyboard focus) slides the rest up into view and
   deepens the scrim behind it. Below 600px — and on any touch device — the
   whole card is shown expanded, since there is no hover to reveal it with. */
.wed-card {
  --wed-d: 620ms;
  --wed-e: cubic-bezier(.19, 1, .22, 1);
  --slide-hold: 4200ms; /* keep in sync with SLIDE_HOLD_MS in script.js */
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 400px;
  padding: 20px;
  border-radius: var(--radius);
  color: var(--on-dark);
  background: var(--ramp-1);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: card-in .42s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.wed-card:hover,
.wed-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -18px var(--shadow-ink-strong);
}

/* The photos. A stack of shots of the invitation itself, cross-fading one by
   one; the layer is taller than the card so it can drift on hover. */
.wed-card__media {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 110%;
  overflow: hidden;
  z-index: 0;
  transition: transform calc(var(--wed-d) * 1.5) var(--wed-e);
  pointer-events: none;
}
.wed-card__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 900ms ease-in-out;
}
/* Full-page screenshots are wider than the tile, so they sit centred rather
   than framed near their top edge. The motion itself stays the same. */
.wed-card__slide.is-wide { background-position: 50% 50%; }

/* Every slide moves the same way: a slow push in, then the next photo takes
   over. */
.wed-card__slide.is-active {
  opacity: 1;
  will-change: opacity, transform;  /* only the slide on show gets a layer */
  animation: wed-zoom calc(var(--slide-hold, 4200ms) + 900ms) linear forwards;
}

@keyframes wed-zoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14); }
}

/* Legibility scrim — the one gradient this theme allows, because text sits on
   a photo here. Twice the card's height: the pale top half shows at rest, the
   deep bottom half slides in on hover. */
.wed-card::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 200%;
  background-image: linear-gradient(
    to bottom,
    rgba(45, 44, 74, 0) 0%,
    rgba(45, 44, 74, .04) 12%,
    rgba(45, 44, 74, .12) 25%,
    rgba(45, 44, 74, .26) 37%,
    rgba(45, 44, 74, .48) 50%,
    rgba(45, 44, 74, .60) 62%,
    rgba(45, 44, 74, .70) 75%,
    rgba(45, 44, 74, .78) 88%,
    rgba(45, 44, 74, .82) 100%
  );
  transform: translateY(-50%);
  transition: transform calc(var(--wed-d) * 2) var(--wed-e);
  pointer-events: none;
}

/* Whole-card preview link, under the content so the buttons stay clickable. */
.wed-card__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.wed-card__open:focus-visible { outline: 2px solid var(--ramp-5); outline-offset: -6px; }

.wed-card__price-tag {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  background: var(--chip-light);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: .78rem;
  padding: 6px 13px;
  border-radius: 999px;
}

.wed-card__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--wed-d) var(--wed-e);
  pointer-events: none; /* clicks fall through to the card link */
}
.wed-card__content a { pointer-events: auto; }

/* A plate that travels with the text, so a pale invitation photo can't wash
   the title out. Bleeds past the card padding to reach the edges. */
.wed-card__content::before {
  content: "";
  position: absolute;
  inset: -22px -20px -20px;
  z-index: -1;
  background-image: linear-gradient(
    to top,
    rgba(45, 44, 74, .70) 0%,
    rgba(45, 44, 74, .52) 45%,
    rgba(45, 44, 74, .22) 78%,
    rgba(45, 44, 74, 0) 100%
  );
}

.wed-card__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--on-dark);
  text-shadow: 0 1px 12px rgba(45, 44, 74, .55);
}
.wed-card__desc {
  margin: 0;
  font-size: .87rem;
  line-height: 1.7;
  color: var(--on-dark-strong);
}
.wed-card__duration {
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ramp-6);
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 999px;
  padding: 4px 11px;
}
.wed-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* Fallback tint per invitation, visible until its photo loads. */
.wed-card[data-tone="1"] { background: var(--ramp-1); }
.wed-card[data-tone="2"] { background: var(--ramp-2); }
.wed-card[data-tone="3"] { background: var(--ramp-3); }
.wed-card[data-tone="4"] { background: var(--ramp-4); }
.wed-card[data-tone="5"] { background: var(--ramp-2); }
.wed-card[data-tone="6"] { background: var(--ramp-3); }
.wed-card[data-tone="7"] { background: var(--ramp-1); }
.wed-card[data-tone="8"] { background: var(--ramp-4); }

@media (hover: hover) and (min-width: 600px) {
  .wed-card::after { transform: translateY(0); }

  /* Only the title's strip stays above the bottom edge. */
  .wed-card__content { transform: translateY(calc(100% - 5rem)); }
  .wed-card__content > *:not(.wed-card__title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--wed-d) var(--wed-e), opacity var(--wed-d) var(--wed-e);
  }

  .wed-card:hover .wed-card__media,
  .wed-card:focus-within .wed-card__media { transform: translateY(-4%); }
  .wed-card:hover::after,
  .wed-card:focus-within::after { transform: translateY(-50%); }
  .wed-card:hover .wed-card__content,
  .wed-card:focus-within .wed-card__content { transform: translateY(0); }
  .wed-card:hover .wed-card__content > *:not(.wed-card__title),
  .wed-card:focus-within .wed-card__content > *:not(.wed-card__title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--wed-d) / 8);
  }

  /* Keyboard focus should land on the finished state, not animate into it. */
  .wed-card:focus-within .wed-card__media,
  .wed-card:focus-within::after,
  .wed-card:focus-within .wed-card__content,
  .wed-card:focus-within .wed-card__content > *:not(.wed-card__title) {
    transition-duration: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wed-card { animation: none; }
  .wed-card,
  .wed-card__media,
  .wed-card::after,
  .wed-card__content,
  .wed-card__content > * { transition: none; }
  /* No autoplay motion: the first shot simply stays put. */
  .wed-card__slide { transition: none; }
  .wed-card__slide.is-active { animation: none; transform: scale(1.02); }
}

.filters[hidden] { display: none; }
.pricing-showcase[hidden] { display: none; }