/*
🇹🇷 TR: Animation CSS
🇬🇧 EN: Animation CSS
🎯 PURPOSE: Advanced animations and transitions for modern user experience

Bu dosya tema için gelişmiş animasyon ve geçiş efektlerini içerir.
This file contains advanced animations and transition effects for the theme.
*/

/* ==========================================================================
   🇹🇷 TR: Animation Variables
   🇬🇧 EN: Animation Variables
   ========================================================================== */
:root {
  --grpc-animation-duration-fast: 150ms;
  --grpc-animation-duration-normal: 300ms;
  --grpc-animation-duration-slow: 600ms;
  --grpc-animation-easing-ease: ease;
  --grpc-animation-easing-ease-in: ease-in;
  --grpc-animation-easing-ease-out: ease-out;
  --grpc-animation-easing-ease-in-out: ease-in-out;
  --grpc-animation-easing-custom: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --grpc-animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================================================
   🇹🇷 TR: Base Animation Classes
   🇬🇧 EN: Base Animation Classes
   ========================================================================== */

/* 🇹🇷 TR: Smooth transitions / 🇬🇧 EN: Smooth transitions */
.grpc-transition {
  transition: all var(--grpc-animation-duration-normal) var(--grpc-animation-easing-custom);
}

.grpc-transition-fast {
  transition: all var(--grpc-animation-duration-fast) var(--grpc-animation-easing-custom);
}

.grpc-transition-slow {
  transition: all var(--grpc-animation-duration-slow) var(--grpc-animation-easing-custom);
}

/* 🇹🇷 TR: Transform utilities / 🇬🇧 EN: Transform utilities */
.grpc-transform {
  transform: translateZ(0); /* Hardware acceleration */
}

.grpc-transform-gpu {
  transform: translate3d(0, 0, 0); /* Force GPU acceleration */
}

/* ==========================================================================
   🇹🇷 TR: Hover Animations
   🇬🇧 EN: Hover Animations
   ========================================================================== */

/* 🇹🇷 TR: Scale on hover / 🇬🇧 EN: Scale on hover */
.grpc-hover-scale {
  transition: transform var(--grpc-animation-duration-normal) var(--grpc-animation-easing-custom);
}

.grpc-hover-scale:hover {
  transform: scale(1.05);
}

/* 🇹🇷 TR: Lift on hover / 🇬🇧 EN: Lift on hover */
.grpc-hover-lift {
  transition: transform var(--grpc-animation-duration-normal) var(--grpc-animation-easing-custom);
}

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

/* 🇹🇷 TR: Rotate on hover / 🇬🇧 EN: Rotate on hover */
.grpc-hover-rotate {
  transition: transform var(--grpc-animation-duration-normal) var(--grpc-animation-easing-custom);
}

.grpc-hover-rotate:hover {
  transform: rotate(5deg);
}

/* ==========================================================================
   🇹🇷 TR: Fade Animations
   🇬🇧 EN: Fade Animations
   ========================================================================== */

/* 🇹🇷 TR: Fade in / 🇬🇧 EN: Fade in */
@keyframes grpcFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.grpc-fade-in {
  animation: grpcFadeIn var(--grpc-animation-duration-slow) var(--grpc-animation-easing-ease-out);
}

/* 🇹🇷 TR: Fade in up / 🇬🇧 EN: Fade in up */
@keyframes grpcFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grpc-fade-in-up {
  animation: grpcFadeInUp var(--grpc-animation-duration-slow) var(--grpc-animation-easing-ease-out);
}

/* 🇹🇷 TR: Fade in down / 🇬🇧 EN: Fade in down */
@keyframes grpcFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grpc-fade-in-down {
  animation: grpcFadeInDown var(--grpc-animation-duration-slow) var(--grpc-animation-easing-ease-out);
}

/* 🇹🇷 TR: Fade in left / 🇬🇧 EN: Fade in left */
@keyframes grpcFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.grpc-fade-in-left {
  animation: grpcFadeInLeft var(--grpc-animation-duration-slow) var(--grpc-animation-easing-ease-out);
}

/* 🇹🇷 TR: Fade in right / 🇬🇧 EN: Fade in right */
@keyframes grpcFadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.grpc-fade-in-right {
  animation: grpcFadeInRight var(--grpc-animation-duration-slow) var(--grpc-animation-easing-ease-out);
}

/* ==========================================================================
   🇹🇷 TR: Slide Animations
   🇬🇧 EN: Slide Animations
   ========================================================================== */

/* 🇹🇷 TR: Slide in up / 🇬🇧 EN: Slide in up */
@keyframes grpcSlideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.grpc-slide-in-up {
  animation: grpcSlideInUp var(--grpc-animation-duration-slow) var(--grpc-animation-easing-ease-out);
}

/* 🇹🇷 TR: Slide in down / 🇬🇧 EN: Slide in down */
@keyframes grpcSlideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.grpc-slide-in-down {
  animation: grpcSlideInDown var(--grpc-animation-duration-slow) var(--grpc-animation-easing-ease-out);
}

/* ==========================================================================
   🇹🇷 TR: Pulse Animations
   🇬🇧 EN: Pulse Animations
   ========================================================================== */

/* 🇹🇷 TR: Pulse / 🇬🇧 EN: Pulse */
@keyframes grpcPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.grpc-pulse {
  animation: grpcPulse 2s var(--grpc-animation-easing-ease-in-out) infinite;
}

/* 🇹🇷 TR: Bounce / 🇬🇧 EN: Bounce */
@keyframes grpcBounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
}

