/* ════════════════════════════════════════════════════════════════
   🐂 HASRI 황소 펫 (Bull Desktop Pet) v3 — HASRI AI 555 메인 화면 전용
   · "HASRI AI 555" 로고 위에서 시작 → 무대 전체를 자율 이동
   · 드래그로 옮기기, 클릭=5초 연속점프+황금동전 폭죽, 더블클릭="음메~~"
   ════════════════════════════════════════════════════════════════ */

/* 무대 — 검색화면(hai-search-wrap) 위에 깔리는 투명 레이어 */
#bull-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;      /* 평소 클릭 통과 — 황소 본체에만 허용 */
    overflow: hidden;          /* 동전/황소가 무대 밖으로 안 나가게 */
    z-index: 30;
}

/* 황소 본체 — JS가 top/left(x,y) 갱신 */
#bull {
    position: absolute;
    top: 0; left: 0;
    width: 64px; height: 64px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    image-rendering: pixelated;
    pointer-events: auto;
    cursor: grab;
    transform-origin: bottom center;
    will-change: transform, top, left;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
    transition: filter .2s;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}
#bull:hover { filter: drop-shadow(0 3px 6px rgba(250,204,21,.55)); }

/* 드래그 중 */
#bull.dragging {
    cursor: grabbing;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(250,204,21,.5));
    z-index: 50;
}

/* 좌우 반전 (왼쪽 이동) */
#bull.flip { transform: scaleX(-1); }

/* 점프 스쿼시 */
#bull.jumping { animation: bull-jump-squash .45s ease-out; }
@keyframes bull-jump-squash {
    0%   { transform: scaleX(var(--bx,1)) scaleY(1); }
    25%  { transform: scaleX(calc(var(--bx,1) * .92)) scaleY(1.12); }
    60%  { transform: scaleX(var(--bx,1)) scaleY(.98); }
    100% { transform: scaleX(var(--bx,1)) scaleY(1); }
}

/* 신난 클릭 모드(5초) — 살짝 빛남 */
#bull.celebrate { filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(250,204,21,.7)); }

/* 발밑 그림자 */
#bull-shadow {
    position: absolute;
    top: 0; left: 0;
    width: 44px; height: 9px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity .15s, width .15s;
    will-change: top, left, opacity, width;
}
#bull-shadow.airborne { opacity: .25; width: 30px; }

/* ── 말풍선 ("음메~~") ── */
.bull-bubble {
    position: absolute;
    transform: translateX(-50%);
    background: rgba(15,23,42,.92);
    color: #fde68a;
    font-size: 13px; font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(250,204,21,.4);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 60;
    animation: bull-bubble-pop 1.7s ease forwards;
}
.bull-bubble::after {
    content: ""; position: absolute; left: 50%; bottom: -5px;
    transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 5px solid rgba(15,23,42,.92);
}
@keyframes bull-bubble-pop {
    0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.8); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    75%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.95); }
}

/* ── 떠오르는 이모지(💤 💛 ✨) ── */
.bull-float {
    position: absolute;
    font-size: 16px;
    pointer-events: none;
    opacity: 0;
    z-index: 55;
    animation: bull-float-up 1.8s ease-out forwards;
}
@keyframes bull-float-up {
    0%   { opacity: 0; transform: translateY(0) scale(.6); }
    20%  { opacity: 1; transform: translateY(-10px) scale(1); }
    100% { opacity: 0; transform: translateY(-46px) scale(1.1); }
}
.bull-zzz { animation-duration: 2.6s; color: #93c5fd; }

/* ── 🪙 황금 동전 비 콤보 (비처럼 쏟아짐 + 3D회전 + 좌우스윙 + 바닥튕김 + 골드글로우) ── */
/* 구조: .bull-coin(세로 낙하 + 좌우 스윙) > .bull-coin-face(3D 회전/번쩍임) */
.bull-coin {
    position: absolute;
    top: 0;                     /* 무대 "안쪽" 상단에서 시작 (overflow:hidden 잘림 방지) — JS가 덮어씀 */
    font-size: 38px;            /* 크게 — JS가 랜덤 지정 */
    line-height: 1;
    pointer-events: none;
    z-index: 58;
    will-change: transform, opacity;
    animation-name: bull-coin-fall;
    animation-timing-function: cubic-bezier(.34, .15, .64, 1);  /* 가속 낙하 + 바닥 근처 감속 */
    animation-fill-mode: forwards;
}
/* 세로 낙하 + 바닥 살짝 튕김 + 페이드 */
@keyframes bull-coin-fall {
    0%   { opacity: 0; transform: translateY(-10px) translateX(0); }
    6%   { opacity: 1; }
    78%  { opacity: 1; transform: translateY(var(--fall, 360px)) translateX(var(--swing, 0px)); }
    86%  { opacity: 1; transform: translateY(calc(var(--fall, 360px) - 22px)) translateX(var(--swing, 0px)); } /* 바닥 튕김 ↑ */
    94%  { opacity: 1; transform: translateY(var(--fall, 360px)) translateX(var(--swing, 0px)); }              /* 다시 착지 */
    100% { opacity: 0; transform: translateY(var(--fall, 360px)) translateX(var(--swing, 0px)); }
}
/* 동전 앞면 — 3D로 빙글빙글 돌며 번쩍이는 골드 글로우 */
.bull-coin-face {
    display: inline-block;
    will-change: transform, filter;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(250,204,21,.85));
    animation-name: bull-coin-spin, bull-coin-shine;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-fill-mode: forwards, forwards;
}
@keyframes bull-coin-spin {            /* Y축 회전(앞↔뒤 번쩍) */
    0%   { transform: rotateY(0deg)   scale(1); }
    50%  { transform: rotateY(180deg) scale(.55); }  /* 옆면 → 얇아짐 */
    100% { transform: rotateY(360deg) scale(1); }
}
@keyframes bull-coin-shine {           /* 번쩍이는 밝기 */
    0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)) drop-shadow(0 0 5px rgba(250,204,21,.7))  brightness(1); }
    50%      { filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(255,236,140,1)) brightness(1.5); }
}

