/* ==========================================================================
   LOCAL MİMARLIK - SCROLL ANIMATIONS STYLESHEET
   ========================================================================== */

/* Keyframe Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes clipRevealUp {
  from {
    clip-path: inset(100% 0 0 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes clipRevealRight {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes blurReveal {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes lineDrawH {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes pulseSubtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  60% { transform: translateY(5px); }
}

/* Data-Scroll Declarative System */
[data-scroll] {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.8s ease, clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter, clip-path;
}

[data-scroll="fade-up"] {
  transform: translateY(50px);
}

[data-scroll="fade-down"] {
  transform: translateY(-40px);
}

[data-scroll="fade-left"] {
  transform: translateX(-60px);
}

[data-scroll="fade-right"] {
  transform: translateX(60px);
}

[data-scroll="scale-in"] {
  transform: scale(0.9);
}

[data-scroll="clip-up"] {
  clip-path: inset(100% 0 0 0);
  opacity: 1;
}

[data-scroll="clip-right"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
}

[data-scroll="blur-in"] {
  filter: blur(12px);
}

[data-scroll="rotate-in"] {
  transform: rotate(-10deg) scale(0.85);
}

/* Active State when triggered by JS */
[data-scroll].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0);
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}

/* Stagger Delays */
[data-scroll-delay="1"] { transition-delay: 0.1s; }
[data-scroll-delay="2"] { transition-delay: 0.2s; }
[data-scroll-delay="3"] { transition-delay: 0.3s; }
[data-scroll-delay="4"] { transition-delay: 0.4s; }
[data-scroll-delay="5"] { transition-delay: 0.5s; }
[data-scroll-delay="6"] { transition-delay: 0.6s; }

/* Speed Variations */
[data-scroll-speed="fast"] { transition-duration: 0.4s; }
[data-scroll-speed="slow"] { transition-duration: 1.2s; }

/* Split Text Styles */
.split-word-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.25em;
}

.split-word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.split-word-wrapper.is-visible .split-word {
  transform: translateY(0);
  opacity: 1;
}

/* Parallax Image Container */
.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  position: absolute;
  top: -10%;
  left: 0;
  will-change: transform;
}

/* Line Draw Animation */
.line-draw {
  display: block;
  height: 1px;
  background-color: var(--color-primary-light);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-draw.is-visible {
  transform: scaleX(1);
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-scroll],
  .split-word,
  .line-draw {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}