/* BPL Gift Perps intro: the farmer pangolin pops out of an open Telegram-blue gift box, real gift art orbits him,
   a gold ribbon fills with real loading, START. Bright and fresh, cartoon ink outlines like the mascot.
   Only transform/opacity animate (one rAF loop in intro.js + a few compositor-only CSS keyframes).
   Everything scoped under #bplIntro. Stage units: --m = mascot width. */
#bplIntro {
  --m: min(68vw, 266px, 32vh);
  --top: max(calc(env(safe-area-inset-top) + 16px), calc((100vh - var(--m) * 1.5 - 210px) / 2));
  --ink: #24120a; --gold: #ffd84a; --amber: #f9b21a; --orange: #f08a12;
  --sky: #d9f2ff; --cream: #fff8e6; --honey: #ffd77a; --blue: #36b2ef; --blue2: #1a86d4; --blue3: #0f5f9c;
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background: var(--cream);
  color: var(--ink); font-family: "Manrope", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
#bplIntro * { box-sizing: border-box; }

/* sky -> cream -> honey, plus a warm sun behind the mascot (static paint) */
.bi-bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 34% at 50% 34%, rgba(255,255,255,.95), rgba(255,247,222,.6) 45%, rgba(255,247,222,0) 72%),
    radial-gradient(90% 40% at 50% 104%, rgba(255,184,77,.75), rgba(255,184,77,0) 70%),
    linear-gradient(180deg, var(--sky) 0%, #eef8ff 18%, var(--cream) 42%, #ffeab0 74%, var(--honey) 100%);
}
/* soft light fan behind the mascot (inside the stage): static paint, only fades in (a rotating layer this big costs low-end GPUs) */
.bi-rays { z-index: 0; left: calc(var(--m) * -1.7); top: calc(var(--m) * -1.6); width: calc(var(--m) * 4.4); height: calc(var(--m) * 4.4);
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.75) 0deg 7deg, rgba(255,255,255,0) 7deg 22.5deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.45) 45%, transparent 70%);
          mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.45) 45%, transparent 70%);
  opacity: 0; animation: bi-fade .9s .2s ease-out forwards; }

/* ambient sparkles (CSS, compositor only) */
.bi-spark { position: absolute; width: 10px; height: 10px; pointer-events: none; opacity: 0;
  background: var(--c, #fff); border-radius: 2px; transform: rotate(45deg) scale(.4);
  animation: bi-twinkle var(--d, 3.2s) var(--dl, 0s) ease-in-out infinite; }

/* stage: mascot width --m, box below him; everything positioned in --m units */
.bi-stage { position: absolute; left: calc(50% - var(--m) / 2); top: var(--top);
  width: var(--m); height: calc(var(--m) * 1.5); }
.bi-stage > * { position: absolute; }
.bi-glow { z-index: 0; left: calc(var(--m) * -.6); top: calc(var(--m) * -.5); width: calc(var(--m) * 2.2); height: calc(var(--m) * 2.2); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,240,190,.55) 45%, rgba(255,226,140,0) 100%);
  opacity: 0; animation: bi-fade .8s .1s ease-out forwards; }

/* the box drops in with a little squash; mascot rises out of it (JS) */
.bi-box { left: 0; top: 0; width: 100%; height: 100%; z-index: 4; transform-origin: 50% 95%;
  transform: translateY(-70vh); animation: bi-drop .62s .05s cubic-bezier(.3,.0,.5,1) forwards, bi-squash .5s .67s cubic-bezier(.2,1.6,.4,1); }
.bi-box > * { position: absolute; }
.bi-back { left: -4%; top: calc(var(--m) * 1.073); width: 108%; height: calc(var(--m) * .16); z-index: 1; }
.bi-pit { left: calc(var(--m) * -.7); width: calc(var(--m) * 2.4); top: calc(var(--m) * -2); height: calc(var(--m) * 3.2); overflow: hidden; z-index: 2; pointer-events: none; }
.bi-hero { position: absolute; left: calc(var(--m) * .7); top: calc(var(--m) * 2); width: var(--m); height: calc(var(--m) * 1.302);
  transform-origin: 50% 100%; transform: translate3d(0, calc(var(--m) * 1.25), 0); will-change: transform; }
.bi-mascot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bi-smoke { position: absolute; left: -8.9%; top: 29.4%; width: 18.5%; height: auto; display: block; transform-origin: 70% 100%; will-change: transform, opacity; }
.bi-front { left: -9%; top: calc(var(--m) * 1.133); width: 118%; height: calc(var(--m) * .4); z-index: 3; }
.bi-back svg, .bi-front svg, .bi-lid svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* lid with the bow: pops off the box, then hovers (JS) */
.bi-lid { left: 76%; top: calc(var(--m) * -.04); width: calc(var(--m) * .44); height: calc(var(--m) * .241); z-index: 6; opacity: 0; will-change: transform, opacity; }

.bi-gift { left: 50%; top: calc(var(--m) * .7); width: 0; height: 0; will-change: transform, opacity; opacity: 0; }
.bi-gift canvas { position: absolute; display: block; transform: translate(-50%, -50%); }
.bi-conf { left: 50%; top: calc(var(--m) * 1.12); width: 10px; height: 15px; margin: -7px 0 0 -5px; border-radius: 2px; opacity: 0; z-index: 3; will-change: transform, opacity; }

