/* Scratch card "Изтрий и открий своя подарък" (client design: ivory card, gold frame, gilded leaves).
   The cover is a canvas painted as champagne foil; scratch.js erases it as the card scrolls into view
   (or by hand with mouse / finger). Without JS the prize is simply visible. */

.scratch { text-align: center; }
.scratch .wrap { display: grid; justify-items: center; gap: 16px; }
.scratch .lead { max-width: 46ch; margin: 0 auto; }

/* background: the studio itself, blurred and darkened, so the card floats in front of the room */
.scratch { --wave: clamp(44px, 6vw, 80px); position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--wave) + clamp(36px, 4vw, 56px)); margin-bottom: clamp(16px, 3vw, 40px); }
.scratch::before { content: ""; position: absolute; inset: 0 -20px; z-index: -2; background: url("../images/studio-reformers-800.webp") center 60% / cover; filter: blur(4px) saturate(.85); }
/* dark wash + a thin gold line tracing each wavy edge */
.scratch::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 66C180 24 330 20 520 52S860 92 1040 54 1320 18 1440 44' fill='none' stroke='%23D9C3A5' stroke-opacity='.75' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M1440 30C1260 62 1100 56 920 28S560-10 380 20 120 64 0 36' fill='none' stroke='%23D9C3A5' stroke-opacity='.75' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat,
    radial-gradient(70% 60% at 50% 60%, rgba(62, 48, 39, .45), rgba(62, 48, 39, .82));
}
/* no straight edges: the room is cut with soft waves top and bottom */
.scratch::before, .scratch::after {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52C180 10 330 6 520 38S860 78 1040 40 1320 4 1440 30V80H0Z'/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--wave) + 2px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V44C1260 76 1100 70 920 42S560 4 380 34 120 78 0 50Z'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52C180 10 330 6 520 38S860 78 1040 40 1320 4 1440 30V80H0Z'/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--wave) + 2px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V44C1260 76 1100 70 920 42S560 4 380 34 120 78 0 50Z'/%3E%3C/svg%3E") bottom / 100% var(--wave) no-repeat;
}
/* compact on desktop: copy + claim on the left, card on the right */
@media (min-width: 900px) {
  .scratch { text-align: left; }
  .scratch .wrap {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(32px, 5vw, 72px); row-gap: 14px;
    grid-template-areas: "eye card" "title card" "lead card" "after card"; align-content: center; justify-items: start;
  }
  .scratch .wrap > .eyebrow { grid-area: eye; align-self: end; }
  .scratch .wrap > .h-lg { grid-area: title; }
  .scratch .wrap > .lead { grid-area: lead; margin: 0; }
  .scratch .sc-card { grid-area: card; justify-self: end; width: min(100%, 540px); margin-top: 0; }
  .scratch .sc-after { grid-area: after; justify-items: start; align-self: start; margin-top: 8px; }
}
.scratch .eyebrow, .scratch .h-lg, .scratch .italic, .scratch .lead { color: var(--white); }
.scratch .sc-card { box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 50px 90px -30px rgba(10, 6, 4, .9); }
/* same white button as the hero ("Разгледай услугите"): no silk, soft shadow, hover only lifts */
:root .scratch .sc-after .btn {
  background: var(--white); background-image: none; color: var(--text); border-color: var(--white); text-shadow: none;
  box-shadow: 0 6px 20px -8px rgba(80, 64, 52, .7);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
:root .scratch .sc-after .btn:hover {
  background: var(--white); background-image: none; border-color: var(--white); color: var(--text);
  transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(80, 64, 52, .75);
}
@media (prefers-reduced-motion: reduce) { :root .scratch .sc-after .btn:hover { transform: none; } }
.scratch .sc-after small, .scratch .sc-progress { color: var(--blush); }

.sc-card {
  --gold: #B99A72; --gold-soft: #D9C3A5;
  position: relative; isolation: isolate; overflow: hidden;
  width: min(100%, 620px); aspect-ratio: 1.55; margin-top: 18px;
  border-radius: 22px; text-align: center; color: #8A6E52;
  background:
    radial-gradient(120% 90% at 50% 40%, #FBF6EE 0%, #F4EADC 60%, #EADBC6 100%);
  box-shadow: 0 2px 6px rgba(119, 99, 84, .12), 0 40px 70px -40px rgba(80, 64, 52, .7);
  display: grid; grid-template-rows: 1fr auto 1fr; align-items: center;
  padding: 7% 9% 6%;
}
/* thin gold double frame */
.sc-card::before, .sc-card::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--gold); border-radius: 14px; }
.sc-card::before { inset: 4.2%; opacity: .75; }
.sc-card::after { inset: calc(4.2% + 6px); opacity: .35; }

