/* Circular Text Animation Section */
@property --rotate {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --delayed-rotate {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@keyframes scrollAnim {
  to {
    --rotate: 1;
    --delayed-rotate: 1;
  }
}

.circular-text-section {
  position: relative;
  height: 100vh;
  margin: 0;
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg-dark) 0%, #3a0c0f 50%, var(--bg-dark) 100%);
  overflow: hidden;

  --circle-size: 30vmin;
  --spacing: 3vmin;
  --font-size: 5vmin;
  --ease-speed: 50ms;

  animation: scrollAnim linear;
  animation-timeline: scroll(nearest block);
}

.circular-text {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;

  display: block;
  width: var(--circle-size);
  height: var(--circle-size);

  margin: 0;
  padding: 0;
  list-style: none;

  border-radius: 50%;

  transform: rotate(calc(var(--rotate) * 360deg));
}

.circular-text li {
  position: absolute;
  top: 50%;
  left: 50%;

  line-height: 0;
  transform-origin: 0 0;
  white-space: nowrap;

  font-family: var(--font-heading);
  font-size: var(--font-size);
  font-weight: 700;
  color: var(--secondary-color);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Position each word around the circle */
.circular-text li:nth-child(1) { rotate: calc(18deg * 1); }
.circular-text li:nth-child(2) { rotate: calc(18deg * 2); }
.circular-text li:nth-child(3) { rotate: calc(18deg * 3); }
.circular-text li:nth-child(4) { rotate: calc(18deg * 4); }
.circular-text li:nth-child(5) { rotate: calc(18deg * 5); }
.circular-text li:nth-child(6) { rotate: calc(18deg * 6); }
.circular-text li:nth-child(7) { rotate: calc(18deg * 7); }
.circular-text li:nth-child(8) { rotate: calc(18deg * 8); }
.circular-text li:nth-child(9) { rotate: calc(18deg * 9); }
.circular-text li:nth-child(10) { rotate: calc(18deg * 10); }
.circular-text li:nth-child(11) { rotate: calc(18deg * 11); }
.circular-text li:nth-child(12) { rotate: calc(18deg * 12); }
.circular-text li:nth-child(13) { rotate: calc(18deg * 13); }
.circular-text li:nth-child(14) { rotate: calc(18deg * 14); }
.circular-text li:nth-child(15) { rotate: calc(18deg * 15); }
.circular-text li:nth-child(16) { rotate: calc(18deg * 16); }
.circular-text li:nth-child(17) { rotate: calc(18deg * 17); }
.circular-text li:nth-child(18) { rotate: calc(18deg * 18); }
.circular-text li:nth-child(19) { rotate: calc(18deg * 19); }
.circular-text li:nth-child(20) { rotate: calc(18deg * 20); }

.circular-text li span {
  --rotate-velocity: calc(var(--rotate) - var(--delayed-rotate));
  --rotate-spacing: calc(var(--spacing) * -4 * var(--rotate-velocity));
  --x: calc(var(--circle-size) / 2 + var(--rotate-spacing));
  --y: calc(10px * var(--rotate-velocity));
  --r: calc(90deg * var(--rotate-velocity));

  display: inline-block;
  transform: translate(var(--x), var(--y)) rotate(var(--r, 0deg));
}

/* Individual letter animations with delay */
.circular-text li span:nth-child(1) {
  --y: calc((1 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 0) ease-out;
}

.circular-text li span:nth-child(2) {
  --y: calc((2 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 1) ease-out;
}

.circular-text li span:nth-child(3) {
  --y: calc((3 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 2) ease-out;
}

.circular-text li span:nth-child(4) {
  --y: calc((4 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 3) ease-out;
}

.circular-text li span:nth-child(5) {
  --y: calc((5 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 4) ease-out;
}

.circular-text li span:nth-child(6) {
  --y: calc((6 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 5) ease-out;
}

.circular-text li span:nth-child(7) {
  --y: calc((7 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 6) ease-out;
}

.circular-text li span:nth-child(8) {
  --y: calc((8 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 7) ease-out;
}

.circular-text li span:nth-child(9) {
  --y: calc((9 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 8) ease-out;
}

.circular-text li span:nth-child(10) {
  --y: calc((10 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 9) ease-out;
}

.circular-text li span:nth-child(11) {
  --y: calc((11 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 10) ease-out;
}

.circular-text li span:nth-child(12) {
  --y: calc((12 * -20px) * var(--rotate-velocity));
  transform-origin: var(--x) 0;
  transition: --delayed-rotate calc(var(--ease-speed, 100ms) * 11) ease-out;
}

.circular-text-section em {
  display: block;
  margin: 4px;
  text-align: center;
  font-style: normal;
  font-size: 14px;
  color: var(--text-light);
  opacity: 0.7;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

@supports (animation-timeline: scroll()) {
  .circular-text-section em {
    display: none;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .circular-text-section {
    --circle-size: 40vmin;
    --font-size: 4vmin;
    --spacing: 2vmin;
    
  }
}

@media (max-width: 576px) {
  .circular-text-section {
    --circle-size: 35vmin;
    --font-size: 3.5vmin;
    --spacing: 1.5vmin;
    height: 50vh;
  }
}