/* Animasyonlar. Kartların eğilmesi `transform`'u JS'ten yazıyor; bu yüzden
   buradaki giriş animasyonları ayrı `translate` / `rotate` / `scale`
   özelliklerini kullanıyor — ikisi üst üste binebiliyor, birbirini ezmiyor. */

/* ---------- harf harf başlıklar ---------- */
.word { display: inline-block; white-space: nowrap; perspective: 600px; }
.ltr { display: inline-block; animation: ltrDrop 0.9s cubic-bezier(0.3, 1.6, 0.4, 1) both; animation-delay: calc(var(--i) * 55ms + 0.15s); transform-origin: 50% 100%; }
.ltr-in { display: inline-block; will-change: transform; cursor: default; }
@keyframes ltrDrop {
  0% { transform: translateY(-120%) rotateX(-110deg) rotateZ(-20deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* ---------- kayan bantlar ---------- */
.band-a .band-track { animation: marquee 22s linear infinite; }
.band-b .band-track { animation: marquee 18s linear infinite reverse; }
.band span { padding-right: 0.4em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- hero süsleri ---------- */
.hint { animation: wiggle 2.6s ease-in-out infinite; transform-origin: left center; }
@keyframes wiggle { 0%, 100% { rotate: -3deg; } 50% { rotate: 2deg; } }
.tag-tilt { animation: tagBob 3.2s ease-in-out infinite; }
@keyframes tagBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.scroll-cue span { animation: cue 1.2s cubic-bezier(0.3, 1.6, 0.5, 1) infinite; }
@keyframes cue { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
.swirl-a { animation: swirlSpin 14s linear infinite; }
.swirl-b { animation: swirlSpin 9s linear infinite reverse; }
@keyframes swirlSpin { to { rotate: 360deg; } }
.brand img { animation: logoFlip 6s ease-in-out infinite; }
@keyframes logoFlip { 0%, 80%, 100% { rotate: y 0deg; } 90% { rotate: y 360deg; } }

/* ---------- ekrana girişler (data-reveal) ---------- */
[data-reveal] > *, [data-reveal="zoom"] {
  transition: translate 0.9s cubic-bezier(0.25, 1.4, 0.4, 1), rotate 0.9s cubic-bezier(0.25, 1.4, 0.4, 1),
    scale 0.9s cubic-bezier(0.25, 1.4, 0.4, 1), opacity 0.6s ease;
  transition-delay: var(--d, 0ms);
}
[data-reveal="rise"]:not(.in) > * { translate: 0 80px; rotate: x 60deg; opacity: 0; }
[data-reveal="fly"]:not(.in) > :nth-child(3n + 1) { translate: -60vw 120px; rotate: z -60deg; opacity: 0; }
[data-reveal="fly"]:not(.in) > :nth-child(3n + 2) { translate: 0 60vh; rotate: x 90deg; opacity: 0; }
[data-reveal="fly"]:not(.in) > :nth-child(3n) { translate: 60vw 120px; rotate: z 60deg; opacity: 0; }
[data-reveal="flip"]:not(.in) > * { rotate: y 180deg; scale: 0.6; opacity: 0; }
[data-reveal="spin"]:not(.in) > * { rotate: 1 1 0 200deg; scale: 0.2; opacity: 0; }
[data-reveal="zoom"]:not(.in) { scale: 0.3; rotate: z -25deg; opacity: 0; }
.gauge[data-reveal="zoom"].in { animation: gaugeWobble 3s ease-in-out infinite 1.2s; }
@keyframes gaugeWobble { 0%, 100% { rotate: y -12deg; } 50% { rotate: y 12deg; } }

/* ---------- küçük dokunuşlar ---------- */
.phones-caption.pop { animation: pop 0.5s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes pop { 0% { scale: 0.4; rotate: -12deg; } 100% { scale: 1; rotate: 0deg; } }
.step-n { animation: stepBounce 2.4s cubic-bezier(0.3, 1.6, 0.5, 1) infinite; animation-delay: calc(var(--d, 0ms) * 3); }
@keyframes stepBounce { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -14px; } }
.store { animation: storeFloat 3s ease-in-out infinite; }
.store:nth-child(2) { animation-delay: -1.5s; }
@keyframes storeFloat { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -8px; rotate: 2deg; } }

/* ---------- hareketi azalt ---------- */
/* Ziyaretçi sistemde "hareketi azalt" demişse çılgınlık kapanır; içerik ve
   bağlantılar aynen kalır. html.calm aynı şeyi JS tarafında da işaretliyor. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] > *, [data-reveal="zoom"] { translate: none !important; rotate: none !important; scale: none !important; opacity: 1 !important; }
  .ltr { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}