/*
  flair.css - the stake site's coat. loaded by the stake build only (index.html, inside <!-- @stake -->), on top of
  styles.css: a living sky behind the hero, cards that tilt and catch the light, a sheen on the big words, counters
  that count, a race card that shimmers. everything moves on transform / opacity only (the compositor), the heavy
  parts are desktop-only, and all of it stands still for prefers-reduced-motion. flair.js adds the parts that
  need a hand (the pointer light, the tilt, the counters, the bills).
*/

/* ---- the sky ---------------------------------------------------------------------------------------- */
.hero__sky {                                              /* a night in stake's navy, lit from below in their blue */
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 620px at 86% 100%, rgba(20,117,225,.6), transparent 64%),
    radial-gradient(700px 400px at 10% 100%, rgba(20,117,225,.3), transparent 60%),
    linear-gradient(180deg, #0F212E 0%, #16304A 60%, #1A3B5C 100%);
}
.sky { position: absolute; inset: 0 0 150px 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sky__blob {
  position: absolute; width: 56vw; height: 56vw; max-width: 760px; max-height: 760px; border-radius: 50%;
  filter: blur(70px); opacity: .55; will-change: transform; mix-blend-mode: screen;
}
.sky__blob--1 { left: -14%; top: -30%; background: radial-gradient(circle at 40% 40%, rgba(77,155,255,.9), rgba(20,117,225,0) 65%); animation: blob-a 26s ease-in-out infinite alternate; }
.sky__blob--2 { right: -18%; top: -10%; opacity: .3; background: radial-gradient(circle at 50% 50%, rgba(0,231,1,.26), rgba(0,231,1,0) 62%); animation: blob-b 34s ease-in-out infinite alternate; }   /* a whisper of stake green */
.sky__blob--3 { left: 30%; bottom: -46%; background: radial-gradient(circle at 50% 50%, rgba(125,184,255,.75), rgba(125,184,255,0) 65%); animation: blob-c 30s ease-in-out infinite alternate; }
@keyframes blob-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(14vw, 10vh) scale(1.18); } }
@keyframes blob-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-12vw, 16vh) scale(.9); } }
@keyframes blob-c { from { transform: translate(0, 0) scale(.95); } to { transform: translate(-10vw, -12vh) scale(1.15); } }

/* a second field of dust that drifts the other way: depth */
.sky__dust {
  position: absolute; inset: -40px;
  background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.6px);
  background-size: 54px 54px; opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 90%); mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 90%);
  animation: dust 60s linear infinite;
}
@keyframes dust { from { transform: translate(0, 0); } to { transform: translate(-54px, 54px); } }

/* a shooting star every so often */
.sky__star {
  position: absolute; left: 70%; top: 8%; width: 180px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 70%, rgba(255,255,255,0));
  transform: rotate(-24deg); transform-origin: right center; animation: star 11s ease-in infinite;
}
@keyframes star {
  0%, 86% { opacity: 0; transform: rotate(-24deg) translateX(0); }
  88% { opacity: 1; }
  96%, 100% { opacity: 0; transform: rotate(-24deg) translateX(-62vw); }
}

/* bills drifting up (flair.js makes 7-10 of these; each gets its own --x, --d, --s, --r) */
.sky__bills { position: absolute; inset: 0; }
.sky__bill {
  position: absolute; left: var(--x, 50%); bottom: -60px; width: calc(34px * var(--s, 1)); height: calc(20px * var(--s, 1));
  border-radius: 4px; background: #3DDC84; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.25);
  opacity: 0; will-change: transform;
  animation: bill var(--d, 18s) linear infinite; animation-delay: var(--delay, 0s);
}
.sky__bill::before { content: ""; position: absolute; inset: 4px 6px; border-radius: 3px; border: 1.5px dashed rgba(255,255,255,.55); }
.sky__bill::after {
  content: "$"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 calc(11px * var(--s, 1)) / 1 var(--font-display); color: rgba(255,255,255,.9);
}
@keyframes bill {
  0% { transform: translateY(0) rotate(calc(var(--r, 0deg) * -1)); opacity: 0; }
  6% { opacity: .9; }
  85% { opacity: .8; }
  100% { transform: translateY(calc(-100vh - 80px)) translateX(40px) rotate(var(--r, 0deg)); opacity: 0; }
}

/* a little grain: the matte, paper-like finish stake's surfaces have */
.sky__grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- the words ------------------------------------------------------------------------------------- */
/* a sheen sweeps the "pp" every few seconds (the word is its own span in the stake build, so the emoji next
   to it is left alone: a text-clipped gradient on the whole title paints a box behind the emoji) */
.hero__title { text-shadow: none; }
.hero__word {
  background: linear-gradient(110deg, #fff 0%, #fff 40%, #BFDFFF 50%, #fff 60%, #fff 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  /* the title is a flex row with line-height .9, so the word's box is shorter than its letters, and a text-clipped
     background only paints inside the box: room is made with padding, and taken back with margins */
  padding: .22em .12em .28em; margin: -.22em -.12em -.28em;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.35));        /* the shadow lives on the word: a filter on the title itself clips its letters (see .reveal below) */
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -40% 0; } }

/* the chip over the title breathes a ring of light */
.chip--shuffle { position: relative; animation: chip-ring 3.4s ease-out infinite; }
@keyframes chip-ring {
  0% { box-shadow: 0 10px 30px rgba(20,117,225,.35), 0 0 0 0 rgba(255,255,255,.45); }
  70%, 100% { box-shadow: 0 10px 30px rgba(20,117,225,.35), 0 0 0 14px rgba(255,255,255,0); }
}

/* ---- the link cards: they tilt towards the pointer and catch the light ------------------------------- */
.link, .link:hover, .link:active {
  position: relative; overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)) scale(var(--sc, 1));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.link:active { --sc: .99; }
.link:not(.link--shuffle) { background: #fff; }           /* fully opaque: the bills drifting behind would show through the 3% the original leaves open */
.link::after {                                            /* the gloss, centred where the pointer is */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px 160px at calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%), rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  mix-blend-mode: soft-light;
}
.link:hover { --lift: -4px; box-shadow: 0 26px 60px rgba(0,0,0,.35); }
.link:hover::after { opacity: 1; }
.link > * { position: relative; z-index: 1; }
/* the stake card: a border of light that goes round */
.link--shuffle { background: linear-gradient(120deg, #2A86F0, var(--shuffle) 55%, #0B4FA8); box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 14px 40px rgba(11,79,168,.45); }
.link--shuffle::before {
  content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none; opacity: .75;
  background: conic-gradient(from var(--spin, 0deg), rgba(255,255,255,0) 0 58%, rgba(255,255,255,.4) 80%, rgba(255,255,255,0) 100%);
  animation: spin 6s linear infinite; mix-blend-mode: overlay; filter: blur(14px);
}
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.link--shuffle > * { z-index: 1; }
/* a live dot by "streams" */
.link--kick .link__tag::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; margin-right: 6px; vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(61,220,132,.7); animation: live 1.8s ease-out infinite;
}
@keyframes live { 70%, 100% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } }
/* the numbers count up when the cards arrive (flair.js) */
.link__meta { font-variant-numeric: tabular-nums; }
.link__meta.is-counting { color: #4D9BFF; }

/* ---- the chips and buttons ------------------------------------------------------------------------- */
.float-chip--2 { background: var(--shuffle); }
.btn--shuffle, .btn--white, .btn--gold { position: relative; overflow: hidden; }
.btn--shuffle::after, .btn--white::after, .btn--gold::after {   /* a shine that crosses the button on hover */
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 40%; left: -60%; transform: translateX(0) skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none;
}
.btn--shuffle:hover::after, .btn--white:hover::after, .btn--gold:hover::after { animation: shine .7s ease forwards; }
@keyframes shine { to { transform: translateX(480%) skewX(-20deg); } }
.nav__cta { background: linear-gradient(180deg, #3B8DF0, var(--shuffle) 60%, #0B4FA8); animation: cta-glow 3s ease-in-out infinite; }
.nav__cta:hover { background: linear-gradient(180deg, #4D9BFF, #2A86F0 60%, #1475E1); }
@keyframes cta-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(20,117,225,.38); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 34px rgba(20,117,225,.7); }
}

/* ---- the marquee: a line of light above and below ---------------------------------------------------- */
.marquee { border-block: 1px solid rgba(77,155,255,.28); background: linear-gradient(180deg, #121a24, var(--ink)); }
.marquee::before { background: linear-gradient(90deg, #121a24, rgba(18,26,36,0)); }
.marquee::after { background: linear-gradient(270deg, var(--ink), rgba(18,18,22,0)); }

/* ---- pp x stake: the wordmark, huge and faint, breathing behind the cards --------------------------- */
.shuffle { position: relative; overflow: hidden; }
.shuffle::before {
  content: ""; position: absolute; right: -6%; top: -8%; width: min(62vw, 820px); aspect-ratio: 447 / 222; pointer-events: none; opacity: .05;
  background: #fff; -webkit-mask: url("assets/stake-logo.svg") center / contain no-repeat; mask: url("assets/stake-logo.svg") center / contain no-repeat;
  animation: breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe { from { transform: translate(0, 0) rotate(-4deg) scale(1); } to { transform: translate(-2%, 3%) rotate(-2deg) scale(1.04); } }
.shuffle .wrap { position: relative; z-index: 1; }
.scard { transition: transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s; }
.scard:hover { box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.scard__code.is-set {                                     /* the code shimmers */
  background: linear-gradient(110deg, #fff 30%, #7DB8FF 50%, #fff 70%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 5s ease-in-out infinite;
}

/* ---- the race card ----------------------------------------------------------------------------------- */
.lbcard {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #2A86F0, var(--shuffle) 45%, #0B4FA8);
  box-shadow: 0 30px 80px rgba(20,117,225,.3);
}
.lbcard::before {                                         /* a band of light crosses the card now and then */
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 26%; left: -40%; transform: translateX(0) skewX(-18deg); pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0));
  animation: band 9s ease-in-out infinite;
}
@keyframes band { 0%, 60% { transform: translateX(0) skewX(-18deg); } 90%, 100% { transform: translateX(660%) skewX(-18deg); } }
[data-race="pool"], [data-fact="pool"], [data-race="first"] {   /* the money glints gold */
  background: linear-gradient(110deg, #FFE9A6 20%, #FFC531 45%, #FFF3C4 55%, #FFC531 65%, #FFE9A6 80%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s ease-in-out infinite;
}
.lb__facts b { font-variant-numeric: tabular-nums; display: inline-block; }
.lb__facts b.pop { animation: fact-pop .45s var(--ease); }
@keyframes fact-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.board__row--1 { color: #0B4FA8; }

/* ---- confetti, when the code is copied (flair.js throws it) --------------------------------------------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i {
  position: absolute; left: var(--x); top: var(--y); width: 8px; height: 13px; border-radius: 2px; background: var(--c, #fff);
  animation: confetti .95s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
.confetti--cash i { width: 16px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); animation-duration: 1.2s; }   /* tap pp: it rains bills */

/* ---- a line of light along the top: how far down the page you are -------------------------------------
   driven by the scroll position itself where the browser can (animation-timeline: scroll(), on the
   compositor, so it moves with the finger with nothing in between); flair.js glides --sp elsewhere */
.scrollbar {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 70; pointer-events: none;
  background: linear-gradient(90deg, #4D9BFF, #1475E1 60%, #3DDC84); transform-origin: left center; transform: scaleX(var(--sp, 0));
  box-shadow: 0 0 12px rgba(77,155,255,.8); will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .scrollbar--css { animation: scrollline linear both; animation-timeline: scroll(root block); }
  @keyframes scrollline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---- the game card: the scene drifts under the pointer ----------------------------------------------- */
.playcard__art { transition: transform .6s var(--ease); transform: translateX(var(--panx, 0px)) scale(1.02); }
.playcard:hover .playcard__art { transform: translateX(var(--panx, -10px)) scale(1.06); }

/* ---- reveals: a touch of blur-to-sharp on desktop ----------------------------------------------------- */
@media (min-width: 901px) {
  .reveal { filter: blur(6px); transform: translateY(22px) scale(.985); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
  .reveal.in { filter: none; transform: none; }       /* none, not blur(0): a filter that stays on clips to the box, and the title's letters hang out of theirs (line-height .9) */
}

/* ---- phones: the sky stays, the heavy parts don't ------------------------------------------------------ */
@media (max-width: 640px) {
  .sky__blob { filter: blur(40px); width: 90vw; height: 90vw; }
  .sky__blob--2 { display: none; }
  .sky__grain { display: none; }
  .link { transform: none; }
}
/* a touch screen's gpu pays for some of this on every frame of a scroll: the blobs' blur (their gradients are soft
   anyway), the blend mode under them, the blurred ring that spins round the stake card by repainting (a custom
   property can't animate on the compositor; stood still it's a hard streak, so it goes altogether), the ring that
   breathes round the chip, the shadow filter under the title's sheen. the sky and the sheen stay */
@media (hover: none) and (pointer: coarse) {
  .sky__blob { filter: none; mix-blend-mode: normal; opacity: .42; }
  .sky__blob--1 { background: radial-gradient(circle at 40% 40%, rgba(77,155,255,.9), rgba(77,155,255,.35) 30%, rgba(20,117,225,0) 65%); }
  .sky__blob--3 { background: radial-gradient(circle at 50% 50%, rgba(125,184,255,.75), rgba(125,184,255,.3) 30%, rgba(125,184,255,0) 65%); }
  .link--shuffle::before { display: none; }
  .chip--shuffle { animation: none; }
  .hero__word { filter: none; }
}

/* ---- and all of it holds still when asked ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sky__blob, .sky__dust, .sky__star, .sky__bill, .hero__title, .chip--shuffle, .link--shuffle::before, .link--kick .link__tag::before, .nav__cta, .shuffle::before, .lbcard::before, .scard__code.is-set, [data-race="pool"], [data-fact="pool"], [data-race="first"] { animation: none !important; }
  .sky__bill { opacity: 0; }
  .sky__star { opacity: 0; }
  .link { transform: none !important; }
  .reveal { filter: none !important; }
}