/* ==========================================================
   Scratch card (js/scratch.js). Everything here is sc- prefixed.
   ========================================================== */

.sc {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* ---------- the gift card ---------- */
.sc-card {
  position: relative;
  padding: clamp(10px, 3.2vw, 15px);
  border-radius: 24px;
  background:
    radial-gradient(120% 85% at 12% 0%, rgba(201, 79, 109, 0.42), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(43, 7, 16, 0.55), transparent 65%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 7px),
    linear-gradient(140deg, var(--wine) 0%, var(--burgundy) 45%, var(--burgundy-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(43, 7, 16, 0.18),
    var(--shadow-lg);
}

/* gold hairline stitched around the frame */
.sc-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 19px;
  border: 1px solid rgba(230, 207, 150, 0.55);
  pointer-events: none;
}

/* little gold rivets in the frame corners */
.sc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 9px 9px, #f3dea0 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) 9px, #f3dea0 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 9px calc(100% - 9px), #f3dea0 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #f3dea0 0 1.6px, transparent 2.2px);
}

.sc-window {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  /* gold stand-in until the canvas paints, so nothing peeks through */
  background: linear-gradient(135deg, #a77a2d, #e7cb84 30%, #c29437 52%, #f3e0a3 70%, #9a6d25);
  box-shadow:
    0 0 0 1px rgba(230, 207, 150, 0.75),
    0 0 0 3px rgba(43, 7, 16, 0.35),
    0 3px 10px rgba(20, 2, 8, 0.35);
}

@supports not (aspect-ratio: 1 / 1) {
  .sc-window { min-height: 220px; }
}

/* ---------- what's underneath ---------- */
.sc-under {
  position: absolute;
  /* 1px inside the window so its corners never bleed past the foil's edge */
  inset: 1px;
  z-index: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(25px, 8.5%, 42px) clamp(22px, 8.5%, 44px);
  overflow: hidden;
  text-align: center;
  color: var(--burgundy-deep);
  background:
    radial-gradient(ellipse 75% 62% at 50% 48%, rgba(255, 250, 246, 0.96), rgba(255, 250, 246, 0) 72%),
    radial-gradient(circle at 0 0, rgba(201, 79, 109, 0.28), transparent 46%),
    radial-gradient(circle at 100% 100%, rgba(201, 79, 109, 0.24), transparent 46%),
    repeating-linear-gradient(45deg, rgba(128, 0, 32, 0.03) 0 1px, transparent 1px 6px),
    var(--blush-soft);
  visibility: hidden;
}

.sc.is-ready .sc-under {
  visibility: visible;
}

.sc-under:focus,
.sc-under:focus-visible {
  outline: none;
}

/* double gold frame on the hidden card */
.sc-under::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 9px;
  border: 1px solid rgba(201, 162, 75, 0.75);
  box-shadow:
    0 0 0 3px rgba(255, 250, 246, 0.7),
    0 0 0 4px rgba(201, 162, 75, 0.35);
  pointer-events: none;
}

/* one-time shine across the message right after it shows up */
.sc-under::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 246, 214, 0.75) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-16deg);
  opacity: 0;
}

.sc.is-revealing .sc-under::after,
.sc.is-revealed .sc-under::after {
  animation: sc-shine 1.4s var(--ease) 0.35s 1 both;
}

.sc-mark {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 62%;
  max-width: 260px;
  height: auto;
  color: var(--burgundy);
  opacity: 0.05;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
}

.sc-corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: var(--gold);
  pointer-events: none;
}
.sc-corner--tl { top: 15px; left: 15px; transform: rotate(-18deg); }
.sc-corner--tr { top: 15px; right: 15px; transform: rotate(18deg); }
.sc-corner--bl { bottom: 15px; left: 15px; transform: rotate(18deg); }
.sc-corner--br { bottom: 15px; right: 15px; transform: rotate(-18deg); }

.sc-msg {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

.sc-title {
  margin: 0 0 0.35em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--sc-fs, 30px) * 0.64);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--burgundy);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.sc-text {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--sc-fs, 30px);
  line-height: 1.12;
  color: var(--burgundy-deep);
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.sc-text--long {
  line-height: 1.16;
  text-wrap: pretty;
}

/* ---------- the foil ---------- */
.sc-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23d8b058' stroke='%23946a22' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='9.5' fill='%23f0d68f'/%3E%3Cpath transform='translate(9.6 9.6) scale(.54)' fill='%23a3243b' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") 16 16, pointer;
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease),
    filter 0.6s var(--ease);
}

.sc.is-revealing .sc-canvas {
  opacity: 0;
  transform: scale(1.05);
  filter: brightness(1.3);
  pointer-events: none;
}

/* idle shimmer that invites a touch; goes away once she starts */
.sc-glint {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.sc-glint::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 252, 238, 0.5) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-140%) skewX(-18deg);
  animation: sc-glint 4.2s ease-in-out 1.2s infinite;
}

.sc.is-touched .sc-glint {
  opacity: 0;
}
.sc.is-touched .sc-glint::before,
.sc.is-off .sc-glint::before {
  animation-play-state: paused;
}

/* ---------- flakes + celebration ---------- */
.sc-fx {
  position: absolute;
  left: 0;
  top: -16px;
  z-index: 4;
  width: 100%;
  height: calc(100% + 76px);
  max-width: none;
  pointer-events: none;
}

.sc-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sc-p {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sz, 18px);
  height: var(--sz, 18px);
  margin: calc(var(--sz, 18px) / -2) 0 0 calc(var(--sz, 18px) / -2);
  color: var(--c, var(--wine));
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(74, 14, 28, 0.25));
  animation: sc-burst 1.25s var(--ease) var(--d, 0ms) 1 both;
}

.sc-p svg {
  width: 100%;
  height: 100%;
}

.sc.is-revealing .sc-card {
  animation: sc-pop 0.7s var(--ease-bounce) 1 both;
}

/* ---------- below the card ---------- */
.sc-done {
  margin: 22px auto 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.5rem, 6.2vw, 1.95rem);
  line-height: 1.15;
  color: var(--wine);
  white-space: pre-line;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s var(--ease) 0.45s,
    transform 0.7s var(--ease-bounce) 0.45s;
}

.sc-done.is-in {
  opacity: 1;
  transform: none;
}

/* keyboard / screen reader shortcut. Hidden until focused. */
.sc-reveal {
  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;
}

.sc-reveal:focus,
.sc-reveal:focus-visible {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: var(--tap, 48px);
  margin: 18px auto 0;
  padding: 10px 24px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border: 1px solid rgba(201, 162, 75, 0.8);
  border-radius: 999px;
  background: linear-gradient(140deg, var(--wine), var(--burgundy));
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.sc-sr {
  position: absolute !important;
  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;
}

/* ---------- motion ---------- */
@keyframes sc-glint {
  0% { transform: translateX(-140%) skewX(-18deg); }
  45%, 100% { transform: translateX(330%) skewX(-18deg); }
}

@keyframes sc-shine {
  0% { transform: translateX(-160%) skewX(-16deg); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(320%) skewX(-16deg); opacity: 0; }
}

@keyframes sc-burst {
  0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 0; }
  14% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1) rotate(var(--r, 0deg)); opacity: 0; }
}

@keyframes sc-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-glint { display: none; }
  .sc-canvas { transition-duration: 0.22s; }
  .sc.is-revealing .sc-canvas { transform: none; filter: none; }
  .sc.is-revealing .sc-card,
  .sc.is-revealing .sc-under::after,
  .sc.is-revealed .sc-under::after { animation: none; }
  .sc-done { transform: none; transition: opacity 0.25s linear; }
}