/*
 * 直播间动效礼物样式（配合 live-gifts.js）。
 * 只对 transform / opacity 做动画；类名统一 lg- 前缀，避免和页面样式冲突。
 * 尺寸以 --lg-u（播放区域短边的 1%，由脚本按容器算好）为单位。
 */
.lg-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 900; }
.lg-layer.lg-fixed { position: fixed; z-index: 9000; }
.lg-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.lg-stage div, .lg-stage i, .lg-stage img { position: absolute; display: block; box-sizing: border-box; margin: 0; padding: 0; border: 0; max-width: none; }
.lg-scene, .lg-track, .lg-dim { left: 0; top: 0; width: 100%; height: 100%; }
.lg-stage .lg-img { left: 0; top: 0; width: 100%; height: 100%; }

/* 背景压暗 + 送礼横幅（所有动效共用） */
.lg-dim { background: radial-gradient(ellipse at 50% 50%, rgba(24, 12, 48, .2), rgba(8, 4, 20, .6)); animation: lg-dim var(--lg-dur) linear both; will-change: opacity; }
.lg-sail .lg-dim { background: linear-gradient(to bottom, rgba(10, 24, 60, .25), rgba(8, 36, 90, .6)); }
.lg-launch .lg-dim { background: radial-gradient(ellipse at 50% 70%, rgba(40, 20, 70, .35), rgba(4, 4, 20, .72)); }
.lg-fly .lg-dim { background: linear-gradient(to bottom, rgba(30, 80, 170, .45), rgba(20, 40, 100, .38)); }
.lg-fireworks .lg-dim { background: radial-gradient(ellipse at 50% 60%, rgba(70, 20, 110, .35), rgba(14, 4, 34, .72)); }

.lg-stage .lg-banner {
  left: 3%; max-width: 92%; display: flex; align-items: center; padding: 3px 14px 3px 3px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 58, 237, .94), rgba(236, 72, 153, .9)); box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  color: #fff; font: 600 var(--lg-fs, 14px)/1.25 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; white-space: nowrap;
  animation: lg-banner var(--lg-dur) cubic-bezier(.2, .8, .2, 1) both; will-change: transform, opacity;
}
.lg-stage .lg-banner-icon { position: static; flex: none; width: 2.3em; height: 2.3em; margin-right: .45em; padding: .15em; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.lg-banner-nick { display: inline-block; max-width: 7em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: #ffe9a8; }
.lg-banner-verb { margin: 0 .35em; font-weight: 400; opacity: .9; }
.lg-banner-gift { font-weight: 700; }

/* 减少动态效果：只做淡入淡出 */
.lg-stage .lg-card { left: 0; top: 50%; width: 100%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; animation: lg-fade var(--lg-dur) linear both; }
.lg-stage .lg-card-icon { position: static; width: calc(var(--lg-u) * 30); height: calc(var(--lg-u) * 30); }
.lg-card-text { margin-top: calc(var(--lg-u) * 2); padding: .35em 1em; border-radius: 999px; background: rgba(20, 10, 40, .7); color: #fff; font: 600 var(--lg-fs, 14px)/1.3 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; white-space: nowrap; }

/* 通用小件：烟团、星光 */
.lg-stage .lg-puff { width: calc(var(--lg-u) * 12); height: calc(var(--lg-u) * 12); margin: calc(var(--lg-u) * -6) 0 0 calc(var(--lg-u) * -6); border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 234, 246, .92), rgba(232, 234, 246, 0)); opacity: 0; animation: lg-puff1 900ms ease-out both; will-change: transform, opacity; }
.lg-stage .lg-p1 { animation-name: lg-puff1; }
.lg-stage .lg-p2 { animation-name: lg-puff2; }
.lg-stage .lg-p3 { animation-name: lg-puff3; }
.lg-stage .lg-p4 { animation-name: lg-puff4; }
.lg-stage .lg-p5 { animation-name: lg-puff5; }
.lg-stage .lg-spark { width: calc(var(--lg-u) * 7); height: calc(var(--lg-u) * 7); margin: calc(var(--lg-u) * -3.5) 0 0 calc(var(--lg-u) * -3.5); opacity: 0; animation: lg-twinkle 900ms ease-in-out 3 both; will-change: transform, opacity; }

/* 跑车 dash */
.lg-dash-streaks { left: 0; top: 0; width: 100%; height: 100%; animation: lg-dash-streaks var(--lg-dur) linear both; will-change: opacity; }
.lg-stage .lg-streak { left: 20%; width: 45%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85) 55%, rgba(255, 255, 255, 0)); animation: lg-streak 560ms linear infinite; will-change: transform; }
.lg-dash-track { animation: lg-dash-track var(--lg-dur) both; will-change: transform; }
.lg-stage .lg-dash-car { left: 50%; top: 56%; width: calc(var(--lg-u) * 56); height: calc(var(--lg-u) * 56); margin: calc(var(--lg-u) * -28) 0 0 calc(var(--lg-u) * -28); transform-origin: 50% 72%; animation: lg-dash-car var(--lg-dur) both; will-change: transform; }
.lg-stage .lg-dash-glow { left: 4%; top: 74%; width: 92%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 70, 90, .6), rgba(255, 70, 90, 0)); }
.lg-vibe { animation: lg-vibe 90ms linear infinite alternate; }
.lg-stage .lg-dash-puff { left: calc(50% - var(--lg-u) * 22); top: calc(56% + var(--lg-u) * 14); }

/* 游艇 sail */
.lg-stage .lg-sea { left: 0; bottom: 0; top: auto; width: 100%; animation: lg-rise var(--lg-dur) both; will-change: transform; }
/* 整屏播放时海面在屏幕中部，波浪以下逐渐变透明，不把下半屏整块盖住 */
.lg-stage .lg-sea-back { background: linear-gradient(to bottom, rgba(26, 79, 174, 0) calc(var(--lg-u) * 29.5), rgba(26, 79, 174, .92) calc(var(--lg-u) * 29.5), rgba(26, 79, 174, 0) calc(var(--lg-u) * 58)); }
.lg-stage .lg-sea-front { background: linear-gradient(to bottom, rgba(13, 47, 122, 0) calc(var(--lg-u) * 12.5), rgba(13, 47, 122, .92) calc(var(--lg-u) * 12.5), rgba(13, 47, 122, 0) calc(var(--lg-u) * 36)); }
.lg-stage .lg-wave { left: 0; top: 0; width: 200%; height: calc(var(--lg-u) * 30); animation: lg-wave 2600ms linear infinite; will-change: transform; }
.lg-stage .lg-wave-front { height: calc(var(--lg-u) * 13); animation-duration: 1700ms; }
.lg-sail-track { animation: lg-sail-track var(--lg-dur) both; will-change: transform; }
.lg-stage .lg-sail-boat { left: 50%; bottom: calc(var(--lg-u) * -4); top: auto; width: calc(var(--lg-u) * 58); height: calc(var(--lg-u) * 58); margin-left: calc(var(--lg-u) * -29); }
.lg-stage .lg-sail-bob { left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 78%; animation: lg-bob 1200ms ease-in-out infinite alternate; will-change: transform; }
.lg-stage .lg-sail-wake { right: 88%; top: 66%; width: calc(var(--lg-u) * 30); height: calc(var(--lg-u) * 6); border-radius: 50%; background: radial-gradient(ellipse at 100% 50%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%); transform-origin: 100% 50%; animation: lg-wake 600ms ease-in-out infinite alternate; will-change: transform, opacity; }

