/* GiftFX — gift showcase layer for BPL Gift Perps.
   Only transform/opacity are animated. All colours come from CSS vars set by giftfx.js.
   The colour vars are registered with @property, so on a model change backdrop, aura and plate
   glide to the new colours instead of jumping (browsers without @property just swap them mid-flip).
   They do NOT inherit: giftfx.js sets them on each layer that paints with them, so the colour glide never
   restyles the Lottie SVG subtree on every frame. */
@property --gfx-b0{syntax:'<color>'; inherits:false; initial-value:#202226}
@property --gfx-b1{syntax:'<color>'; inherits:false; initial-value:#101114}
@property --gfx-bg{syntax:'<color>'; inherits:false; initial-value:#0c0d10}
@property --gfx-glow{syntax:'<color>'; inherits:false; initial-value:#888}
@property --gfx-accent{syntax:'<color>'; inherits:false; initial-value:#888}
.gfx-hero,.gfx-thumb,.gfx-back,.gfx-aura,.gfx-rim,.gfx-vig{transition:--gfx-b0 .9s ease, --gfx-b1 .9s ease, --gfx-bg .9s ease, --gfx-glow .9s ease, --gfx-accent .9s ease}

.gfx-hero{
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; height:100%; min-height:240px;
  background:var(--gfx-bg,#0c0d10);
  contain:layout paint style;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  touch-action:pan-y;
}
.gfx-hero *{box-sizing:border-box}
.gfx-l{position:absolute; pointer-events:none}

/* real Telegram backdrop (radial), bleeding into the screen background */
.gfx-back{
  left:-12%; top:-12%; width:124%; height:124%;
  background:
    radial-gradient(circle var(--gfx-R,240px) at 50% calc(var(--gfx-cy,46%) * .82 + 9%), var(--gfx-b0) 0%, var(--gfx-b1) 52%, color-mix(in srgb, var(--gfx-b1) 42%, var(--gfx-bg)) 78%, var(--gfx-bg) 100%);
  will-change:transform;
}
@supports not (background:color-mix(in srgb, red, blue)){
  .gfx-back{background:radial-gradient(circle var(--gfx-R,240px) at 50% calc(var(--gfx-cy,46%) * .82 + 9%), var(--gfx-b0) 0%, var(--gfx-b1) 52%, var(--gfx-bg) 100%)}
}

/* symbol rings (the gift's own pattern symbol) */
.gfx-ringwrap{left:0; top:0; will-change:transform}
.gfx-ringin{position:absolute; left:0; top:0}
.gfx-ring{position:absolute; left:0; top:0; display:block; will-change:transform;
  animation:gfx-spin 150s linear infinite}
.gfx-ring.gfx-r2{animation-duration:230s; animation-direction:reverse}
@keyframes gfx-spin{to{transform:rotate(360deg)}}

/* top light: soft beam + halo */
.gfx-beam{
  left:50%; top:-8%; width:120%; height:96%; margin-left:-60%;
  background:radial-gradient(42% 70% at 50% 0%, rgba(255,255,255,.26), rgba(255,255,255,.07) 46%, rgba(255,255,255,0) 72%);
  -webkit-mask:linear-gradient(90deg, transparent 12%, #000 34%, #000 66%, transparent 88%);
          mask:linear-gradient(90deg, transparent 12%, #000 34%, #000 66%, transparent 88%);
  mix-blend-mode:soft-light; opacity:.9;
  animation:gfx-breathe 7.5s ease-in-out infinite;
}
@keyframes gfx-breathe{0%,100%{opacity:.62}50%{opacity:1}}

/* aura behind the gift, in its own glow colour */
.gfx-aura{
  border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--gfx-glow) 70%, transparent) 0%, color-mix(in srgb, var(--gfx-glow) 22%, transparent) 48%, transparent 100%);
  will-change:transform,opacity;
  animation:gfx-aura 5.6s ease-in-out infinite;
}
@supports not (background:color-mix(in srgb, red, blue)){
  .gfx-aura{background:radial-gradient(closest-side, var(--gfx-glow) 0%, transparent 100%); opacity:.5}
}
@keyframes gfx-aura{0%,100%{opacity:.72; transform:scale(.94)}50%{opacity:1; transform:scale(1.04)}}

/* floor: contact shadow + coloured rim light */
.gfx-floor{border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.22) 55%, transparent 100%);
  will-change:transform,opacity}
.gfx-rim{border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--gfx-glow) 55%, transparent), transparent 100%);
  opacity:.55}

