/* İlk ekran hareketi (yalnız ana sayfa). hareket.md §8-§9: içerik HTML'de nihai hâlinde;
   efekt JS ile eklenir, reduced-motion'da durağan dolu kare. Paket yok. */

/* ---------- zemin: yavaş akan gradyan (canvas) + imleç ışığı ---------- */
.hr-zemin { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hr-zemin canvas {
  position: absolute; inset: -8%; width: 116%; height: 116%;
  /* 96x60 tuval zaten yumuşak gradyan; büyütmenin bilineer süzgeci bulanıklık verir. CSS blur(42px) her karede tüm ilk ekranı yeniden boyatıyordu. */
  opacity: 0; transition: opacity 1.6s var(--egri);
}
.hr-zemin.acik canvas { opacity: 1; }
/* Durağan yedek: JS yoksa ya da hareket azaltılmışsa aynı paletle CSS gradyan. */
.hr-zemin::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(48% 60% at 70% 38%, var(--hr-akis-1), transparent 70%),
    radial-gradient(40% 50% at 22% 78%, var(--hr-akis-2), transparent 72%);
}
.hr-zemin.acik::before { opacity: 0; transition: opacity 1.6s var(--egri); }
.hr-isik {
  position: absolute; inset: 0;
  --x: 26%; --y: 34%;
  background:
    radial-gradient(150px circle at var(--x) var(--y), var(--hr-isik-cekirdek), transparent 70%),
    radial-gradient(620px circle at var(--x) var(--y), var(--hr-isik), transparent 64%);
  opacity: .9;
  transition: opacity .5s var(--egri);
}
[data-theme="sb-koyu"] { --hr-akis-1: rgba(236, 234, 226, .10); --hr-akis-2: rgba(160, 159, 152, .10); --hr-isik: rgba(246, 245, 238, .12); --hr-isik-cekirdek: rgba(250, 249, 244, .07); --hr-parlama: rgba(255, 255, 250, .55); --hr-isik-yazi: #f4f3ee; }
[data-theme="lacivert-koyu"] { --hr-akis-1: rgba(70, 110, 245, .16); --hr-akis-2: rgba(40, 70, 190, .14); --hr-isik: rgba(150, 180, 255, .16); --hr-isik-cekirdek: rgba(200, 216, 255, .08); --hr-parlama: rgba(205, 220, 255, .6); --hr-isik-yazi: #e4ecff; }

/* Eski satır kaydırma girişi harf girişine bırakılır. */
.hr .baslik .satir > span, .js.hr .baslik .satir > span { transform: none !important; }
.hr .baslik .satir { overflow: visible; }

/* ---------- başlık: harf harf giriş + bir kez parlama ---------- */
.hr-harf { display: inline-block; white-space: pre; }
.hr-kelime { display: inline-block; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .hr-bol .hr-harf {
    opacity: 0; transform: translateY(.42em); filter: blur(10px);
    animation:
      hr-gir .9s var(--egri) calc(var(--i) * 32ms + 120ms) forwards,
      hr-parla 1.1s ease-out calc(var(--i) * 22ms + 1250ms) 1 both;
  }
  .hr-bol .hr-harf.hr-gir-bitti { opacity: 1; transform: none; filter: none; }
}
@keyframes hr-gir {
  60% { filter: blur(1px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
/* Parlama: harften harfe geçen kısa ışık; döngü yok. */
@keyframes hr-parla {
  0% { text-shadow: 0 0 0 transparent; }
  30% { text-shadow: 0 0 .32em var(--hr-parlama); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* İmleç başlığa yaklaşınca gri ikinci satır yerinde aydınlanır (yalnız ince imleçte). */
@media (hover: hover) and (pointer: fine) {
  .hr-yazi-isik .baslik .ikinci > span {
    background-image: radial-gradient(300px circle at var(--cx, -999px) var(--cy, -999px), var(--hr-isik-yazi) 10%, var(--imza) 75%);
    background-attachment: fixed;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .hr-yazi-isik .baslik .ikinci .hr-harf { color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .hr-zemin canvas { display: none; }
}
.hr-sakin .hr-harf { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }