/* ==========================================================================
   Emrun Petrol — SAHNE ANİMASYONU
   assets/sahne-istasyon.svg içindeki GERÇEK koordinatlara bağlanmıştır.
   (Spesifikasyondaki §5.2 koordinat varsayımı değil; üretilen varlık esas alındı.)

   Anlatı:  zemin → temel → iskele → vinç kulesi → bom kalkar → halat iner,
            kanca görünür → kanopi kancada belirir → vinç kanopiyi yerine
            taşır ("clunk") → market, totem, pompalar, hortum, koniler →
            KOLONLAR kanopinin altına yükselip yerine oturur → kanopi
            ışıkları ateşlenir → vinç yükü bırakır, halat gevşer.

   Kolonlar neden kanopiden SONRA?  Kolonlar (x 322–350 / 676–704) kanopinin
   açıklığının (x 233–793) İÇİNDE kalıyor. Kanopi önce dikilseydi, kaldırılan
   kanopi kolonların içinden geçmek zorunda kalır ve hareket fiziksel olarak
   yanlış okunurdu. Bu sıra hem doğru hem de daha tatmin edici: vinç yükü
   tutar, taşıyıcılar altına girer, sonra vinç bırakır.

   Sekans sonu: 5000 ms.  Loop'lar 5100 ms'de devralır.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GİRİŞ SEKANSI — Faz 0: atmosfer
   -------------------------------------------------------------------------- */

#atmosfer      { animation: k-atmosfer-giris 900ms 200ms var(--ease-out-quint) both; }
#calisma-isik  { animation: k-fade 700ms 1200ms var(--ease-out-quint) both; }
#kivilcimlar   { animation: k-fade 600ms 3000ms var(--ease-lineer) both; }
#toz           { animation: k-fade 900ms 3000ms var(--ease-lineer) both; }