.grpc-bounce {
  animation: grpcBounce 1s var(--grpc-animation-easing-ease-in-out) infinite;
}

/* ==========================================================================
   🇹🇷 TR: Shake Animations
   🇬🇧 EN: Shake Animations
   ========================================================================== */

@keyframes grpcShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.grpc-shake {
  animation: grpcShake 0.5s var(--grpc-animation-easing-ease-in-out);
}

/* ==========================================================================
   🇹🇷 TR: Loading Animations
   🇬🇧 EN: Loading Animations
   ========================================================================== */

/* 🇹🇷 TR: Spinner / 🇬🇧 EN: Spinner */
@keyframes grpcSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.grpc-spinner {
  animation: grpcSpinner 1s linear infinite;
}

/* 🇹🇷 TR: Dots loading / 🇬🇧 EN: Dots loading */
@keyframes grpcDots {
  0%, 20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: black;
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 0.25em 0 0 black, 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  80%, 100% {
    text-shadow: 0.25em 0 0 black, 0.5em 0 0 black;
  }
}

.grpc-dots::after {
  content: '...';
  animation: grpcDots 1.5s steps(5, end) infinite;
}

/* ==========================================================================
   🇹🇷 TR: Scroll Animations
   🇬🇧 EN: Scroll Animations
   ========================================================================== */

/* 🇹🇷 TR: Reveal on scroll / 🇬🇧 EN: Reveal on scroll */
.grpc-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--grpc-animation-duration-slow) var(--grpc-animation-easing-ease-out);
}

.grpc-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   🇹🇷 TR: Button Animations
   🇬🇧 EN: Button Animations
   ========================================================================== */

/* 🇹🇷 TR: Button ripple effect / 🇬🇧 EN: Button ripple effect */
.grpc-btn-ripple {
  position: relative;
  overflow: hidden;
}

.grpc-btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.grpc-btn-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* ==========================================================================
   🇹🇷 TR: Card Animations
   🇬🇧 EN: Card Animations
   ========================================================================== */

/* 🇹🇷 TR: Card hover effect / 🇬🇧 EN: Card hover effect */
.grpc-card-hover {
  transition: all var(--grpc-animation-duration-normal) var(--grpc-animation-easing-custom);
}

.grpc-card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   🇹🇷 TR: Text Animations
   🇬🇧 EN: Text Animations
   ========================================================================== */

/* 🇹🇷 TR: Typewriter effect / 🇬🇧 EN: Typewriter effect */
@keyframes grpcTypewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.grpc-typewriter {
  overflow: hidden;
  border-right: 2px solid;
  white-space: nowrap;
  animation: grpcTypewriter 3s steps(40, end), grpcBlink 0.75s step-end infinite;
}

@keyframes grpcBlink {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: currentColor;
  }
}

/* ==========================================================================
   🇹🇷 TR: Utility Classes
   🇬🇧 EN: Utility Classes
   ========================================================================== */

/* 🇹🇷 TR: Animation delay / 🇬🇧 EN: Animation delay */
.grpc-delay-1 { animation-delay: 0.1s; }
.grpc-delay-2 { animation-delay: 0.2s; }
.grpc-delay-3 { animation-delay: 0.3s; }
.grpc-delay-4 { animation-delay: 0.4s; }
.grpc-delay-5 { animation-delay: 0.5s; }

/* 🇹🇷 TR: Animation duration / 🇬🇧 EN: Animation duration */
.grpc-duration-fast { animation-duration: var(--grpc-animation-duration-fast); }
.grpc-duration-normal { animation-duration: var(--grpc-animation-duration-normal); }
.grpc-duration-slow { animation-duration: var(--grpc-animation-duration-slow); }

/* 🇹🇷 TR: Animation fill mode / 🇬🇧 EN: Animation fill mode */
.grpc-fill-forwards { animation-fill-mode: forwards; }
.grpc-fill-backwards { animation-fill-mode: backwards; }
.grpc-fill-both { animation-fill-mode: both; }

/* ==========================================================================
   🇹🇷 TR: Performance Optimizations
   🇬🇧 EN: Performance Optimizations
   ========================================================================== */

/* 🇹🇷 TR: Will-change for better performance / 🇬🇧 EN: Will-change for better performance */
.grpc-will-change-transform {
  will-change: transform;
}

.grpc-will-change-opacity {
  will-change: opacity;
}

.grpc-will-change-auto {
  will-change: auto;
}

/* 🇹🇷 TR: Reduce motion for accessibility / 🇬🇧 EN: Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .grpc-transition,
  .grpc-transition-fast,
  .grpc-transition-slow,
  .grpc-hover-scale,
  .grpc-hover-lift,
  .grpc-hover-rotate,
  .grpc-fade-in,
  .grpc-fade-in-up,
  .grpc-fade-in-down,
  .grpc-fade-in-left,
  .grpc-fade-in-right,
  .grpc-slide-in-up,
  .grpc-slide-in-down,
  .grpc-pulse,
  .grpc-bounce,
  .grpc-shake,
  .grpc-spinner,
  .grpc-dots::after,
  .grpc-reveal,
  .grpc-card-hover,
  .grpc-typewriter {
    animation: none !important;
    transition: none !important;
  }
}