/* Açılış ekranı: çekici sağdan gelip frene basar, farlar iki kez sellektör yapar,
   tepe lambası amber yanıp söner, ikaz şeritli yükleme çubuğu dolar; sonra çekici sola
   doğru çıkar ve site açılır. Yalnızca html.splash-on iken görünür (splash.js). */

.splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
  display: none;
  place-items: center;
  background: var(--color-bg);
  overflow: hidden;
  pointer-events: none;
}

.splash-on .splash {
  display: grid;
  animation: splash-out var(--splash-fade) var(--ease-in-out) var(--splash-hold) forwards;
}

/* Sayfadaki giriş animasyonları açılış ekranı kalkınca başlasın */
.splash-on {
  --splash-offset: calc(var(--splash-hold) + var(--splash-fade) * 0.5);
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* ---------- Çekici ---------- */
.splash-truck {
  position: relative;
  width: var(--splash-truck-width);
  aspect-ratio: var(--splash-truck-ratio);
  animation:
    truck-in 0.75s var(--ease-out) both,
    truck-out var(--splash-fade) var(--ease-in-out) var(--splash-hold) forwards;
}

.splash-truck img {
  display: block;
  width: 100%;
  height: auto;
}

/* Far parlaması (çizimdeki far konumu: %18 sol, %56 üst) */
.splash-headlight,
.splash-beam {
  position: absolute;
  top: 56%;
  opacity: 0;
  animation: high-beam var(--splash-flash) linear var(--splash-flash-delay) both;
}

.splash-headlight {
  left: 18%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-headlight) 0 18%, var(--color-headlight-glow) 38%, var(--color-transparent) 70%);
}

/* Fardan sola uzanan ışık huzmesi */
.splash-beam {
  right: 82%;
  width: 90%;
  height: 46%;
  transform: translateY(-50%);
  background: linear-gradient(to left, var(--color-headlight-glow), var(--color-transparent));
  clip-path: polygon(100% 44%, 100% 56%, 0 100%, 0 0);
}

/* Tepe lambası (çizimde %35 sol, %18 üst) */
.splash-beacon {
  position: absolute;
  left: 35%;
  top: 18%;
  width: 22%;
  height: 12%;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, var(--color-beacon-glow) 0 25%, var(--color-transparent) 70%);
  opacity: 0;
  animation: beacon 0.45s steps(2, jump-none) 0.3s infinite;
}

/* İkaz şeridi yükleme çubuğu */
.splash-bar {
  width: calc(var(--splash-truck-width) * 0.6);
  height: var(--accent-bar-height);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  overflow: hidden;
  animation: splash-bar-out 0.25s ease var(--splash-hold) forwards;
}

.splash-bar::before {
  content: "";
  display: block;
  height: 100%;
  background: var(--hazard-stripe-sm);
  transform: scaleX(0);
  transform-origin: left;
  animation: splash-load var(--splash-hold) var(--ease-out) forwards;
}

/* Sağdan gelir, hafif öne eğilerek fren yapar */
@keyframes truck-in {
  0% { transform: translateX(var(--splash-drive-distance)); }
  75% { transform: translateX(-3%) rotate(-1.2deg); }
  90% { transform: translateX(1%) rotate(0.4deg); }
  100% { transform: none; }
}

/* Sola doğru hızlanarak çıkar */
@keyframes truck-out {
  to { transform: translateX(calc(-1 * var(--splash-drive-distance))); opacity: 0; }
}

/* Sellektör: iki kısa yakma */
@keyframes high-beam {
  0%, 100% { opacity: 0; }
  8%, 26% { opacity: 1; }
  34%, 50% { opacity: 0; }
  58%, 78% { opacity: 1; }
  88% { opacity: 0; }
}

@keyframes beacon {
  from { opacity: 0.15; }
  to { opacity: 1; }
}

@keyframes splash-load {
  to { transform: scaleX(1); }
}

@keyframes splash-bar-out {
  to { opacity: 0; }
}

@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}

/* ---------- Açılış ekranı varken giriş animasyonlarını ötele ----------
   (splash.js sınıfı tüm girişler bitince kaldırır; uzun süren kenburns / slayt çubuğu ötelenmez) */
.splash-on .lines .line > span,
.splash-on .rise,
.splash-on .hs-slide.is-active .lines .line > span,
.splash-on .hs-slide.is-active .rise {
  animation-delay: var(--splash-offset);
}

.splash-on .lines .line:nth-child(2) > span,
.splash-on .hs-slide.is-active .lines .line:nth-child(2) > span {
  animation-delay: calc(var(--splash-offset) + var(--delay-step) * 1.5);
}

.splash-on .lines .line:nth-child(3) > span {
  animation-delay: calc(var(--splash-offset) + var(--delay-step) * 3);
}

.splash-on .rise.d-2,
.splash-on .hs-slide.is-active .rise.d-2 { animation-delay: calc(var(--splash-offset) + var(--delay-step) * 2); }
.splash-on .rise.d-3,
.splash-on .hs-slide.is-active .rise.d-3 { animation-delay: calc(var(--splash-offset) + var(--delay-step) * 3); }
.splash-on .rise.d-4 { animation-delay: calc(var(--splash-offset) + var(--delay-step) * 4); }

.splash-on .dock { animation-delay: calc(var(--splash-offset) + 0.2s); }
.splash-on .dock > :nth-child(1) { animation-delay: calc(var(--splash-offset) + 0.6s); }
.splash-on .dock > :nth-child(2) { animation-delay: calc(var(--splash-offset) + 0.5s); }
.splash-on .dock > :nth-child(3) { animation-delay: calc(var(--splash-offset) + 0.7s); }