/* ============================================================
   HUNTA — REUSABLE FLOATING INTERACTIVE OBJECT
   ============================================================ */

.hunta-floating-object {

    --hunta-floating-size: 150px;

    position: fixed;

    left: 50%;
    top: 50%;

    width: var(--hunta-floating-size);
    height: var(--hunta-floating-size);

    z-index: 9980;

    /*
     * JavaScript controls transform.
     * DO NOT add a CSS transform animation here.
     */

    transform-style: preserve-3d;

    pointer-events: auto;

    user-select: none;

    touch-action: none;

    opacity: 0;

    will-change:
        left,
        top,
        transform;

    /*
     * Initial hidden state.
     */

    scale: .72;

    transition:
        opacity .5s ease,
        scale .7s cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


/* ============================================================
   VISIBLE
   ============================================================ */

.hunta-floating-object.is-visible {

    opacity: 1;

    scale: 1;
}


/* ============================================================
   BODY
   ============================================================ */

.hunta-floating-object__body {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    transform-style: preserve-3d;

    cursor: grab;

    overflow: visible;

    transition:
        filter .25s ease;
}


/* ============================================================
   GLASS HIGHLIGHT
   ============================================================ */

.hunta-floating-object__body::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            transparent 38%,
            transparent 70%,
            rgba(255,255,255,.05)
        );

    pointer-events: none;

    z-index: 3;
}


/* ============================================================
   IMAGE
   ============================================================ */

.hunta-floating-object__image {

    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;

    user-select: none;

    transform:
        translateZ(25px);

    filter:
        drop-shadow(
            0 18px 18px
            rgba(0,0,0,.18)
        );

    transition:
        transform .35s cubic-bezier(
            .16,
            1,
            .3,
            1
        ),
        filter .35s ease;
}


/* ============================================================
   GLOW
   ============================================================ */

.hunta-floating-object__glow {

    position: absolute;

    width: 80%;
    height: 80%;

    left: 10%;
    top: 15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(43,111,255,.28),
            rgba(43,111,255,.10) 35%,
            transparent 72%
        );

    filter: blur(25px);

    opacity: .65;

    pointer-events: none;

    transform: translateZ(-20px);

    animation:
        huntaFloatingGlow 3.5s
        ease-in-out infinite;
}


/* ============================================================
   LABEL
   ============================================================ */

.hunta-floating-object__label {

    position: absolute;

    left: 50%;
    bottom: -12px;

    transform:
        translateX(-50%)
        translateZ(35px);

    padding:
        5px 10px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .04em;

    color:
        var(--hunta-title, #fff);

    background:
        rgba(17,24,39,.82);

    border:
        1px solid
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.15);

    white-space: nowrap;

    pointer-events: none;
}


/* ============================================================
   DRAG INDICATOR
   ============================================================ */

.hunta-floating-object__drag {

    position: absolute;

    right: 0;
    top: 0;

    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background:
        rgba(0,0,0,.38);

    border:
        1px solid
        rgba(255,255,255,.18);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity: 0;

    transform:
        translateZ(40px)
        scale(.8);

    transition:
        opacity .2s ease,
        transform .2s ease;

    pointer-events: none;
}

.hunta-floating-object__drag svg {

    width: 13px;
    height: 13px;
}


/* ============================================================
   HOVER
   ============================================================ */

.hunta-floating-object:hover
.hunta-floating-object__image {

    transform:
        translateZ(40px)
        scale(1.06);

    filter:
        drop-shadow(
            0 26px 28px
            rgba(0,0,0,.25)
        );
}


.hunta-floating-object:hover
.hunta-floating-object__drag {

    opacity: 1;

    transform:
        translateZ(40px)
        scale(1);
}


/* ============================================================
   DRAGGING
   ============================================================ */

.hunta-floating-object.is-dragging
.hunta-floating-object__body {

    cursor: grabbing;

    filter:
        brightness(1.04);
}


.hunta-floating-object.is-dragging
.hunta-floating-object__image {

    transform:
        translateZ(48px)
        scale(1.08);

    filter:
        drop-shadow(
            0 30px 32px
            rgba(0,0,0,.28)
        );
}


/* ============================================================
   GLOW ANIMATION
   ============================================================ */

@keyframes huntaFloatingGlow {

    0%,
    100% {

        transform:
            translateZ(-20px)
            scale(.92);

        opacity: .5;
    }

    50% {

        transform:
            translateZ(-20px)
            scale(1.08);

        opacity: .85;
    }
}


/* ============================================================
   LIGHT THEME
   ============================================================ */

html[data-theme="light"]
.hunta-floating-object__label {

    color:
        var(--hunta-text, #111827);

    background:
        rgba(255,255,255,.86);

    border-color:
        rgba(15,23,42,.10);

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.12);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .hunta-floating-object {

        --hunta-floating-size: 105px;

        z-index: 9970;
    }

    .hunta-floating-object__label {

        font-size: 9px;

        bottom: -9px;
    }

    .hunta-floating-object__drag {

        width: 23px;
        height: 23px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hunta-floating-object {

        transition: none;
    }

    .hunta-floating-object__glow {

        animation: none;
    }
}