/* 火箭 launch */
.lg-vstreaks { left: 0; top: 0; width: 100%; height: 100%; animation: lg-vstreaks var(--lg-dur) linear both; will-change: opacity; }
.lg-stage .lg-vstreak { top: 0; width: 2px; height: 28%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); animation: lg-vstreak 520ms linear infinite; will-change: transform; }
.lg-stage .lg-launch-pad { left: 50%; width: 0; height: 0; }
.lg-launch-track { animation: lg-launch-track var(--lg-dur) both; will-change: transform, opacity; }
.lg-stage .lg-launch-rocket { left: 50%; width: calc(var(--lg-u) * 46); height: calc(var(--lg-u) * 46); margin: calc(var(--lg-u) * -23) 0 0 calc(var(--lg-u) * -23); }
.lg-stage .lg-launch-shake { left: 0; top: 0; width: 100%; height: 100%; animation: lg-shake 70ms linear 360ms 14 alternate both; will-change: transform; }
.lg-stage .lg-launch-flame { left: 40%; top: 76%; width: 20%; height: 46%; transform-origin: 50% 0; animation: lg-flame var(--lg-dur) both; will-change: transform, opacity; }
.lg-stage .lg-flicker { left: 0; top: 0; width: 100%; height: 100%; border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%; background: linear-gradient(to bottom, #fffbe0 0%, #ffd34d 22%, #ff7a1a 58%, rgba(255, 60, 30, 0) 100%); transform-origin: 50% 0; animation: lg-flicker 80ms linear infinite alternate; will-change: transform; }

/* 私人飞机 fly */
.lg-stage .lg-cloud { height: auto; opacity: 0; animation: lg-cloud var(--lg-dur) linear both; will-change: transform, opacity; }
.lg-fly-track { animation: lg-fly-track var(--lg-dur) both; will-change: transform; }
.lg-stage .lg-fly-plane { left: 50%; top: 50%; width: calc(var(--lg-u) * 46); height: calc(var(--lg-u) * 46); margin: calc(var(--lg-u) * -23) 0 0 calc(var(--lg-u) * -23); }
.lg-stage .lg-fly-dir, .lg-stage .lg-fly-bank { left: 0; top: 0; width: 100%; height: 100%; }
.lg-stage .lg-fly-bank { animation: lg-bank 1100ms ease-in-out infinite alternate; will-change: transform; }
.lg-stage .lg-fly-trail { right: calc(50% + var(--lg-u) * 10); width: calc(var(--lg-u) * 90); height: calc(var(--lg-u) * 1.3); border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9)); transform-origin: 100% 50%; animation: lg-trail var(--lg-dur) both; will-change: transform, opacity; }
.lg-stage .lg-fly-trail-a { top: calc(50% - var(--lg-u) * 5.4); }
.lg-stage .lg-fly-trail-b { top: calc(50% + var(--lg-u) * 4.1); }

/* 梦幻城堡 fireworks */
.lg-stage .lg-castle-rays { left: 50%; top: 58%; width: calc(var(--lg-u) * 120); height: calc(var(--lg-u) * 120); margin: calc(var(--lg-u) * -60) 0 0 calc(var(--lg-u) * -60); animation: lg-rays var(--lg-dur) linear both; will-change: transform, opacity; }
.lg-stage .lg-castle-halo { left: 50%; top: 58%; width: calc(var(--lg-u) * 76); height: calc(var(--lg-u) * 76); margin: calc(var(--lg-u) * -38) 0 0 calc(var(--lg-u) * -38); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 235, .7), rgba(180, 120, 255, .25) 60%, rgba(180, 120, 255, 0)); animation: lg-halo var(--lg-dur) ease-out both; will-change: transform, opacity; }
.lg-stage .lg-burst { opacity: 0; animation: lg-burst 1100ms cubic-bezier(.15, .75, .3, 1) both; will-change: transform, opacity; }
.lg-stage .lg-castle { left: 50%; top: 58%; width: calc(var(--lg-u) * 54); height: calc(var(--lg-u) * 54); margin: calc(var(--lg-u) * -27) 0 0 calc(var(--lg-u) * -27); animation: lg-castle var(--lg-dur) both; will-change: transform, opacity; }
.lg-float { animation: lg-float 1400ms ease-in-out infinite alternate; }

