/*
 * synaptix-figur.css — marka figürünün görünüşü ve bütün hareketleri.
 * Çizim ve durum makinesi synaptix-figur.js'te.
 *
 * HAREKET KANALLARI AYRI
 * Aynı öğeye iki kaynak dönüşüm yazarsa biri diğerini ezer. Bu yüzden:
 *   - `translate` / `rotate` ÖZELLİKLERİ: durumlar ve betik (bakış, eğim,
 *     el konumu) — geçişli.
 *   - `transform` (keyframes): sürekli döngüler (nefes, sallama, tıklama).
 * İkisi ayrı CSS özellikleri olduğu için üst üste biner.
 *
 * YERLEŞİM
 * Figür gelen kutusu penceresinin (`.hm-app`) üst kenarından bakar:
 * omuzların alt çizgisi (viewBox y=176 / 200) pencerenin üst kenarına
 * oturur, eller kenarın önüne düşer. Kutu mutlak konumlu; sayfanın akışını
 * değiştirmez. ≤1024 px'te pencerenin üstündeki boşluk statik bir
 * `margin-top` ile ayrılıyor, yani yer açılması yükleme sırasında kayma
 * (CLS) üretmiyor.
 */

.hm-app-stage {
    position: relative;
    min-width: 0;
}

.sfg-dock {
    position: absolute;
    left: 50%;
    /* 24/200 = figürün pencere kenarının altına taşan kısmı (eller) */
    bottom: calc(100% - 160px * 24 / 200);
    width: 160px;
    aspect-ratio: 240 / 200;
    transform: translateX(-50%);
    z-index: 2;
}

@media (max-width: 1024px) {
    .hm-app-stage { margin-top: 76px; }
    .sfg-dock { width: 140px; bottom: calc(100% - 140px * 24 / 200); }
}

@media (max-width: 640px) {
    .hm-app-stage { margin-top: 84px; }
    .sfg-dock { width: 120px; bottom: calc(100% - 120px * 24 / 200); }
}

