/* scenes/scratch.css -- "Save the Date": a gold-foil jaali seals the jharokha's window;
   scratching it away reveals the wedding date, then a live countdown rises in the arch.
   OWNER: the scratch agent (edit only this file, js/motion/scenes/scratch.js,
   src/scenes/scratch.html and assets/scenes/scratch/; then python3 tools/build.py).
   Not a PSD slide: build.py puts src/scenes/scratch.html inside
   section[data-scene="scratch"][data-motion="custom"] > .stage.stage--handmade (1080 x 1920
   design px, 1 px = var(--u)). Geometry here is in design px of that stage; the foil's
   own box/polygon lives in the JS (FOIL / POLY).
   Resting look is unscoped. Hidden-before-entrance states are armed under html.motion only,
   so reduced motion / no JS show the complete slide (no JS = the date, unsealed). */

[data-scene="scratch"] .stage { background: #dce8f1; }

/* ---------------------------------------------------------------- type */
.scene--scratch .tl { margin: 0; font-weight: 400; }
.scene--scratch .sc-m { font-family: "Maginia", serif; color: #ac3452; font-variant-ligatures: none; --fbw: 0.023em; }
.scene--scratch .sc-q { font-family: "Quattrocento", serif; color: #2c581d; --fbw: 0.02em; }
.scene--scratch .sc-swash { font-feature-settings: "ss02"; }
.scene--scratch .sc-caps { text-transform: uppercase; }
.scene--scratch .sc-lead .sc-rose { margin-left: 0.18em; }

/* the warm light that blooms behind the date when it is uncovered */
.sc-glow {
  position: absolute;
  left: calc(230 * var(--u));
  top: calc(760 * var(--u));
  width: calc(620 * var(--u));
  height: calc(620 * var(--u));
  z-index: 31;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 244, 214, 0.95) 0%, rgba(252, 226, 176, 0.55) 34%,
    rgba(246, 210, 150, 0.2) 62%, rgba(246, 210, 150, 0) 100%);
}
.scene--scratch.is-revealed .sc-glow { opacity: 0.5; }

/* hairline gold ornament between the year and the venue */
.sc-orn {
  position: absolute;
  left: calc(420 * var(--u));
  top: calc(1296 * var(--u));
  width: calc(240 * var(--u));
  height: calc(24 * var(--u));
  z-index: 32;
  overflow: visible;
  pointer-events: none;
}
.sc-orn path { fill: none; stroke: #b98c45; stroke-width: 1.6; stroke-linecap: round; }
.sc-orn .sc-orn-c { fill: #d9b46a; stroke: #a87a35; stroke-width: 1.2; }
.sc-orn circle { fill: #c49a52; }

/* The date waits under the foil: invisible until the foil is painted (so it can never
   flash before the seal), visible for good once revealed. No JS = never sealed = shown. */
.scene--scratch.sc-js:not(.sc-sealed):not(.is-revealed) .sc-date,
.scene--scratch.sc-js:not(.sc-sealed):not(.is-revealed) .sc-orn { visibility: hidden; }

/* motion: the date also waits for the foil's seal-in to finish (sc-armed) */
html.motion .scene--scratch:not(.sc-armed):not(.is-revealed) .sc-date,
html.motion .scene--scratch:not(.sc-armed):not(.is-revealed) .sc-orn { opacity: 0; }
/* focused (tabindex -1) after a keyboard reveal, for screen readers; no ring round the stage */
.scene--scratch .sc-date:focus { outline: none; }

/* ---------------------------------------------------------------- foil */
.sc-foil {
  position: absolute;
  z-index: 34;
  display: block;
  touch-action: none;           /* only the foil: the page scrolls everywhere else */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sc-foil.is-scratching { cursor: grabbing; }
.sc-foil[hidden] { display: none; }
.scene--scratch.is-revealed .sc-foil { pointer-events: none; }
.scene--scratch.is-revealed .sc-sheen, .scene--scratch.is-revealed .sc-hint { display: none; }
.sc-foil { -webkit-touch-callout: none; }
html.motion .scene--scratch:not(.sc-armed) .sc-foil { pointer-events: none; }

/* soft light sweeping over the sealed foil (clipped to the foil's arch shape by the JS) */
.sc-sheen, .sc-hint, .sc-dust, .sc-fx, .sc-spark, .sc-pen { position: absolute; pointer-events: none; }
.sc-sheen { z-index: 35; overflow: hidden; }
.sc-sheen-band {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -60%;
  width: 70%;
  opacity: 0;
  background: linear-gradient(105deg,
    rgba(255, 246, 214, 0) 20%, rgba(255, 240, 196, 0.5) 42%, rgba(255, 253, 240, 0.85) 50%,
    rgba(255, 240, 196, 0.5) 58%, rgba(255, 246, 214, 0) 80%);
}
.scene--scratch.sc-hinting .sc-sheen-band { animation: sc-sheen 4.6s cubic-bezier(0.45, 0, 0.25, 1) 0.4s infinite; }
@keyframes sc-sheen {
  0%   { opacity: 0; transform: translateX(0) skewX(-8deg); }
  6%   { opacity: 1; }
  34%  { opacity: 1; transform: translateX(260%) skewX(-8deg); }
  40%, 100% { opacity: 0; transform: translateX(260%) skewX(-8deg); }
}

/* the "scratch here" fingertip: presses, rubs a zig-zag, lifts (one cycle = 5.2 s) */
.sc-hint {
  z-index: 36;
  left: calc(var(--hx, 0) * var(--u));
  top: calc(var(--hy, 0) * var(--u));
  width: calc(92 * var(--u));
  height: calc(92 * var(--u));
  margin: calc(-46 * var(--u)) 0 0 calc(-46 * var(--u));
  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, 252, 240, 0.85) 52%, rgba(255, 248, 228, 0.35) 76%, rgba(255, 248, 228, 0) 100%);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(80, 50, 10, 0.25);
}
.sc-hint::after {
  inset: 14%;
  border: calc(3 * var(--u)) solid rgba(185, 140, 69, 0.85);
}
.scene--scratch.sc-hinting .sc-hint { animation: sc-hint 5.2s cubic-bezier(0.45, 0, 0.3, 1) 1s infinite; }
@keyframes sc-hint {
  0%   { opacity: 0; transform: translate(calc(-150 * var(--u)), calc(-26 * var(--u))) scale(1.35); }
  8%   { opacity: 1; transform: translate(calc(-150 * var(--u)), calc(-26 * var(--u))) scale(1); }
  12%  { transform: translate(calc(-150 * var(--u)), calc(-26 * var(--u))) scale(0.86); }
  26%  { transform: translate(calc(130 * var(--u)), calc(-40 * var(--u))) scale(0.86); }
  40%  { transform: translate(calc(-120 * var(--u)), calc(24 * var(--u))) scale(0.86); }
  54%  { opacity: 1; transform: translate(calc(150 * var(--u)), calc(12 * var(--u))) scale(0.86); }
  62%  { opacity: 0; transform: translate(calc(165 * var(--u)), calc(4 * var(--u))) scale(1.2); }
  100% { opacity: 0; transform: translate(calc(165 * var(--u)), calc(4 * var(--u))) scale(1.2); }
}

/* gold dust + burn-away light (canvas, sized by the JS around the foil) */
.sc-dust { z-index: 37; }
/* confetti / sparkles overlay: exactly stage-sized (inset 0), clipped by the stage */
.sc-fx { inset: 0; z-index: 50; overflow: hidden; }
.sc-confetti { position: absolute; border-radius: 1px; }

/* four-point gold sparkle (arch gilding, foil corners, the uncovered date) */
.sc-spark { opacity: 0; z-index: 38; }
.sc-spark::before {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 250, 230, 0.95) 0%, rgba(250, 222, 160, 0.4) 42%, rgba(240, 205, 140, 0) 100%);
}
.sc-spark svg { position: relative; display: block; width: 100%; height: 100%; fill: #f6d98a; stroke: rgba(170, 120, 40, 0.5); stroke-width: 0.6; }

/* handwriting wipe on a Maginia line (geometry set in px by the JS) + the pen's nib */
.sc-ink {
  -webkit-mask-image: var(--sc-mi);
  mask-image: var(--sc-mi);
  -webkit-mask-size: var(--sc-ms);
  mask-size: var(--sc-ms);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.sc-pen {
  z-index: 41;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 253, 242, 1) 0%, rgba(255, 236, 190, 0.9) 26%,
    rgba(232, 186, 118, 0.38) 56%, rgba(232, 186, 118, 0) 100%);
}

/* ---------------------------------------------------------------- reveal button */
.sc-btn {
  position: absolute;
  left: 50%;
  top: calc(1408 * var(--u));
  z-index: 45;
  display: none;
  min-height: 44px;
  height: calc(80 * var(--u));
  margin: 0;
  padding: 0 max(calc(30 * var(--u)), 12px);
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #2c581d;
  font-family: "Quattrocento", serif;
  font-size: max(calc(25 * var(--u)), 11px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* hairline gold rules either side of the words, like the PSD dividers */
.sc-btn span { position: relative; display: inline-block; padding: 0 0.3em 0 0.5em; }
.sc-btn span::before, .sc-btn span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(54 * var(--u));
  height: max(1px, calc(1.6 * var(--u)));
  background: linear-gradient(90deg, rgba(185, 140, 69, 0), rgba(185, 140, 69, 0.9));
}
.sc-btn span::before { right: 100%; }
.sc-btn span::after { left: 100%; transform: scaleX(-1); }
.scene--scratch.sc-js .sc-btn { display: block; }
.scene--scratch.is-revealed .sc-btn { display: none; }
.sc-btn:hover { color: #ac3452; }
.sc-btn:active { color: #7f2440; }
.sc-btn:focus-visible { outline: 2px solid #ac3452; outline-offset: 3px; }

/* ---------------------------------------------------------------- countdown */
.sc-count {
  position: absolute;
  left: calc(336 * var(--u));
  top: calc(1392 * var(--u));
  width: calc(408 * var(--u));
  height: calc(282 * var(--u));
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(14 * var(--u)) calc(14 * var(--u));
}
.sc-count[hidden] { display: none; }
.sc-count.is-done .sc-unit { display: none; }

/* each unit = a little ivory jharokha window with a double gold rim */
.sc-unit {
  position: relative;
  border: max(1px, calc(2.4 * var(--u))) solid #c9a46a;
  border-radius: 50% 50% calc(12 * var(--u)) calc(12 * var(--u)) / calc(46 * var(--u)) calc(46 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(180deg, #fffdf7 0%, #fbf3e3 62%, #f4e7cd 100%);
  box-shadow:
    inset 0 0 0 calc(5 * var(--u)) rgba(255, 251, 240, 0.95),
    inset 0 0 0 calc(6.6 * var(--u)) rgba(201, 164, 106, 0.7),
    0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(110, 80, 34, 0.16);
}
.sc-num {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(18 * var(--u));
  height: calc(86 * var(--u));
  display: flex;
  justify-content: center;
  font-family: "Maginia", serif;
  font-size: calc(74 * var(--u));
  line-height: calc(86 * var(--u));
  color: #ac3452;
  -webkit-text-stroke: 0.02em currentColor;
  paint-order: stroke fill;
}
/* one digit's slot: the old digit rolls up and out, the new one up and in */
.sc-slot {
  position: relative;
  display: block;
  width: 0.6em;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 24%, #000 80%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 24%, #000 80%, transparent 98%);
}
.sc-dg { position: absolute; inset: 0; text-align: center; }
.sc-lab {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(17 * var(--u));
  padding-left: 0.2em;
  font-family: "Quattrocento", serif;
  font-size: max(calc(27 * var(--u)), 9.5px);
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: #2c581d;
}
.sc-done {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
  padding: 0 0 calc(30 * var(--u));
  font-family: "Maginia", serif;
  font-size: calc(72 * var(--u));
  line-height: 1.25;
  text-align: center;
  color: #ac3452;
  -webkit-text-stroke: 0.023em currentColor;
  paint-order: stroke fill;
}
.sc-done[hidden] { display: none; }

.sc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- ambient loops */
/* florals sway from their stem (origin set by the JS), clouds drift; paused off screen */
.scene--scratch.sc-alive .ly[data-role="flora"] img {
  animation: sc-sway var(--sd, 7s) ease-in-out var(--sdl, 0s) infinite alternate;
}
.scene--scratch.sc-alive .ly[data-role="cloud"] img {
  animation: sc-drift var(--cd, 20s) ease-in-out var(--cdl, 0s) infinite alternate;
}
.scene--scratch.sc-alive.is-revealed .sc-glow { animation: sc-breathe 5.5s ease-in-out infinite alternate; }
.scene--scratch.sc-away .sc-sheen-band,
.scene--scratch.sc-away .sc-hint,
.scene--scratch.sc-away .ly img,
.scene--scratch.sc-away .sc-glow { animation-play-state: paused; }
@keyframes sc-sway { from { transform: rotate(calc(var(--sa, 1.2deg) * -1)); } to { transform: rotate(var(--sa, 1.2deg)); } }
@keyframes sc-drift { from { transform: translateX(0); } to { transform: translateX(calc(var(--cx, 30) * var(--u))); } }
@keyframes sc-breathe { from { opacity: 0.42; transform: scale(0.97); } to { opacity: 0.62; transform: scale(1.03); } }

/* ---------------------------------------------------------------- armed (motion only) */
html.motion .scene--scratch:not(.is-entered) .stage > .ly,
html.motion .scene--scratch:not(.is-entered) .sc-head .tl,
html.motion .scene--scratch:not(.is-entered) .sc-foil,
html.motion .scene--scratch:not(.is-entered) .sc-btn,
html.motion .scene--scratch:not(.is-entered) .sc-count,
html.motion .scene--scratch.sc-wait .stage > .ly,
html.motion .scene--scratch.sc-wait .sc-head .tl,
html.motion .scene--scratch.sc-wait .sc-foil,
html.motion .scene--scratch.sc-wait .sc-btn,
html.motion .scene--scratch.sc-wait .sc-count {
  opacity: 0;
}
html.motion .scene--scratch:not(.is-entered).is-revealed .sc-date,
html.motion .scene--scratch:not(.is-entered).is-revealed .sc-orn,
html.motion .scene--scratch.sc-wait.is-revealed .sc-date,
html.motion .scene--scratch.sc-wait.is-revealed .sc-orn { opacity: 0; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sc-sheen, .sc-hint, .sc-dust, .sc-fx, .sc-spark, .sc-pen { display: none; }
  .scene--scratch .ly img, .sc-glow { animation: none !important; }
  .sc-btn { transition: none; }
}