/* Member KH signature scene (product-sites/design.md v1.2 §9.2): scan -> +10 -> reward unlocks, 3.4 s, once.
   Without animation the screen shows the final frame: 100 points, Free drink ready. Only opacity and transform move. */
:root { --scene-delay: 1.1s; --scene-len: 3.4s; }
.mk-top { position: absolute; left: 0; right: 0; top: 0; height: 11%; display: flex; align-items: center; gap: 3cqw; padding: 0 5cqw; background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 700; }
.mk-top i { width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--brand); flex: none; }
.mk-card { position: absolute; left: 6%; right: 6%; top: 14%; padding: 4cqw 5cqw; border-radius: 4cqw; background: var(--brand); color: var(--on-brand); font-weight: 600; }
.mk-card small { display: block; font-size: 4.2cqw; opacity: .9; font-weight: 500; }
.mk-pts { display: inline-block; height: 1.3em; line-height: 1.3; overflow: hidden; width: 3.2ch; font-variant-numeric: tabular-nums; text-align: right; vertical-align: bottom; font-size: 9cqw; font-weight: 700; }
.mk-roll { display: flex; flex-direction: column; transform: translateY(-50%); }
.mk-bar { display: block; height: 2cqw; margin-top: 3cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--on-brand) 30%, transparent); overflow: hidden; }
.mk-bar::after { content: ""; display: block; height: 100%; background: var(--on-brand); transform-origin: left; transform: scaleX(.5); }
.mk-qr { --qr-h: 46cqw; position: absolute; left: 50%; top: 40%; width: 46cqw; height: var(--qr-h); margin-left: -23cqw; padding: 3cqw; border-radius: 3cqw; background: #FFFFFF; }
.mk-qr svg { width: 100%; height: 100%; }
.mk-scan { position: absolute; left: 2cqw; right: 2cqw; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-glow) 20%, var(--brand-glow) 80%, transparent);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--brand-glow) 50%, transparent); opacity: 0; }
.mk-brackets { position: absolute; inset: -2cqw; border-radius: 4cqw;
  background: linear-gradient(var(--brand), var(--brand)) 0 0 / 8cqw 1cqw, linear-gradient(var(--brand), var(--brand)) 0 0 / 1cqw 8cqw,
    linear-gradient(var(--brand), var(--brand)) 100% 0 / 8cqw 1cqw, linear-gradient(var(--brand), var(--brand)) 100% 0 / 1cqw 8cqw,
    linear-gradient(var(--brand), var(--brand)) 0 100% / 8cqw 1cqw, linear-gradient(var(--brand), var(--brand)) 0 100% / 1cqw 8cqw,
    linear-gradient(var(--brand), var(--brand)) 100% 100% / 8cqw 1cqw, linear-gradient(var(--brand), var(--brand)) 100% 100% / 1cqw 8cqw;
  background-repeat: no-repeat; }
.mk-plus { position: absolute; left: 50%; top: 40%; margin-left: -10cqw; width: 20cqw; padding: 1.5cqw 0; border-radius: 99px; background: var(--accent); color: #3B1A0B; text-align: center; font-size: 6cqw; opacity: 0; }
.mk-reward { position: absolute; left: 6%; right: 6%; top: 77%; display: flex; align-items: center; gap: 3cqw; padding: 3cqw 4cqw; border-radius: 3cqw; background: var(--surface); border: 1px solid var(--line); font-weight: 600; isolation: isolate; }
.mk-reward::after { content: ""; position: absolute; right: 4cqw; top: -4cqw; width: 14cqw; height: 10cqw; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, var(--accent) 1.2cqw, transparent 1.4cqw) 0 60% / 5cqw 5cqw no-repeat,
    radial-gradient(circle, var(--accent) 1cqw, transparent 1.2cqw) 50% 0 / 5cqw 5cqw no-repeat,
    radial-gradient(circle, var(--brand-glow) 1cqw, transparent 1.2cqw) 100% 80% / 5cqw 5cqw no-repeat; }
