/* =====================================================================
   EFFECTS PACK — scroll reveal, hero particles, pixel page-transition,
   rank-card glow ring, richer confetti + "Copied!" bubble.
   Transform / opacity only (cheap), and fully off for reduced-motion.
   ===================================================================== */

/* ---------- 1. SCROLL REVEAL (fade + rise, staggered) ---------- */
.fx-reveal{opacity:0; translate:0 30px; transition:opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1);}
.fx-reveal.fx-in{opacity:1; translate:0 0;}

/* ---------- 2. HERO FLOATING PIXEL PARTICLES ---------- */
.fx-particles{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.fx-particles i{position:absolute; bottom:-12px; display:block; border-radius:1px; opacity:0;
  box-shadow:0 0 8px 1px var(--fx-glow, rgba(90,168,236,.55));
  animation:fxFloat var(--fx-dur,12s) linear var(--fx-delay,0s) infinite;}
@keyframes fxFloat{
  0%{transform:translate3d(0,0,0) rotate(0deg); opacity:0;}
  8%{opacity:.85;}
  50%{transform:translate3d(var(--fx-sx,20px),calc(var(--fx-rise,520px) * -.5),0) rotate(90deg);}
  92%{opacity:.7;}
  100%{transform:translate3d(calc(var(--fx-sx,20px) * -1),calc(var(--fx-rise,520px) * -1),0) rotate(180deg); opacity:0;}
}

/* ---------- 3. PIXEL-DISSOLVE PAGE TRANSITION ---------- */
.fx-trans{position:fixed; inset:0; z-index:140; display:grid; pointer-events:none;}
.fx-trans i{display:block; background:#0b0b26; box-shadow:inset 0 0 0 1px rgba(139,92,246,.28); opacity:1;
  animation:fxCell .34s ease-out var(--fx-d,0ms) forwards;}
.fx-trans i.b{background:#0e1636; box-shadow:inset 0 0 0 1px rgba(90,168,236,.30);}
@keyframes fxCell{0%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(.55);}}

/* ---------- 4. RANK CARD GLOW RING ---------- */
@property --fx-a{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.rank-card{--fx-c1:#a86ff0; --fx-c2:#5aa8ec;}
.rank-card.tier1{--fx-c1:#5be36b; --fx-c2:#52f0b6;}
.rank-card.tier2{--fx-c1:#5aa8ec; --fx-c2:#9fd0ff;}
.rank-card.tier3{--fx-c1:#a86ff0; --fx-c2:#5aa8ec;}
.rank-card > .fx-ring{position:absolute !important; inset:0; width:auto; height:auto; margin:0; border-radius:inherit; padding:2.5px; pointer-events:none; z-index:2 !important;
  background:conic-gradient(from var(--fx-a), var(--fx-c1) 0deg, var(--fx-c2) 80deg, transparent 150deg, transparent 205deg, var(--fx-c2) 280deg, var(--fx-c1) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:fxSpin 6.5s linear infinite;}
.rank-card > .fx-ring.glow{padding:6px; filter:blur(9px); opacity:.6;}
.rank-card:hover .fx-ring{animation-duration:2.6s;}
.rank-card:hover .fx-ring.glow{opacity:.95;}
@keyframes fxSpin{to{--fx-a:360deg;}}
@supports not (background: conic-gradient(from 1deg, red, blue)){ .fx-ring{display:none;} }

/* ---------- 5. CONFETTI (richer) + "Copied!" BUBBLE ---------- */
.confetti-piece.fx{width:var(--sz,7px); height:var(--sz,7px); border-radius:var(--br,2px); animation:confettiPop var(--dur,.85s) cubic-bezier(.15,.7,.3,1) forwards;}
.fx-bubble{position:fixed; z-index:210; pointer-events:none; transform:translate(-50%,-50%);
  padding:6px 12px; border-radius:20px; font:800 12px/1 Poppins,system-ui,sans-serif; color:#fff; white-space:nowrap;
  background:linear-gradient(120deg,#5aa8ec,#8b5cf6); box-shadow:0 8px 22px rgba(90,168,236,.45);
  animation:fxBubble 1.1s ease-out forwards;}
@keyframes fxBubble{0%{opacity:0; transform:translate(-50%,-10%) scale(.7);} 18%{opacity:1; transform:translate(-50%,-90%) scale(1.05);} 100%{opacity:0; transform:translate(-50%,-260%) scale(1);}}

@media (prefers-reduced-motion: reduce){
  .fx-reveal{opacity:1 !important; translate:none !important; transition:none !important;}
  .fx-particles,.fx-trans,.fx-bubble{display:none !important;}
  .fx-ring{animation:none;} .fx-ring.glow{display:none;}
}