/* Dons — le tronc.
   Wada 342 : Deep Slate Olive (la chapelle) · Corinthian Pink (le texte) · Cream Yellow (la pièce) · Orange Citrine (le bois).
   Young Serif pour ce qui est gravé ; Geist Mono pour les adresses.
   Un seul objet au centre : survoler ou cibler un lien de don fait tomber une pièce dans la fente. */

.chapel {
  --engraved: "Young Serif", Georgia, "Times New Roman", serif;
  --wood: var(--alt);
  --wood-2: color-mix(in srgb, var(--alt) 61.8%, #000);
  display: flex; flex-direction: column; min-height: 100dvh;
}

.offering {
  flex: 1;
  display: grid; justify-items: center; align-content: center; gap: var(--s2);
  width: min(var(--shell), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: var(--s3);
  text-align: center;
}

.offering-head { display: grid; justify-items: center; gap: var(--s0); }
.offering-k { margin: 0; color: var(--ink-3); font: 400 var(--f-1)/1 var(--font-mono); letter-spacing: .0618em; text-transform: uppercase; }
.offering-k b { color: var(--dot-ink); font-weight: 500; }
.offering-title { margin: 0; font: 400 clamp(var(--f4), 9.02vw, var(--f5))/1 var(--engraved); letter-spacing: -.0236em; }
.offering-msg { max-width: 38ch; margin: 0; color: var(--ink-2); font-size: var(--f1); line-height: var(--lh); }

/* ---------- Le tronc : un couvercle fendu, un corps en rectangle d'or vertical ---------- */
.trunk { position: relative; display: grid; justify-items: center; width: min(11.09rem, 61.8vw); padding-top: var(--s3); }
.trunk-lid {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 109%; height: var(--s1);
  background: linear-gradient(var(--wood), var(--wood-2));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dot) 38.2%, transparent), 0 var(--s-3) 0 color-mix(in srgb, #000 23.6%, transparent);
}
.slot { width: 38.2%; height: var(--s-2); border-radius: var(--s-3); background: #0d120c; box-shadow: inset 0 2px 2px #000; }
.trunk-body {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1.618;
  background:
    repeating-linear-gradient(90deg, transparent 0 23.6%, color-mix(in srgb, #000 14.6%, transparent) 23.6% calc(23.6% + 1px)),
    linear-gradient(90deg, var(--wood-2), var(--wood) 38.2%, var(--wood) 61.8%, var(--wood-2));
  box-shadow: inset 0 0 0 var(--s-2) color-mix(in srgb, #000 14.6%, transparent);
}
.trunk-plate { padding: var(--s-1) var(--s0); background: var(--dot); color: #253122; font: 400 var(--f-1)/1 var(--engraved); letter-spacing: .0618em; box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 23.6%, transparent); }

/* La pièce : elle flotte au-dessus de la fente… */
.coin {
  position: absolute; z-index: 1; top: 0; left: 50%;
  display: grid; place-items: center;
  width: var(--s2); height: var(--s2); margin-left: calc(var(--s2) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--dot) 61.8%);
  box-shadow: inset 0 0 0 var(--s-3) color-mix(in srgb, var(--wood) 61.8%, var(--dot)), 0 var(--s-2) var(--s0) color-mix(in srgb, #000 38.2%, transparent);
  color: #253122; font: 400 var(--f1)/1 var(--engraved);
}
/* … et tombe dedans, de champ, quand on s'approche d'un don. */
.offering:has(.give:hover, .give:focus-visible) .coin { animation: coin-drop var(--t4) var(--ease) both; }
@keyframes coin-drop {
  0% { transform: none; opacity: 1; }
  38.2% { transform: translateY(calc(var(--s1) * -1)) scaleX(.618); opacity: 1; }
  85.4% { transform: translateY(calc(var(--s3) - var(--s-1))) scaleX(.146); opacity: 1; }
  100% { transform: translateY(var(--s3)) scaleX(.146); opacity: 0; }
}

/* ---------- Les deux offrandes ---------- */
.gives { display: grid; gap: var(--s0); width: 100%; }
.give {
  display: grid; justify-items: center; gap: var(--s-2);
  width: min(100%, 17.9rem); min-height: calc(var(--s5) + var(--s0)); align-content: center; justify-self: center; padding: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink); text-decoration: none;
  transition: box-shadow var(--t1), background-color var(--t1);
}
.give:hover, .give:focus-visible { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--dot); outline: none; }
.give strong { font: 400 var(--f3)/1 var(--engraved); letter-spacing: -.0146em; }
.give > span { color: var(--ink-2); }
.give small { color: var(--ink-3); font: 400 var(--f-1)/1.382 var(--font-mono); overflow-wrap: anywhere; }

.offering-note { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0; color: var(--ink-3); font: 400 var(--f-1)/1.382 var(--font-mono); }
.offering-note img { width: var(--s1); height: var(--s1); border-radius: 50%; filter: grayscale(1); }

.chapel .z-foot { margin-top: 0; }

/* Grand écran : le tronc au centre, une offrande de chaque côté (après les règles de base, qu'il remplace). */
@media (min-width: 900px) {
  .offering { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "head head head" "left trunk right" "note note note"; column-gap: var(--s3); }
  .offering-head { grid-area: head; }
  .gives { display: contents; }
  .give { align-self: center; }
  .give:first-child { grid-area: left; justify-self: end; }
  .give:last-child { grid-area: right; justify-self: start; }
  .trunk { grid-area: trunk; }
  .offering-note { grid-area: note; }
}

@media (prefers-reduced-motion: reduce) {
  .offering:has(.give:hover, .give:focus-visible) .coin { animation: none; opacity: .382; }
}