/**
 * Page Line Divider Widget Styles
 * 
 * @package TM Catalog
 * @author Templines
 * @link templines.com
 */

/* Base Styles */
body .templines-line-page-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  z-index: -1;
  max-width: 87.6875rem;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  pointer-events: none;
}

body .templines-line-page-wrap span {
  width: 0.0625rem;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  pointer-events: none;
}

/* Animation Styles */
body .templines-line-page-wrap.animated {
  --gradient-start: #ff5f1d;
  --gradient-end: transparent;
  --gradient-size: 250%;
  --animation-duration: 28s;
  --animation-delay: 1s;
  --animation-direction: normal;
}

body .templines-line-page-wrap.animated span {
  min-height: 100vh;
  background: repeating-linear-gradient(
    0deg,
    var(--gradient-start),
    var(--gradient-end) 25vh,
    var(--gradient-end) 320vh
  );
  background-size: 100% var(--gradient-size);
  -webkit-animation: tmLineAnimation var(--animation-duration) linear infinite;
  animation: tmLineAnimation var(--animation-duration) linear infinite;
  animation-direction: var(--animation-direction);
}

/* Dynamic Staggered Animation - delays are set via inline styles */
/* The delay for each line is calculated as: line_index * animation_delay */
/* This creates a wave effect where each line starts slightly after the previous one */

/* Variation in gradient size for visual interest */
body .templines-line-page-wrap.animated span:nth-child(even) {
  background-size: 100% calc(var(--gradient-size) - 20%);
}

/* Keyframes Animation */
@-webkit-keyframes tmLineAnimation {
  0% {
    background-position: 0 100%;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes tmLineAnimation {
  0% {
    background-position: 0 100%;
  }
  100% {
    background-position: 0 0;
  }
}

/* Elementor Editor Support */
.elementor-editor-active .templines-line-page-wrap {
  pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  body .templines-line-page-wrap {
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  body .templines-line-page-wrap {
    max-width: 95%;
  }
}

@media (max-width: 480px) {
  body .templines-line-page-wrap {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  /* Reduce animation complexity on mobile */
  body .templines-line-page-wrap.animated span {
    background-size: 100% 200%;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  body .templines-line-page-wrap.animated span {
    -webkit-animation: none;
    animation: none;
  }
}