.studio-method-wrapper {
  background-color: #000000;
  color: #ECECEC;
  font-family: 'Heebo', sans-serif;
  direction: rtl;
  overflow: hidden;

  /* defaults for CSS variables controlling beam behavior */
  --pwt-beam-color: #FF2525;
  --pwt-beam-speed: 3s;
  --pwt-vert-speed: 4s;
  --pwt-beam-thickness: 1px;
}

/* Scrollbar styles limited to this wrapper */
.studio-method-wrapper ::-webkit-scrollbar {
  width: 8px;
}

.studio-method-wrapper ::-webkit-scrollbar-track {
  background: #000000;
}

.studio-method-wrapper ::-webkit-scrollbar-thumb {
  background: #3D3D3D;
  border-radius: 4px;
}

.studio-method-wrapper ::-webkit-scrollbar-thumb:hover {
  background: #FF2525;
}

/* Vertical glowing beam inside the spine */
.studio-method-wrapper .pwt-vert-beam {
  background: linear-gradient(to bottom, transparent, var(--pwt-beam-color), transparent);
  animation: pwt-beam-drop var(--pwt-vert-speed) linear infinite;
}

.studio-method-wrapper .pwt-vert-beam-delayed {
  animation-delay: 2s;
}

/* Horizontal connector line thickness */
.studio-method-wrapper .connector-line {
  height: var(--pwt-beam-thickness, 1px);
}

/* Horizontal sliding beam */
.studio-method-wrapper .beam.pwt-hbeam {
  background: linear-gradient(to right, transparent, var(--pwt-beam-color), transparent);
}

.studio-method-wrapper .pwt-hbeam-right {
  animation: pwt-beam-h-right var(--pwt-beam-speed) ease-in-out infinite;
}

.studio-method-wrapper .pwt-hbeam-left {
  animation: pwt-beam-h-left var(--pwt-beam-speed) ease-in-out infinite;
}

/* Pulsing glow for dots / end node */
.studio-method-wrapper .pwt-pulse-glow,
.studio-method-wrapper .pwt-pulse-target {
  animation: pwt-pulse-glow 3s ease-in-out infinite;
}

/* KEYFRAMES */

@keyframes pwt-beam-drop {
  0% {
    transform: translateY(-120%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(120%);
    opacity: 0;
  }
}

@keyframes pwt-beam-h-right {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes pwt-beam-h-left {
  0% {
    transform: translateX(120%);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(-120%);
    opacity: 0;
  }
}

@keyframes pwt-pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 0px var(--pwt-beam-color);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 10px var(--pwt-beam-color);
    transform: scale(1.1);
  }
}


/* Icon color using CSS variable */
.studio-method-wrapper .pwt-step-icon {
  color: var(--pwt-icon-color, #FF2525);
}

.studio-method-wrapper .group:hover .pwt-step-icon {
  color: #FFFFFF;
}