/* scratch.css — "scratch the gold": three foil coins (day / month / year) and a venue
 * plate on a cream card, after the pukhraj-poorva pattern. The values are real HTML
 * under one <canvas> foil (js/scratch.js); each zone clears on its own once ~55% is
 * scratched. The coins themselves own the drag (touch-action: none) so the rest of the
 * card still scrolls. */

.reveal {
  padding: 90px var(--gutter);
  background:
    radial-gradient(90% 60% at 50% 40%, #e9c4b9 0%, var(--rose) 55%, var(--rose-2) 100%);
  display: grid;
  place-items: center;
}

.scard {
  position: relative;
  width: min(100%, 380px);
  padding: 34px 22px 26px;
  background: linear-gradient(170deg, #fdf8f1, #f3e7d8);
  box-shadow:
    0 34px 60px -34px rgba(90, 40, 36, 0.6),
    inset 0 0 0 7px #fdf8f1,
    inset 0 0 0 8px rgba(201, 154, 62, 0.7);
  text-align: center;
  color: var(--ink);
}
.scard__kicker { color: var(--wine); }
.scard__title {
  margin: 10px auto 26px;
  max-width: 12em;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.12;
  color: var(--wine);
}

.scard__body { position: relative; }

.scard__coins { display: flex; justify-content: center; gap: 16px; }
.scard__coin { display: grid; justify-items: center; gap: 8px; }
.scard__face {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(72px, 21vw, 86px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* the empty "well" the foil sits in: cream with a gold rim */
  background: radial-gradient(circle at 50% 40%, #fffdf8, #f1e3cf 75%);
  box-shadow: inset 0 2px 6px rgba(120, 80, 30, 0.22), 0 0 0 2px var(--gold-2), 0 0 0 5px #fbf3e6, 0 0 0 6px rgba(201, 154, 62, 0.45);
  touch-action: none;
  cursor: grab;
}
.scard__value {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(34px, 10vw, 42px);
  line-height: 1;
  color: var(--wine);
}
.scard__label {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scard__rule {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 70%;
  margin: 18px auto 16px;
  color: var(--gold-2);
  font-size: 13px;
}
.scard__rule::before,
.scard__rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }

.scard__plate {
  display: grid;
  place-items: center;
  width: 82%;
  height: 58px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf8, #f1e3cf);
  box-shadow: inset 0 2px 6px rgba(120, 80, 30, 0.22), 0 0 0 2px var(--gold-2), 0 0 0 5px #fbf3e6, 0 0 0 6px rgba(201, 154, 62, 0.45);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(24px, 6.6vw, 28px);
  color: var(--wine);
  touch-action: none;
  cursor: grab;
}

/* the foil canvas: covers the body, paints only the zones; the zones handle input */
.scard__foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* a glint sweeping across each unscratched zone */
.scard__glints { position: absolute; inset: 0; pointer-events: none; }
.zglint {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  transition: opacity 0.4s;
}
.zglint--plate { border-radius: 999px; }
.zglint::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 38%;
  height: 140%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 252, 240, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-18deg);
  animation: zglint 3.6s var(--ease-in-out) infinite;
  animation-delay: var(--d, 0s);
}
.zglint.is-done { opacity: 0; }
@keyframes zglint {
  0%, 55% { transform: translateX(-120%) skewX(-18deg); }
  85%, 100% { transform: translateX(380%) skewX(-18deg); }
}

/* a zone just cleared: its value pops */
.is-popped .scard__value,
.scard__plate.is-popped span { display: inline-block; animation: pop 0.7s var(--ease-swing); }
@keyframes pop {
  0% { transform: scale(0.6); opacity: 0.3; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

.scard__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  transition: opacity 0.5s;
}
.scard__finger {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-2);
  position: relative;
  animation: rub 1.6s var(--ease-in-out) infinite;
}
.scard__finger::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--gold-3);
}
@keyframes rub {
  0%, 100% { transform: translateX(-5px) rotate(-8deg); }
  50% { transform: translateX(5px) rotate(8deg); }
}
.scard__done {
  min-height: 0;
  font-family: var(--f-ui);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wine);
}
.scard__done:empty { display: none; }
.scard__done:not(:empty) { margin-top: 18px; animation: rise-in 0.9s var(--ease-out) both; }
.scard__all {
  display: block;
  margin: 12px auto 0;
  border: 0;
  background: none;
  padding: 6px 10px;
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.scard.is-revealed .scard__hint,
.scard.is-revealed .scard__all { display: none; }