@keyframes k-atmosfer-giris {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   2. GİRİŞ SEKANSI — Faz B: inşaat
   -------------------------------------------------------------------------- */

/* 300 ms — saha zemini yükselir */
#zemin { animation: k-zemin-giris 720ms 300ms var(--ease-out-expo) both; }
@keyframes k-zemin-giris {
  from { opacity: 0; transform: translateY(64px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 620 ms — beton platform dökülür */
#temel { animation: k-dikey-buyume 480ms 620ms var(--ease-out-quint) both; }

/* 820 ms — iskele soldan kurulur */
#iskele { animation: k-iskele-giris 560ms 820ms var(--ease-out-quint) both; }
@keyframes k-iskele-giris {
  from { opacity: 0; transform: translateX(-40px) scaleY(.82); }
  to   { opacity: 1; transform: translateX(0) scaleY(1); }
}

/* 900 ms — vinç kulesi dikilir (ağır makine easing'i) */
#vinc-kule { animation: k-dikey-buyume 760ms 900ms var(--ease-mechanical) both; }

/* 3960 / 4080 ms — kanopi kolonları, kanopi yerine oturduktan SONRA yükselir */
#kolon-sol { animation: k-dikey-buyume 520ms 3960ms var(--ease-out-expo) both; }
#kolon-sag { animation: k-dikey-buyume 520ms 4080ms var(--ease-out-expo) both; }

@keyframes k-dikey-buyume {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* 1560 ms — bom sarkık konumdan yatay konuma kaldırılır */
#vinc-bom {
  will-change: transform;
  animation: k-bom-kalkis 620ms 1560ms var(--ease-mechanical) both,
             k-bom-salinim 7200ms 5100ms var(--ease-in-out-quad) infinite alternate;
}
@keyframes k-bom-kalkis {
  from { opacity: 0; transform: rotate(-16deg); }
  to   { opacity: 1; transform: rotate(0deg); }
}

/* --------------------------------------------------------------------------
   3. VİNÇ ↔ KANOPİ ZİNCİRİ
   Halat boyu ve kanca konumu tek matematikle bağlıdır:
     halat ucu y = 118 + 140 × scaleY   |   kanca translateY = (halat ucu − 258)
   Her ikisi de aynı yüzdelerde ve aynı easing'le ilerler ki kanca
   halatın ucundan hiçbir karede kopmasın.
   -------------------------------------------------------------------------- */

/* 1980 → 5000 ms — halatın tüm ömrü tek keyframe'de */
#vinc-halat { animation: k-halat 3020ms 1980ms var(--ease-lineer) both; }
@keyframes k-halat {
  0%   { transform: scaleY(.15); }   /* 1980 — makaradan çözülmeye başlar */
  19%  { transform: scaleY(1.55); }  /* 2554 — kanca aşağıda, yükleme noktası */
  24%  { transform: scaleY(1.55); }  /* 2705 — kanopi bağlanıyor, bekleme */
  60%  { transform: scaleY(.42); }   /* 3792 — kanopi yerine taşındı */
  87%  { transform: scaleY(.42); }   /* 4607 — kolonlar altına girerken tutuyor */
  100% { transform: scaleY(.75); }   /* 5000 — yük bırakıldı, halat gevşedi */
}

#vinc-kanca {
  will-change: transform;
  animation: k-kanca-belir 200ms 1980ms var(--ease-lineer) both,
             k-kanca 3020ms 1980ms var(--ease-lineer) both,
             k-kanca-sarkac 5400ms 5300ms var(--ease-in-out-quad) infinite alternate;
}
@keyframes k-kanca-belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-kanca {
  0%   { transform: translateY(-119px); }
  19%  { transform: translateY(77px); }
  24%  { transform: translateY(77px); }
  60%  { transform: translateY(-81px); }
  87%  { transform: translateY(-81px); }
  100% { transform: translateY(-35px); }
}

/* 2540 → 3900 ms — kanopinin montajı: kancada belirir, kaldırılır, oturur */
#kanopi { animation: k-kanopi-montaj 1360ms 2540ms var(--ease-mechanical) both; }
@keyframes k-kanopi-montaj {
  0%   { opacity: 0; transform: translateY(169px) rotate(-3deg); }
  12%  { opacity: 1; transform: translateY(169px) rotate(-3deg); }   /* kancada asılı */
  20%  { opacity: 1; transform: translateY(150px) rotate(-2.6deg); } /* kalkış */
  46%  { opacity: 1; transform: translateY(88px)  rotate(-1.4deg); }
  70%  { opacity: 1; transform: translateY(30px)  rotate(-.4deg); }  /* hizalanma */
  86%  { opacity: 1; transform: translateY(2px)   rotate(0deg); }    /* temas — bastırma */
  93%  { opacity: 1; transform: translateY(-1px)  rotate(0deg); }    /* geri sekme */
  100% { opacity: 1; transform: translateY(0)     rotate(0deg); }    /* oturdu */
}

/* --------------------------------------------------------------------------
   4. SAHANIN GERİ KALANI
   -------------------------------------------------------------------------- */

/* 2600 ms — market sağdan gelir */
#market { animation: k-market-giris 640ms 2600ms var(--ease-out-expo) both; }
@keyframes k-market-giris {
  from { opacity: 0; transform: translateX(56px) scale(.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* 2900 ms — fiyat totemi dikilir */
#totem { animation: k-dikey-buyume 700ms 2900ms var(--ease-out-expo) both; }

/* 3300 / 3420 ms — pompalar yerine oturur (hafif overshoot) */
#pompa-1 { animation: k-pompa-giris 460ms 3300ms var(--ease-settle) both; }
#pompa-2 { animation: k-pompa-giris 460ms 3420ms var(--ease-settle) both; }
@keyframes k-pompa-giris {
  from { opacity: 0; transform: translateY(28px) scaleY(.7); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* 3760 ms — hortum pompadan sarkar */
#hortum { animation: k-hortum-giris 520ms 3760ms var(--ease-settle) both; }
@keyframes k-hortum-giris {
  from { opacity: 0; transform: scaleY(.2) rotate(-8deg); }
  to   { opacity: 1; transform: scaleY(1) rotate(0deg); }
}

/* 4620 ms — kolonlar oturunca kanopi altı aydınlatma ateşlenir
   (tek seferlik, 3 parlaklık geçişi → 0.62 s'de 4.8 Hz altı, güvenli) */
#kanopi-isik {
  animation: k-isik-ateslenme 620ms 4620ms var(--ease-lineer) both,
             k-kanopi-nefes 4800ms 5400ms var(--ease-in-out-quad) infinite;
}
@keyframes k-isik-ateslenme {
  0%   { opacity: 0; }
  18%  { opacity: .9; }
  26%  { opacity: .1; }
  42%  { opacity: 1; }
  52%  { opacity: .25; }
  68%  { opacity: 1; }
  100% { opacity: 1; }
}

/* 3900 / 4000 ms — trafik konileri */
#koni-1 { animation: k-koni-giris 420ms 3900ms var(--ease-settle) both; }
#koni-2 { animation: k-koni-giris 420ms 4000ms var(--ease-settle) both; }
@keyframes k-koni-giris {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   5. DÖNGÜSEL ANİMASYONLAR — 4500 ms'den itibaren
   Giriş animasyonuyla aynı öğeyi paylaşan loop'lar `fill` ALMAZ; aksi hâlde
   gecikme süresince from-durumu girişi ezerdi.
   -------------------------------------------------------------------------- */

/* 1 — bom salınımı (0°'dan başlar: girişin bittiği yer) */
@keyframes k-bom-salinim {
  from { transform: rotate(0deg); }
  to   { transform: rotate(1.4deg); }
}

/* 2 — kancanın sarkaç hareketi (girişin bıraktığı -35px'te kalır) */
@keyframes k-kanca-sarkac {
  from { transform: translateY(-35px) translateX(0) rotate(0deg); }
  to   { transform: translateY(-35px) translateX(7px) rotate(3deg); }
}

/* 3 — kanopi ışıklarının nefes alması.
   0% MUTLAKA 1 olmalı: `k-isik-ateslenme` 5240 ms'de opacity 1'de bitiyor,
   nefes 5400 ms'de devralıyor. Döngü .62'den başlasaydı devir tesliminde
   gözle görülür bir sönme sıçraması olurdu. */
@keyframes k-kanopi-nefes {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}

/* 4 — ışık şeridinde yanal tarama */
#kanopi-isik .isik-huzme {
  will-change: transform;
  animation: k-isik-tarama 3600ms 5700ms var(--ease-lineer) infinite;
}
@keyframes k-isik-tarama {
  0%   { opacity: 0; transform: translateX(-160px); }
  50%  { opacity: .5; }
  100% { opacity: 0; transform: translateX(160px); }
}

/* 5 — pompa ekranındaki rakam şeritleri
   Şerit adımı 26 px × 10 basamak = 260 px. steps(10) tam bir tur atar. */
@keyframes k-hane-akis {
  from { transform: translateY(0); }
  to   { transform: translateY(-260px); }
}
#pompa-1 .hane--ondalik { animation: k-hane-akis  400ms 3900ms steps(10, end) infinite; }
#pompa-1 .hane--birler  { animation: k-hane-akis 1000ms 3900ms steps(10, end) infinite; }
#pompa-1 .hane--onlar   { animation: k-hane-akis 3200ms 3900ms steps(10, end) infinite; }
#pompa-2 .hane--ondalik { animation: k-hane-akis  440ms 4180ms steps(10, end) infinite; }
#pompa-2 .hane--birler  { animation: k-hane-akis 1160ms 4180ms steps(10, end) infinite; }
#pompa-2 .hane--onlar   { animation: k-hane-akis 3800ms 4180ms steps(10, end) infinite; }

/* 6 / 7 — kaynak kıvılcımları ve halesi.
   Kıvılcım toplam sürenin yalnızca %14'ünde görünür; kalan %86 sessizlik.
   Üç kümenin gecikmeleri senkronize bir ritim oluşmasın diye kaydırılmıştır. */
@keyframes k-kivilcim {
  0%   { opacity: 0; transform: scale(.3); }
  3%   { opacity: 1; transform: scale(1); }
  7%   { opacity: .9; transform: scale(1.5); }
  14%  { opacity: 0; transform: scale(2.1); }
  100% { opacity: 0; transform: scale(.3); }
}
@keyframes k-kaynak-hale {
  0%   { opacity: 0;   transform: scale(.6); }
  5%   { opacity: .55; transform: scale(1.4); }
  16%  { opacity: 0;   transform: scale(2.4); }
  100% { opacity: 0;   transform: scale(.6); }
}

#kivilcim-kume-1 .kivilcim { animation: k-kivilcim 2400ms 4600ms var(--ease-lineer) infinite; }
#kivilcim-kume-2 .kivilcim { animation: k-kivilcim 2400ms 5350ms var(--ease-lineer) infinite; }
#kivilcim-kume-3 .kivilcim { animation: k-kivilcim 2400ms 6180ms var(--ease-lineer) infinite; }
#kivilcim-kume-1 .kaynak-hale { animation: k-kaynak-hale 2400ms 4600ms var(--ease-lineer) infinite; }
#kivilcim-kume-2 .kaynak-hale { animation: k-kaynak-hale 2400ms 5350ms var(--ease-lineer) infinite; }
#kivilcim-kume-3 .kaynak-hale { animation: k-kaynak-hale 2400ms 6180ms var(--ease-lineer) infinite; }

/* 8 — çalışma lambalarının nefesi (yalnızca hale; armatür sabit kalır) */
@keyframes k-isci-isik {
  from { opacity: .35; transform: scale(1); }
  to   { opacity: .9;  transform: scale(1.06); }
}
#calisma-lamba-1 .isik-hale { animation: k-isci-isik 5000ms 5000ms var(--ease-in-out-quad) infinite alternate; }
#calisma-lamba-2 .isik-hale { animation: k-isci-isik 6400ms 5600ms var(--ease-in-out-quad) infinite alternate; }

/* 9 — totem panelinin yanıp sönmesi */
#totem .totem-panel { animation: k-totem-panel 6400ms 5600ms var(--ease-in-out-quad) infinite alternate; }
@keyframes k-totem-panel { from { opacity: .7; } to { opacity: 1; } }

/* 10 — bulutların geçişi.
   Bulutların SVG'deki `transform` sunum niteliği CSS transform'u tarafından
   TAMAMEN ezilir; bu yüzden her bulutun ölçeği ve y'si keyframe'in içinde
   yeniden yazılır. Negatif gecikmeler fazları kaydırır (döngü ortasından başlar). */
.bulut { transform-box: view-box; }
.bulut-1 { animation: k-bulut-1  78000ms       0ms var(--ease-lineer) infinite; }
.bulut-2 { animation: k-bulut-2 104000ms  -34000ms var(--ease-lineer) infinite; }
.bulut-3 { animation: k-bulut-3 132000ms  -71000ms var(--ease-lineer) infinite; }
.bulut-4 { animation: k-bulut-4  96000ms  -18000ms var(--ease-lineer) infinite; }

@keyframes k-bulut-1 {
  from { transform: translate(-280px, 78px); }
  to   { transform: translate(1480px, 78px); }
}
@keyframes k-bulut-2 {
  from { transform: translate(-280px, 44px) scale(.72); }
  to   { transform: translate(1480px, 44px) scale(.72); }
}
@keyframes k-bulut-3 {
  from { transform: translate(-280px, 122px) scale(1.25); }
  to   { transform: translate(1480px, 122px) scale(1.25); }
}
@keyframes k-bulut-4 {
  from { transform: translate(-280px, 152px) scale(.9); }
  to   { transform: translate(1480px, 152px) scale(.9); }
}

/* 11 — sahadan yükselen toz */
@keyframes k-toz {
  0%   { opacity: 0;   transform: translate(0, 0); }
  12%  { opacity: .26; }
  78%  { opacity: .14; }
  100% { opacity: 0;   transform: translate(28px, -150px); }
}
#toz .toz-zerre:nth-child(1) { animation: k-toz  9000ms 4800ms var(--ease-lineer) infinite; }
#toz .toz-zerre:nth-child(2) { animation: k-toz 10200ms 5700ms var(--ease-lineer) infinite; }
#toz .toz-zerre:nth-child(3) { animation: k-toz 11400ms 6600ms var(--ease-lineer) infinite; }
#toz .toz-zerre:nth-child(4) { animation: k-toz 12000ms 7500ms var(--ease-lineer) infinite; }
#toz .toz-zerre:nth-child(5) { animation: k-toz 12800ms 8400ms var(--ease-lineer) infinite; }
#toz .toz-zerre:nth-child(6) { animation: k-toz 13400ms 9300ms var(--ease-lineer) infinite; }

/* 12 — gün ışığı huzmesinin nefesi */
.gun-isigi-huzmesi { animation: k-huzme-nefes 12000ms 800ms var(--ease-in-out-quad) infinite alternate; }
@keyframes k-huzme-nefes {
  from { opacity: .45; transform: scaleX(1); }
  to   { opacity: .78; transform: scaleX(1.06); }
}

/* --------------------------------------------------------------------------
   5b. AÇIK TEMA — sahne renk uyarlaması
   SVG koyu zemin varsayımıyla üretildi. Aşağıdaki blok, varlığı yeniden
   çizmeden gündüz paletine taşır: token'lar sahneye ÖZEL olarak ezilir,
   sadece bu ezmenin yetmediği yerlerde tekil kural yazılır.
   -------------------------------------------------------------------------- */

.sahne svg {
  --surface-overlay: #E9F1F8;  /* pompa gövdesi, market vitrini */
  --line-strong:     #46688C;  /* konturlar açık gökyüzünde görünür kalmalı */
  --line-soft:       #9CB5CD;
  --ink-050:         #FFFFFF;  /* ampul, koni şeridi — turkuaz üstünde beyaz */
  --isaret-turuncu:  #F59E0B;  /* inşaat sinyali: kıvılcım ve çalışma lambası */
}

/* Saha zemini: koyu asfalt → açık beton */
#eg-zemin stop:nth-child(1) { stop-color: #DFEAF4; }
#eg-zemin stop:nth-child(2) { stop-color: #C6D8E9; }
#eg-zemin stop:nth-child(3) { stop-color: #A9C1D8; }

/* Beton platform (temel): üst yüzey ve ön yüz açık betona çekilir */
#temel > path:nth-child(1) { fill: #CBDAE8; }
#temel > path:nth-child(2) { fill: #A6BED4; }

/* İskele: açık gökyüzünde silinmesin */
#iskele { stroke: var(--line-strong); }

/* Bulutlar açık gökyüzünde beyaz ve belirgin olmalı */
#bulutlar { fill: #FFFFFF; }
.bulut-1 { opacity: .92; }
.bulut-2 { opacity: .72; }
.bulut-3 { opacity: .95; }
.bulut-4 { opacity: .6; }

/* Gün ışığı huzmesi: beyaz ışık konisi */
#eg-huzme stop:nth-child(1) { stop-color: #FFFFFF; stop-opacity: .68; }
#eg-huzme stop:nth-child(2) { stop-color: #FFFFFF; stop-opacity: .24; }
#eg-huzme stop:nth-child(3) { stop-color: #FFFFFF; stop-opacity: 0; }

/* Çalışma lambası halesi: beyaz açık zeminde görünmez → kehribar */
#eg-lamba stop:nth-child(1) { stop-color: var(--isaret-turuncu); stop-opacity: .46; }
#eg-lamba stop:nth-child(2) { stop-color: var(--isaret-turuncu); stop-opacity: .16; }
#eg-lamba stop:nth-child(3) { stop-color: var(--isaret-turuncu); stop-opacity: 0; }

/* Kaynak kıvılcımları da kehribar — gündüz sahnesinde asıl enerji noktası */
#kivilcimlar { fill: var(--isaret-turuncu); }

/* Kanopi altı ışık havuzu: gündüzde daha ölçülü */
#eg-isik stop:nth-child(1) { stop-opacity: .24; }

/* Toz zerreleri açık zeminde koyu olmalı */
#toz { fill: #6E8CAB; }

/* --------------------------------------------------------------------------
   6. RESPONSIVE — loop yükünü küçük ekranda azalt (§8.1)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .bulut-3, .bulut-4 { display: none; }
  #toz .toz-zerre:nth-child(n + 4) { display: none; }
  #kivilcim-kume-3 { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bulut-4 { display: none; }
  #toz .toz-zerre:nth-child(n + 5) { display: none; }
}

/* --------------------------------------------------------------------------
   7. HAREKET KISITI — sahne (§7.1)
   Sekansın 4500 ms'deki SON KARESİ statik olarak dondurulur.
   Yarım kalmış hiçbir kare gösterilmez.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  #atmosfer, #calisma-isik, #kivilcimlar, #toz,
  #zemin, #temel, #iskele, #vinc-kule, #kolon-sol, #kolon-sag,
  #market, #totem, #pompa-1, #pompa-2, #hortum, #koni-1, #koni-2,
  #kanopi, #kanopi-isik .isik-huzme, #totem .totem-panel,
  #pompa-1 .hane, #pompa-2 .hane, .gun-isigi-huzmesi {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Vinç: yük bırakılmış, halat gevşek, kanca yukarı çekilmiş */
  #vinc-bom   { animation: none !important; opacity: 1 !important; transform: rotate(0deg) !important; }
  #vinc-halat { animation: none !important; opacity: 1 !important; transform: scaleY(.75) !important; }
  #vinc-kanca { animation: none !important; opacity: 1 !important; transform: translateY(-35px) !important; }

  /* Kanopi ışıkları açık, sabit */
  #kanopi-isik { animation: none !important; opacity: .9 !important; }

  /* Kıvılcım tamamen gizli — yanıp sönme fotosensitif risk taşır */
  #kivilcimlar .kivilcim, #kivilcimlar .kaynak-hale {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Çalışma lambaları sabit yanık */
  #calisma-lamba-1 .isik-hale,
  #calisma-lamba-2 .isik-hale {
    animation: none !important;
    opacity: .75 !important;
    transform: none !important;
  }

  #totem .totem-panel { opacity: .9 !important; }
  .gun-isigi-huzmesi  { opacity: .24 !important; }
  #toz .toz-zerre     { animation: none !important; opacity: 0 !important; }

  /* Bulutlar dağılmış sabit konumlarda */
  .bulut { animation: none !important; }
  .bulut-1 { transform: translate(180px, 78px) !important; }
  .bulut-2 { transform: translate(620px, 44px) scale(.72) !important; }
  .bulut-3 { transform: translate(980px, 122px) scale(1.25) !important; }
  .bulut-4 { transform: translate(380px, 152px) scale(.9) !important; }
}