/* ==========================================================
   decline.css – the "Are you sure?" pop-up and the drooping
   sprig send-off for guests who can't make it.
   ========================================================== */

/* ---------- The pop-up ---------- */
.sure {
  width: min(22rem, calc(100vw - 2.5rem));
  padding: 2.25rem 1.5rem 1.6rem;
  border: 1px solid rgba(168, 173, 143, .55);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(40, 48, 32, .5);
  overflow: visible;
}
.sure::backdrop {
  background: rgba(54, 62, 46, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sure[open] { animation: sure-in .45s cubic-bezier(.2, .8, .3, 1.2); }
.sure.is-next { animation: sure-wobble .5s ease; }

@keyframes sure-in {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes sure-wobble {
  0%, 100% { transform: none; }
  25% { transform: rotate(-2deg) scale(1.02); }
  60% { transform: rotate(1.5deg); }
}

/* A small, still eucalyptus stem above the question */
.sure__sprig {
  display: block;
  width: 36px;
  height: 66px;
  margin: -3.8rem auto .5rem;
  transform: rotate(6deg);
}

.sure__title {
  font-size: 2rem;
  margin-bottom: .5rem;
}
.sure__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

/* Two big, clear buttons – easy for every guest to tap */
.sure__actions { display: grid; gap: .7rem; }
.sure__actions .btn { width: 100%; padding: 1rem 1.25rem; letter-spacing: .14em; }
.sure__leave { background: #fff; }

/* ---------- The send-off after a decline ---------- */
/* The wilting stem itself is drawn and animated by js/wilt.js */
.farewell {
  position: relative;               /* the falling leaf is placed inside this */
  display: grid;
  justify-items: center;
  gap: .4rem;
  margin-top: -.25rem;
  transition: opacity .7s ease;
}
.farewell__plant {
  display: block;
  width: 128px;
  height: 150px;
  overflow: visible;
}
.farewell__text {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
  text-align: center;
  animation: farewell-in .8s ease .9s both;
}
.farewell.is-happy .farewell__text { color: var(--sage-forest); animation: farewell-in .6s ease both; }
.farewell.is-leaving { opacity: 0; }

/* The leaf that lets go and flutters down */
.wilt-falling-leaf {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes farewell-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Phones keep the "hover" style after a tap, which made the next
   question's button look pressed. Keep it outlined on touchscreens. */
@media (hover: none) {
  .sure__leave:hover { background: #fff; color: var(--sage-forest); }
  .sure__leave:active { background: var(--sage-soft); }
}