/* Grattage de la date : carte ivoire, double filet doré, médaillons à feuille d'or */
.scratch {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}
.scratch__card {
  position: relative;
  padding: 44px 16px 34px;
  background: var(--paper);
  border-radius: 3px;
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.7) inset,
    0 1px 2px oklch(0.3 0.03 70 / 0.08),
    0 14px 34px -14px oklch(0.25 0.03 100 / 0.35);
  text-align: center;
  isolation: isolate;
}
/* double filet doré */
.scratch__card::before,
.scratch__card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 1px;
}
.scratch__card::before { inset: 8px; border: 1px solid color-mix(in oklch, var(--gold) 85%, transparent); }
.scratch__card::after { inset: 12px; border: 0.5px solid color-mix(in oklch, var(--gold) 70%, transparent); }

/* rameaux d'olivier posés sur le filet */
.scratch__orn {
  position: absolute;
  left: 50%;
  width: 116px;
  height: 22px;
  translate: -50% 0;
  z-index: 1;
  padding: 0 8px;
  background: var(--paper);
  overflow: visible;
}
.scratch__orn--top { top: 0; }
.scratch__orn--bottom { bottom: 0; rotate: 180deg; }
.scratch__sprig-stem { fill: none; stroke: var(--gold-deep); stroke-width: 0.7; stroke-linecap: round; }
.scratch__sprig-leaf { fill: color-mix(in oklch, var(--gold) 22%, transparent); stroke: var(--gold-deep); stroke-width: 0.55; stroke-linejoin: round; }
.scratch__sprig-flower { fill: var(--paper); stroke: var(--gold-deep); stroke-width: 0.45; }
.scratch__sprig-heart, .scratch__sprig-bud { fill: var(--gold); }

/* rangée des trois médaillons */
.scratch__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.scratch__item { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.scratch__medal {
  position: relative;
  display: block;
  width: 100%;
  max-width: 104px;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  container-type: inline-size;
}
.scratch__medal:focus-visible { outline: 1.5px solid var(--gold-deep); outline-offset: 5px; }
.scratch__medal.is-revealed { cursor: default; }
.scratch__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scratch__ring-line { fill: none; stroke: var(--gold); stroke-width: 0.9; }
.scratch__ring-line--in { stroke-width: 0.5; opacity: 0.8; }
.scratch__ring-beads { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0 3.64; }

/* creux de papier sous la feuille */
.scratch__well {
  position: absolute;
  inset: 9.5%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, oklch(0.99 0.008 85), var(--paper-2) 78%);
  box-shadow:
    inset 0 1.5px 3px oklch(0.3 0.03 70 / 0.18),
    inset 0 -1px 0 oklch(1 0 0 / 0.8);
  overflow: hidden;
}
.scratch__value {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  font-size: 40cqw;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sage);
  padding-right: 0.06em;
  translate: 0 -0.03em;
  text-shadow:
    0 1px 0 oklch(1 0 0 / 0.95),
    0 -0.6px 0 oklch(0.3 0.04 135 / 0.3);
}
.scratch__mini {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 38%;
  translate: -50% 0;
  overflow: visible;
}
.scratch__mini-stem { fill: none; stroke: var(--gold); stroke-width: 0.7; stroke-linecap: round; }
.scratch__mini-leaf { fill: color-mix(in oklch, var(--gold) 40%, transparent); stroke: var(--gold-deep); stroke-width: 0.45; }
.scratch__mini-bud { fill: var(--gold); }
.scratch__value--long { font-size: 26px; font-size: 27cqw; letter-spacing: 0; }
.scratch__foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  /* or provisoire tant que la texture n'est pas prête : le chiffre reste caché */
  background: radial-gradient(circle at 32% 28%, #e3c37c, #b88d46 55%, #8f6a2e);
}
.scratch__foil.is-drawn { background: none; }
.scratch__medal.is-revealed .scratch__value { animation: scratch-settle 0.9s var(--ease) both; }
/* halo doré au moment de la révélation : seule l'opacité s'anime */
.scratch__medal::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow: 0 0 9px 1px oklch(0.85 0.1 85 / 0.85), inset 0 0 6px oklch(0.88 0.09 85 / 0.6);
  opacity: 0;
  pointer-events: none;
}
.scratch__medal.is-revealed::after { animation: scratch-glow 1.2s ease-out both; }
@keyframes scratch-settle {
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes scratch-glow {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}


.scratch__label {
  margin-top: 11px;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* sous les médaillons : la consigne, puis la date et le bouton à la même place
   (hauteur réservée d'avance, aucune mise en page pendant la célébration) */
.scratch__foot {
  position: relative;
  z-index: 2;
  display: grid;
  margin-top: 22px;
}
.scratch__intro,
.scratch__done { grid-area: 1 / 1; }
.scratch__intro {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  transition: opacity 0.7s ease;
}
.scratch__note {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink-soft);
}
/* trois points : un par médaillon découvert */
.scratch__dots { display: flex; gap: 9px; }
.scratch__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
  box-shadow: inset 0 0 0 3px var(--paper);
  transition: box-shadow 0.5s var(--ease);
}
.scratch__dots i.is-on { box-shadow: inset 0 0 0 0 var(--paper); }
.scratch__done { display: flex; flex-direction: column; align-items: center; }
.scratch__date {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease, transform 0.9s var(--ease);
}
.scratch.is-complete .scratch__intro { opacity: 0; }
.scratch.is-complete .scratch__date { opacity: 1; transform: none; transition-delay: 0.15s; }
/* le bouton suit la famille .btn--primary (demo.css) : ici seulement son entrée */
.scratch__cal {
  margin: 18px 0 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease 0.55s, transform 0.8s var(--ease) 0.55s, scale 0.5s var(--btn-ease);
}
.scratch__cal:active { transition-duration: 0.6s, 0.8s, 0.12s; }
.scratch.is-complete .scratch__cal { opacity: 1; transform: none; }

/* couche des paillettes et pétales, débordant un peu de la carte */
.scratch__fx {
  position: absolute;
  left: -12px;
  right: -12px;
  top: -90px;
  bottom: -110px;
  width: calc(100% + 24px);
  height: calc(100% + 200px);
  z-index: 5;
  pointer-events: none;
}

/* indice : une main qui gratte le premier médaillon */
.scratch__hint {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  width: 34px;
  height: 40px;
  /* bout du doigt au centre du premier médaillon */
  left: 50%;
  top: 50%;
  margin: -5px 0 0 -15px;
  transition: opacity 0.35s ease;
}
.scratch__hint.is-gone { opacity: 0; }
.scratch__hand {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 0.55;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 2.5px oklch(0.2 0.03 70 / 0.4));
  transform-origin: 44% 15%;
  will-change: transform, opacity;
  animation: scratch-hint 2.6s ease-in-out infinite;
}
@keyframes scratch-hint {
  0%, 100% { transform: translate(-14px, -16px) rotate(-8deg); opacity: 0; }
  10% { opacity: 1; }
  24% { transform: translate(13px, -8px) rotate(6deg); }
  42% { transform: translate(-12px, 0) rotate(-7deg); }
  60% { transform: translate(14px, 8px) rotate(6deg); }
  78% { transform: translate(-6px, 14px) rotate(-3deg); opacity: 1; }
  92% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scratch__hand { animation: none; }
  .scratch__medal.is-revealed .scratch__value,
  .scratch__medal.is-revealed::after { animation: none; }
  .scratch__date, .scratch__cal { transform: none; }
  .scratch__fx { display: none; }
}