/* Opening: foil scratch card. The <canvas> is painted with a real foil photograph (--foil-img; --foil-1/2/3 gradient while it loads).
   Photographic themes (html.art) lay the card straight onto their own paper photo (--art-hero). */
.op-scratch { overflow-y: auto; padding: 24px 16px; }
.op-card {
  position: relative; width: min(390px, 100%); margin: auto; padding: 30px 22px 22px; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper) 60%, transparent), 0 34px 60px -26px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .9s ease;
}
.op-card::before { content: ""; width: 120px; height: 20px; margin-bottom: 4px; background: var(--accent); -webkit-mask: var(--orn-div) center / contain no-repeat; mask: var(--orn-div) center / contain no-repeat; }
.sc-stage { display: contents; }
.scratch { position: relative; width: 100%; margin: 12px 0 6px; border-radius: 14px; overflow: hidden; background: var(--field);
  box-shadow: 0 10px 22px -12px rgba(40, 25, 5, .55), inset 0 0 0 1px var(--line); }
.scratch-under { min-height: 150px; padding: 22px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.su-label { font: 500 14px/1.4 var(--ui); color: var(--accent); }
.su-date { font-family: var(--display); font-weight: var(--h2-w); font-size: clamp(21px, 6vw, 26px); line-height: 1.5; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.su-time { font: 500 16px/1.4 var(--ui); color: var(--muted); }
.scratch-foil { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .8s ease; }
.scratch-foil:active { cursor: grabbing; }
.scratch-foil.is-clear { opacity: 0; pointer-events: none; }
.op-scratch.is-revealed .scratch-under { animation: suGlow 1.4s ease; }
.op-scratch .btn { margin-top: 6px; }
.op-scratch.is-gone .op-card { transform: scale(1.06); }
@keyframes suGlow { 0% { box-shadow: inset 0 0 0 0 transparent; } 40% { box-shadow: inset 0 0 40px 0 color-mix(in srgb, var(--accent-hi) 55%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

/* photographic themes: the theme's blank paper photo is the card */
html.art .op-scratch { display: block; padding: 0; overflow: hidden; }
html.art .op-scratch::before { content: ""; position: absolute; inset: -40px; background: var(--art-hero) center / cover no-repeat; filter: blur(30px); }
html.art .sc-stage { display: block; position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 9 / 16; transform: translateX(-50%);
  background: var(--art-hero) center / cover no-repeat; container-type: inline-size; }
html.art .op-scratch .op-card { position: absolute; inset: 0; width: auto; margin: 0; padding: var(--art-pad); justify-content: center; gap: 1.4cqw;
  background: none; border: 0; border-radius: 0; box-shadow: none; }
html.art .op-scratch .op-card::before { display: none; }
html.art .op-scratch .op-guest { font-size: clamp(19px, 5.6cqw, 30px); line-height: 1.3; }
html.art .op-scratch .op-names { font-size: clamp(17px, 5cqw, 26px); line-height: 1.35; }
html.art .op-scratch .scratch { margin: 1.6cqw 0 1cqw; }
html.art .op-scratch .scratch-under { min-height: clamp(96px, 25cqw, 150px); padding: 10px; }
html.art .op-scratch .su-date { font-size: clamp(17px, 4.6cqw, 24px); }
html.art .op-scratch .op-hint { font-size: 14px; }
html.art .op-scratch .btn { margin-top: 2px; min-height: 44px; padding-block: 8px; }
html.art .op-scratch.is-gone .op-card { transform: none; }