:root {
  --parallax-offset: 30vh;
  /* --content-offset: 40vh; */
  --content-offset: 10vh;
  --transition-speed: 1.2s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 15px;
  overflow: hidden;
}

.app {
  display: flex;
  justify-content: center;
}

.section {
  position: fixed;
  width: 100%;
  height: calc(100vh + var(--parallax-offset));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateY(var(--parallax-offset));
  transition: all var(--transition-speed) cubic-bezier(0.22, 0.44, 0, 1);
  backface-visibility: hidden;
  will-change: transform;
  animation: flowing-river 5s infinite alternate;
}

.section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.section:nth-child(1) {
  background-color: #6000b1;
  background-image: url('../images/cx-works-bg-8.webp');
  background-size: cover;
  background-position: center;
  transform: translateY(calc(-1 * var(--parallax-offset) / 2));
  z-index: 9;
}

.section:nth-child(2) {
  background-color: #1f0048;
  background-size: cover;
  background-position: center;
  background-image: url('../images/bricx-new-bg.webp');
  z-index: 8;
}

.section:nth-child(3) {
  background-color: #70008c;
  background-size: cover;
  background-position: center;
  background-image: url('../images/expertise-new-bg.webp');
  z-index: 7;
}

.section:nth-child(4) {
  background-color: #140030;
  background-size: cover;
  background-position: center;
  background-image: url('../images/practices-new-bg.webp');
  z-index: 6;
}

.section:nth-child(5) {
  background-color: #422777;
  background-size: cover;
  background-position: center;
  background-image: url('../images/industries-new-bg.webp');
  z-index: 5;
}

.section:nth-child(6) {
  background-color: #0f002a;
  background-size: cover;
  background-position: center;
  background-image: url('../images/about-new-bg.webp');
  z-index: 4;
}

.section:nth-child(7) {
  background-color: #5b0091;
  background-size: cover;
  background-position: center;
  background-image: url('../images/cx-works-bg-40.webp');
  z-index: 3;
}

.section:nth-child(8) {
  background-color: #0d1441;
  background-size: cover;
  background-position: center;
  background-image: url('../images/Image-forms.webp');
  z-index: 2;
}

.section:nth-child(9) {
  background-color: #39004c;
  background-size: cover;
  background-position: center;
  background-image: url('../images/cx-works-bg-8.webp');
  z-index: 1;
}

.parallax-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh + var(--parallax-offset));
  text-align: center;
  transform: translateY(var(--content-offset));
  color: white;
  transition: all calc(var(--transition-speed) + 0.5s) cubic-bezier(0.22, 0.44, 0, 1);
  will-change: transform;
}

.section.up-scroll {
  transform: translate3d(0, calc(-1 * var(--parallax-offset) / 2), 0);
}

.section.up-scroll + .section {
  transform: translate3d(0, var(--parallax-offset), 0);
}

.section.down-scroll {
  transform: translate3d(0, calc(-1 * (100vh + var(--parallax-offset))), 0);
}

.section.down-scroll + .section:not(.down-scroll) {
  transform: translate3d(0, calc(-1 * var(--parallax-offset) / 2), 0);
}

.section.up-scroll .parallax-wrapper {
  transform: translateY(calc(var(--parallax-offset) / 2));
}

.section.down-scroll .parallax-wrapper {
  transform: translateY(var(--content-offset));
}

.section:not(.up-scroll):not(.down-scroll) .parallax-wrapper {
  transform: translateY(0);
}

#progress-bar-container {
  position: fixed;
  top: 100px;
  left: 20px;
  width: 2px;
  height: 80%;
  background: rgba(148, 144, 144, 0.1);
  z-index: 1000;
}

#progress-bar {
  width: 100%;
  height: 0%;
  background: #ccc;
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  transition: height 0.3s ease-in-out;
}
 
.orbit-system {
  position: relative;
  width: 600px;
  height: 600px;
  margin: auto;
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.orbit-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin linear infinite;
}

.orbit-circle::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: conic-gradient(#090a1459, #c5c5c5a3, #d068ec, #090a1459);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #090a1459 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #090a1459 calc(100% - 2px));
  pointer-events: none;
}

/* ---------- LOGO STYLE ---------- */
.logo {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  animation: counter-spin linear infinite;
}

.logo img {
  width: 30px;
  height: auto;
}

/* ---------- ORBIT LEVELS ---------- */
.orbit-2 {
  width: 200px;
  height: 200px;
  animation-duration: 50s;
  z-index: 5;
}

.orbit-2 .logo {
  animation-duration: 50s;
}

.orbit-3 {
  width: 350px;
  height: 350px;
  animation-duration: 80s;
  z-index: 4;
}

.orbit-3 .logo {
  animation-duration: 80s;
}

.orbit-4 {
  width: 500px;
  height: 500px;
  animation-duration: 100s;
  z-index: 3;
}

.orbit-4 .logo {
  animation-duration: 100s;
}

/* ---------- LOGO POSITION DISTRIBUTION ---------- */
/* Orbit-2: 2 icons evenly spaced (0° and 180°) */
.orbit-2 .logo:nth-child(1) {
  top: 3%;
  left: 40%;
}
.orbit-2 .logo:nth-child(2) {
  top: 70%;
  left: 94%;
}

/* Orbit-3: 3 icons spaced 120° apart but offset so not inline with orbit-2 */
.orbit-3 .logo:nth-child(1) {
  top: 20%;
  left: 90%;
}
.orbit-3 .logo:nth-child(2) {
  top: 99%;
  left: 55%;
}
.orbit-3 .logo:nth-child(3) {
  top: 30%;
  left: 5%;
}

/* Orbit-4: 2 icons evenly spaced but rotated offset */
.orbit-4 .logo:nth-child(1) {
  top: 0%;
  left: 50%;
}
.orbit-4 .logo:nth-child(2) {
  top: 65%;
  left: 98%;
}
.orbit-4 .logo:nth-child(3) {
  top: 70%;
  left: 5%;
}

/* ---------- ANIMATIONS ---------- */
@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes counter-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}