/* ===== Awamer Bigo Live — reusable 3D brand logo =====
   Drop <div class="awamer-logo" data-scale="1" data-live="true"></div> and load logo.js.
   Scale with data-scale; hide the LIVE badge with data-live="false". */
.awamer-logo { display:flex; align-items:center; justify-content:center; }
.logo-scene { --s:1; perspective:1100px; width:calc(260px*var(--s)); height:calc(260px*var(--s)); display:flex; align-items:center; justify-content:center; }
.logo3d { position:relative; width:calc(170px*var(--s)); height:calc(170px*var(--s)); transform-style:preserve-3d; animation:logoTilt 6.5s ease-in-out infinite; }
@keyframes logoTilt {
  0%,100% { transform: rotateY(-30deg) rotateX(10deg) translateY(0); }
  50%     { transform: rotateY(30deg)  rotateX(10deg) translateY(-10px); }
}
/* extruded coin layers (built by logo.js) form the 3D thickness */
.coin-layer { position:absolute; inset:0; border-radius:30%; background:linear-gradient(150deg,#0e2230 0%,#170f2a 100%); }
.coin-face {
  position:absolute; inset:0; border-radius:30%;
  background: radial-gradient(120% 120% at 50% 26%, #16262f 0%, #0b1820 58%, #060d12 100%);
  box-shadow: 0 0 30px rgba(43,183,229,.45), 0 0 64px rgba(124,77,255,.32), inset 0 2px 12px rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; backface-visibility:hidden;
  transform: translateZ(calc(6px*var(--s)));
}
.coin-face svg { width:84%; height:84%; filter: drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
/* spinning swirl blades inside the mark (AAIT identity) — rotate around their own centre */
.arc { transform-box: fill-box; transform-origin: center; }
.arc.b { animation: arcspin 6s linear infinite; }
.arc.g { animation: arcspinG 9s linear infinite; }
.arc.p { animation: arcspin 14s linear infinite; }
@keyframes arcspin  { from { transform: rotate(0); }      to { transform: rotate(360deg); } }
@keyframes arcspinG { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
/* orbit ring wrapping the coin in 3D */
.orbit { position:absolute; inset:calc(-16px*var(--s)); border-radius:50%; border:2px solid #7C4DFF; box-shadow:0 0 16px rgba(124,77,255,.7); transform: rotateX(74deg); animation: orbitspin 8s linear infinite; }
@keyframes orbitspin { from{transform:rotateX(74deg) rotateZ(0)} to{transform:rotateX(74deg) rotateZ(360deg)} }
/* live-broadcast pulse waves */
.wave { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(43,183,229,.4); animation: livewave 2.6s ease-out infinite; }
.wave.d2 { animation-delay:.9s; border-color:rgba(141,198,63,.4); }
.wave.d3 { animation-delay:1.8s; border-color:rgba(124,77,255,.4); }
@keyframes livewave { 0%{transform:scale(.65);opacity:.8} 100%{transform:scale(1.75);opacity:0} }
/* LIVE status badge */
.live-badge {
  position:absolute; bottom:calc(-10px*var(--s)); left:50%; transform:translateX(-50%) translateZ(calc(50px*var(--s)));
  display:flex; align-items:center; gap:5px; padding:3px 11px; border-radius:9999px;
  background:rgba(5,5,5,.72); border:1px solid rgba(141,198,63,.55);
  font-size:calc(11px*var(--s)); font-weight:600; color:#eaffd6; letter-spacing:.06em; white-space:nowrap;
}
.live-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#ff3b5c; box-shadow:0 0 8px #ff3b5c; animation: blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }