/* =========================================================
   Avensa — animasyonlar
   Kayma mesafeleri --m ile çarpılır (site.css): "az hareket"
   tercihinde --m = 0 olur, öğeler kaymadan yalnızca belirir.
   ========================================================= */

/* ---- Açılış perdesi: logo çizilir, yol ışığı geçer, perde yukarı kalkar ---- */
.intro-screen { display: none; }
html.intro .intro-screen {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  color: #fff;
  background:
    radial-gradient(60% 50% at 50% 60%, rgb(46 168 255 / .22), transparent 70%),
    linear-gradient(160deg, var(--night-2), var(--night));
  animation: introOut .85s cubic-bezier(.76, 0, .24, 1) 1.65s forwards;
}
.intro-screen__logo { width: min(64vw, 300px); }
.intro-screen__logo svg { width: 100%; height: auto; display: block; overflow: visible; }
.intro-screen__logo path {
  stroke-linecap: butt;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw .75s cubic-bezier(.65, 0, .35, 1) forwards;
}
.intro-screen__logo svg > g > path:nth-of-type(1) { animation-delay: .05s; }
.intro-screen__logo svg > g > path:nth-of-type(2) { animation-delay: .15s; }
.intro-screen__logo svg > g > path:nth-of-type(3) { animation-delay: .4s; }
.intro-screen__logo svg > g > path:nth-of-type(4) { animation-delay: .52s; }
.intro-screen__logo svg > g > path:nth-of-type(5) { animation-delay: .64s; }
.intro-screen__logo g g path { animation-duration: .45s; }
.intro-screen__logo g g path:nth-child(1) { animation-delay: .3s; }
.intro-screen__logo g g path:nth-child(2) { animation-delay: .38s; }
.intro-screen__logo g g path:nth-child(3) { animation-delay: .46s; }
.intro-screen__sub {
  font: 600 12px/1 var(--f-display); font-stretch: 125%; text-transform: uppercase;
  color: #A9B8D4; padding-left: .62em;
  animation: subIn .9s var(--ease) .75s both;
}
.intro-screen__road { width: min(80vw, 420px); height: 40px; overflow: visible; }
.intro-screen__road path {
  fill: none; stroke: url(#introRoad); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: .35 1.5; stroke-dashoffset: .35;
  animation: introRoad 1.1s cubic-bezier(.5, 0, .3, 1) .55s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes subIn { from { opacity: 0; letter-spacing: .1em; } to { opacity: 1; letter-spacing: .62em; } }
@keyframes introRoad { to { stroke-dashoffset: -1.2; } }
@keyframes introOut {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); visibility: hidden; }
}
@keyframes introFade { to { opacity: 0; visibility: hidden; } }

/* ---- Hero girişi: sıralı yükselme, başlık satırları maskeden çıkar ---- */
html.js { --intro: 0ms; }
html.js.intro { --intro: 1750ms; }

@keyframes enterUp {
  from { opacity: 0; transform: translateY(calc(26px * var(--m))); }
  to   { opacity: 1; transform: none; }
}
@keyframes lineUp {
  from { opacity: 0; transform: translateY(calc(110% * var(--m))) rotate(calc(3deg * var(--m))); }
  to   { opacity: 1; transform: none; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(calc(44px * var(--m))) scale(calc(1 - .05 * var(--m))); }
  to   { opacity: 1; transform: none; }
}
@keyframes headerIn { from { opacity: 0; transform: translateY(calc(-100% * var(--m))); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes roadDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hillsIn { from { opacity: 0; transform: translateY(calc(30px * var(--m))); } to { opacity: .9; transform: none; } }

/* "backwards": animasyon bitince transform kalkar; kalsaydı sabit konumlu mobil menü header'a hapsolurdu */
html.js .site-header { animation: headerIn .8s var(--ease) calc(var(--intro) + 50ms) backwards; }
html.js .hero [data-enter] { animation: enterUp .9s var(--ease) calc(var(--intro) + var(--d, 0) * 1ms) both; }
html.js .hero__form[data-enter] { animation-name: cardIn; animation-duration: 1.1s; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero__title .line > span { display: inline-block; transform-origin: 0 100%; }
html.js .hero__title .line > span { animation: lineUp 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--intro) + var(--d, 0) * 1ms) both; }
html.js .hero__hills { animation: hillsIn 1.4s var(--ease) calc(var(--intro) + 200ms) both; }
html.js .road__edge { stroke-dasharray: 1; animation: roadDraw 2s cubic-bezier(.6, 0, .2, 1) calc(var(--intro) + 300ms) both; }
html.js .road__edge--inner { animation-delay: calc(var(--intro) + 450ms); }
html.js .road__surface, html.js .road__dash { animation: fadeIn 1.2s ease calc(var(--intro) + 1300ms) both; }
html.js.intro .road__light { animation-delay: calc(var(--intro) + 2000ms); }
html.js.intro .road__light--2 { animation-delay: calc(var(--intro) + 4600ms); }

/* "konforla" kelimesinde akan parıltı */
.hero__title em {
  background: linear-gradient(100deg, var(--electric) 0%, var(--blue) 40%, #8AD6FF 50%, var(--blue) 60%, var(--electric) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: shimmer 6s ease-in-out 2.5s infinite;
}
@keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* Canlı nokta */
.dot { position: relative; }
.dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wa); animation: ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---- Kaydırma ilerleme çubuğu ---- */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* ---- Hero paralaks (JS --y değişkenini günceller) ---- */
.hero__hills { translate: 0 calc(var(--y, 0) * -.12px); }
.hero__road { translate: 0 calc(var(--y, 0) * -.05px); }

/* ---- Kayan yazı bandı ---- */
.ticker {
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex; align-items: center; gap: 28px;
  width: max-content;
  animation: ticker 40s linear infinite;
}
.ticker span {
  font: 800 clamp(34px, 7vw, 84px)/1.05 var(--f-display); font-stretch: 125%;
  letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
}
.ticker span.is-outline { color: transparent; -webkit-text-stroke: 1.5px var(--blue); }
.ticker i {
  flex: none; width: clamp(28px, 4vw, 48px); height: clamp(14px, 2vw, 24px);
  border-bottom: 3px solid var(--electric); border-radius: 0 0 50% 50%;
  transform: rotate(-12deg);
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---- Kaydırınca beliren öğeler: ek efektler ---- */
.section-head.reveal .kicker::before { width: 0; transition: width .8s var(--ease) .25s; }
.section-head.reveal.is-in .kicker::before { width: 22px; }

.car.reveal .car__media { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1) .1s; }
.car.reveal.is-in .car__media { clip-path: inset(0 0 0 0); }
.car.reveal .car__media img { scale: 1.18; transition: scale 1.4s var(--ease), transform .6s var(--ease); }
.car.reveal.is-in .car__media img { scale: 1; }

/* Araç kartında ışık süpürmesi */
.car__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .45) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.car:hover .car__media::after { transform: translateX(120%); transition: transform .9s var(--ease); }

/* Adımlar: numara yaylanır, aradaki çizgi kendini çizer */
.steps__list li.reveal::after { scale: 1 0; transform-origin: top; transition: scale 1s var(--ease) .4s; }
.steps__list li.reveal.is-in::after { scale: 1 1; }
.steps__list li.reveal::before { scale: .4; transition: scale .6s cubic-bezier(.3, 1.6, .5, 1) .1s; }
.steps__list li.reveal.is-in::before { scale: 1; }
@media (min-width: 1024px) {
  .steps__list li.reveal::after { scale: 0 1; transform-origin: left; }
}

/* Özellik kartları */
.features li .ico { transition: transform .4s var(--ease), background-color .3s, color .3s; }
.features li:hover .ico { transform: rotate(-8deg) scale(1.08); background: var(--grad); color: #fff; }
.features li { transition: border-color .3s, box-shadow .3s, translate .7s var(--ease), opacity .7s var(--ease); }
.features li:hover { border-color: #B9CDE6; box-shadow: var(--shadow); }

/* Kiralama kartları */
.plan { transition: transform .4s var(--ease), box-shadow .4s, translate .7s var(--ease), opacity .7s var(--ease); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.plan--accent::after { animation: orbit 5s ease-in-out infinite; }
@keyframes orbit { 50% { transform: scale(1.15); box-shadow: 0 0 0 34px rgb(46 168 255 / .04); } }

/* Butonlarda parıltı */
.btn--primary, .btn--wa { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn--primary:hover::after, .btn--wa:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }

/* Mobil alt çubuk: aşağıdan gelir, WhatsApp butonu nabız atar */
html.js .action-bar { animation: barIn .7s var(--ease) calc(var(--intro) + 900ms) both; }
@keyframes barIn { from { opacity: 0; transform: translateY(calc(110% * var(--m))); } to { opacity: 1; transform: none; } }
.action-bar__wa { position: relative; }
.action-bar__wa::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  animation: pulse 2.6s ease-out 3s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(29 168 81 / .55); } 70%, 100% { box-shadow: 0 0 0 14px rgb(29 168 81 / 0); } }

/* Filo bölümünde imleci takip eden ışık (masaüstü) */
.fleet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, -20%), rgb(46 168 255 / .14), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.fleet.is-glow::before { opacity: 1; }
.fleet > .wrap { position: relative; }

/* Kurumsal bant: yavaş dönen ışık */
.corporate__inner::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px;
  background: conic-gradient(from 0deg, transparent, rgb(46 168 255 / .28), transparent 40%);
  border-radius: 50%; filter: blur(30px);
  animation: spin 14s linear infinite; pointer-events: none;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* SSS açılırken içerik süzülür */
.faq details[open] p { animation: enterUp .45s var(--ease) both; }

/* Mobil menü bağlantıları sırayla gelir */
@media (max-width: 1023px) {
  .nav > a, .nav__contact { opacity: 0; translate: 0 14px; transition: opacity .4s var(--ease), translate .5s var(--ease); }
  .nav-open .nav > a, .nav-open .nav__contact { opacity: 1; translate: none; transition-delay: calc(80ms + var(--i, 5) * 55ms); }
  .nav > a { display: flex; justify-content: space-between; align-items: center; }
  .nav > a::after { content: "→"; font-family: var(--f-body); color: var(--blue); font-size: 22px; }
}

/* "Az hareket": paralaks, yakınlaştırma ve kayma kapalı; çizim, belirme ve ışık efektleri sürer */
@media (prefers-reduced-motion: reduce) {
  html.intro .intro-screen { animation-name: introFade; animation-duration: .6s; }
  .hero__hills, .hero__road { translate: none; }
  .car.reveal .car__media img { scale: 1; }
  .steps__list li.reveal::before { scale: 1; }
  .nav > a, .nav__contact { translate: none; }
  .plan:hover, .features li:hover .ico { transform: none; }
  .ticker__track { animation-duration: 70s; }
}