/* ═══════════════════════════════════════════
   Astroloop — Hareket Katmanı

   İlke: hareket süs değil, ANLAM taşır.
   - Kademeli giriş okuma sırasını yönlendirir
   - Yavaş nefes alan öğeler "canlı sistem" hissi verir
   - Merak: içerik hepsi birden değil, sırayla açılır

   Erişilebilirlik: prefers-reduced-motion açıksa tüm hareket kapanır.
   Bu bir tercih değil, vestibüler rahatsızlığı olan kullanıcılar için
   gerçek bir sağlık meselesi.
   ═══════════════════════════════════════════ */

/* ── Yorum satırlarının kademeli açılışı ──────────────────────
   Her satır bir öncekinden --stagger kadar sonra gelir.
   Sıra numarası JS'ten style="--i:0|1|2..." olarak veriliyor. */
/* KURAL: içerik varsayılan olarak GÖRÜNÜR olmalı.
   Animasyon yalnızca "girişi" güzelleştirir; görünürlüğün ön koşulu olamaz.
   (İlk denemede `opacity: 0` + fill-mode kullanmıştım: öğe display:none
   iken eklendiğinde tarayıcı animasyonu hiç oluşturmuyor ve metin kalıcı
   olarak kayboluyordu.)

   Bu yüzden başlangıç durumu ayrı bir sınıfla veriliyor: sınıfı JS,
   öğe GERÇEKTEN görünür olduktan sonra ekleyip kaldırır. */
.reading__line {
    opacity: 1;
}

.reading__line.is-entering {
    animation: reading-in var(--dur-story) var(--ease-enter) backwards;
    animation-delay: calc(var(--i, 0) * var(--stagger));
}

@keyframes reading-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Bölüm etiketi ("Genel:", "Aşk:") — göz önce buraya düşsün */
.reading__line strong {
    color: var(--gold-text);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    font-size: 0.92em;
    text-transform: uppercase;
    margin-right: 2px;
}

/* ── Modal görünüm geçişi ─────────────────────────────────────
   Aşamalar arası geçiş "ilerliyorum" hissi vermeli:
   yeni içerik aşağıdan hafifçe yükselerek gelir. */
/* NOT: burada `.modal-view.active { animation: view-in ... }` vardı.
   Görünüm display:none iken .active eklendiği için animasyon hiç
   oluşmuyor, fill-mode başlangıç durumunu (opacity 0) kalıcı tutuyor
   ve TÜM modal görünmez kalıyordu.
   Görünüm girişini modal.css'teki mevcut fade-in-up zaten yapıyor. */

/* ── Merak sinyali ────────────────────────────────────────────
   Kilitli bölüm başlığı çok hafif nefes alır: bakış oraya döner
   ama rahatsız etmez. Genlik bilinçli olarak küçük. */
.result-modal__lock-text {
    animation: breathe 4.2s var(--ease-inout) infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 0.82; }
    50%      { opacity: 1; }
}

/* ── Birincil eylem butonu ────────────────────────────────────
   Basıldığında anında geri bildirim (dokunsal his),
   hover'da yükselir. */
.result-modal__cta,
.form-card__submit {
    transition:
        transform var(--dur-fast) var(--ease-spring),
        box-shadow var(--dur-fast) var(--ease-inout),
        filter var(--dur-fast) var(--ease-inout);
}

.result-modal__cta:active,
.form-card__submit:active {
    transform: translateY(1px) scale(0.985);
}

/* ── Odak görünürlüğü ─────────────────────────────────────────
   Klavyeyle gezenler nerede olduklarını görmeli. */
:focus-visible {
    outline: 2px solid var(--gold-text);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ── Yükleniyor durumu ────────────────────────────────────────
   İçerik gelene kadar boşluk yerine ritmik bir bekleme sinyali. */
[aria-busy='true'] {
    animation: pulse-wait 1.4s var(--ease-inout) infinite;
}

@keyframes pulse-wait {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.8; }
}

/* ═══ HAREKET AZALTMA ═══
   Sistem ayarı açıksa: hareket yok, ama içerik yine de GÖRÜNÜR.
   (animation: none demek yeterli değil — forwards ile gelen
   opacity:0 başlangıcı öğeyi görünmez bırakırdı.) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reading__line {
        opacity: 1;
        transform: none;
    }
}