/* ========================================
   CSS ANIMATIONS OPTIMIZATION
   ======================================== */

/* CSS Custom Properties for Animation Values */
:root {
  /* Timing Functions */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Duration Values */
  --duration-fast: 0.3s;
  --duration-normal: 0.5s;
  --duration-slow: 0.75s;
  --duration-slower: 1s;
  
  /* Transform Values */
  --translate-distance: 100%;
  
  /* Color Values */
  --color-1: hsl(210 100% 59%);
  --color-2: hsl(310 100% 59%);
}

/* ========================================
   BASIC ANIMATIONS
   ======================================== */

/* Fade Down Animation */
@keyframes fade-down {
  0% {
    opacity: 0;
    transform: translateY(calc(-1 * var(--translate-distance)));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Left Animation */
@keyframes fade-left {
  0% {
    opacity: 0;
    transform: translateX(calc(-1 * var(--translate-distance)));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade Up Animation */
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(var(--translate-distance));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   SPECIAL EFFECTS
   ======================================== */

/* Clip Right Animation */
@keyframes clip-right {
  0% {
    clip-path: inset(0 0 0 100%);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);   
    opacity: 1; 
  }
}

/* Background Shift Animation */
@keyframes bgShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Gold Shift Animation (Oscillating) */
@keyframes goldShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ========================================
   ADVANCED EFFECTS
   ======================================== */

/* CSS Custom Properties for Gradient Animation */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


@property --color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(98 100% 62%);
}

@property --color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: hsl(204 100% 59%);
}


/* Glow Border Animation */
@keyframes glow-border {
  from {
    --angle: 3600deg;
  }
  to {
    --angle: 0deg;
  }
}

/* Gradient Change Animation */
@keyframes gradient-change {
  to {
    --color-1: hsl(210 100% 59%);
    --color-2: hsl(310 100% 59%);
  }
}

/* ========================================
   LOADER ANIMATIONS
   ======================================== */

/* Clockwise Rotation */
@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

/* Counter-clockwise Rotation */
@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* Loading Spinner Animation */
@keyframes lspin {
  0%, 100% {
    box-shadow: 0.2em 0 0 0 currentcolor;
  }
  12% {
    box-shadow: 0.2em 0.2em 0 0 currentcolor;
  }
  25% {
    box-shadow: 0 0.2em 0 0 currentcolor;
  }
  37% {
    box-shadow: -0.2em 0.2em 0 0 currentcolor;
  }
  50% {
    box-shadow: -0.2em 0 0 0 currentcolor;
  }
  62% {
    box-shadow: -0.2em -0.2em 0 0 currentcolor;
  }
  75% {
    box-shadow: 0 -0.2em 0 0 currentcolor;
  }
  87% {
    box-shadow: 0.2em -0.2em 0 0 currentcolor;
  }
}

/* ========================================
   ANIMATION APPLICATIONS
   ======================================== */

/* Initial State for Animated Elements */
.animate:not(.services-container),
.service {
  opacity: 0;
  will-change: opacity, transform;
}

/* Logo Animation */
.logo.in-view {
  animation: fade-down var(--duration-slow) var(--ease-standard) forwards;
}

/* Slogan Animations */
.slo h1.in-view {
  animation: fade-left var(--duration-slow) var(--ease-out) 0.4s forwards;
}

.slo h1.in-view:nth-child(2) {
  animation: fade-left var(--duration-slow) var(--ease-out) 0.8s forwards;
}

/* Man Image Animation */
.man.in-view {
  animation: clip-right var(--duration-slower) var(--ease-in-out) 1s forwards;
}

/* Services Container Animations */
.services-container.in-view .service {
  animation: fade-down 0.7s var(--ease-out) forwards;
  animation-delay: calc(1.5s + var(--i) * 0.2s);
}

/* Button Container Animation */
.btn-container.in-view {
  animation: fade-up var(--duration-slower) var(--ease-in-out) 1s forwards;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Optimize animations for better performance */
.animate,
.service,
.logo,
.slo h1,
.man,
.btn-container {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Reduce repaints for transform animations */
.logo,
.slo h1,
.man,
.btn-container {
  will-change: transform, opacity;
}

/* Optimize clip-path animations */
.man {
  will-change: clip-path;
}

/* ========================================
   RESPONSIVE CONSIDERATIONS
   ======================================== */

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

/* Optimize for high-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .animate,
  .service {
    transform: translateZ(0);
  }
}


.before.bepis{
  animation-play-state: paused;
}

.before.in-view{
  animation-play-state: running;
}