/* toast.css — the Toast to Forever slide. Owned by toast.js; the hint ring, pill and
 * hit target are blessing.css's (.wd-frame / .fx-hint / .wd-hit), so both tap moments
 * look alike. Lengths inside .wd-frame are DESIGN px of the 1080x1920 slide.
 * Motion is transform / opacity only; the particles draw inside one canvas.
 */

/* Night ballroom copy: ivory ink, champagne-gold title, a soft shadow off the sky. */
.event-copy--toast {
  --s: 0.84;
  --g: 2;
  --ev-title: #f3dba5;
  --ev-ink: #fff8ec;
  text-shadow: 0 1px calc(var(--u) * 1.4) rgba(6, 12, 34, 0.6);
}

.event-copy--toast .event-copy__title {
  padding-bottom: 0.55em; /* room for the ss01 swash under "Toast" */
}

/* The hint sits ON the painted glasses, so no core or plate covering them: only
   champagne-gold rings pulse out from where the flutes touch. */
.stage--toast .fx-hint {
  --fx-ink: rgba(246, 222, 166, 0.95);
  --fx-glow: rgba(255, 206, 120, 0.45);
}

.stage--toast .fx-hint__plate,
.stage--toast .fx-hint__core {
  display: none;
}

.stage--toast .fx-hint__ring {
  --fx-s: 150px;
  border-width: 5px;
}

/* Stage-sized, never larger: the burst, fizz and foil all draw here. */
.ts-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* "Cheers!" written over the couple as the glasses meet. */
.ts-cheers {
  position: absolute;
  left: var(--x, 529px);
  top: var(--y, 978px);
  margin: 0;
  color: #f6dfa8;
  font-family: "HN Maginia", var(--hn-serif, Georgia, serif);
  font-feature-settings: "ss01";
  font-size: 118px;
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    0 0 18px rgba(255, 214, 140, 0.55),
    0 2px 10px rgba(8, 14, 38, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  pointer-events: none;
}

.ts-cheers.is-on {
  animation: ts-cheers 2600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ts-cheers {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 26px)) scale(0.86); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { opacity: 1; transform: translate(-50%, calc(-50% - 10px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 34px)) scale(1.02); }
}

/* Screen-reader announcement of the toast. */
.ts-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ts-cheers {
    transform: translate(-50%, -50%);
    transition: opacity 400ms ease;
  }

  .ts-cheers.is-on {
    animation: none;
    opacity: 1;
  }
}