/* ── ✨ 동전 낙하 잔상 반짝임 입자 ── */
.bull-sparkle {
    position: absolute;
    font-size: 13px;
    pointer-events: none;
    z-index: 57;
    opacity: 0;
    will-change: transform, opacity;
    animation: bull-sparkle-pop .8s ease-out forwards;
}
@keyframes bull-sparkle-pop {
    0%   { opacity: 0; transform: scale(.3) rotate(0deg); }
    30%  { opacity: 1; transform: scale(1) rotate(60deg); }
    100% { opacity: 0; transform: scale(.5) rotate(140deg); }
}

/* ── 🌿 풀(먹을 때) ── */
.bull-grass {
    position: absolute;
    font-size: 16px;
    pointer-events: none;
    opacity: 0;
    z-index: 54;
    transform: translateX(-50%);
    animation: bull-grass-fade 2.4s ease forwards;
}
@keyframes bull-grass-fade {
    0%{opacity:0; transform:translateX(-50%) scale(.5);} 15%{opacity:1; transform:translateX(-50%) scale(1);}
    80%{opacity:1;} 100%{opacity:0;}
}

/* ── 💨 발밑 먼지(달리기) ── */
.bull-dust {
    position: absolute;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    z-index: 54;
    animation: bull-dust .7s ease-out forwards;
}
@keyframes bull-dust {
    0%{opacity:.7; transform:translateX(0) scale(.6);} 100%{opacity:0; transform:translateX(-14px) scale(1.2);}
}

/* ── 우측 하단 토글(🐂 켜기/끄기 + 🔊 음소거) ── */
#bull-toggle {
    position: absolute;
    right: 14px; bottom: 12px;
    display: flex; gap: 6px;
    z-index: 40;
    pointer-events: auto;
}
.bull-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(15,23,42,.7);
    border: 1px solid rgba(148,163,184,.3);
    color: #cbd5e1; font-size: 13px;
    cursor: pointer;
    transition: background .15s, transform .1s, border-color .15s;
}
.bull-btn:hover { background: rgba(30,41,59,.9); border-color: rgba(250,204,21,.5); transform: translateY(-1px); }
.bull-btn.off { opacity: .55; }

/* 펫 OFF */
#bull-stage.bull-hidden #bull,
#bull-stage.bull-hidden #bull-shadow { display: none; }

/* 모바일 */
@media (max-width: 640px) {
    #bull { width: 48px; height: 48px; }
    #bull-shadow { width: 32px; }
    #bull-toggle { right: 10px; bottom: 8px; }
    .bull-coin { font-size: 30px; }
}

/* 모션 최소화 — 부가 애니만 완화.
   ★ 동전 비(.bull-coin)·반짝임(.bull-sparkle)·동전회전(.bull-coin-face)은
   사용자가 클릭할 때만 의도적으로 발동하는 핵심 연출이므로 절대 끄지 않는다.
   (이전에 .bull-coin이 여기에 포함돼 reduced-motion 환경에서 동전이 안 떨어지고
    상단에 멈추는 버그가 있었음.) */
@media (prefers-reduced-motion: reduce) {
    #bull.jumping { animation: none; }
    .bull-bubble, .bull-float, .bull-grass, .bull-dust { animation-duration: .01ms !important; }
}