/* ═══════════════════════════════════════════
   Astroloop — Harita çizim animasyonu
   Yükleme ekranında kullanıcının kendi haritası çiziliyor.
   ═══════════════════════════════════════════ */

.chart-draw-wrap {
    width: min(72vw, 300px);
    aspect-ratio: 1;
    margin: 0 auto 24px;
}

.chart-draw {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ── Halkalar ── */
.chart-draw__ring {
    /* Çember, çevresi boyunca "çiziliyormuş" gibi beliriyor:
       stroke-dasharray tam çevre uzunluğu, offset sıfıra iniyor.
       r=46 için çevre 2πr ≈ 289; r=40 için ≈ 251. Tek bir değer
       ikisini de kapsasın diye üst sınır kullanılıyor. */
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw-ring 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes draw-ring {
    to { stroke-dashoffset: 0; }
}

/* ── Burç bölmeleri ── */
.chart-draw__spoke {
    opacity: 0;
    animation: fade-in 320ms ease forwards;
}

.chart-draw__sign {
    opacity: 0;
    animation: sign-in 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    /* Sembol kendi merkezinden büyüsün */
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes sign-in {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Ev başlangıçları ── */
.chart-draw__cusp {
    opacity: 0;
    animation: fade-in 380ms ease forwards;
}

/* ── Gezegenler ── */
.chart-draw__planet {
    opacity: 0;
    animation: planet-in 520ms cubic-bezier(0.34, 1.4, 0.5, 1) forwards;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes planet-in {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Açı çizgileri ── */
.chart-draw__aspect {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: draw-aspect 620ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes draw-aspect {
    to { stroke-dashoffset: 0; }
}

/* ── Merkez ── */
.chart-draw__core {
    opacity: 0;
    animation: core-in 700ms ease forwards;
}

@keyframes core-in {
    0%   { opacity: 0; }
    60%  { opacity: 1; }
    100% { opacity: 0.85; }
}

@keyframes fade-in {
    to { opacity: 1; }
}

/* ── Durum metni ── */
.chart-draw-status {
    text-align: center;
    min-height: 3.2em;
}

.chart-draw-status__title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    margin-bottom: 8px;
}

.chart-draw-status__step {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    color: var(--text-muted);
    transition: opacity 220ms ease;
}

/* Gerçek doğum verisi — eskiden buraya rastgele sayılar basılıyordu */
.chart-draw-status__meta {
    margin-top: 10px;
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    opacity: 0.85;
}

/* ── Hareket azaltma ──
   Animasyon yokluğunda içerik GÖRÜNÜR kalmalı: tüm başlangıç
   durumları opacity:0 olduğu için burada açıkça 1'e çekiliyor. */
@media (prefers-reduced-motion: reduce) {
    .chart-draw__ring,
    .chart-draw__aspect {
        stroke-dashoffset: 0;
        animation: none;
    }

    .chart-draw__spoke,
    .chart-draw__sign,
    .chart-draw__cusp,
    .chart-draw__planet,
    .chart-draw__core {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

@media (max-width: 480px) {
    .chart-draw-wrap { width: min(78vw, 260px); margin-bottom: 18px; }
}