/* Per-section slow, distinct color cycles */

/* Header/Footer: subtle grayscale → blue */
@keyframes bgHeaderCycle {
  0% { background-color: #060606; }
  25% { background-color: #0c0f18; }
  50% { background-color: #14213d; }
  75% { background-color: #0c0f18; }
  100% { background-color: #060606; }
}
header.header-holder,
footer.footer { animation: bgHeaderCycle 30s linear infinite alternate both; }

/* Services (page-split): left vs right distinct */
@keyframes bgServicesLeftCycle {
  0% { background-color: #ff1e5e; }
  25% { background-color: #ff4d3b; }
  50% { background-color: #ff7a00; }
  75% { background-color: #ff4d3b; }
  100% { background-color: #ff1e5e; }
}
@keyframes bgServicesRightCycle {
  0% { background-color: #7b2cbf; }
  25% { background-color: #9d4edd; }
  50% { background-color: #ff006e; }
  75% { background-color: #9d4edd; }
  100% { background-color: #7b2cbf; }
}
#services { animation: bgServicesLeftCycle 30s linear infinite alternate both; }
#services .split-color { animation: bgServicesRightCycle 30s linear infinite alternate both; }

/* Portfolio: distinct left/right */
@keyframes bgPortfolioLeftCycle {
  0% { background-color: #06d6a0; }
  25% { background-color: #118ab2; }
  50% { background-color: #073b4c; }
  75% { background-color: #118ab2; }
  100% { background-color: #06d6a0; }
}
@keyframes bgPortfolioRightCycle {
  0% { background-color: #ffd166; }
  25% { background-color: #ef476f; }
  50% { background-color: #8338ec; }
  75% { background-color: #ef476f; }
  100% { background-color: #ffd166; }
}
#portfolio { animation: bgPortfolioLeftCycle 30s linear infinite alternate both; }
#portfolio .split-color { animation: bgPortfolioRightCycle 30s linear infinite alternate both; }

/* Inspire: violets → pinks */
@keyframes bgInspireCycle {
  0% { background-color: #7b2cbf; }
  25% { background-color: #ff006e; }
  50% { background-color: #8338ec; }
  75% { background-color: #ff006e; }
  100% { background-color: #7b2cbf; }
}
#inspire { animation: bgInspireCycle 30s linear infinite alternate both; }

/* About: distinct left/right */
@keyframes bgAboutLeftCycle {
  0% { background-color: #1e1e1e; }
  25% { background-color: #2a2a2a; }
  50% { background-color: #334e68; }
  75% { background-color: #2a2a2a; }
  100% { background-color: #1e1e1e; }
}
@keyframes bgAboutRightCycle {
  0% { background-color: #2d6a6a; }
  25% { background-color: #1b998b; }
  50% { background-color: #3a86ff; }
  75% { background-color: #1b998b; }
  100% { background-color: #2d6a6a; }
}
#about { animation: bgAboutLeftCycle 30s linear infinite alternate both; }
#about .split-color { animation: bgAboutRightCycle 30s linear infinite alternate both; }

/* News: distinct left/right */
@keyframes bgNewsLeftCycle {
  0% { background-color: #b36a00; }
  25% { background-color: #c77d00; }
  50% { background-color: #e0a106; }
  75% { background-color: #c77d00; }
  100% { background-color: #b36a00; }
}
@keyframes bgNewsRightCycle {
  0% { background-color: #590d22; }
  25% { background-color: #800f2f; }
  50% { background-color: #c9184a; }
  75% { background-color: #800f2f; }
  100% { background-color: #590d22; }
}
#news { animation: bgNewsLeftCycle 30s linear infinite alternate both; }
#news .split-color { animation: bgNewsRightCycle 30s linear infinite alternate both; }

/* Skills: distinct left/right */
@keyframes bgSkillsLeftCycle {
  0% { background-color: #1b6f3a; }
  25% { background-color: #2b9348; }
  50% { background-color: #55a630; }
  75% { background-color: #2b9348; }
  100% { background-color: #1b6f3a; }
}
@keyframes bgSkillsRightCycle {
  0% { background-color: #0f4c5c; }
  25% { background-color: #206a83; }
  50% { background-color: #34a0a4; }
  75% { background-color: #206a83; }
  100% { background-color: #0f4c5c; }
}
#skills { animation: bgSkillsLeftCycle 30s linear infinite alternate both; }
#skills .split-color { animation: bgSkillsRightCycle 30s linear infinite alternate both; }

/* Team: distinct left/right */
@keyframes bgTeamLeftCycle {
  0% { background-color: #0ea5b5; }
  25% { background-color: #0284c7; }
  50% { background-color: #3730a3; }
  75% { background-color: #0284c7; }
  100% { background-color: #0ea5b5; }
}
@keyframes bgTeamRightCycle {
  0% { background-color: #ffb703; }
  25% { background-color: #fb8500; }
  50% { background-color: #ff006e; }
  75% { background-color: #fb8500; }
  100% { background-color: #ffb703; }
}
#team { animation: bgTeamLeftCycle 30s linear infinite alternate both; }
#team .split-color { animation: bgTeamRightCycle 30s linear infinite alternate both; }

/* Clients: desaturated blues */
@keyframes bgClientsCycle {
  0% { background-color: #243b53; }
  25% { background-color: #2b4c6f; }
  50% { background-color: #334e68; }
  75% { background-color: #2b4c6f; }
  100% { background-color: #243b53; }
}
#clients { animation: bgClientsCycle 30s linear infinite alternate both; }

/* Contact: distinct left/right */
@keyframes bgContactLeftCycle {
  0% { background-color: #c5007c; }
  25% { background-color: #ff3e7f; }
  50% { background-color: #ff7a00; }
  75% { background-color: #ff3e7f; }
  100% { background-color: #c5007c; }
}
@keyframes bgContactRightCycle {
  0% { background-color: #3a0ca3; }
  25% { background-color: #4361ee; }
  50% { background-color: #7209b7; }
  75% { background-color: #4361ee; }
  100% { background-color: #3a0ca3; }
}
#contact { animation: bgContactLeftCycle 30s linear infinite alternate both; }
#contact .split-color { animation: bgContactRightCycle 30s linear infinite alternate both; }

/* Home uses a hero background image; leave static by default */
#home { animation: none; }

/* Performance hint */
header.header-holder, footer.footer, .section, .split-color { will-change: background-color; }

/* Enforce Rocheston palette via JS; disable legacy CSS animations */
header.header-holder,
footer.footer,
#home, #home .split-color,
#tech-specs, #tech-specs .split-color,
#what-is-zelwall, #what-is-zelwall .split-color,
#faq, #faq .split-color,
#screenshots, #screenshots .split-color,
#launch, #launch .split-color {
  animation: none !important;
}

/* Tech Specs: distinct left/right */
@keyframes bgTechSpecsLeftCycle {
  0% { background-color: #003049; }
  25% { background-color: #1d3557; }
  50% { background-color: #2a9d8f; }
  75% { background-color: #1d3557; }
  100% { background-color: #003049; }
}
@keyframes bgTechSpecsRightCycle {
  0% { background-color: #e76f51; }
  25% { background-color: #f4a261; }
  50% { background-color: #e9c46a; }
  75% { background-color: #f4a261; }
  100% { background-color: #e76f51; }
}
#tech-specs { animation: bgTechSpecsLeftCycle 30s linear infinite alternate both; }
#tech-specs .split-color { animation: bgTechSpecsRightCycle 30s linear infinite alternate both; }

/* FAQ: distinct left/right */
@keyframes bgFaqLeftCycle {
  0% { background-color: #14213d; }
  25% { background-color: #1f2a55; }
  50% { background-color: #457b9d; }
  75% { background-color: #1f2a55; }
  100% { background-color: #14213d; }
}
@keyframes bgFaqRightCycle {
  0% { background-color: #ff006e; }
  25% { background-color: #fb5607; }
  50% { background-color: #ffbe0b; }
  75% { background-color: #fb5607; }
  100% { background-color: #ff006e; }
}
#faq { animation: bgFaqLeftCycle 30s linear infinite alternate both; }
#faq .split-color { animation: bgFaqRightCycle 30s linear infinite alternate both; }

/* Screenshots: distinct left/right */
@keyframes bgScreenshotsLeftCycle {
  0% { background-color: #264653; }
  25% { background-color: #2a9d8f; }
  50% { background-color: #8ab17d; }
  75% { background-color: #2a9d8f; }
  100% { background-color: #264653; }
}
@keyframes bgScreenshotsRightCycle {
  0% { background-color: #ff9f1c; }
  25% { background-color: #ffbf69; }
  50% { background-color: #ffd166; }
  75% { background-color: #ffbf69; }
  100% { background-color: #ff9f1c; }
}
#screenshots { animation: bgScreenshotsLeftCycle 30s linear infinite alternate both; }
#screenshots .split-color { animation: bgScreenshotsRightCycle 30s linear infinite alternate both; }

/* Launch: distinct left/right */
@keyframes bgLaunchLeftCycle {
  0% { background-color: #0a9396; }
  25% { background-color: #005f73; }
  50% { background-color: #94d2bd; }
  75% { background-color: #005f73; }
  100% { background-color: #0a9396; }
}
@keyframes bgLaunchRightCycle {
  0% { background-color: #ee9b00; }
  25% { background-color: #ca6702; }
  50% { background-color: #bb3e03; }
  75% { background-color: #ca6702; }
  100% { background-color: #ee9b00; }
}
#launch { animation: bgLaunchLeftCycle 30s linear infinite alternate both; }
#launch .split-color { animation: bgLaunchRightCycle 30s linear infinite alternate both; }