/* ==========================================================================
   Golden ticket — the 10.10 Lucky Draw pass (SPEC §12.1, §12.4)
   1. Number reveal (slot-machine reels)   2. The ticket   3. Save actions
   Motion only under .motion; everything pauses while off-screen (.is-paused).
   Reduced motion / no rotation: still gold foil, gradients and glow, just still.
   ========================================================================== */

@property --foil-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 35deg;
}

.ticket-stage, .lucky-reveal {
  --wine: linear-gradient(172deg, #6a2d2c 0%, #5c2626 46%, #461b1b 100%);
  --tk-cream: var(--paper-cream, #f6eee3);
  --tk-label: #e3c27c;
  --tk-gold-text: linear-gradient(100deg, #a8782c 0%, #f1d68c 18%, #fff3cf 28%, #c69641 42%, #f1d68c 58%, #fff3cf 66%, #a8782c 82%, #e3bf68 100%);
}

/* Shared shape: concave corners (--r) and side notches (--n) at the tear line,
   --stub above the bottom edge. The foil is the outer box; the body sits --f
   inside it with concentric cuts, so a --f wide gold ring follows every curve. */
.ticket, .lucky-reveal__card {
  --r: 18px; --n: 14px; --f: 2px; --stub: 0px;
  --cut: #0000 var(--r), #000 calc(var(--r) + 0.6px);
  --notch: #0000 var(--n), #000 calc(var(--n) + 0.6px);
  --outer-mask:
    radial-gradient(circle at 0 0, var(--cut)),
    radial-gradient(circle at 100% 0, var(--cut)),
    radial-gradient(circle at 0 100%, var(--cut)),
    radial-gradient(circle at 100% 100%, var(--cut)),
    radial-gradient(circle at 0 calc(100% - var(--stub)), var(--notch)),
    radial-gradient(circle at 100% calc(100% - var(--stub)), var(--notch));
  position: relative;
  display: block;
  padding: var(--f);
  -webkit-mask: var(--outer-mask);
  -webkit-mask-composite: source-in;
  mask: var(--outer-mask);
  mask-composite: intersect;
}
.lucky-reveal__card { --n: 0px; }
.ticket__foil, .lucky-reveal__foil {
  position: absolute; inset: 0;
  /* Declared here (not via an inherited variable) so the animated angle resolves on this element. */
  background: conic-gradient(from var(--foil-angle), #8a5f1f 0deg, #f1d68c 60deg, #c69641 130deg, #fff3cf 190deg, #a8782c 250deg, #f1d68c 310deg, #8a5f1f 360deg);
  will-change: transform; /* its own layer: the rotating foil repaints alone */
}
.ticket__inner, .lucky-reveal__inner {
  --ci: #0000 calc(var(--r) + var(--f)), #000 calc(var(--r) + var(--f) + 0.6px);
  --ni: #0000 calc(var(--n) + var(--f)), #000 calc(var(--n) + var(--f) + 0.6px);
  --m: calc(-1 * var(--f));
  --p: calc(100% + var(--f));
  --inner-mask:
    radial-gradient(circle at var(--m) var(--m), var(--ci)),
    radial-gradient(circle at var(--p) var(--m), var(--ci)),
    radial-gradient(circle at var(--m) var(--p), var(--ci)),
    radial-gradient(circle at var(--p) var(--p), var(--ci)),
    radial-gradient(circle at var(--m) calc(100% - var(--stub) + var(--f)), var(--ni)),
    radial-gradient(circle at var(--p) calc(100% - var(--stub) + var(--f)), var(--ni));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--tk-cream);
  text-align: center;
  background:
    radial-gradient(90% 40% at 50% 27%, rgba(241, 214, 140, 0.2), rgba(241, 214, 140, 0) 72%),
    var(--wine);
  -webkit-mask: var(--inner-mask);
  -webkit-mask-composite: source-in;
  mask: var(--inner-mask);
  mask-composite: intersect;
  transform: translateZ(0);
}

/* --------------------------------------------------------------------------
   1. Number reveal
   -------------------------------------------------------------------------- */
.lucky-reveal {
  position: relative;
  width: min(100%, 390px);
  margin: 12px auto 4px;
  perspective: 1100px;
  cursor: pointer;
}
/* Fresh RSVP: the reveal plays inside the ticket's own footprint (the ticket waits
   unseen underneath), so nothing below moves when the ticket takes over. */
.lucky-reveal.is-overlay {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2;
  margin: 0 auto;
  display: grid; align-content: center;
}
.lucky-reveal.is-overlay::before { /* a soft maroon stage behind the card */
  content: ""; position: absolute; left: -14%; right: -14%; top: 8%; bottom: 8%; z-index: -1;
  background: radial-gradient(closest-side, rgba(92, 38, 38, 0.2), rgba(92, 38, 38, 0.08) 55%, rgba(92, 38, 38, 0));
  pointer-events: none;
}
.lucky-reveal__inner {
  display: grid; justify-items: center; gap: 10px;
  padding: 40px 22px 32px;
}
.lucky-reveal__canopy, .ticket__canopy {
  position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1.3px 1.3px at 8% 14%, #fff3cf 98%, #0000),
    radial-gradient(1px 1px at 17% 32%, #f1d68c 98%, #0000),
    radial-gradient(1.6px 1.6px at 26% 9%, #e3bf68 98%, #0000),
    radial-gradient(1px 1px at 35% 44%, #f1d68c 98%, #0000),
    radial-gradient(1.4px 1.4px at 44% 18%, #fff3cf 98%, #0000),
    radial-gradient(1px 1px at 53% 36%, #c69641 98%, #0000),
    radial-gradient(1.5px 1.5px at 61% 12%, #f1d68c 98%, #0000),
    radial-gradient(1px 1px at 70% 40%, #fff3cf 98%, #0000),
    radial-gradient(1.4px 1.4px at 79% 20%, #e3bf68 98%, #0000),
    radial-gradient(1px 1px at 88% 34%, #f1d68c 98%, #0000),
    radial-gradient(1.3px 1.3px at 94% 10%, #fff3cf 98%, #0000),
    radial-gradient(120% 100% at 50% 0%, rgba(241, 214, 140, 0.14), rgba(241, 214, 140, 0) 70%);
}
.lucky-reveal__mark {
  width: 34px; aspect-ratio: 856 / 880;
  background: linear-gradient(140deg, #fff3cf, #e3bf68 45%, #a8782c);
  -webkit-mask: url("/assets/img/mark.svg") center / contain no-repeat;
  mask: url("/assets/img/mark.svg") center / contain no-repeat;
}
.lucky-reveal__eyebrow, .ticket__label {
  font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.32em; text-transform: uppercase;
  background: linear-gradient(90deg, #c69641, #fff3cf 50%, #c69641);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-left: 0.32em; /* optical centring of the tracking */
}
.lucky-reveal__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 7.4vw, 2.05rem); line-height: 1.1;
  color: var(--tk-cream);
  text-wrap: balance;
}
.lucky-reveal__title:focus { outline: none; }
.lucky-reveal__machine {
  position: relative;
  display: flex; align-items: flex-start; justify-content: center; gap: 10px;
  margin-top: 8px;
  padding: 14px 18px 14px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, #2f1212, #3d1717 50%, #2f1212);
  box-shadow: 0 0 0 1px rgba(241, 214, 140, 0.55), 0 0 0 5px rgba(47, 18, 18, 0.9), 0 0 0 6px rgba(241, 214, 140, 0.3), 0 18px 34px -16px rgba(0, 0, 0, 0.7);
}
.lucky-reveal__no {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.5rem; line-height: 1; color: var(--tk-label);
  margin-top: 0.4em;
}
.reels { display: flex; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(4.4rem, 21vw, 5.4rem); }
.reels--3 { font-size: clamp(3.8rem, 18vw, 5rem); }
.reels--4 { font-size: clamp(3rem, 14vw, 4.2rem); }
.reel {
  --cell: 1.08em;
  position: relative;
  width: 0.72em; height: var(--cell);
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #1c0808 0%, #3a1515 26%, #451b1a 50%, #3a1515 74%, #1c0808 100%);
  box-shadow: inset 0 0 0 1px rgba(241, 214, 140, 0.4);
}
.reel::after { /* curved glass: light on top, shade toward the rims */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 2, 2, 0.75) 0%, rgba(8, 2, 2, 0) 30%, rgba(255, 243, 207, 0.08) 44%, rgba(8, 2, 2, 0) 58%, rgba(8, 2, 2, 0) 70%, rgba(8, 2, 2, 0.75) 100%);
}
.reel__strip { display: block; will-change: transform; }
.reel__strip span {
  display: grid; place-items: center;
  height: var(--cell);
  line-height: 1;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  color: #f1d68c;
  text-shadow: 0 0 16px rgba(241, 214, 140, 0.35);
}
.reel.is-landed { box-shadow: inset 0 0 0 1px rgba(255, 243, 207, 0.85), 0 0 18px rgba(241, 214, 140, 0.55); }
.reel.is-landed .reel__strip span { color: #fff3cf; text-shadow: 0 0 20px rgba(241, 214, 140, 0.8), 0 0 2px #fff3cf; }
.reel { transition: box-shadow 0.4s var(--ease-out); }

.lucky-reveal__burst, .ticket-burst { /* centred with offsets, not translate: GSAP owns its transform */
  position: absolute; left: -50%; top: 50%; z-index: -1;
  width: 200%; aspect-ratio: 1;
  margin-top: -100%;
  pointer-events: none;
  opacity: 0;
}
.lucky-reveal__burst::before, .ticket-burst::before { /* rays */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(241, 214, 140, 0) 0deg 7deg, rgba(255, 238, 190, 0.55) 9deg, rgba(241, 214, 140, 0) 11deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 45%, #0000 70%);
  mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.5) 45%, #0000 70%);
}
.lucky-reveal__burst::after, .ticket-burst::after { /* flash */
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 232, 0.95), rgba(241, 214, 140, 0.55) 40%, rgba(241, 214, 140, 0) 72%);
}
/* The ticket's burst plays on the cream page, where pale light would vanish:
   deeper gold rays that reach well past the ticket's sides. */
.ticket-burst { left: -80%; width: 260%; margin-top: -130%; }
.ticket-burst::before {
  background: repeating-conic-gradient(from 0deg, rgba(198, 150, 65, 0) 0deg 5.5deg, rgba(198, 150, 65, 0.46) 9deg, rgba(198, 150, 65, 0) 12.5deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.7) 58%, #0000 86%);
  mask: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.7) 58%, #0000 86%);
}
.ticket-burst::after {
  inset: 18%;
  background: radial-gradient(closest-side, rgba(227, 191, 104, 0.5), rgba(227, 191, 104, 0.24) 46%, rgba(227, 191, 104, 0) 74%);
}
.lucky-reveal__status {
  min-height: 1.5em;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.12rem;
  color: rgba(246, 238, 227, 0.88);
}
.lucky-reveal__skip {
  font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(246, 238, 227, 0.6);
}

/* --------------------------------------------------------------------------
   2. The ticket
   -------------------------------------------------------------------------- */
.ticket-stage {
  position: relative;
  display: grid; justify-items: center;
  width: 100%;
  padding: 16px 0 26px;
}
.ticket-wrap { position: relative; width: min(100%, 390px); z-index: 1; }
.ticket-floor { /* the soft shadow on the "table"; it breathes with the float */
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 0;
  width: min(84%, 330px); height: 38px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 18, 18, 0.42), rgba(46, 18, 18, 0));
  pointer-events: none;
}
/* The foil's soft outer glow. A shadow-only box tucked 16px inside the ticket (deeper
   than every corner cut and notch), so only the halo that spreads past the edges shows. */
.ticket-glow {
  position: absolute; inset: 16px; z-index: -1;
  border-radius: 12px;
  box-shadow: 0 0 22px 20px rgba(206, 158, 70, 0.5), 0 0 64px 26px rgba(198, 150, 65, 0.3);
  opacity: 0.8;
  pointer-events: none;
}
.ticket { --stub: 112px; outline: none; }
.ticket:focus-visible { outline: none; }
.ticket-focus { /* visible focus ring for the ticket (the ticket itself is masked) */
  position: absolute; inset: -7px; border-radius: 22px; pointer-events: none;
  border: 2px solid var(--focus); opacity: 0;
}
.ticket:focus-visible + .ticket-focus { opacity: 1; }

.ticket__texture {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .84 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.ticket__spot { /* the soft spotlight behind the number; it pulses gently */
  position: absolute; left: 50%; top: 13%; z-index: -1;
  width: 120%; aspect-ratio: 1.3;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(241, 214, 140, 0.24), rgba(241, 214, 140, 0.07) 55%, rgba(241, 214, 140, 0));
  pointer-events: none;
}
.ticket__watermark {
  position: absolute; left: 50%; top: 23%; z-index: -1;
  width: 64%; aspect-ratio: 856 / 880;
  translate: -50% 0;
  pointer-events: none;
}
.ticket__watermark::before, .ticket__watermark::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("/assets/img/mark.svg") center / contain no-repeat;
  mask: url("/assets/img/mark.svg") center / contain no-repeat;
}
.ticket__watermark::before { translate: 1.5px 2.5px; background: rgba(16, 3, 3, 0.13); }
.ticket__watermark::after { background: linear-gradient(160deg, rgba(255, 240, 205, 0.09), rgba(198, 150, 65, 0.05)); }

/* A thin velvet valance with a gold fringe — the poster's curtains, in miniature. */
.ticket__valance, .ticket__fringe {
  --scallop: 22px;
  position: absolute; left: 0; right: 0; top: 0; pointer-events: none;
  -webkit-mask:
    radial-gradient(calc(var(--scallop) / 2) 8px at 50% 0, #000 97%, #0000) 0 100% / var(--scallop) 8px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - 7.5px) no-repeat;
  mask:
    radial-gradient(calc(var(--scallop) / 2) 8px at 50% 0, #000 97%, #0000) 0 100% / var(--scallop) 8px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - 7.5px) no-repeat;
}
.ticket__valance {
  height: 26px; z-index: 2;
  background:
    linear-gradient(180deg, rgba(30, 8, 6, 0.6), rgba(30, 8, 6, 0.04) 46%, rgba(30, 8, 6, 0.42)),
    url("/assets/img/poster/velvet-tile.webp") 0 0 / auto 150% repeat-x,
    #8c4219;
}
.ticket__fringe {
  height: 28px; z-index: 1;
  background: linear-gradient(90deg, #a8782c, #f1d68c 30%, #c69641 55%, #fff3cf 75%, #a8782c);
}
.ticket__beads {
  position: absolute; left: 0; right: 0; top: 17px; height: 6px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 0 50%, #f1d68c 0 2px, rgba(241, 214, 140, 0) 2.6px) 0 0 / 22px 6px repeat-x;
}

/* Inner hairline frame, concentric with every cut (corners and notches). */
.ticket__frame {
  --fi: 11px;
  --fc: rgba(227, 191, 104, 0.5);
  --R: calc(var(--r) + var(--f) + var(--fi));
  --Rn: calc(var(--n) + var(--f) + var(--fi));
  --o: calc(-1 * (var(--f) + var(--fi)));
  --e: calc(100% + var(--f) + var(--fi));
  --ny: calc(100% + var(--fi) + var(--f) - var(--stub));
  --cutR: #0000 var(--R), #000 calc(var(--R) + 0.5px);
  --cutN: #0000 var(--Rn), #000 calc(var(--Rn) + 0.5px);
  --ringR: #0000 calc(var(--R) + 0.1px), var(--fc) calc(var(--R) + 0.5px), var(--fc) calc(var(--R) + 1.1px), #0000 calc(var(--R) + 1.5px);
  --ringN: #0000 calc(var(--Rn) + 0.1px), var(--fc) calc(var(--Rn) + 0.5px), var(--fc) calc(var(--Rn) + 1.1px), #0000 calc(var(--Rn) + 1.5px);
  --frame-mask:
    radial-gradient(circle at var(--o) var(--o), var(--cutR)),
    radial-gradient(circle at var(--e) var(--o), var(--cutR)),
    radial-gradient(circle at var(--o) var(--e), var(--cutR)),
    radial-gradient(circle at var(--e) var(--e), var(--cutR)),
    radial-gradient(circle at var(--o) var(--ny), var(--cutN)),
    radial-gradient(circle at var(--e) var(--ny), var(--cutN));
  position: absolute; inset: var(--fi); z-index: 3; pointer-events: none;
  border: 1px solid var(--fc);
  background:
    radial-gradient(circle at var(--o) var(--o), var(--ringR)),
    radial-gradient(circle at var(--e) var(--o), var(--ringR)),
    radial-gradient(circle at var(--o) var(--e), var(--ringR)),
    radial-gradient(circle at var(--e) var(--e), var(--ringR)),
    radial-gradient(circle at var(--o) var(--ny), var(--ringN)),
    radial-gradient(circle at var(--e) var(--ny), var(--ringN));
  background-origin: border-box;
  -webkit-mask: var(--frame-mask);
  -webkit-mask-composite: source-in;
  mask: var(--frame-mask);
  mask-composite: intersect;
}

.ticket__main {
  position: relative; z-index: 3;
  display: grid; justify-items: center;
  padding: 44px 30px 18px;
}
.ticket__clinic {
  font-family: var(--font-body); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(246, 238, 227, 0.78);
  padding-left: 0.26em;
  text-wrap: balance;
}
.ticket__label { margin-top: 10px; display: inline-flex; align-items: center; gap: 12px; }
.ticket__star {
  width: 10px; height: 10px; flex: none;
  background: #f1d68c;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.ticket__number {
  position: relative;
  display: flex; align-items: flex-start; justify-content: center; gap: 0.35rem;
  margin: 10px 0 0;
  line-height: 1;
}
.ticket__no {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 7.4vw, 2rem); line-height: 1;
  color: var(--tk-label);
  margin-top: 0.5em;
}
.ticket__digits-box { position: relative; display: grid; }
.ticket__digits, .ticket__digits-shadow {
  grid-area: 1 / 1;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(7.4rem, 38vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.012em;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  padding: 0.02em 0.04em 0.06em;
}
.ticket.is-long .ticket__digits, .ticket.is-long .ticket__digits-shadow { font-size: clamp(5.6rem, 27vw, 7.4rem); }
.ticket.is-xlong .ticket__digits, .ticket.is-xlong .ticket__digits-shadow { font-size: clamp(4.4rem, 21vw, 5.8rem); }
.ticket__digits-shadow { /* embossed depth + the warm glow, under the foil text */
  color: rgba(26, 6, 6, 0.66);
  translate: 0 3px;
  text-shadow: 0 0 34px rgba(241, 214, 140, 0.6), 0 0 12px rgba(241, 214, 140, 0.3), 0 14px 26px rgba(14, 3, 3, 0.6);
}
.ticket__digits {
  position: relative;
  background: var(--tk-gold-text);
  background-size: 250% 100%;
  background-position: 18% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px rgba(255, 243, 207, 0.32);
  will-change: background-position;
}
.ticket__keep {
  max-width: 30ch; margin-top: 8px;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.14rem; line-height: 1.3;
  color: var(--tk-cream);
  text-wrap: balance;
}
.ticket__rule {
  position: relative; display: block;
  width: 72%; height: 1px; margin: 16px 0 6px;
  background: linear-gradient(90deg, rgba(241, 214, 140, 0), rgba(241, 214, 140, 0.85) 50%, rgba(241, 214, 140, 0));
}
.ticket__rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  translate: -50% -50%; rotate: 45deg;
  background: #f1d68c;
}
.ticket__info { width: 100%; margin: 4px 0 0; display: grid; }
.ticket__info div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 7px 0 6px;
  background: linear-gradient(90deg, rgba(227, 191, 104, 0.34) 1px, transparent 1px) 0 100% / 5px 1px repeat-x;
}
.ticket__info div:last-child { background: none; }
.ticket__info dt {
  flex: none;
  font-family: var(--font-body); font-weight: 500; font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tk-label);
  text-align: left;
}
.ticket__info dd {
  margin: 0; min-width: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; line-height: 1.2;
  color: var(--tk-cream);
  text-align: right;
  overflow-wrap: anywhere;
}
.ticket__fine {
  margin-top: 12px;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 0.98rem; line-height: 1.3;
  color: rgba(246, 238, 227, 0.82);
  text-wrap: balance;
}
.ticket__stub {
  position: relative; z-index: 3;
  height: calc(var(--stub) - var(--f));
  display: grid; align-content: center; justify-items: center; gap: 2px;
  background: rgba(20, 4, 4, 0.2);
}
.ticket__tear {
  position: absolute; top: 0; left: calc(var(--n) + 16px); right: calc(var(--n) + 16px);
  height: 1.5px; translate: 0 -50%;
  background: repeating-linear-gradient(90deg, rgba(241, 214, 140, 0.8) 0 7px, rgba(241, 214, 140, 0) 7px 12px);
}
.ticket__stub-label {
  font-family: var(--font-body); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--tk-label);
  padding-left: 0.24em;
}
.ticket__code {
  font-family: var(--font-body); font-weight: 600; font-size: 1.6rem; line-height: 1.15;
  letter-spacing: 0.16em; padding-left: 0.16em;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(90deg, #e3bf68, #fff3cf 50%, #e3bf68);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ticket__stub-note {
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 0.98rem;
  color: rgba(246, 238, 227, 0.85);
}

/* Tiny glitter that twinkles across the ticket — never on the text: four flank the
   number (clear of the header lines), six glint on the side hairlines of the frame
   (the gutter between the frame and the text column), two on the stub's hairlines,
   away from the notches and the corner cuts. */
.ticket__glitter { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ticket__glitter i {
  position: absolute; width: 9px; height: 9px;
  translate: -50% -50%;
  background:
    linear-gradient(90deg, rgba(255, 243, 207, 0) 30%, #fff3cf 50%, rgba(255, 243, 207, 0) 70%) center / 100% 1.2px no-repeat,
    linear-gradient(0deg, rgba(255, 243, 207, 0) 30%, #fff3cf 50%, rgba(255, 243, 207, 0) 70%) center / 1.2px 100% no-repeat,
    radial-gradient(circle, #fff3cf 0 1px, rgba(241, 214, 140, 0.7) 1.4px, rgba(241, 214, 140, 0) 3px);
  opacity: 0.75;
}
.ticket__glitter { --hl: 11px; } /* the frame hairline (inset 11px), from the body's edge */
.ticket__glitter i:nth-child(1) { left: 9%; top: 112px; }
.ticket__glitter i:nth-child(2) { left: 91%; top: 100px; scale: 0.7; }
.ticket__glitter i:nth-child(3) { left: 12%; top: 150px; scale: 0.55; }
.ticket__glitter i:nth-child(4) { left: 89%; top: 146px; scale: 0.85; }
.ticket__glitter i:nth-child(5) { left: var(--hl); top: 40%; scale: 0.7; }
.ticket__glitter i:nth-child(6) { left: calc(100% - var(--hl)); top: 47%; scale: 0.6; }
.ticket__glitter i:nth-child(7) { left: var(--hl); top: 58%; scale: 0.65; }
.ticket__glitter i:nth-child(8) { left: calc(100% - var(--hl)); top: 64%; scale: 0.7; }
.ticket__glitter i:nth-child(9) { left: var(--hl); top: min(72%, calc(100% - 160px)); scale: 0.5; }
.ticket__glitter i:nth-child(10) { left: calc(100% - var(--hl)); top: min(76%, calc(100% - 150px)); scale: 0.6; }
.ticket__glitter i:nth-child(11) { left: var(--hl); top: calc(100% - 66px); scale: 0.6; }
.ticket__glitter i:nth-child(12) { left: calc(100% - var(--hl)); top: calc(100% - 46px); scale: 0.7; }

/* Holographic sheen (a periodic sweep) and the pointer glare. */
.ticket__sheen {
  position: absolute; inset: -30% -70%; z-index: 5; pointer-events: none;
  background: linear-gradient(105deg,
    rgba(255, 243, 207, 0) 38%,
    rgba(255, 243, 207, 0.05) 43%,
    rgba(255, 246, 225, 0.3) 48.5%,
    rgba(241, 214, 140, 0.16) 51%,
    rgba(214, 170, 255, 0.07) 53.5%,
    rgba(255, 243, 207, 0) 60%);
  mix-blend-mode: screen;
  transform: translateX(-9%);
  opacity: 0.55;
}
.ticket__glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(70% 50% at var(--gx, 50%) var(--gy, 28%), rgba(255, 243, 207, 0.22), rgba(255, 243, 207, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.ticket.is-tilting .ticket__glare { opacity: 1; }

/* No lucky number (draw disabled or an old saved pass): the pass title leads instead. */
.ticket__title-alt { display: none; }
.ticket.is-nonumber .ticket__number, .ticket.is-nonumber .ticket__keep, .ticket.is-nonumber .ticket__fine { display: none; }
.ticket.is-nonumber .ticket__title-alt {
  display: block; margin: 12px 0 2px;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(2.6rem, 12vw, 3.2rem); line-height: 1.05;
  background: var(--tk-gold-text); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 0.08em 0.08em;
}

/* --------------------------------------------------------------------------
   Motion: foil rotation, number shimmer, sheen sweep, glitter, float, glow
   -------------------------------------------------------------------------- */
@keyframes foil-spin { from { --foil-angle: 35deg; } to { --foil-angle: 395deg; } }
@keyframes digits-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
@keyframes sheen-sweep {
  0% { transform: translateX(-38%); opacity: 0; }
  6% { opacity: 1; }
  34% { transform: translateX(38%); opacity: 1; }
  40%, 100% { transform: translateX(38%); opacity: 0; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}
@keyframes ticket-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes floor-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.9); opacity: 0.72; }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.68; }
  50% { opacity: 1; }
}
@keyframes spot-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.motion .lucky-reveal .lucky-reveal__foil,
.motion .ticket-stage.is-live .ticket__foil { animation: foil-spin 9s linear infinite; }
.motion .ticket-stage.is-live .ticket__digits { animation: digits-shimmer 4.6s ease-in-out infinite alternate; }
.motion .ticket-stage.is-live .ticket__sheen { animation: sheen-sweep 5s cubic-bezier(0.45, 0, 0.3, 1) 0.6s infinite; opacity: 0; }
.motion .ticket-stage.is-live .ticket__glitter i { animation: twinkle 2.8s ease-in-out infinite; }
.motion .ticket-stage.is-live .ticket__glitter i:nth-child(3n) { animation-duration: 3.6s; animation-delay: -1.2s; }
.motion .ticket-stage.is-live .ticket__glitter i:nth-child(3n + 1) { animation-duration: 2.3s; animation-delay: -0.5s; }
.motion .ticket-stage.is-live .ticket__glitter i:nth-child(4n + 2) { animation-delay: -2s; }
.motion .ticket-stage.is-live .ticket-wrap { animation: ticket-float 6s ease-in-out infinite; }
.motion .ticket-stage.is-live .ticket-floor { animation: floor-breathe 6s ease-in-out infinite; }
.motion .ticket-stage.is-live .ticket-glow { animation: glow-pulse 4.2s ease-in-out infinite; }
.motion .ticket-stage.is-live .ticket__spot { animation: spot-pulse 4.2s ease-in-out infinite; }

/* Off-screen or hidden tab: everything holds still. */
.ticket-stage.is-paused *, .ticket-stage.is-paused, .lucky-reveal.is-paused * { animation-play-state: paused !important; }

/* Before the entrance runs (motion only), the ticket waits unseen. */
.motion .ticket-stage.is-pending .ticket-wrap, .motion .ticket-stage.is-pending .ticket-floor { opacity: 0; }

/* --------------------------------------------------------------------------
   3. Save actions
   -------------------------------------------------------------------------- */
.ticket-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: min(100%, 470px);
  margin: 0 auto;
}
.ticket-actions__title {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 4px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.74rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-700);
}
.ticket-actions__title::before, .ticket-actions__title::after {
  content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-500));
}
.ticket-actions__title::after { background: linear-gradient(270deg, transparent, var(--gold-500)); }
.ticket-actions .btn { min-height: 54px; padding-inline: 16px; }
.ticket-actions .btn--full { grid-column: 1 / -1; }
.ticket-actions__save { min-height: 58px; font-size: 1.05rem; }
.ticket-actions .btn .icon { width: 20px; height: 20px; }
.ticket-actions .btn__spinner { display: none; }
.ticket-actions__save.is-busy .btn__spinner { display: inline-block; }
.ticket-actions__save.is-busy .icon { display: none; }
.ticket-actions__save.is-busy { cursor: progress; }
.ticket-actions .link { grid-column: 1 / -1; justify-self: center; margin-top: 2px; }
.ticket-actions__hint { grid-column: 1 / -1; text-align: center; font-size: 0.86rem; color: var(--ink-muted); margin-top: -2px; }
.btn--wa .icon { color: #2f8a4c; }
@media (max-width: 440px) {
  .ticket-actions .btn:not(.btn--full) { padding-inline: 10px; gap: 8px; font-size: 0.95rem; }
  .ticket-actions .btn:not(.btn--full) .icon { display: none; }
}
@media (max-width: 340px) {
  .ticket-actions { grid-template-columns: 1fr; }
  .ticket-actions .btn { grid-column: 1 / -1; }
}

/* Confetti / light shower canvas (created on demand, removed afterwards). */
.confetti-canvas { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; pointer-events: none; }

/* --------------------------------------------------------------------------
   Reduced motion & small screens
   -------------------------------------------------------------------------- */
html:not(.motion) .lucky-reveal { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .ticket-stage *, .ticket-stage, .lucky-reveal * { animation: none !important; transition: none !important; }
}
@media (max-width: 440px) {
  .ticket__main { padding: 40px 24px 16px; }
  .ticket__clinic { font-size: 0.56rem; letter-spacing: 0.15em; padding-left: 0.15em; }
  .ticket__info div { padding: 6px 0 5px; }
  .ticket__info dt { font-size: 0.6rem; letter-spacing: 0.14em; }
  .ticket__info dd { font-size: 1.06rem; }
}
@media (max-width: 370px) {
  .ticket-actions__title { letter-spacing: 0.16em; gap: 8px; }
  .ticket-actions__title::before, .ticket-actions__title::after { width: 16px; }
  .ticket__main { padding-inline: 20px; }
  .ticket__info dd { font-size: 1rem; }
  .ticket__code { font-size: 1.4rem; }
}
@media (min-width: 900px) {
  .ticket-wrap, .lucky-reveal { width: 400px; }
}