/* the gift itself */
.gfx-giftwrap{will-change:transform; transform-style:preserve-3d}
.gfx-giftin{position:absolute; inset:0}
.gfx-poster,.gfx-lottie{position:absolute; inset:0; width:100%; height:100%}
.gfx-poster{object-fit:contain; transition:opacity .35s ease}
.gfx-lottie{opacity:0; transition:opacity .35s ease}
.gfx-lottie{contain:strict;
  /* cut the inheritance of the host's animated colour vars (app/bg): a colour glide on the card must not
     restyle the thousands of Lottie SVG nodes on every frame. Nothing inside the Lottie uses them. */
  --g:initial; --g2:initial; --bgx-tint:initial; --bgx-glow:initial}
.gfx-lottie svg{display:block}
.gfx-hero.gfx-live .gfx-lottie{opacity:1}
.gfx-hero.gfx-live .gfx-poster{opacity:0}
.gfx-hero.gfx-swap .gfx-poster,.gfx-hero.gfx-swap .gfx-lottie{transition:none}
/* ghost = the previous model, frozen on its last frame, crossfading out on top of the new one */
.gfx-ghost{pointer-events:none}
.gfx-ghost .gfx-poster,.gfx-ghost .gfx-lottie{transition:none !important}
.gfx-ghost .gfx-poster{opacity:1 !important}
.gfx-ghost .gfx-lottie{opacity:0 !important}
.gfx-ghost.gfx-ghost-live .gfx-poster{opacity:0 !important}
.gfx-ghost.gfx-ghost-live .gfx-lottie{opacity:1 !important}

/* sweep of light used once on entrance */
.gfx-sweep{left:-40%; top:-10%; width:60%; height:120%; opacity:0;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.0) 30%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  mix-blend-mode:overlay}

.gfx-fx{left:0; top:0; width:100%; height:100%}

/* edge vignette so the hero melts into the screen */
.gfx-vig{inset:0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gfx-bg) 55%, transparent) 0%, transparent 16%, transparent 72%, var(--gfx-bg) 100%),
    radial-gradient(120% 90% at 50% var(--gfx-cy,46%), transparent 55%, color-mix(in srgb, var(--gfx-bg) 70%, transparent) 100%)}
.gfx-hero.gfx-nobleed .gfx-vig{display:none}

/* market-card thumbnail */
.gfx-thumb{position:relative; display:inline-block; width:100%; height:100%; aspect-ratio:1/1;
  border-radius:inherit; overflow:hidden; contain:paint}
.gfx-thumb.gfx-plate{
  background:
    radial-gradient(85% 85% at 50% 42%, var(--gfx-b0) 0%, var(--gfx-b1) 62%, color-mix(in srgb, var(--gfx-b1) 62%, #000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -10px 24px rgba(0,0,0,.18)}
.gfx-thumb img{position:absolute; left:8%; top:8%; width:84%; height:84%; object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.28)); backface-visibility:hidden}
/* light sweep across the card while a thumb flips to its next model */
.gfx-tglint{position:absolute; left:-60%; top:-10%; width:50%; height:120%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 75%, transparent 100%);
  transform:skewX(-14deg); mix-blend-mode:overlay}
.gfx-thumb.gfx-tflip .gfx-tglint{animation:gfx-tglint .8s cubic-bezier(.4,0,.2,1)}
@keyframes gfx-tglint{0%{opacity:0; transform:translate3d(0,0,0) skewX(-14deg)}25%{opacity:1}100%{opacity:0; transform:translate3d(330%,0,0) skewX(-14deg)}}

/* screen shake used by burst('loss'|'liq') */
@keyframes gfx-shake{
  0%,100%{transform:translate3d(0,0,0)}
  15%{transform:translate3d(-5px,1px,0)} 30%{transform:translate3d(4px,-1px,0)}
  45%{transform:translate3d(-3px,0,0)} 60%{transform:translate3d(2px,1px,0)} 80%{transform:translate3d(-1px,0,0)}
}

html.gfx-paused .gfx-hero *, html.gfx-paused .gfx-hero{animation-play-state:paused !important}

@media (prefers-reduced-motion: reduce){
  .gfx-ring,.gfx-beam,.gfx-aura,.gfx-tglint{animation:none !important}
  .gfx-hero,.gfx-thumb,.gfx-back,.gfx-aura,.gfx-rim,.gfx-vig{transition-duration:1.4s}
}