.sc-leaves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.sc-brand { display: grid; gap: 4px; align-self: end; padding-bottom: 6%; }
.sc-brand b {
  font-family: var(--display); font-weight: 400; letter-spacing: .14em;
  font-size: clamp(22px, 6.4cqi, 44px); line-height: 1; color: #9A7B5B;
}
.sc-brand small { font-size: clamp(9px, 1.9cqi, 13px); letter-spacing: .42em; font-weight: 500; color: #9A7B5B; }
.sc-card { container-type: inline-size; }

/* the field: prize underneath, foil canvas on top */
.sc-field {
  position: relative; width: 74%; margin: 0 auto; aspect-ratio: 3.4; border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(185, 154, 114, .55), 0 10px 22px -16px rgba(80, 64, 52, .7);
  background: #FFFBF5;
}
.sc-prize { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; padding: 6px 10px; }
.sc-prize small { font-size: clamp(11px, 1.8cqi, 12px); letter-spacing: .24em; text-transform: uppercase; color: #A88B6B; font-weight: 600; }
.sc-prize strong {
  font-family: var(--display); font-weight: 400; color: #7A5E44; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(17px, 4.6cqi, 32px); line-height: 1.12; text-wrap: balance;
}
.sc-prize span { font-size: clamp(10px, 2cqi, 13.5px); color: #8A6E52; }
.sc-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit;
  cursor: grab; touch-action: pan-y; transition: opacity .7s ease;
}
.sc-cover.is-gone { opacity: 0; pointer-events: none; }

.sc-hint {
  align-self: start; padding-top: 5.5%; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: clamp(8.5px, 1.8cqi, 12px); letter-spacing: .28em; text-transform: uppercase; color: #A88B6B; font-weight: 500;
}
.sc-hint::before, .sc-hint::after { content: ""; width: clamp(18px, 8cqi, 56px); height: 1px; background: var(--gold); opacity: .7; }

/* little gold sparkles when the prize appears */
.sc-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #E2C892; pointer-events: none; opacity: 0; box-shadow: 0 0 8px 2px rgba(226, 200, 146, .7); }
.sc-card.is-revealed .sc-spark { animation: sc-spark 1.2s ease-out forwards; }
@keyframes sc-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

/* after the reveal: claim the prize */
.sc-after { display: grid; justify-items: center; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.sc-after.is-on { opacity: 1; transform: none; }
.sc-after small { color: var(--muted); font-size: 13px; max-width: 46ch; }
.sc-progress { font-size: 13px; color: var(--muted); letter-spacing: .02em; }

/* phones: taller card, wider foil field, so the prize stays on its lines */
@media (max-width: 560px) {
  .sc-card { aspect-ratio: 1.12; padding: 9% 7% 8%; }
  .sc-brand b { font-size: clamp(22px, 8.4cqi, 34px); }
  .sc-brand small { font-size: 10px; letter-spacing: .34em; }
  .sc-field { width: 90%; aspect-ratio: 2.3; }
  .sc-prize small { font-size: 11px; }
  .sc-prize strong { font-size: clamp(17px, 6.4cqi, 24px); }
  .sc-prize span { font-size: 12px; }
  .sc-hint { font-size: 10.5px; letter-spacing: .1em; gap: 8px; white-space: nowrap; }
  .sc-hint::before, .sc-hint::after { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-cover, .sc-after { transition: none; }
  .sc-card.is-revealed .sc-spark { animation: none; }
}