/* Mid-Autumn coupon claim overlay. Tokens match brand-tokens.css. */
.claim-root {
  position: fixed; inset: 0; z-index: 80;
  display: none; place-items: center;
  background: rgba(22, 51, 53, 0.28);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.claim-root.on { display: grid; }
.claim-stage {
  width: min(360px, calc(100vw - 28px));
  height: 520px;
  position: relative;
  perspective: 900px;
}
.claim-dust span {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tyas-gold); opacity: 0; pointer-events: none;
  box-shadow: 0 0 10px rgba(201,169,97,.55);
}
.claim-root.play .claim-dust span { animation: dust-rise 1.8s ease-out forwards; }
.claim-dust span:nth-child(1) { left: 18%; bottom: 38%; animation-delay: .9s; }
.claim-dust span:nth-child(2) { left: 32%; bottom: 42%; animation-delay: 1.05s; width: 4px; height: 4px; }
.claim-dust span:nth-child(3) { left: 48%; bottom: 36%; animation-delay: 1.12s; }
.claim-dust span:nth-child(4) { left: 62%; bottom: 44%; animation-delay: 1.0s; width: 5px; height: 5px; }
.claim-dust span:nth-child(5) { left: 74%; bottom: 39%; animation-delay: 1.18s; }
.claim-dust span:nth-child(6) { left: 26%; bottom: 50%; animation-delay: 1.28s; background: var(--tyas-mint); }
.claim-dust span:nth-child(7) { left: 70%; bottom: 52%; animation-delay: 1.32s; background: var(--tyas-primary); }
.claim-dust span:nth-child(8) { left: 54%; bottom: 48%; animation-delay: 1.4s; width: 3px; height: 3px; }

.envelope {
  position: absolute; left: 50%; top: 58%;
  width: 280px; height: 168px; margin-left: -140px; margin-top: -84px;
  transform-origin: 50% 80%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 28px rgba(22,51,53,.16));
}
.claim-root.play .envelope { animation: env-in .55s cubic-bezier(.2,1.2,.3,1) both, env-fade .45s 1.65s forwards; }
.env-body {
  position: absolute; inset: 36px 0 0;
  background: linear-gradient(180deg, #eef6f4, #dceae7);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}
.env-body::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 46%, rgba(201,169,97,.18) 50%, transparent 54%);
}
.env-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 92px;
  transform-origin: 50% 0%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #c9a961, #b8944a 70%, #a07f3d);
  z-index: 3;
}
.claim-root.play .env-flap { animation: flap-open .7s .45s cubic-bezier(.2,.8,.2,1) forwards; }

.ticket {
  position: absolute; left: 50%; top: 52%;
  width: 300px; margin-left: -150px; margin-top: -92px;
  transform: translateY(42px) scale(.86) rotateX(18deg);
  opacity: 0; z-index: 4;
  transform-origin: 50% 80%;
}
.claim-root.play .ticket { animation: ticket-out 1s .85s cubic-bezier(.16,1,.3,1) forwards; }
.ticket-face {
  position: relative;
  background:
    radial-gradient(circle at 0 50%, transparent 11px, #fff 12px) left / 12px 24px repeat-y,
    radial-gradient(circle at 100% 50%, transparent 11px, #fff 12px) right / 12px 24px repeat-y,
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,248,.88));
  background-color: #fff;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 22px 50px rgba(22,51,53,.14);
  overflow: hidden;
  padding: 18px 22px 16px;
}
.ticket-face::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--tyas-gold) 0 10px, transparent 10px 16px);
}
.ticket-moon {
  position: absolute; right: -18px; top: -28px; width: 118px; height: 118px; opacity: .95;
}
.ticket-kicker {
  font-size: 11px; letter-spacing: .18em; color: var(--tyas-gold); font-weight: 600;
}
.ticket-face h3 {
  font-family: var(--tyas-display); font-weight: 500; font-size: 26px;
  margin: 6px 0 2px; letter-spacing: -.03em;
}
.ticket-pct {
  font-family: var(--tyas-display); font-size: 54px; line-height: .95;
  color: var(--tyas-primary-deep); letter-spacing: -.05em; margin: 8px 0 4px;
}
.ticket-pct small { font-size: 16px; color: var(--tyas-muted); margin-left: 4px; font-family: var(--tyas-font); }
.ticket-meta { font-size: 12px; color: var(--tyas-muted); line-height: 1.55; max-width: 78%; }
.ticket-dash {
  margin: 12px 0 10px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(22,51,53,.18) 0 6px, transparent 6px 11px);
}
.ticket-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--tyas-muted); }
.ticket-seal {
  position: absolute; right: 18px; bottom: 18px; width: 72px; height: 72px;
  border-radius: 50%; display: grid; place-items: center; text-align: center;
  border: 2px dashed var(--tyas-primary-deep); color: var(--tyas-primary-deep);
  transform: rotate(-18deg) scale(.2); opacity: 0; background: rgba(255,255,255,.55);
  font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .04em;
}
.claim-root.play .ticket-seal { animation: stamp-in .55s 1.85s cubic-bezier(.2,1.4,.3,1) forwards; }

.claim-copy {
  position: absolute; left: 0; right: 0; top: 28px; text-align: center;
  color: #fff; text-shadow: 0 8px 24px rgba(22,51,53,.35);
  opacity: 0;
}
.claim-root.play .claim-copy { animation: fade-up .6s .2s both; }
.claim-copy b { display: block; font-size: 18px; font-weight: 500; }
.claim-copy span { font-size: 12px; opacity: .86; }
.claim-close {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  border: 0; background: rgba(255,255,255,.86); color: var(--tyas-ink);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer;
  opacity: 0;
}
.claim-root.play .claim-close { animation: fade-up .4s 2.3s both; }

@keyframes env-in {
  from { transform: translateY(40px) scale(.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes env-fade {
  to { opacity: 0; transform: translateY(16px) scale(.96); }
}
@keyframes flap-open {
  to { transform: rotateX(188deg); filter: brightness(.85); }
}
@keyframes ticket-out {
  to { transform: translateY(-86px) scale(1) rotateX(0); opacity: 1; }
}
@keyframes stamp-in {
  0% { transform: rotate(-28deg) scale(1.6); opacity: 0; }
  70% { transform: rotate(-16deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(-18deg) scale(1); opacity: 1; }
}
@keyframes dust-rise {
  0% { opacity: 0; transform: translateY(8px) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120px) scale(1.1); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.claim-copy { transform: translateY(8px); }
.claim-root.play .claim-copy { animation: copy-in .55s .15s both; }
@keyframes copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}