/* ============================================
   Optimized CSS for Index Page - Performance
   ============================================ */

/* Services section - Smooth throwable animation */
.tp-services-capsule-item-wrapper > p[data-tp-throwable-el] {
  transition: opacity 0.4s ease-out;
  will-change: transform, opacity;
}

.tp-services-capsule-item-wrapper > p[data-tp-throwable-el] span {
  transition: transform 0.1s ease-out;
}

/* Scroll-driven background text animations (replaces GSAP) */
.tp-hero-bottom-text-wrapper {
  overflow: hidden;
  position: relative;
}

.tp-hero-bottom-text {
  will-change: transform;
  animation: heroTextScroll 20s linear infinite;
}

@keyframes heroTextScroll {
  0% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(-10%);
  }
}

.tp-services-bg-text {
  will-change: transform;
  animation: servicesBgTextScroll 25s linear infinite;
}

@keyframes servicesBgTextScroll {
  0% {
    transform: translateX(25%);
  }
  100% {
    transform: translateX(-10%);
  }
}

.tp-portfolio-bg-text {
  will-change: transform;
  animation: portfolioBgTextScroll 30s linear infinite;
}

@keyframes portfolioBgTextScroll {
  0% {
    transform: translateX(25%);
  }
  100% {
    transform: translateX(-80%);
  }
}

/* Intersection Observer based fade-in animations */
.tp-fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.tp-fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.tp-fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.tp-fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.tp-fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.tp-fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Optimized hover effects - CSS only */
.tp-hover-reveal-item {
  position: relative;
  overflow: hidden;
}

.tp-hover-reveal-item:hover .tp-hover-reveal-bg {
  opacity: 1;
  transform: scale(1.05);
}

.tp-hover-reveal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* Lazy loading image placeholder */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Performance optimizations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling optimization */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Optimize scroll performance */
body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* GPU acceleration for scroll elements */
[data-speed],
.tp-hero-thumb-shape-1,
.tp-hero-thumb-shape-2,
.tp-portfolio-thumb img,
.tp-about-thumb img {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  contain: layout style paint;
}

/* GPU acceleration for animated elements */
.tp-services-capsule-item-wrapper > p,
.tp-hero-bottom-text,
.tp-services-bg-text,
.tp-portfolio-bg-text {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize sections for smooth scrolling */
section {
  contain: layout style paint;
  transform: translateZ(0);
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Optimize fixed/absolute positioned elements */
.tp-hero-area,
.tp-services-area,
.tp-portfolio-area,
.tp-about-area {
  will-change: scroll-position;
  contain: layout style paint;
}

/* Reduce repaints during scroll */
.tp-section-title,
.tp-portfolio-item,
.tp-services-accordion-item {
  contain: layout style;
}

/* Optimize images during scroll */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Disable will-change when not needed (performance) */
@media (prefers-reduced-motion: reduce) {
  [data-speed],
  .tp-hero-thumb-shape-1,
  .tp-hero-thumb-shape-2 {
    will-change: auto !important;
    transform: none !important;
  }
}

/* Force line break after "جانیگو" in all screen sizes */
.tp-hero-content p br {
  display: block !important;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}