/**
 * Parallax and Scroll Animation Styles
 * Dr. Yıldız Digital Ecosystem
 * 
 * CSS styles for parallax depth layers and scroll-triggered animations.
 * Requirements: 28.2
 */

/* ============================================
 * PARALLAX CONTAINER
 * ============================================ */

[data-parallax-container] {
  position: relative;
  overflow: hidden;
}

[data-parallax] {
  will-change: transform;
}

/* ============================================
 * HERO PARALLAX LAYERS
 * Depth layers: 0.3x (slow), 0.5x (medium), 1.0x (fast)
 * ============================================ */

[data-hero-parallax] {
  position: relative;
  overflow: hidden;
}

[data-parallax-layer] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* Background layer - slowest parallax (0.3x) */
[data-parallax-layer="background"] {
  z-index: 1;
  /* Extend height to prevent gaps during parallax */
  height: 120%;
  top: -10%;
}

/* Mid layer - medium parallax (0.5x) */
[data-parallax-layer="mid"] {
  z-index: 2;
  height: 130%;
  top: -15%;
}

/* Foreground layer - fastest parallax (1.0x) */
[data-parallax-layer="foreground"] {
  z-index: 3;
  height: 150%;
  top: -25%;
}

/* Content layer - stays on top */
[data-parallax-content] {
  position: relative;
  z-index: 10;
}

/* ============================================
 * SCROLL ANIMATION INITIAL STATES
 * ============================================ */

[data-scroll-animate] {
  opacity: 0;
}

[data-scroll-animate="fade"] {
  opacity: 0;
}

[data-scroll-animate="fade-up"] {
  opacity: 0;
  transform: translateY(40px);
}

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

[data-scroll-animate="fade-left"] {
  opacity: 0;
  transform: translateX(40px);
}

[data-scroll-animate="fade-right"] {
  opacity: 0;
  transform: translateX(-40px);
}

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

[data-scroll-animate="scale-up"] {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
}

[data-scroll-animate="slide-up"] {
  transform: translateY(60px);
}

[data-scroll-animate="slide-down"] {
  transform: translateY(-60px);
}

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

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

/* Stagger group items */
[data-scroll-stagger-item] {
  opacity: 0;
}

[data-scroll-stagger="fade-up"] [data-scroll-stagger-item] {
  opacity: 0;
  transform: translateY(40px);
}

[data-scroll-stagger="fade-left"] [data-scroll-stagger-item] {
  opacity: 0;
  transform: translateX(40px);
}

[data-scroll-stagger="fade-right"] [data-scroll-stagger-item] {
  opacity: 0;
  transform: translateX(-40px);
}

[data-scroll-stagger="scale"] [data-scroll-stagger-item] {
  opacity: 0;
  transform: scale(0.9);
}

/* ============================================
 * SECTION REVEAL STYLES
 * ============================================ */

[data-section-reveal] {
  opacity: 0;
}

[data-section-reveal="split"] {
  opacity: 1;
}

[data-section-reveal="split"] [data-reveal="left"],
[data-section-reveal="split"] [data-reveal="right"] {
  opacity: 0;
}

[data-section-reveal="cascade"] {
  opacity: 1;
}

[data-section-reveal="cascade"] [data-reveal-item] {
  opacity: 0;
}

/* ============================================
 * PARALLAX IMAGE STYLES
 * ============================================ */

.parallax-image {
  position: relative;
  overflow: hidden;
}

.parallax-image__inner {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  will-change: transform;
}

.parallax-image__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
 * HERO SECTION PARALLAX STYLES
 * ============================================ */

.hero-parallax {
  position: relative;
  min-height: 70vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-parallax {
    min-height: 80vh;
  }
}

.hero-parallax__background {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: 1;
}

.hero-parallax__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-parallax__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

.hero-parallax__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  padding: var(--space-16) 0;
}

/* ============================================
 * FLOATING ELEMENTS
 * ============================================ */

.parallax-float {
  will-change: transform;
}

.parallax-float--slow {
  animation: parallaxFloat 6s ease-in-out infinite;
}

.parallax-float--medium {
  animation: parallaxFloat 4s ease-in-out infinite;
}

.parallax-float--fast {
  animation: parallaxFloat 3s ease-in-out infinite;
}

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

/* ============================================
 * SCROLL INDICATOR
 * ============================================ */

.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  opacity: 0.8;
  transition: opacity var(--transition-normal);
}

.scroll-indicator:hover {
  opacity: 1;
}

.scroll-indicator__mouse {
  width: 24px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 12px;
  position: relative;
}

.scroll-indicator__wheel {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background-color: currentColor;
  border-radius: 2px;
  animation: scrollWheel 1.5s ease-in-out infinite;
}

@keyframes scrollWheel {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
}

.scroll-indicator__text {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================
 * MOBILE OPTIMIZATIONS
 * Disable parallax on mobile for performance
 * ============================================ */

@media (max-width: 767px) {
  /* Disable parallax transforms on mobile */
  [data-parallax],
  [data-parallax-layer],
  .parallax-image__inner {
    transform: none !important;
    will-change: auto;
  }
  
  /* Reset layer positioning */
  [data-parallax-layer="background"],
  [data-parallax-layer="mid"],
  [data-parallax-layer="foreground"] {
    height: 100%;
    top: 0;
  }
  
  .parallax-image__inner {
    top: 0;
    height: 100%;
  }
  
  /* Keep scroll animations but simplify */
  [data-scroll-animate] {
    opacity: 1;
    transform: none;
  }
  
  [data-scroll-stagger-item] {
    opacity: 1;
    transform: none;
  }
  
  /* Hide scroll indicator on mobile */
  .scroll-indicator {
    display: none;
  }
}

/* ============================================
 * REDUCED MOTION PREFERENCES
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  [data-parallax],
  [data-parallax-layer],
  [data-scroll-animate],
  [data-scroll-stagger-item],
  [data-section-reveal],
  .parallax-image__inner,
  .parallax-float {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  
  .scroll-indicator__wheel {
    animation: none;
  }
}

/* ============================================
 * GPU ACCELERATION HINTS
 * ============================================ */

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ============================================
 * SMOOTH SCROLL BEHAVIOR
 * ============================================ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}