.sfg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---------------------------------------------------------------- boya */
.sfg-pearl { stroke: #c4cceb; stroke-width: 1.4; }
.sfg-band { fill: #2c4ced; }
.sfg-shine { fill: #ffffff; opacity: .75; }
.sfg-headset { fill: none; stroke: #161b33; stroke-width: 5.5; stroke-linecap: round; }
.sfg-neck { fill: #c4cceb; }
.sfg-cup { fill: #161b33; }
.sfg-cup-dot { fill: #2c4ced; }
.sfg-boom { fill: none; stroke: #161b33; stroke-width: 3.6; stroke-linecap: round; }
.sfg-mic { fill: #2c4ced; stroke: #161b33; stroke-width: 2; }
.sfg-glare { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; opacity: .14; }
.sfg-catch { fill: #ffffff; opacity: .85; }
.sfg-eye-glow { opacity: .75; }
.sfg-eyes-happy path,
.sfg-smile { fill: none; stroke: #a9baff; stroke-width: 4; stroke-linecap: round; }
.sfg-smile { stroke-width: 3.2; }
.sfg-voice rect { fill: #a9baff; }
.sfg-finger { fill: none; stroke: #b6bfe2; stroke-width: 1.6; stroke-linecap: round; }
.sfg-spark { fill: #2c4ced; }
.sfg-spark-pop { fill: #4a66f2; }

/* Koyu temada sedef kenarı biraz sönük; arka plan zaten ayırıyor. */
[data-theme="dark"] .sfg-pearl,
body.dark-mode .sfg-pearl { stroke: #9aa5d6; }

/* ------------------------------------------------------- hareket ayarı */
.sfg-fig,
.sfg-head,
.sfg-gaze,
.sfg-eyes-open,
.sfg-hand,
.sfg-hand-in,
.sfg-voice rect,
.sfg-spark,
.sfg-spark-pop,
.sfg-band {
    transform-box: fill-box;
    transform-origin: center;
}

/* Baş boyundan döner: dönme noktası çenenin altı. */
.sfg-head {
    transform-box: view-box;
    transform-origin: 120px 140px;
    rotate: var(--sfg-tilt, 0deg);
    animation: sfg-bob 4.6s ease-in-out infinite;
}

.sfg-gaze {
    translate: var(--sfg-gx, 0px) var(--sfg-gy, 0px);
}

.sfg-eyes-open { transition: transform .09s ease-out, opacity .2s ease; }
.sfg.is-blink .sfg-eyes-open { transform: scaleY(.1); }

.sfg-eyes-happy,
.sfg-voice { opacity: 0; transition: opacity .2s ease; }
.sfg-smile { transition: opacity .2s ease; }

.sfg-body { animation: sfg-breathe 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }

.sfg-spark { animation: sfg-spark 3.2s ease-in-out infinite; }

.sfg-hand {
    transition: translate .55s cubic-bezier(.34, 1.56, .64, 1);
}
.sfg-hand-in { transform-origin: 50% 100%; }

.sfg-spark-pop {
    opacity: 0;
    transform: scale(0);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
    transition-delay: calc(var(--i) * 70ms);
}

/* ------------------------------------------------------------ durumlar */

/* el sallama: sağ el başın yanına çıkar, bilekten sallanır */
.sfg[data-state="wave"] .sfg-hand-r { translate: 54px -72px; }
.sfg[data-state="wave"] .sfg-hand-r .sfg-hand-in { animation: sfg-wave .46s ease-in-out .3s infinite alternate; }

/* yazıyor: eller kenarda sırayla tıklar */
.sfg[data-state="type"] .sfg-hand-l .sfg-hand-in { animation: sfg-tap .3s ease-in-out infinite alternate; }
.sfg[data-state="type"] .sfg-hand-r .sfg-hand-in { animation: sfg-tap .3s ease-in-out -.15s infinite alternate; }

/* konuşuyor: gülümseme yerine ses çubukları, göğüs bandı nabız */
.sfg[data-state="talk"] .sfg-smile { opacity: 0; }
.sfg[data-state="talk"] .sfg-voice { opacity: 1; }
.sfg[data-state="talk"] .sfg-voice rect { animation: sfg-voice .42s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
.sfg[data-state="talk"] .sfg-band { animation: sfg-band .42s ease-in-out infinite alternate; }

/* sevinç: ^^ gözler, iki el yukarı, kıvılcımlar, küçük zıplama */
.sfg[data-state="happy"] .sfg-eyes-open { opacity: 0; }
.sfg[data-state="happy"] .sfg-eyes-happy { opacity: 1; }
.sfg[data-state="happy"] .sfg-hand-l { translate: -52px -66px; }
.sfg[data-state="happy"] .sfg-hand-r { translate: 52px -66px; }
.sfg[data-state="happy"] .sfg-hand-l .sfg-hand-in { animation: sfg-cheer .5s ease-in-out infinite alternate; }
.sfg[data-state="happy"] .sfg-hand-r .sfg-hand-in { animation: sfg-cheer .5s ease-in-out -.25s infinite alternate; }
.sfg[data-state="happy"] .sfg-spark-pop { opacity: 1; transform: scale(1); }
.sfg[data-state="happy"] .sfg-fig { animation: sfg-hop .55s cubic-bezier(.3, 1.6, .5, 1) 1; }

/* ekran dışında ya da sekme gizliyken döngüler durur */
.sfg.is-paused *,
.sfg.is-paused { animation-play-state: paused !important; }

/* azaltılmış hareket: hiçbir döngü yok, figür sabit ve gülümser */
.sfg.is-still *,
.sfg.is-still { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
    .sfg *, .sfg { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- keyframes */
@keyframes sfg-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes sfg-breathe {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.025); }
}
@keyframes sfg-spark {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(.82) rotate(8deg); opacity: .7; }
}
@keyframes sfg-wave {
    from { transform: rotate(-16deg); }
    to { transform: rotate(18deg); }
}
@keyframes sfg-tap {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}
@keyframes sfg-cheer {
    from { transform: rotate(-8deg) translateY(0); }
    to { transform: rotate(8deg) translateY(-4px); }
}
@keyframes sfg-voice {
    from { transform: scaleY(.45); }
    to { transform: scaleY(1.5); }
}
@keyframes sfg-band {
    from { filter: none; }
    to { filter: drop-shadow(0 0 4px #4a66f2); }
}
@keyframes sfg-hop {
    0% { transform: translateY(0); }
    40% { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}