/* closing.css — "Ganpati Bappa Morya!" under a shower of flowers. */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92svh;
  padding: 96px var(--pad) 56px;
  overflow: hidden;
}

.closing::before {
  background: radial-gradient(ellipse 80% 55% at 50% 48%, rgba(210, 69, 30, 0.26), transparent 72%);
}

.closing__shower {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.shower-flower {
  position: absolute;
  top: -48px;
  width: var(--s, 30px);
  height: auto;
  animation: shower-fall var(--dur, 6s) linear forwards;
}

@keyframes shower-fall {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(var(--dx, 0px), var(--fall, 900px), 0) rotate(var(--rot, 180deg)); }
}

.closing__morya {
  margin: 0;
  font: 800 clamp(40px, 11.6vw, 54px) / 1.3 var(--font-display);
  text-wrap: balance;
}

.closing__mangal {
  margin: 4px 0 20px;
  font: 500 clamp(21px, 6vw, 25px) / 1.3 var(--font-display);
  color: var(--marigold);
}

.closing .diya--hero {
  margin: 8px auto 26px;
}

.closing__line {
  max-width: 24ch;
  font: 500 23px/1.4 var(--font-poem);
  color: var(--ivory);
}

.closing__families {
  margin-bottom: 30px;
  font-size: 15px;
  color: var(--ivory-dim);
}

.closing__bell img {
  width: auto;
  height: 28px;
  transform-origin: 50% 2%;
}

.closing__bell.is-ringing img {
  animation: small-bell 1100ms var(--ease-out);
}

@keyframes small-bell {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(22deg); }
  35%  { transform: rotate(-16deg); }
  55%  { transform: rotate(10deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.closing__note {
  margin: 34px 0 0;
  font: 600 10.5px/1.5 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}