/* ==========================================================
   Blazer Component v2.0

   1. Layout
   2. Loader
   3. Character Layers
   4. Animation Engine
   5. Speech Bubble
   6. Eye Tracking
   7. Blinking
   8. Mouth
   9. Hands
========================================================== */

/* ==========================================================
   Blazer Component v2.0
   Section 1 — Layout
========================================================== */

.bsms-blazer{

    position:relative;

    width:100%;

    max-width:900px;

    margin:60px auto;

    text-align:center;

}

.bsms-blazer-avatar{

    position:relative;

    display:inline-block;

}

.bsms-blazer-canvas{

    position:relative;

    width:280px;

    height:362px;

    margin:0 auto;

}

.bsms-blazer-idle{

    position:absolute;

top:0;
right:0;
bottom:0;
left:0;

}

.bsms-blazer-idle-image{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

}

/* ==========================================================
   Section 2 — Loader
========================================================== */

/*
|--------------------------------------------------------------------------
| Initial State
|--------------------------------------------------------------------------
|
| The idle image is visible while the component images preload.
|
*/

.bsms-blazer-idle{

    opacity:1;

    transition:opacity .45s ease;

}

.bsms-blazer-character{

    opacity:0;

    transition:opacity .45s ease;

}

/*
|--------------------------------------------------------------------------
| Loader Complete
|--------------------------------------------------------------------------
|
| JavaScript only adds:
|
| .bsms-loader-ready
|
| CSS handles the transition.
|
*/

.bsms-loader-ready .bsms-blazer-idle{

    opacity:0;

    pointer-events:none;

}

.bsms-loader-ready .bsms-blazer-character{

    opacity:1;

}

/* ==========================================================
   Section 3 — Character Layers
========================================================== */

.bsms-blazer-character{

    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

}

.bsms-blazer-character img{

    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

}

.bsms-blazer-flame{

    z-index:10;

}

.bsms-blazer-head{

    z-index:20;

}

.bsms-blazer-left-eye,
.bsms-blazer-right-eye{

    z-index:30;

}

/* ==========================================================
   Section 4 — Animation Engine
========================================================== */

/*
|--------------------------------------------------------------------------
| Canvas Animation
|--------------------------------------------------------------------------
*/

.bsms-blazer-canvas{

    animation:

        bsmsFloat 4s ease-in-out infinite,

        bsmsGlow 3s ease-in-out infinite;

}

/*
|--------------------------------------------------------------------------
| Flame Animation
|--------------------------------------------------------------------------
*/

.bsms-blazer-flame{

    z-index:10;

    animation:

        bsmsFlamePulse 2.5s ease-in-out infinite;

}

/*
|--------------------------------------------------------------------------
| Eye Animation
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Mouth Animation
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Expression Animation
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Animation Keyframes
|--------------------------------------------------------------------------
*/

@keyframes bsmsFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes bsmsGlow{

    0%,100%{

        filter:

            drop-shadow(0 0 8px rgba(255,120,0,.30))

            drop-shadow(0 0 18px rgba(255,80,0,.20));

    }

    50%{

        filter:

            drop-shadow(0 0 18px rgba(255,170,0,.80))

            drop-shadow(0 0 36px rgba(255,90,0,.60));

    }

}

@keyframes bsmsFlamePulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

}

/* ==========================================================
   Section 5 — Communication System
========================================================== */

/*
|--------------------------------------------------------------------------
| Bubble Layout
|--------------------------------------------------------------------------
*/

.bsms-blazer-speech{

    position:relative;

    max-width:650px;

    margin:32px auto 0;

    padding:28px;

    background:#000000;

    border-radius:24px;

    border:1px solid #ececec;

    box-shadow:
        0 10px 30px rgba(0,0,0,.10);

}

/*
|--------------------------------------------------------------------------
| Bubble Typography
|--------------------------------------------------------------------------
*/

.bsms-blazer-speech h2{

    margin:0 0 14px;

    font-size:2rem;

    line-height:1.2;

}

.bsms-blazer-speech p{

    margin:0;

    font-size:1.1rem;

    line-height:1.6;

}

/*
|--------------------------------------------------------------------------
| Communication States
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Waiting
|
| Blazer is idle and ready to help.
|--------------------------------------------------------------------------
*/

.bsms-waiting .bsms-blazer-speech{

    opacity:1;

}

/*
|--------------------------------------------------------------------------
| Speaking
|
| Blazer is actively responding.
|--------------------------------------------------------------------------
*/

.bsms-speaking .bsms-blazer-speech{

    opacity:1;

}

/*
|--------------------------------------------------------------------------
| Thinking
|
| Reserved for AI processing.
|--------------------------------------------------------------------------
*/

.bsms-thinking .bsms-blazer-speech{

    opacity:1;

}

/*
|--------------------------------------------------------------------------
| Listening
|
| Reserved for voice interaction.
|--------------------------------------------------------------------------
*/

.bsms-listening .bsms-blazer-speech{

    opacity:1;

}

@keyframes bsmsSpeechGlow{

    0%{

        box-shadow:

            0 10px 30px rgba(0,0,0,.10);

    }

    50%{

        box-shadow:

            0 0 18px rgba(255,170,0,.55),

            0 0 42px rgba(255,120,0,.35),

            0 10px 30px rgba(0,0,0,.10);

    }

    100%{

        box-shadow:

            0 10px 30px rgba(0,0,0,.10);

    }

}