/* ============================================================================
   "THE RECEIPT" — the peel object ONLY (the cover exhibit of the file).
   Signature interaction: peel the QUIZ·100%·PASSED gold star off to reveal
   the real work underneath. Driven by ONE custom property, --peel (0→1).
   Pure CSS/SVG; no canvas, no library. Loaded last.
   Page-world styles (grounds, nav, hero shell) live in marketing.css.
   ========================================================================== */

@property --peel { syntax: "<number>"; inherits: true; initial-value: 0.5; }

/* ── THE STAGE + RECEIPT ── */
.rc-stage {
  display: grid; place-items: center; perspective: 1400px;
}
.receipt {
  --peel: 0.5;              /* no-JS fallback: a static half-peel (both layers read) */
  position: relative; width: min(100%, 430px); aspect-ratio: 5 / 6;
  isolation: isolate;
}

/* real work, underneath — a pinned specimen: perforated top edge, mono
   serial, ledger hairlines. Lights up as the star lifts. */
.receipt__work {
  position: absolute; inset: 0;
  background: var(--clr-white);
  border: 1px solid var(--clr-hair-warm);
  border-top-style: dashed;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: clamp(1.2rem, 3vw, 1.8rem); display: flex; flex-direction: column;
  filter: saturate(calc(1 + var(--peel) * 0.18)) brightness(calc(1 + var(--peel) * 0.05));
}
/* the punched notch on the perforated edge */
.receipt__work::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--clr-paper);
  border: 1px solid var(--clr-hair-warm);
}
.receipt__work-label {
  font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clr-green); font-weight: 600;
}
.receipt__work-label::before { content: "✓ "; }
.receipt__serial {
  position: absolute;
  top: clamp(1.2rem, 3vw, 1.8rem); right: clamp(1.2rem, 3vw, 1.8rem);
  font-family: var(--ff-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clr-ink-warm-2);
  font-variant-numeric: tabular-nums;
}
.receipt__work-title {
  font-family: var(--ff-display); font-weight: 700; font-size: 1.1rem; line-height: 1.2;
  color: var(--clr-ink-warm); margin: 0.5rem 0 1rem; letter-spacing: -0.01em;
}
.receipt__rubric {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--sp-4) 0.9rem; align-items: center;
  margin-top: 0.3rem;
  /* the ledger absorbs the card's spare height (gap stays the minimum),
     so the card composes full at --peel:1 — no dead band above the score */
  flex: 1 1 auto; align-content: space-evenly;
}
/* faint ledger hairlines between rubric rows */
.receipt__rubric > *:nth-child(n+3) {
  border-top: 1px solid var(--clr-hair-warm);
  padding-top: var(--sp-3);
}
.receipt__rubric-l { font-size: 0.85rem; color: var(--clr-ink-warm-2); }
.receipt__rubric-bar { width: clamp(60px, 22vw, 96px); height: 8px; border-radius: 999px; background: var(--clr-paper-2); overflow: hidden; }
.receipt__rubric-bar i { display: block; height: 100%; width: var(--fill); background: var(--clr-green-lit); border-radius: inherit; }
.receipt__rubric-bar--miss i { background: var(--clr-amber); }
.receipt__note {
  font-family: var(--ff-hand); font-size: 1.5rem; line-height: 1.12; color: var(--clr-coral);
  margin: 1.1rem 0 0; transform: rotate(-1.5deg);
  opacity: calc(max(0, var(--peel) - 0.35) / 0.55);
}
/* the score line anchors the card's bottom against a hairline */
.receipt__score {
  font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clr-ink-warm); margin-top: auto; padding-top: 0.9rem;
  border-top: 1px solid var(--clr-hair-warm);
  font-variant-numeric: tabular-nums;
}
.receipt__score span { color: var(--clr-ink-warm-2); }

/* the gold star sticker, on top — clipped + lifted by --peel */
.receipt__sticker {
  position: absolute; inset: 0; transform-origin: 100% 0%;
  /* corner-peel: cut a growing top-right triangle (reveal work), then the
     remaining stuck triangle fades + lifts away in the last 35%. */
  --q: calc(min(var(--peel), 0.66) / 0.66);
  --late: calc(max(0, var(--peel) - 0.66) / 0.34);
  clip-path: polygon(0% 0%, 100% 0%, 100% calc((1 - var(--q)) * 100%), calc((1 - var(--q)) * 100%) 100%, 0% 100%);
  opacity: calc(1 - var(--late));
  transform: translate(calc(var(--late) * 7%), calc(var(--late) * -9%)) rotate(calc(var(--late) * -7deg));
  will-change: clip-path, transform, opacity;
  /* contact shadow fully fades with the lifted sticker — no gold ghost */
  filter: drop-shadow(0 calc((6px + var(--peel) * 22px) * (1 - var(--late) * 0.85))
                        calc((10px + var(--peel) * 26px) * (1 - var(--late) * 0.85))
                        rgba(120, 86, 10, calc((0.18 + var(--peel) * 0.14) * (1 - var(--late)))));
}
.receipt__star { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 20px; }
.receipt__star-tick { font-family: var(--ff-display); font-weight: 800; font-size: 46px; fill: var(--clr-gold-3); }
.receipt__sticker-cap {
  position: absolute; left: 0; right: 0; bottom: 14%; text-align: center;
  font-family: var(--ff-mono); font-weight: 600; font-size: clamp(0.8rem, 2.4vw, 1.05rem);
  letter-spacing: 0.08em; text-transform: uppercase; color: #4A360C;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
/* fold highlight along the peel edge — sells the curl cheaply */
.receipt__sticker::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: linear-gradient(135deg, transparent calc((1 - var(--q)) * 100% - 2px), rgba(255,255,255,.7) calc((1 - var(--q)) * 100%), rgba(140,100,20,.35) calc((1 - var(--q)) * 100% + 3px), transparent calc((1 - var(--q)) * 100% + 10px));
  opacity: calc(1 - var(--late));
}

/* exhibit caption beneath the object — fades in as the peel completes */
.receipt__caption {
  position: absolute; left: 0; right: 0; bottom: -3rem;
  text-align: center;
  font-family: var(--ff-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clr-ink-warm-2);
  opacity: calc(max(0, var(--peel) - 0.82) / 0.18);
}

/* the peel cue — real, focusable button docked ON the sticker's lifted corner */
.receipt__cue {
  /* docked on the sticker's lifted corner, BELOW the card's serial +
     REAL WORK · REVIEWED band so both stay legible pre-peel */
  position: absolute; top: 3.4rem; right: 0.6rem; z-index: 3;
  font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 600;
  color: #fff; background: var(--clr-coral); border: none; border-radius: 999px;
  padding: 0.5rem 0.85rem; cursor: grab; box-shadow: 0 4px 14px rgba(255,92,57,.35);
  opacity: calc(1 - var(--peel) * 1.6);
  pointer-events: auto;
}
.receipt.is-dragging .receipt__cue { cursor: grabbing; }
.receipt__cue:focus-visible { outline: 3px solid var(--clr-ink-warm); outline-offset: 3px; }
@keyframes rc-nudge { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-4px,4px) } }
.receipt.is-hinting .receipt__cue { animation: rc-nudge 1.1s ease-in-out 2; }

/* no smooth transition while dragging; smooth on release/keyboard */
.receipt { transition: --peel 0s; }
.receipt.is-settling { transition: --peel .6s cubic-bezier(.16, 1, .3, 1); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .receipt { width: min(88%, 380px); }
}

/* ── FALLBACKS ── */
@media (prefers-reduced-motion: reduce) {
  .receipt { --peel: 1 !important; transition: none !important; }
  .receipt .receipt__cue { display: none; }
}