/**
 * DiabloDesign Crosses - Floating Crosses Effect
 * @package     plg_system_diablodesign_crosses
 * @version     1.0.0
 * @author      DiabloDesign.eu
 */

/* Base styles for sections with crosses */
.dd-crosses-container {
  position: relative;
  overflow: hidden;
}

/* Ensure content is above crosses */
.dd-crosses-container > *:not(.dd-cross) {
  position: relative;
  z-index: 1;
}

/* Individual cross element */
.dd-cross {
  position: absolute;
  font-weight: 700;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  will-change: transform, opacity;
  line-height: 1;
}

/* Animation with rotation, fade and drift */
@keyframes dd-rotateFadeDrift {
  0% {
    transform: rotate(0deg) translateY(0);
    opacity: var(--dd-cross-opacity-min, 0.05);
  }
  25% {
    opacity: calc((var(--dd-cross-opacity-min, 0.05) + var(--dd-cross-opacity-max, 0.2)) / 2);
  }
  50% {
    transform: rotate(180deg) translateY(var(--dd-cross-drift, -5px));
    opacity: var(--dd-cross-opacity-max, 0.2);
  }
  75% {
    opacity: calc((var(--dd-cross-opacity-min, 0.05) + var(--dd-cross-opacity-max, 0.2)) / 2);
  }
  100% {
    transform: rotate(360deg) translateY(0);
    opacity: var(--dd-cross-opacity-min, 0.05);
  }
}

/* Animation without drift */
@keyframes dd-rotateFade {
  0% {
    transform: rotate(0deg);
    opacity: var(--dd-cross-opacity-min, 0.05);
  }
  25% {
    opacity: calc((var(--dd-cross-opacity-min, 0.05) + var(--dd-cross-opacity-max, 0.2)) / 2);
  }
  50% {
    transform: rotate(180deg);
    opacity: var(--dd-cross-opacity-max, 0.2);
  }
  75% {
    opacity: calc((var(--dd-cross-opacity-min, 0.05) + var(--dd-cross-opacity-max, 0.2)) / 2);
  }
  100% {
    transform: rotate(360deg);
    opacity: var(--dd-cross-opacity-min, 0.05);
  }
}

/* Counter-clockwise rotation with drift */
@keyframes dd-rotateCounterDrift {
  0% {
    transform: rotate(0deg) translateY(0);
    opacity: var(--dd-cross-opacity-min, 0.05);
  }
  25% {
    opacity: calc((var(--dd-cross-opacity-min, 0.05) + var(--dd-cross-opacity-max, 0.2)) / 2);
  }
  50% {
    transform: rotate(-180deg) translateY(var(--dd-cross-drift, -5px));
    opacity: var(--dd-cross-opacity-max, 0.2);
  }
  75% {
    opacity: calc((var(--dd-cross-opacity-min, 0.05) + var(--dd-cross-opacity-max, 0.2)) / 2);
  }
  100% {
    transform: rotate(-360deg) translateY(0);
    opacity: var(--dd-cross-opacity-min, 0.05);
  }
}

/* Counter-clockwise rotation without drift */
@keyframes dd-rotateCounter {
  0% {
    transform: rotate(0deg);
    opacity: var(--dd-cross-opacity-min, 0.05);
  }
  25% {
    opacity: calc((var(--dd-cross-opacity-min, 0.05) + var(--dd-cross-opacity-max, 0.2)) / 2);
  }
  50% {
    transform: rotate(-180deg);
    opacity: var(--dd-cross-opacity-max, 0.2);
  }
  75% {
    opacity: calc((var(--dd-cross-opacity-min, 0.05) + var(--dd-cross-opacity-max, 0.2)) / 2);
  }
  100% {
    transform: rotate(-360deg);
    opacity: var(--dd-cross-opacity-min, 0.05);
  }
}

/* Apply animation */
.dd-cross[data-drift="true"] {
  animation: dd-rotateFadeDrift linear infinite;
}

.dd-cross[data-drift="false"] {
  animation: dd-rotateFade linear infinite;
}

.dd-cross[data-direction="counter"][data-drift="true"] {
  animation: dd-rotateCounterDrift linear infinite;
}

.dd-cross[data-direction="counter"][data-drift="false"] {
  animation: dd-rotateCounter linear infinite;
}

/* Hover-only mode */
.dd-crosses-hover .dd-cross {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dd-crosses-hover:hover .dd-cross {
  opacity: var(--dd-cross-opacity-min, 0.05);
}

/* Mobile disable */
@media (max-width: 768px) {
  body.dd-crosses-no-mobile .dd-cross {
    display: none;
  }
}

/* Performance optimization */
.dd-cross {
  transform: translateZ(0);
  backface-visibility: hidden;
}
