/* Orbitar brand pieces shared by the login and the persona portals
   (Orbitar theme): TarTar (billing/brand/_tartar.html) and his speech
   bubble. The Gametech logins reuse them for Gimi (billing/brand/_gimi.html),
   restyled at the end of this file. Colors are literal on purpose: TarTar is always white and orange,
   whatever page tokens are around him. Spec: docs/ORBITAR_THEME.md. */

/* ---------- TarTar ---------- */
.ob-tartar { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.ob-tartar--hero { --tt-h: 180px; }
.ob-tartar__float { position: relative; animation: ob-float 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.ob-tartar__body {
    position: relative; height: var(--tt-h); aspect-ratio: 461 / 640;
    transform: translate(var(--tt-x, 0px), var(--tt-y, 0px)) rotate(var(--tt-r, 0deg));
    transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.ob-tartar__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    opacity: 0; transition: opacity .22s ease, transform .22s ease;
    -webkit-user-drag: none; user-select: none;
}
.ob-tartar__img.is-on { opacity: 1; }
.ob-tartar.is-swapping .ob-tartar__img { transform: scale(1.03, .96); transform-origin: 50% 90%; }
.ob-tartar.is-bounce .ob-tartar__body { animation: ob-bounce .55s cubic-bezier(.32, .72, 0, 1); }

/* thruster glow under the flame (the flame tip sits at 46% / 96% of the render) */
.ob-tartar__glow {
    position: absolute; left: 46%; top: 93%; width: 34%; aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 194, 61, .9), rgba(255, 106, 26, .45) 55%, rgba(255, 106, 26, 0));
    filter: blur(4px); animation: ob-thrust 1.4s ease-in-out infinite alternate; pointer-events: none;
}

/* 2D face for small states (empty, loading, error) */
.ob-tartar--sm { gap: 10px; }
.ob-tartar__face { width: 64px; height: 52px; display: block; }
.ob-tartar--sm .ob-bubble { position: static; }

/* ---------- Speech bubble ---------- */
.ob-bubble {
    position: relative; display: inline-block; width: max-content; max-width: min(240px, 60vw);
    padding: 6px 12px; background: #f4f4f2; color: #111110;
    border: 1px solid #111110; box-shadow: 3px 3px 0 #ff6a1a;
    font: 600 12px/1.35 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    text-align: left; white-space: normal;
}
.ob-bubble::after {
    content: ""; position: absolute; left: 12px; bottom: -7px; width: 12px; height: 12px;
    background: #f4f4f2; border-right: 1px solid #111110; border-bottom: 1px solid #111110;
    transform: rotate(45deg);
}
/* on the 3D render: above-right of his head, tail pointing at him */
.ob-tartar--hero .ob-bubble { position: absolute; left: 70%; bottom: 86%; z-index: 1; }
.ob-bubble.is-pop { animation: ob-pop .32s cubic-bezier(.32, .72, 0, 1); }

/* ---------- Motion ---------- */
@keyframes ob-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes ob-thrust {
    from { opacity: .55; transform: translate(-50%, -50%) scale(.85); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes ob-bounce {
    0% { transform: translateY(0); }
    35% { transform: translateY(-16px) rotate(-4deg); }
    70% { transform: translateY(2px) rotate(2deg); }
    100% { transform: translateY(0); }
}
@keyframes ob-pop {
    from { opacity: 0; transform: translateY(4px) scale(.94); }
    to { opacity: 1; transform: none; }
}

/* ---------- Gimi (Gametech logins) ---------- */
.ob-tartar--gimi .ob-tartar__body { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .3)); }
.ob-tartar--gimi .ob-bubble {
    background: #fff; color: #081e75; border: 0; border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    font: 600 12.5px/1.35 'Poppins', system-ui, sans-serif;
}
.ob-tartar--gimi .ob-bubble::after { background: #fff; border: 0; }
/* subscriber login: keep the bubble clear of the logo's tagline */
.auth-tartar--card .ob-tartar--gimi .ob-bubble { bottom: 72%; }

@media (prefers-reduced-motion: reduce) {
    .ob-tartar__float, .ob-tartar__glow, .ob-tartar.is-bounce .ob-tartar__body, .ob-bubble.is-pop { animation: none; }
    .ob-tartar__body { transition: none; }
    .ob-tartar.is-swapping .ob-tartar__img { transform: none; }
}