/* GiftBG: the living app background, in the style of a Telegram Gift backdrop (see bg.js for the API).
   Two layers: .bgx (behind the app: colour wash, symbol pattern, drawn gift decor, motes, reaction aura) and
   .bgx-cast (above the content, below nav/dock/sheets: the Gift mascots peeking in from the screen edges).
   Nothing here takes a tap (pointer-events: none) and only transform/opacity are animated.
   Luminance budget: no background pixel is brighter than L 0.04, so text placed straight on it keeps WCAG AA. */
@property --bgx-tint { syntax: '<color>'; inherits: true; initial-value: #8a7f76; }
@property --bgx-glow { syntax: '<color>'; inherits: true; initial-value: #ffb170; }

.bgx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; background: #08070a;
  --bgx-tint: #8a7f76; --bgx-glow: #ffb170; }
/* no transition on --bgx-tint/--bgx-glow: an animated inherited property restyled the whole backdrop every frame for 1.5 s at each
   Gift change; the scene crossfade already carries the change and the decor/motes are faint enough to switch at once */
.bgx div, .bgx i, .bgx canvas, .bgx svg { position: absolute; display: block; }
/* parallax groups: overscan so a scroll/tilt offset never shows an edge */
.bgx-par { inset: -7% -6%; will-change: transform; }

/* scene = colour wash + symbol pattern of one Gift model; the next scene fades in on top of the current one */
.bgx-scene { inset: 0; opacity: 0; }
.bgx-scene.on { opacity: 1; }
.bgx-scene.in { opacity: 1; z-index: 2; transition: opacity 1.5s ease; }
.bgx-wash { inset: 0; background:
  linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .42) 100%),
  radial-gradient(125% 56% at 50% 2%, var(--c0, #2a1c12) 0%, var(--c1, #1a120c) 46%, transparent 80%),
  radial-gradient(78% 42% at 106% 92%, var(--c3, #1c120a) 0%, transparent 72%),
  radial-gradient(72% 38% at -10% 56%, var(--c4, #16100c) 0%, transparent 70%),
  var(--c2, #0b0908); }
.bgx-pat { left: 0; top: 0; animation: bgx-drift 48s ease-in-out infinite alternate; }
@keyframes bgx-drift { from { transform: translate3d(-10px, -6px, 0) scale(1); } to { transform: translate3d(12px, 10px, 0) scale(1.035); } }

/* gift decor drawn by us (bows, boxes, ribbon curls, sparkles): thin lines in the backdrop tint */
.bgx-dec { color: var(--bgx-tint); opacity: .085; animation: bgx-float var(--d, 22s) ease-in-out var(--dl, 0s) infinite alternate; }
.bgx-dec svg { inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bgx-float { from { transform: translate3d(0, 0, 0) rotate(var(--r0, -8deg)); } to { transform: translate3d(var(--fx, 10px), var(--fy, -22px), 0) rotate(var(--r1, 10deg)); } }

/* motes: a few soft lights rising slowly */
.bgx-mote { width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0%, var(--bgx-glow) 34%, transparent 70%);
  animation: bgx-rise var(--d, 20s) linear var(--dl, 0s) infinite; }
@keyframes bgx-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: var(--o, .3); } 80% { opacity: var(--o, .3); }
  100% { opacity: 0; transform: translate3d(var(--fx, 24px), -112vh, 0); } }

/* reaction aura: one soft light pulse over the whole backdrop */
.bgx-aura { inset: 0; opacity: 0; }
.bgx-aura.a-profit, .bgx-aura.a-maxprofit { background: radial-gradient(90% 62% at 50% 34%, rgba(47, 216, 154, .34), rgba(255, 216, 74, .16) 46%, transparent 76%); }
.bgx-aura.a-open { background: radial-gradient(80% 54% at 50% 30%, var(--bgx-glow), transparent 72%); }
.bgx-aura.a-loss, .bgx-aura.a-liquidation { background: radial-gradient(86% 62% at 50% 44%, transparent 34%, rgba(255, 45, 69, .42) 100%); }
.bgx-aura.a-profit { animation: bgx-pulse 1.7s ease-out; }
.bgx-aura.a-maxprofit { animation: bgx-pulse 2.6s ease-out; }
.bgx-aura.a-open { animation: bgx-pulse-soft 1.1s ease-out; }
.bgx-aura.a-loss { animation: bgx-pulse-soft 1.4s ease-out; }
.bgx-aura.a-liquidation { animation: bgx-pulse2 1.9s ease-out; }
@keyframes bgx-pulse { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bgx-pulse-soft { 0% { opacity: 0; } 20% { opacity: .32; } 100% { opacity: 0; } }
@keyframes bgx-pulse2 { 0% { opacity: 0; } 10% { opacity: 1; } 34% { opacity: .25; } 48% { opacity: .85; } 100% { opacity: 0; } }
/* the pattern answers too: a short swell on profit, a shiver on liquidation */
.bgx.r-up .bgx-par.p1 { animation: bgx-swell 1.2s cubic-bezier(.2, .8, .3, 1); }
.bgx.r-down .bgx-par.p1 { animation: bgx-quake .5s linear; }
@keyframes bgx-swell { 30% { transform: scale(1.03); } }
@keyframes bgx-quake { 20% { transform: translate3d(-5px, 2px, 0); } 40% { transform: translate3d(4px, -2px, 0); } 60% { transform: translate3d(-3px, 1px, 0); } 80% { transform: translate3d(2px, 0, 0); } }

/* DEMO keeps its violet signal */
html[data-mode="demo"] .bgx::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 46% at 50% 0%, rgba(143, 124, 255, .1), transparent 72%); }

/* ---------- mascots: real Gift art peeking in from the screen edges, only where the screen is free ---------- */
.bgx-cast { position: fixed; inset: 0; z-index: 15; overflow: hidden; pointer-events: none; contain: strict; }
.bgx-mas { position: absolute; top: 0; width: 78px; height: 78px; will-change: transform; transition: transform .62s cubic-bezier(.22, 1.25, .36, 1); }
.bgx-mas.l { left: 0; transform: translate3d(-112%, var(--y, 0px), 0) rotate(-18deg); }
.bgx-mas.r { right: 0; transform: translate3d(112%, var(--y, 0px), 0) rotate(18deg); }
.bgx-mas.l.in { transform: translate3d(-36%, var(--y, 0px), 0) rotate(15deg); }
.bgx-mas.r.in { transform: translate3d(36%, var(--y, 0px), 0) rotate(-15deg); }
/* second entrance: pops up a little higher, then settles */
.bgx-mas.pop { transition-timing-function: cubic-bezier(.3, 1.7, .4, 1); }
.bgx-mas.l.pop.in { transform: translate3d(-30%, var(--y, 0px), 0) rotate(8deg); }
.bgx-mas.r.pop.in { transform: translate3d(30%, var(--y, 0px), 0) rotate(-8deg); }
.bgx-mas.out { transition: transform .26s ease-in; }
.bgx-mas-in { position: absolute; inset: 0; animation: bgx-bob 3.4s ease-in-out infinite; }
.bgx-mas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
@keyframes bgx-bob { 50% { transform: translate3d(0, -4px, 0) rotate(2.5deg); } }
.bgx-mas.m-cheer .bgx-mas-in { animation: bgx-cheer 1.5s cubic-bezier(.3, .7, .3, 1) 2; }
.bgx-mas.m-nod .bgx-mas-in { animation: bgx-cheer 1.1s cubic-bezier(.3, .7, .3, 1) 1; }
.bgx-mas.m-shiver .bgx-mas-in { animation: bgx-shiver .13s linear infinite; }
.bgx-mas.m-droop .bgx-mas-in { animation: bgx-droop 1.6s ease-out forwards; }
@keyframes bgx-cheer { 0%, 100% { transform: translate3d(0, 0, 0); } 18% { transform: translate3d(0, -17px, 0) rotate(-9deg) scale(1.07); } 36% { transform: translate3d(0, 0, 0) scale(1.03, .96); }
  54% { transform: translate3d(0, -12px, 0) rotate(8deg) scale(1.05); } 72% { transform: translate3d(0, 0, 0) scale(1.02, .97); } }
@keyframes bgx-shiver { 0%, 100% { transform: translate3d(-2px, 0, 0) scale(1.04, .95); } 50% { transform: translate3d(2px, 1px, 0) scale(1.04, .95); } }
@keyframes bgx-droop { to { transform: translate3d(0, 9px, 0) rotate(11deg) scale(.96); } }
/* emotes drawn next to the mascot: sparkles when it cheers, drops when it is scared */
.bgx-emo { position: absolute; top: -20px; width: 40px; height: 34px; opacity: 0; }
.bgx-mas.l .bgx-emo { right: -14px; } .bgx-mas.r .bgx-emo { left: -14px; }
.bgx-emo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bgx-mas.m-cheer .bgx-emo, .bgx-mas.m-nod .bgx-emo, .bgx-mas.m-shiver .bgx-emo { opacity: 1; }
.bgx-emo .e-star, .bgx-emo .e-drop { display: none; transform-box: fill-box; transform-origin: center; }
.bgx-mas.m-cheer .e-star, .bgx-mas.m-nod .e-star { display: block; animation: bgx-twinkle 1s ease-in-out infinite; }
.bgx-mas.m-shiver .e-drop { display: block; animation: bgx-drip .7s ease-in infinite; }
.bgx-emo .d2 { animation-delay: .22s !important; } .bgx-emo .d3 { animation-delay: .44s !important; }
@keyframes bgx-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(40deg); } }
@keyframes bgx-drip { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 14px) scale(1); } }

.bgx-probe { position: fixed; top: 0; left: 0; width: 0; height: var(--sat, 0px); visibility: hidden; pointer-events: none; }

/* hidden app, weak device or the user's motion setting: everything rests */
.bgx.paused *, .bgx-cast.paused * { animation-play-state: paused !important; }
.bgx.lite .bgx-pat { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .bgx *, .bgx-cast * { animation: none !important; }
  .bgx-scene.in { transition-duration: .01s; }
  .bgx-cast { display: none; }
}