.bi-copy { position: absolute; left: 0; right: 0; top: calc(var(--top) + var(--m) * 1.5 + 18px); text-align: center; padding: 0 16px; }
.bi-title { margin: 0; font-family: "Unbounded", "Manrope", system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 9.4vw, 42px); letter-spacing: -.015em; line-height: 1.05;
  color: var(--ink); text-shadow: 0 3px 0 var(--gold);
  opacity: 0; transform: translateY(14px); animation: bi-rise .6s .75s cubic-bezier(.2,.9,.3,1) forwards; }
.bi-sub { margin: 12px auto 0; max-width: 30ch; font-size: 15px; line-height: 1.45; font-weight: 700; color: #6a3d18;
  opacity: 0; transform: translateY(10px); animation: bi-rise .6s .9s cubic-bezier(.2,.9,.3,1) forwards; }

.bi-foot { position: absolute; left: 0; right: 0; bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); height: 62px; padding: 0 16px; }
/* loading = a gold ribbon that unrolls (scaleX) with a bow riding its end (translateX) */
.bi-load { position: absolute; left: 50%; bottom: 8px; width: min(calc(100% - 64px), 280px); transform: translateX(-50%); transition: opacity .3s; }
.bi-status { margin-bottom: 12px; text-align: center; font-size: 13px; font-weight: 800; color: #7a4a1c; font-variant-numeric: tabular-nums; }
.bi-track { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 2px var(--ink); }
.bi-fill { position: absolute; inset: 0; border-radius: 6px; transform-origin: 0 50%; transform: scaleX(0); transition: transform .35s cubic-bezier(.2,.8,.3,1);
  background: linear-gradient(180deg, #fff3b0 0%, var(--gold) 40%, var(--amber) 75%, var(--orange) 100%); }
.bi-knot { position: absolute; left: 0; right: 0; top: 50%; height: 0; transform: translateX(0); transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.bi-knot svg { position: absolute; left: -15px; top: -13px; width: 30px; height: 24px; overflow: visible; }

.bi-start { position: absolute; left: 50%; top: 0; margin-left: calc(min(100% - 32px, 340px) / -2); width: min(calc(100% - 32px), 340px); height: 62px;
  appearance: none; cursor: pointer; border: 3px solid var(--ink); border-radius: 31px;
  font: 800 18px/1 "Unbounded", "Manrope", system-ui, sans-serif; color: var(--ink); letter-spacing: .01em;
  background: linear-gradient(180deg, #fff6c4 0%, var(--gold) 38%, var(--amber) 78%, var(--orange) 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.75) inset, 0 5px 0 var(--ink);
  opacity: 0; transform: translateY(16px) scale(.94); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.2,1.5,.4,1); overflow: hidden; }
.bi-start::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(0) skewX(-20deg); opacity: 0; }
.bi-start:focus-visible { outline: 3px solid var(--blue2); outline-offset: 5px; }
#bplIntro.is-ready .bi-start { opacity: 1; transform: none; pointer-events: auto; }
#bplIntro.is-ready .bi-start:active { transform: translateY(3px); transition-duration: .06s; }
#bplIntro.is-ready .bi-start::after { animation: bi-shine 2.6s .5s ease-in-out infinite; }
#bplIntro.is-ready .bi-load { opacity: 0; }

/* exit: mascot jumps + lid flies + gifts and confetti burst (JS), then the overlay fades */
#bplIntro.is-leaving { pointer-events: none; animation: bi-out .45s .42s ease-in forwards; }
#bplIntro.is-leaving .bi-box { animation: bi-hop .62s cubic-bezier(.3,.7,.4,1); }
#bplIntro.is-leaving .bi-copy, #bplIntro.is-leaving .bi-foot { transition: opacity .25s, transform .3s; opacity: 0; transform: translateY(20px); }

@keyframes bi-fade { to { opacity: 1; } }
@keyframes bi-drop { to { transform: translateY(0); } }
@keyframes bi-squash { 0% { transform: scale(1.08, .9); } 100% { transform: none; } }
@keyframes bi-rise { to { opacity: 1; transform: none; } }
@keyframes bi-twinkle { 0%, 100% { opacity: 0; transform: rotate(45deg) scale(.3); } 50% { opacity: .95; transform: rotate(45deg) scale(1); } }
@keyframes bi-shine { 0%, 55% { transform: translateX(0) skewX(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(560%) skewX(-20deg); opacity: 0; } }
@keyframes bi-out { to { opacity: 0; } }
@keyframes bi-hop { 0% { transform: none; } 14% { transform: scale(1.06, .9); } 45% { transform: translateY(-9%) scale(.97, 1.04); } 74% { transform: scale(1.04, .95); } 100% { transform: none; } }

@media (max-height: 640px) { .bi-sub { font-size: 14px; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .bi-rays { animation: bi-fade .3s forwards; }
  .bi-glow { animation: bi-fade .3s forwards; }
  .bi-box { animation: none; transform: none; }
  .bi-spark { animation: none; opacity: .7; transform: rotate(45deg) scale(.6); }
  .bi-title, .bi-sub { animation: bi-fade .3s forwards; transform: none; }
  .bi-fill, .bi-knot { transition: none; }
  #bplIntro.is-ready .bi-start::after { animation: none; }
  #bplIntro.is-leaving { animation: bi-out .3s forwards; }
  #bplIntro.is-leaving .bi-box { animation: none; }
}