/* ==========================================================
   DESPINA MOTORS · animations.css
   ========================================================== */

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--e-out) var(--d,0s), transform .9s var(--e-out) var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

.reveal-l{ opacity:0; transform:translateX(-42px); transition:opacity 1s var(--e-out) var(--d,0s), transform 1s var(--e-out) var(--d,0s); }
.reveal-r{ opacity:0; transform:translateX(42px);  transition:opacity 1s var(--e-out) var(--d,0s), transform 1s var(--e-out) var(--d,0s); }
.reveal-l.is-in,.reveal-r.is-in{ opacity:1; transform:none; }

.reveal-s{ opacity:0; transform:scale(.94); transition:opacity 1s var(--e-out) var(--d,0s), transform 1.1s var(--e-out) var(--d,0s); }
.reveal-s.is-in{ opacity:1; transform:none; }

/* Görsel maskesi ile açılış */
.reveal-mask{ position:relative; overflow:hidden; }
.reveal-mask::after{
  content:''; position:absolute; inset:0; z-index:5;
  background:var(--ink);
  transform-origin:right;
  transition:transform 1.1s var(--e-out) var(--d,0s);
}
.reveal-mask.is-in::after{ transform:scaleX(0); }

/* Satır satır başlık */
.line-up{ display:block; overflow:hidden; }
.line-up > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--e-out) var(--d,0s);
}
.is-in .line-up > span,
.line-up.is-in > span{ transform:none; }

/* Gecikme yardımcıları */
.d1{ --d:.08s } .d2{ --d:.16s } .d3{ --d:.24s } .d4{ --d:.32s }
.d5{ --d:.40s } .d6{ --d:.48s } .d7{ --d:.56s } .d8{ --d:.64s }

/* ---------- Sayfa geçişi ---------- */
.page-fade{
  position:fixed; inset:0; z-index:400;
  background:var(--ink);
  pointer-events:none;
  opacity:1;
  transition:opacity .7s var(--e);
}
body.is-ready .page-fade{ opacity:0; }
body.is-leaving .page-fade{ opacity:1; transition-duration:.35s; }

/* ---------- Keyframe'ler ---------- */
@keyframes kenburns{
  0%   { transform:scale(1.14) translate3d(0,0,0); }
  100% { transform:scale(1.03) translate3d(-1.4%, -1.2%, 0); }
}

@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.85; }
  50%    { transform:translate3d(-24px,26px,0) scale(1.07); opacity:1; }
}

@keyframes pulse{
  0%   { transform:scale(1);    opacity:.75; }
  70%  { transform:scale(1.30); opacity:0; }
  100% { transform:scale(1.30); opacity:0; }
}

@keyframes ring{
  0%,88%,100%{ transform:rotate(0); }
  90%{ transform:rotate(-14deg); }
  92%{ transform:rotate(12deg); }
  94%{ transform:rotate(-9deg); }
  96%{ transform:rotate(7deg); }
  98%{ transform:rotate(-3deg); }
}

@keyframes scrollLine{
  0%   { transform:scaleY(0); transform-origin:top; }
  45%  { transform:scaleY(1); transform-origin:top; }
  55%  { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}

@keyframes shimmer{
  0%{ background-position:-320px 0; }
  100%{ background-position:320px 0; }
}

/* Hero giriş animasyonu */
.hero__box > *{
  opacity:0; transform:translateY(26px);
  animation:heroIn .95s var(--e-out) forwards;
}
.hero__box > *:nth-child(1){ animation-delay:.55s }
.hero__box > *:nth-child(2){ animation-delay:.68s }
.hero__box > *:nth-child(3){ animation-delay:.80s }
.hero__box > *:nth-child(4){ animation-delay:.18s }
.hero__box > *:nth-child(5){ animation-delay:1.04s }

.hero__card{
  opacity:0; transform:translateY(30px);
  animation:heroIn 1s var(--e-out) 1.2s forwards;
}

@keyframes heroIn{
  to{ opacity:1; transform:none; }
}

/* Parallax katmanları */
[data-parallax]{ will-change:transform; }

/* Hareketi azalt tercihi */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-l,.reveal-r,.reveal-s{ opacity:1 !important; transform:none !important; }
  .line-up > span{ transform:none !important; }
  .reveal-mask::after{ display:none; }
  .hero__box > *,.hero__card{ opacity:1 !important; transform:none !important; }
}