/* =============================================
   HERYERPARKOUR — Animation System
   Keyframes + scroll-reveal utilities
   ============================================= */

/* ===== LETTER FLIP ANIMATIONS (Parkur hareketleri) ===== */

/* Front flip — öne salto */
@keyframes flipFront {
  0% { opacity: 0; transform: perspective(600px) rotateX(90deg) translateY(-60px) scale(0.5); }
  60% { opacity: 1; transform: perspective(600px) rotateX(-15deg) translateY(5px) scale(1.05); }
  100% { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0) scale(1); }
}

/* Back flip — arkaya salto */
@keyframes flipBack {
  0% { opacity: 0; transform: perspective(600px) rotateX(-90deg) translateY(80px) scale(0.5); }
  60% { opacity: 1; transform: perspective(600px) rotateX(10deg) translateY(-5px) scale(1.05); }
  100% { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0) scale(1); }
}

/* Side flip — yandan dönüş */
@keyframes flipSide {
  0% { opacity: 0; transform: perspective(600px) rotateY(90deg) translateX(40px) scale(0.5); }
  60% { opacity: 1; transform: perspective(600px) rotateY(-10deg) translateX(-3px) scale(1.02); }
  100% { opacity: 1; transform: perspective(600px) rotateY(0deg) translateX(0) scale(1); }
}

/* Drop — düşme */
@keyframes flipDrop {
  0% { opacity: 0; transform: translateY(-200px) rotate(180deg) scale(0.3); }
  50% { opacity: 1; transform: translateY(10px) rotate(-10deg) scale(1.1); }
  70% { transform: translateY(-5px) rotate(3deg) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

/* Spin — havada dönüş */
@keyframes flipSpin {
  0% { opacity: 0; transform: perspective(600px) rotateZ(360deg) rotateX(45deg) scale(0); }
  60% { opacity: 1; transform: perspective(600px) rotateZ(-10deg) rotateX(-5deg) scale(1.08); }
  100% { opacity: 1; transform: perspective(600px) rotateZ(0deg) rotateX(0deg) scale(1); }
}

/* Vault — engel atlama */
@keyframes flipVault {
  0% { opacity: 0; transform: translateX(-120px) rotateZ(-90deg) scale(0.3); }
  40% { opacity: 1; transform: translateX(10px) rotateZ(15deg) scale(1.1); }
  70% { transform: translateX(-3px) rotateZ(-5deg) scale(0.98); }
  100% { opacity: 1; transform: translateX(0) rotateZ(0deg) scale(1); }
}

/* ===== LETTER ANIMATION CLASSES ===== */
.letter {
  display: inline-block;
  opacity: 0;
  animation-duration: 0.9s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  transform-origin: center bottom;
  will-change: transform, opacity;
}

.letter.flip-front { animation-name: flipFront; }
.letter.flip-back { animation-name: flipBack; }
.letter.flip-side { animation-name: flipSide; }
.letter.flip-drop { animation-name: flipDrop; }
.letter.flip-spin { animation-name: flipSpin; }
.letter.flip-vault { animation-name: flipVault; }

/* Harf iniş sonrası hover efekti */
.letter.landed {
  transition: color 0.15s, transform var(--duration-normal), -webkit-text-fill-color 0.15s;
  cursor: default;
}

/* Koyu zemin — hover'da turuncu */
.hero-line .letter.landed:hover {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  -webkit-text-stroke-color: var(--accent) !important;
  transform: translateY(-10px) rotate(-4deg) scale(1.15) !important;
  filter: drop-shadow(0 4px 12px rgba(255, 77, 0, 0.4));
}

/* Accent letter hover → beyaz (koyu bg'de) */
.hero-line .letter.accent-letter.landed:hover {
  color: white !important;
  -webkit-text-fill-color: white !important;
  filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.3));
}

/* Bej zemin — hover'da turuncu */
.sec-title-line .letter.landed:hover {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  transform: translateY(-8px) rotate(-3deg) scale(1.1) !important;
}

/* ===== GENEL ANIMASYONLAR ===== */

/* Fade up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tag girişi */
@keyframes tagIn {
  from { opacity: 0; transform: rotate(-2deg) translateY(10px); }
  to { opacity: 1; transform: rotate(-2deg) translateY(0); }
}

/* Frame girişi (asimetrik resim çerçeveleri) */
@keyframes frameIn {
  from { opacity: 0; transform: translateX(60px) rotate(3deg) scale(0.9); }
  to { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

/* Accent çerçeve girişi */
@keyframes accentIn {
  from { opacity: 0; transform: translate(30px, 30px); }
  to { opacity: 0.25; }
}

/* Float (arka plan blob'ları) */
@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-30px, 20px) rotate(2deg); }
}

/* ===== MARQUEE SCROLL ===== */
@keyframes mScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Cross banner scroll */
@keyframes scrollRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollLeft {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ===== SCROLL REVEAL — Element giriş animasyonları ===== */

/* Cards, items — opacity + translateY */
.scroll-reveal {
  opacity: 0;
}

/* Visible state (JS ile eklenir) */
.visible {
  opacity: 1;
  transform: translateY(0) !important;
}

/* ===== HOVER MICRO-INTERACTIONS ===== */

/* Kart yükselme */
.hover-lift {
  transition: transform var(--duration-slow) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-8px);
}

/* Kart büyüme */
.hover-grow {
  transition: transform var(--duration-normal);
}

.hover-grow:hover {
  transform: scale(1.03);
}