/* scenes/scratch.css -- js/motion/scenes/scratch.js (the scratch card + countdown). */

/* The answer card: the PSD's hidden "Group 4 copy" (white card, white 6 px stroke,
   radius 30, "<date>" Amiri Bold 58.3 px #b94e6b on baseline 701.48 = 81.48 below
   the box top). Faux bold as stage.css .r.fb with Amiri's --fbw. */
.sc-card {
  position: absolute;
  border-radius: calc(33 * var(--u));
  background: #fff;
  pointer-events: none;
  color: #b94e6b;
  font-family: "Amiri", serif;
}
.sc-card__date {
  position: absolute;
  left: 0; right: 0;
  top: calc((81.48 - 1000) * var(--u));
  font-size: 0;
  line-height: 0;
  white-space: pre;
  text-align: center;
}
.sc-card__date::before { content: ""; display: inline-block; width: 0; height: calc(1000 * var(--u)); vertical-align: baseline; }
.sc-card__date > span { font-size: calc(58.3 * var(--u)); line-height: 1; letter-spacing: 0.027em;
  -webkit-text-stroke: 0.02em currentColor; paint-order: stroke fill; }

/* JS painted the foil: the live pink card + its label hide beneath it. */
.scene--scratch.sc-js [data-layer="scratch-card"],
.scene--scratch.sc-js [data-text="scratch.scratch-to-reveal"] { visibility: hidden; }

.sc-foil {
  position: absolute;
  touch-action: none;                 /* only the card itself: the page scrolls elsewhere */
  cursor: grab;
  border-radius: calc(33 * var(--u));
  transition: opacity 700ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sc-foil:active { cursor: grabbing; }
.sc-foil:focus-visible { outline: 3px solid #8a2f4b; outline-offset: 4px; }
.scene--scratch.is-revealed .sc-foil { opacity: 0; pointer-events: none; }

/* An inviting sheen across the foil until the first touch. */
.sc-sheen {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  border-radius: calc(33 * var(--u));
}
.sc-sheen::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%) skewX(-18deg);
  opacity: 0;
}
html.motion .scene--scratch.is-entered:not(.sc-touched) .sc-sheen::after {
  animation: sc-sheen 3.4s ease-in-out 1.2s infinite;
}
@keyframes sc-sheen {
  0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  10% { opacity: 1; }
  55% { transform: translateX(560%) skewX(-18deg); opacity: 1; }
  60%, 100% { transform: translateX(560%) skewX(-18deg); opacity: 0; }
}

.sc-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .sc-foil { transition: none; }
  .sc-sheen::after { animation: none !important; }
}

/* ================================================================ motion layer
   (js/motion/scenes/scratch.js). Nothing below changes the resting PSD frame: the
   overlays are created only with motion, and every armed rule is under html.motion. */

/* Countdown digits + labels: inline-block runs so they can move (same baseline as an
   inline run: an inline-block's baseline is its text's). Each digit sits in a slot. */
.scene--scratch .r.sc-ib { display: inline-block; }
.sc-slot {
  position: relative;
  display: inline-block;
  clip-path: inset(0 -0.25em);
}
.sc-dg { display: inline-block; }
.sc-dg.is-out { position: absolute; left: 0; top: 0; }
.sc-card__date > span { display: inline-block; }

/* armed: hidden until their entrance (fill "backwards" takes over in the same task) */
html.motion .scene--scratch:not(.is-entered) [data-layer="couple"],
html.motion .scene--scratch:not(.is-entered) .r.sc-ib { opacity: 0; }
.scene--scratch .shape[data-layer^="count-box-"] { transform-origin: 50% 50%; }
.scene--scratch [data-layer="couple"] { transform-origin: 50% 100%; }

/* the "scratch here" fingertip: presses, rubs a zig-zag across the card, lifts */
.sc-hint {
  position: absolute;
  left: calc(540 * var(--u));
  top: calc(694 * var(--u));
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  margin: calc(-44 * var(--u)) 0 0 calc(-44 * var(--u));
  pointer-events: none;
  opacity: 0;
}
.sc-hint::before, .sc-hint::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.sc-hint::before {
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 246, 0.85) 52%, rgba(255, 240, 244, 0.35) 76%, rgba(255, 240, 244, 0) 100%);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(110, 30, 55, 0.28);
}
.sc-hint::after {
  inset: 15%;
  border: calc(3 * var(--u)) solid rgba(185, 78, 107, 0.85);
}
html.motion .scene--scratch.sc-hinting:not(.sc-touched):not(.is-revealed) .sc-hint {
  animation: sc-hint 5.2s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
@keyframes sc-hint {
  0%   { opacity: 0; transform: translate(calc(-200 * var(--u)), calc(-14 * var(--u))) scale(1.35); }
  8%   { opacity: 1; transform: translate(calc(-200 * var(--u)), calc(-14 * var(--u))) scale(1); }
  12%  { transform: translate(calc(-200 * var(--u)), calc(-14 * var(--u))) scale(0.86); }
  26%  { transform: translate(calc(170 * var(--u)), calc(-26 * var(--u))) scale(0.86); }
  40%  { transform: translate(calc(-150 * var(--u)), calc(18 * var(--u))) scale(0.86); }
  54%  { opacity: 1; transform: translate(calc(200 * var(--u)), calc(10 * var(--u))) scale(0.86); }
  62%  { opacity: 0; transform: translate(calc(214 * var(--u)), calc(4 * var(--u))) scale(1.2); }
  100% { opacity: 0; transform: translate(calc(214 * var(--u)), calc(4 * var(--u))) scale(1.2); }
}

/* brush dust + the burn-away light (one canvas around the card, sized by the JS) */
.sc-dust { position: absolute; pointer-events: none; }

/* the warm light that blooms behind the card when the date is uncovered */
.sc-glow {
  position: absolute;
  left: calc(110 * var(--u));
  top: calc(500 * var(--u));
  width: calc(860 * var(--u));
  height: calc(380 * var(--u));
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side,
    rgba(255, 238, 222, 0.95) 0%, rgba(252, 214, 200, 0.6) 40%,
    rgba(246, 196, 184, 0.22) 70%, rgba(246, 196, 184, 0) 100%);
}
.scene--scratch.is-revealed.sc-celebrate .sc-glow {
  opacity: 0.7;
  animation: sc-breathe 5.5s ease-in-out 2s infinite alternate;
}
@keyframes sc-breathe { from { opacity: 0.7; transform: none; } to { opacity: 0.42; transform: scale(0.97); } }

/* confetti (stage-sized overlay, inset 0, clipped by the stage) */
.sc-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sc-confetti { position: absolute; border-radius: 1px; }

/* four-point sparkle */
.sc-spark { position: absolute; pointer-events: none; opacity: 0; }
.sc-spark svg { display: block; width: 100%; height: 100%; fill: #e2b04f; }

/* off screen: every CSS loop holds still (iOS budget) */
.scene--scratch.sc-away .sc-hint,
.scene--scratch.sc-away .sc-glow,
.scene--scratch.sc-away .sc-sheen::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sc-hint, .sc-glow { animation: none !important; display: none; }
}
.sc-card:focus { outline: none; }