@keyframes lg-dim { 0% { opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lg-fade { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lg-banner {
  0% { opacity: 0; transform: translateX(-110%); }
  9% { opacity: 1; transform: translateX(0); }
  88% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes lg-puff1 { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-190%, -25%) scale(1.8); } }
@keyframes lg-puff2 { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-130%, -95%) scale(1.5); } }
@keyframes lg-puff3 { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(190%, -25%) scale(1.8); } }
@keyframes lg-puff4 { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(130%, -95%) scale(1.5); } }
@keyframes lg-puff5 { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(0, -150%) scale(1.4); } }
@keyframes lg-twinkle { 0%, 100% { opacity: 0; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

@keyframes lg-dash-streaks { 0%, 18% { opacity: 0; } 28% { opacity: .9; } 60% { opacity: .45; } 72% { opacity: 1; } 90% { opacity: .7; } 100% { opacity: 0; } }
@keyframes lg-streak { from { transform: translateX(180%); } to { transform: translateX(-150%); } }
@keyframes lg-dash-track {
  0% { transform: translateX(-100%); animation-timing-function: cubic-bezier(.12, .75, .3, 1); }
  24% { transform: translateX(4%); animation-timing-function: ease-in-out; }
  31% { transform: translateX(0); }
  64% { transform: translateX(0); animation-timing-function: ease-out; }
  69% { transform: translateX(-5%); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  93%, 100% { transform: translateX(112%); }
}
@keyframes lg-dash-car {
  0%, 18% { transform: rotate(0) scaleX(1); }
  25% { transform: rotate(3.5deg) scaleX(1); }
  33% { transform: rotate(-1deg) scaleX(1); }
  40%, 64% { transform: rotate(0) scaleX(1); }
  71% { transform: rotate(-5deg) scaleX(1); }
  86%, 100% { transform: rotate(-2deg) scaleX(1.06); }
}
@keyframes lg-vibe { from { transform: translateY(0); } to { transform: translateY(-1.2%); } }

@keyframes lg-rise {
  0% { transform: translateY(100%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  15% { transform: translateY(0); }
  85% { transform: translateY(0); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  100% { transform: translateY(100%); }
}
@keyframes lg-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lg-sail-track {
  0% { transform: translateX(-100%); animation-timing-function: cubic-bezier(.2, .7, .4, .9); }
  32% { transform: translateX(-7%); animation-timing-function: linear; }
  68% { transform: translateX(7%); animation-timing-function: cubic-bezier(.5, .1, .8, .3); }
  100% { transform: translateX(100%); }
}
@keyframes lg-bob { from { transform: rotate(-2.5deg) translateY(0); } to { transform: rotate(2deg) translateY(-3%); } }
@keyframes lg-wake { from { transform: scaleX(.8); opacity: .55; } to { transform: scaleX(1.1); opacity: .95; } }

@keyframes lg-vstreaks { 0%, 40% { opacity: 0; } 52% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lg-vstreak { from { transform: translateY(-100%); } to { transform: translateY(380%); } }
@keyframes lg-launch-track {
  0% { opacity: 0; transform: translateY(16%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  12% { opacity: 1; transform: translateY(0); }
  38% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  88%, 100% { opacity: 1; transform: translateY(-115%); }
}
@keyframes lg-shake { from { transform: translateX(-1.6%); } to { transform: translateX(1.6%); } }
@keyframes lg-flame {
  0% { opacity: 0; transform: scaleY(.2); }
  12% { opacity: 1; transform: scaleY(.7); }
  36% { transform: scaleY(.9); }
  52% { transform: scaleY(2.1); }
  100% { opacity: 1; transform: scaleY(2.4); }
}
@keyframes lg-flicker { from { transform: scale(.88, .92); } to { transform: scale(1.06, 1.08); } }

@keyframes lg-cloud { 0% { opacity: 0; transform: translateX(30%); } 16% { opacity: .85; } 84% { opacity: .85; } 100% { opacity: 0; transform: translateX(-70%); } }
@keyframes lg-fly-track {
  0% { transform: translate(-100%, 40%); animation-timing-function: cubic-bezier(.25, .6, .4, .8); }
  36% { transform: translate(-11%, 4.4%); animation-timing-function: linear; }
  64% { transform: translate(11%, -4.4%); animation-timing-function: cubic-bezier(.45, .15, .75, .4); }
  100% { transform: translate(100%, -40%); }
}
@keyframes lg-bank { from { transform: rotate(-4deg) scale(1); } to { transform: rotate(3deg) scale(1.04); } }
@keyframes lg-trail { 0% { opacity: 0; transform: scaleX(0); } 10% { opacity: 1; } 55% { transform: scaleX(1); } 86% { opacity: .9; } 100% { opacity: 0; transform: scaleX(1); } }

@keyframes lg-rays {
  0% { opacity: 0; transform: rotate(0) scale(.6); }
  20% { opacity: 1; transform: rotate(8deg) scale(1); }
  86% { opacity: 1; transform: rotate(44deg) scale(1); }
  100% { opacity: 0; transform: rotate(50deg) scale(1.05); }
}
@keyframes lg-halo { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1); } 86% { opacity: 1; transform: scale(1.06); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes lg-castle {
  0% { opacity: 0; transform: translateY(28%) scale(.85); }
  16% { opacity: 1; transform: translateY(-3%) scale(1.02); }
  23% { opacity: 1; transform: translateY(0) scale(1); }
  86% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(5%) scale(.96); }
}
@keyframes lg-float { from { transform: translateY(0); } to { transform: translateY(-2.5%); } }
@keyframes lg-burst { 0% { opacity: 0; transform: translateY(0) scale(.12); } 10% { opacity: 1; } 55% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(6%) scale(1.12); } }