/* 
 * Home Slider Animation - Pure CSS
 * Compiled from SCSS with calculated values
 * 
 * Timing configuration:
 * - Adjust --home-slider-delay to change timing (default: 5.7135s)
 * - Total cycle duration is calculated as: var(--home-slider-delay) * 3.413
 * - This ensures all animations stay synchronized
 * - Slide transition: 3.7% of cycle
 * - Column visible duration: 25.6% of cycle
 * - Button fade delay: 5.1% after slide-in
 */

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  3.7% {
    transform: translateX(0);
    opacity: 1;
  }
  29.3% {
    transform: translateX(0);
    opacity: 1;
  }
  33% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideInFromRightFirstColumn {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  29.3% {
    transform: translateX(0);
    opacity: 1;
  }
  33% {
    transform: translateX(-100%);
    opacity: 0;
  }
  87.9% {
    transform: translateX(100%);
    opacity: 0;
  }
  91.6% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes backgroundSlide {
  0% {
    /* Slide 1: --color-main */
    background-position: 0% 0;
  }
  29.3% {
    /* Slide 1: --color-main */
    background-position: 0% 0;
  }
  33% {
    /* Slide 2: --color-accent */
    background-position: 33.33% 0;
  }
  58.6% {
    /* Slide 2: --color-accent */
    background-position: 33.33% 0;
  }
  62.3% {
    /* Slide 3: --color-yellow */
    background-position: 66.66% 0;
  }
  87.9% {
    /* Slide 3: --color-yellow */
    background-position: 66.66% 0;
  }
  91.6% {
    /* Slide 1: --color-main */
    background-position: 100% 0;
  }
  100% {
    /* Slide 1: --color-main */
    background-position: 100% 0;
  }
}

@keyframes fadeInButton {
  0% {
    opacity: 0;
  }
  8.8% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  29.3% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInButtonFirstColumn {
  0% {
    opacity: 0;
  }
  5.1% {
    opacity: 0;
  }
  7.3% {
    opacity: 1;
  }
  29.3% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  87.9% {
    opacity: 0;
  }
  96.7% {
    opacity: 0;
  }
  98.9% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Slide-in with bounce effect for p elements - slide from right, bounce to left */
@keyframes slideInBounce {
  0% {
    transform: translateX(var(--home-slider-bounce-distance));
    opacity: 0;
  }
  4.4% {
    transform: translateX(var(--home-slider-bounce-distance));
    opacity: 0;
  }
  6.6% {
    transform: translateX(-5px);
    opacity: 1;
  }
  7.3% {
    transform: translateX(0);
    opacity: 1;
  }
  29.3% {
    transform: translateX(0);
    opacity: 1;
  }
  33% {
    transform: translateX(var(--home-slider-bounce-distance));
    opacity: 0;
  }
  100% {
    transform: translateX(var(--home-slider-bounce-distance));
    opacity: 0;
  }
}

@keyframes slideInBounceFirstColumn {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  29.3% {
    transform: translateX(0);
    opacity: 1;
  }
  33% {
    transform: translateX(30px);
    opacity: 0;
  }
  87.9% {
    transform: translateX(30px);
    opacity: 0;
  }
  93.9% {
    transform: translateX(30px);
    opacity: 0;
  }
  96.1% {
    transform: translateX(-5px);
    opacity: 1;
  }
  96.8% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

:root {
  --home-slider-delay: 5s;
  --home-slider-bounce-distance: 100px;
}

body:not(.homeslider-visible),
body:not(:has(.acf-fc-row.acf-fc-text.home-slider)) {
  --home-slider-delay: 15s;
}

/* Slide indicator animations */
@keyframes slideIndicator1 {
  0% {
    /* Slide 1: --color-main */
    background: transparent;
    border: 3.3px solid var(--color-accent);
  }
  29.5% {
    /* Slide 1: --color-main */
    background: transparent;
    border: 3.3px solid var(--color-accent);
  }
  30.5% {
    /* Slide 2: --color-accent */
    background: white;
    border: 3.3px solid var(--color-accent);
  }
  58.5% {
    /* Slide 2: --color-accent */
    background: white;
    border: 3.3px solid var(--color-accent);
  }
  59.5% {
    /* Slide 3: --color-yellow */
    background: var(--color-accent);
    border: 3.3px solid var(--color-yellow);
  }
  89% {
    /* Slide 3: --color-yellow */
    background: var(--color-accent);
    border: 3.3px solid var(--color-yellow);
  }
  90% {
    /* Slide 1: --color-main */
    background: transparent;
    border: 3.3px solid var(--color-accent);
  }
  100% {
    /* Slide 1: --color-main */
    background: transparent;
    border: 3.3px solid var(--color-accent);
  }
}

@keyframes slideIndicator2 {
  0% {
    /* Slide 1: --color-main */
    background: var(--color-accent);
    border: 3.3px solid var(--color-main);
  }
  29.5% {
    /* Slide 1: --color-main */
    background: var(--color-accent);
    border: 3.3px solid var(--color-main);
  }
  30.5% {
    /* Slide 2: --color-accent */
    background: transparent;
    border: 3.3px solid white;
  }
  58.5% {
    /* Slide 2: --color-accent */
    background: transparent;
    border: 3.3px solid white;
  }
  59.5% {
    /* Slide 3: --color-yellow */
    background: var(--color-accent);
    border: 3.3px solid var(--color-yellow);
  }
  89% {
    /* Slide 3: --color-yellow */
    background: var(--color-accent);
    border: 3.3px solid var(--color-yellow);
  }
  90% {
    /* Slide 1: --color-main */
    background: var(--color-accent);
    border: 3.3px solid var(--color-main);
  }
  100% {
    /* Slide 1: --color-main */
    background: var(--color-accent);
    border: 3.3px solid var(--color-main);
  }
}

@keyframes slideIndicator3 {
  0% {
    /* Slide 1: --color-main */
    background: var(--color-accent);
    border: 3.3px solid var(--color-main);
  }
  29.5% {
    /* Slide 1: --color-main */
    background: var(--color-accent);
    border: 3.3px solid var(--color-main);
  }
  30.5% {
    /* Slide 2: --color-accent */
    background: white;
    border: 3.3px solid var(--color-accent);
  }
  58.5% {
    /* Slide 2: --color-accent */
    background: white;
    border: 3.3px solid var(--color-accent);
  }
  59.5% {
    /* Slide 3: --color-yellow */
    background: transparent;
    border: 3.3px solid var(--color-accent);
  }
  89% {
    /* Slide 3: --color-yellow */
    background: transparent;
    border: 3.3px solid var(--color-accent);
  }
  90% {
    /* Slide 1: --color-main */
    background: var(--color-accent);
    border: 3.3px solid var(--color-main);
  }
  100% {
    /* Slide 1: --color-main */
    background: var(--color-accent);
    border: 3.3px solid var(--color-main);
  }
}

.acf-fc-row.acf-fc-text.home-slider {
  margin-top: -85px;
  @media (min-width: 1001px) {
    margin-top: -210px;
  }
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    to right,
    var(--color-main) 0%,
    var(--color-main) 25%,
    var(--color-accent) 25%,
    var(--color-accent) 50%,
    var(--color-yellow) 50%,
    var(--color-yellow) 75%,
    var(--color-main) 75%,
    var(--color-main) 100%
  );
  background-size: 400% 100%;
  animation: backgroundSlide calc(var(--home-slider-delay) * 3.413) infinite
    ease;
}

/* Slide indicators - three circles */
.home-slider-indicators {
  position: absolute;
  bottom: 40px;
  left: 15px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.home-slider-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.home-slider-indicator-1 {
  animation: slideIndicator1 calc(var(--home-slider-delay) * 3.413) infinite
    ease;
}

.home-slider-indicator-2 {
  animation: slideIndicator2 calc(var(--home-slider-delay) * 3.413) infinite
    ease;
}

.home-slider-indicator-3 {
  animation: slideIndicator3 calc(var(--home-slider-delay) * 3.413) infinite
    ease;
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-columns {
  position: relative;
  width: 100%;
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  animation: slideInFromRight calc(var(--home-slider-delay) * 3.413) infinite;
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-1 {
  animation: slideInFromRightFirstColumn calc(var(--home-slider-delay) * 3.413)
    infinite;
  animation-delay: 0s;
  position: relative;

  a.button {
    box-shadow: none;
  }
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-2 {
  animation-delay: var(--home-slider-delay);

  a.button {
    background-color: white;
    border-color: white;
    color: var(--body-color);

    &:before {
      color: var(--color-accent);
    }

    &:hover {
      color: var(--color-accent);
    }
  }
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-3 {
  animation-delay: calc(var(--home-slider-delay) * 2);
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column a.button {
  opacity: 0;
  animation: fadeInButton calc(var(--home-slider-delay) * 3.413) infinite;
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-2 a.button {
  animation-delay: var(--home-slider-delay);
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-3 a.button {
  animation-delay: calc(var(--home-slider-delay) * 2);
}

/* Staggered slide-in animations for p elements only */
.acf-fc-row.acf-fc-text.home-slider .acf-fc-column p {
  opacity: 0;
  margin: 0;
  animation: slideInBounce calc(var(--home-slider-delay) * 3.413) infinite;
}

/* First column p elements */
.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-1 p {
  animation-name: slideInBounceFirstColumn;
  animation-delay: 0s;
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-1 p:nth-of-type(2) {
  animation-delay: 0.1s;
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-1 p:nth-of-type(3) {
  animation-delay: 0.2s;
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-1 p:nth-of-type(4) {
  animation-delay: 0.3s;
}

/* Second column p elements */
.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-2 p {
  animation-delay: var(--home-slider-delay);
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-2 p:nth-of-type(2) {
  animation-delay: calc(var(--home-slider-delay) + 0.1s);
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-2 p:nth-of-type(3) {
  animation-delay: calc(var(--home-slider-delay) + 0.2s);
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-2 p:nth-of-type(4) {
  animation-delay: calc(var(--home-slider-delay) + 0.3s);
}

/* Third column p elements */
.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-3 p {
  animation-delay: calc(var(--home-slider-delay) * 2);
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-3 p:nth-of-type(2) {
  animation-delay: calc(var(--home-slider-delay) * 2 + 0.1s);
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-3 p:nth-of-type(3) {
  animation-delay: calc(var(--home-slider-delay) * 2 + 0.2s);
}

.acf-fc-row.acf-fc-text.home-slider .acf-fc-column-3 p:nth-of-type(4) {
  animation-delay: calc(var(--home-slider-delay) * 2 + 0.3s);
}

@keyframes headerColorChange {
  0% {
    /* Slide 1: --color-main */
    color: white;
  }
  58.6% {
    /* Slide 2: --color-accent */
    color: white;
  }
  59.29% {
    /* Just before transition - keep white */
    color: white;
  }
  59.3% {
    /* Slide 3: --color-yellow */
    color: var(--body-color);
  }
  88.59% {
    /* Just before transition - keep body-color */
    color: var(--body-color);
  }
  88.6% {
    /* Slide 1: --color-main */
    color: white;
  }
  100% {
    /* Slide 1: --color-main */
    color: white;
  }
}

@keyframes logoColorChange {
  0% {
    /* Slide 1: --color-main */
    color: var(--color-accent);
  }
  29.3% {
    /* Slide 1: --color-main */
    color: var(--color-accent);
  }
  30.29% {
    /* Just before transition - keep accent */
    color: var(--color-accent);
  }
  30.3% {
    /* Slide 2: --color-accent */
    color: white;
  }
  58.6% {
    /* Slide 2: --color-accent */
    color: white;
  }
  59.29% {
    /* Just before transition - keep white */
    color: white;
  }
  59.3% {
    /* Slide 3: --color-yellow */
    color: var(--color-accent);
  }
  84.99% {
    /* Just before transition - keep accent */
    color: var(--color-accent);
  }
  85.0% {
    /* Slide 1: --color-main */
    color: var(--color-accent);
  }
  100% {
    /* Slide 1: --color-main */
    color: var(--color-accent);
  }
}

@keyframes mobileMenuColorChange {
  0% {
    /* Slide 1: --color-main */
    color: white;
  }
  29.3% {
    /* Slide 1: --color-main */
    color: white;
  }
  32.39% {
    /* Just before transition - keep white */
    color: white;
  }
  32.4% {
    /* Slide 2: --color-accent */
    color: white;
  }
  58.6% {
    /* Slide 2: --color-accent */
    color: white;
  }
  59.29% {
    /* Just before transition - keep white */
    color: white;
  }
  59.3% {
    /* Slide 3: --color-yellow */
    color: var(--body-color);
  }
  89.49% {
    /* Just before transition - keep body-color */
    color: var(--body-color);
  }
  89.5% {
    /* Slide 1: --color-main */
    color: white;
  }
  100% {
    /* Slide 1: --color-main */
    color: white;
  }
}

/* Animate header background and text color */
body:not(:has(.mission-header)) {
  header.site-header .site-header-top-container {
    color: white;
    background: linear-gradient(
      to right,
      var(--color-main) 0%,
      var(--color-main) 25%,
      var(--color-accent) 25%,
      var(--color-accent) 50%,
      var(--color-yellow) 50%,
      var(--color-yellow) 75%,
      var(--color-main) 75%,
      var(--color-main) 100%
    );
    background-size: 400% 100%;
    animation:
      backgroundSlide calc(var(--home-slider-delay) * 3.413) infinite ease,
      headerColorChange calc(var(--home-slider-delay) * 3.413) steps(1, end) infinite;
  }

  .site-header-top-container .site-header-logo a {
    color: var(--color-accent);
    animation: logoColorChange calc(var(--home-slider-delay) * 3.413) steps(1, end) infinite;
  }

  .mobile-menu-trigger {
    color: white;
    animation: mobileMenuColorChange calc(var(--home-slider-delay) * 3.413) steps(1, end) infinite;
  }

  /* Reduced motion: No animations, show only first slide with first colors */
  @media (prefers-reduced-motion: reduce) {
    .acf-fc-row.acf-fc-text.home-slider {
      animation: none;
      background: var(--color-main);
      background-size: 100% 100%;
    }

    .home-slider-indicator-1 {
      animation: none;
      background: transparent;
      border: 3.3px solid var(--color-accent);
    }

    .home-slider-indicator-2 {
      animation: none;
      background: var(--color-accent);
      border: 3.3px solid var(--color-main);
    }

    .home-slider-indicator-3 {
      animation: none;
      background: var(--color-accent);
      border: 3.3px solid transparent;
    }

    .acf-fc-row.acf-fc-text.home-slider .acf-fc-column {
      animation: none;
      opacity: 0;
    }

    .acf-fc-row.acf-fc-text.home-slider .acf-fc-column-1 {
      animation: none;
      opacity: 1;
      position: relative;
    }

    .acf-fc-row.acf-fc-text.home-slider .acf-fc-column-1 p {
      animation: none;
      opacity: 1;
      transform: translateX(0);
    }

    .acf-fc-row.acf-fc-text.home-slider .acf-fc-column-1 a.button {
      animation: none;
      opacity: 1;
    }

    .site-header-top-container {
      animation: none;
      background: var(--color-main);
      color: white;
    }

    .site-header-top-container .site-header-logo a {
      animation: none;
      color: var(--color-accent);
    }

    .mobile-menu-trigger {
      animation: none;
      color: white;
    }
  }
}