/* Template "scratch": a scratch card. The foil (a canvas) hides the first photo; under it, the letter and the photos.
   Colours only from themes.css (the foil is painted with --gold and --accent). */

body[data-layout="scratch"] .show { background: radial-gradient(80% 60% at 50% 30%, var(--bg-2), var(--bg) 75%); }
body[data-layout="scratch"] .scr-stage { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 84px 18px 40px; }
body[data-layout="scratch"] .scr-stage .eyebrow { margin: 0; }
body[data-layout="scratch"] .scr-card {
  position: relative; width: min(84vw, 400px, 52svh); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden;
  border: 6px solid var(--paper); background: var(--paper);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 30px 70px rgba(0, 0, 0, .4);
  transition: transform .8s var(--ease);
}
body[data-layout="scratch"] .scr-under { position: absolute; inset: 0; }
body[data-layout="scratch"] .scr-under img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-layout="scratch"] .scr-heart { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5.5rem; color: var(--paper); text-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
body[data-layout="scratch"] .scr-foil { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .9s var(--soft); }
body[data-layout="scratch"] .scr-foil:active { cursor: grabbing; }
body[data-layout="scratch"] .scr.revealed .scr-foil { opacity: 0; pointer-events: none; }
body[data-layout="scratch"] .scr.revealed .scr-card { transform: scale(1.03) rotate(-1deg); }

body[data-layout="scratch"] .scr-after { padding: 18px 18px 56px; display: grid; justify-items: center; gap: 36px; }
body[data-layout="scratch"] .scr-after .sheet { width: min(100%, 640px); scroll-margin-top: 76px; animation: scrUp 1s var(--ease) both; }
body[data-layout="scratch"] .scr-more { width: min(100%, 760px); animation: scrUp 1s var(--ease) .3s both; }
body[data-layout="scratch"] .scr-more h3 { margin: 0 0 18px; text-align: center; font-size: .72rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
body[data-scheme="light"][data-layout="scratch"] .scr-more h3 { color: var(--accent-deep); }
@keyframes scrUp { from { opacity: 0; transform: translate3d(0, 36px, 0); } }

@media (prefers-reduced-motion: reduce) {
  body[data-layout="scratch"] .scr-foil, body[data-layout="scratch"] .scr-card { transition: none; }
  body[data-layout="scratch"] .scr-after .sheet, body[data-layout="scratch"] .scr-more { animation: none; }
}