.mk-ic { position: relative; flex: none; width: 8cqw; height: 8cqw; }
.mk-ic svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--brand); }
.mk-lock { opacity: 0; }
.mk-glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--brand-soft); }
.mk-ready { margin-left: auto; padding: .5cqw 2.5cqw; border-radius: 99px; background: var(--brand); color: var(--on-brand); font-size: 4.2cqw; white-space: nowrap; }
.mk-name { min-width: 0; font-size: 4.8cqw; }
.mk-next { position: absolute; left: 6%; right: 6%; top: 90%; padding: 0 4cqw; font-size: 4.4cqw; color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .ps-tile { animation: lsk-pop 500ms var(--ease-spring) both; }
  .mk-scene .mk-scan { animation: mk-scan var(--scene-len) ease-in-out var(--scene-delay) 1 both; }
  .mk-scene .mk-brackets { animation: mk-brackets var(--scene-len) var(--ease-spring) var(--scene-delay) 1 both; }
  .mk-scene .mk-plus { animation: mk-plus var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .mk-scene .mk-roll { animation: mk-roll var(--scene-len) var(--ease-spring) var(--scene-delay) 1 both; }
  .mk-scene .mk-bar::after { animation: mk-bar var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .mk-scene .mk-lock { animation: mk-lock var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .mk-scene .mk-gift { animation: mk-gift var(--scene-len) var(--ease-spring) var(--scene-delay) 1 both; }
  .mk-scene .mk-glow { animation: mk-glow var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .mk-scene .mk-ready { animation: mk-ready var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .mk-scene .mk-reward::after { animation: mk-spark var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  @keyframes mk-scan { 0% { opacity: 0; transform: translateY(0); } 2.9% { opacity: 1; } 26.5% { opacity: 1; } 29.4%, 100% { opacity: 0; transform: translateY(var(--qr-h)); } }
  @keyframes mk-brackets { 0%, 26.5% { transform: scale(1); } 30.9% { transform: scale(1.06); } 35.3%, 100% { transform: scale(1); } }
  @keyframes mk-plus { 0%, 32.4% { opacity: 0; transform: translateY(8px) scale(.6); } 41.2% { opacity: 1; transform: translateY(-6px) scale(1.05); }
    58.8% { opacity: 1; transform: translateY(-18px) scale(1); } 67.6%, 100% { opacity: 0; transform: translateY(-28px); } }
  @keyframes mk-roll { 0%, 44.1% { transform: translateY(0); } 61.8%, 100% { transform: translateY(-50%); } }
  @keyframes mk-bar { 0%, 44.1% { transform: scaleX(.45); } 61.8%, 100% { transform: scaleX(.5); } }
  @keyframes mk-lock { 0%, 67.6% { opacity: 1; transform: none; } 76.5% { opacity: 1; transform: translateY(-3px) rotate(-14deg); }
    82.4%, 100% { opacity: 0; transform: translateY(-3px) rotate(-14deg) scale(.8); } }
  @keyframes mk-gift { 0%, 76.5% { opacity: 0; transform: scale(.6); } 85.3% { opacity: 1; transform: scale(1.15); } 91.2%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes mk-glow { 0%, 76.5% { opacity: 0; } 88.2%, 100% { opacity: 1; } }
  @keyframes mk-ready { 0%, 82.4% { opacity: 0; transform: translateX(8px); } 97.1%, 100% { opacity: 1; transform: none; } }
  @keyframes mk-spark { 0%, 79.4% { opacity: 0; transform: scale(.6); } 88.2% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
  @supports (animation-timeline: view()) {  /* feature-card icon tiles: "stamp" once on reveal (§9.4) */
    .ps-teaser .lsk-icon { animation: ps-stamp var(--ease-spring) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes ps-stamp { from { transform: scale(1.25) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
  }
}