.one-workspace {
  padding-block: clamp(50px, 8vw, 75px);
  background: #f6f5f8;
}

/* === Header === */
.one-workspace__header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.one-workspace__eyebrow {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.one-workspace__title {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.18;
  text-wrap: normal;
}

.one-workspace__subtitle {
  margin-top: 16px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* === Body (features + media) === */
.one-workspace__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  position: relative;
}

/* Hidden radio inputs for click-to-activate */
.ws-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.feature__label {
  display: block;
  cursor: pointer;
  width: 100%;
}

/* === Features list === */
.features {
  display: flex;
  flex-direction: column;
  gap: 28px;
  transition: all ease 0.4s;
}

.feature {
  position: relative;
  padding: 18px 22px 18px 26px;
  border-radius:0 12px 12px 0;
  background-color: transparent;
}

/* Always-visible gray track on the left */
.feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--color-border);
  border-radius: 2px;
}

/* The 3px blue progress bar that fills over 4s, overlays the gray track */
.feature__progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0%;
  background: var(--color-primary);
  border-radius: 2px;
  opacity: 0;
  z-index: 1;
}

.feature__num {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.feature__title {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 6px;
}

.feature__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* === Right-side media: outer card stays full-width, inner image max 440px === */
.feature-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #BCD8FF;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 32px -8px rgba(15, 17, 21, 0.08),
              0 4px 8px -2px rgba(15, 17, 21, 0.04);
}

.feature-media__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 48px);
  max-width: 440px;
  height: auto;
  max-height: calc(100% - 48px);
  object-fit: contain;
  opacity: 0;
}

/* === Animation: 12s cycle, 4s per feature ===
   3 phase keyframes per property, reused across the 3 features.
   Click rotates which feature uses which phase, restarting the cycle. */

/* --- Progress bar phases --- */
@keyframes progress-phase-0 {
  0%   { height: 0%; opacity: 1; }
  33.33% { height: 100%; opacity: 1; }
  33.34% { height: 0%; opacity: 0; }
  100% { height: 0%; opacity: 0; }
}

@keyframes progress-phase-1 {
  0%, 33.33% { height: 0%; opacity: 0; }
  33.34% { height: 0%; opacity: 1; }
  66.66% { height: 100%; opacity: 1; }
  66.67% { height: 0%; opacity: 0; }
  100% { height: 0%; opacity: 0; }
}

@keyframes progress-phase-2 {
  0%, 66.66% { height: 0%; opacity: 0; }
  66.67% { height: 0%; opacity: 1; }
  100% { height: 100%; opacity: 1; }
}

/* --- Background (white card) phases --- */
@keyframes bg-phase-0 {
  0%, 33.33% { background-color: #ffffff; }
  33.34%, 100% { background-color: transparent; }
}

@keyframes bg-phase-1 {
  0%, 33.33% { background-color: transparent; }
  33.34%, 66.66% { background-color: #ffffff; }
  66.67%, 100% { background-color: transparent; }
}

@keyframes bg-phase-2 {
  0%, 66.66% { background-color: transparent; }
  66.67%, 100% { background-color: #ffffff; }
}

/* --- Image visibility phases --- */
@keyframes img-phase-0 {
  0%, 33.33% { opacity: 1; }
  33.34%, 100% { opacity: 0; }
}

@keyframes img-phase-1 {
  0%, 33.33% { opacity: 0; }
  33.34%, 66.66% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}

@keyframes img-phase-2 {
  0%, 66.66% { opacity: 0; }
  66.67%, 100% { opacity: 1; }
}

/* === Default assignments: cycle starts at feature 1 === */
.feature__progress--1 { animation: progress-phase-0 18s linear infinite; }
.feature__progress--2 { animation: progress-phase-1 18s linear infinite; }
.feature__progress--3 { animation: progress-phase-2 18s linear infinite; }

.features > .feature:nth-child(1) { animation: bg-phase-0 18s linear infinite; }
.features > .feature:nth-child(2) { animation: bg-phase-1 18s linear infinite; }
.features > .feature:nth-child(3) { animation: bg-phase-2 18s linear infinite; }

.feature-media__img--1 { animation: img-phase-0 18s linear infinite; }
.feature-media__img--2 { animation: img-phase-1 18s linear infinite; }
.feature-media__img--3 { animation: img-phase-2 18s linear infinite; }

/* === Click feature 2: rotate cycle so feature 2 starts ===
   Animation-name change restarts each animation at iteration 0. */
.ws-radio--2:checked ~ .features > .feature:nth-child(1) { animation-name: bg-phase-2; }
.ws-radio--2:checked ~ .features > .feature:nth-child(2) { animation-name: bg-phase-0; }
.ws-radio--2:checked ~ .features > .feature:nth-child(3) { animation-name: bg-phase-1; }

.ws-radio--2:checked ~ .features > .feature:nth-child(1) .feature__progress { animation-name: progress-phase-2; }
.ws-radio--2:checked ~ .features > .feature:nth-child(2) .feature__progress { animation-name: progress-phase-0; }
.ws-radio--2:checked ~ .features > .feature:nth-child(3) .feature__progress { animation-name: progress-phase-1; }

.ws-radio--2:checked ~ .feature-media .feature-media__img--1 { animation-name: img-phase-2; }
.ws-radio--2:checked ~ .feature-media .feature-media__img--2 { animation-name: img-phase-0; }
.ws-radio--2:checked ~ .feature-media .feature-media__img--3 { animation-name: img-phase-1; }

/* === Click feature 3: rotate cycle so feature 3 starts === */
.ws-radio--3:checked ~ .features > .feature:nth-child(1) { animation-name: bg-phase-1; }
.ws-radio--3:checked ~ .features > .feature:nth-child(2) { animation-name: bg-phase-2; }
.ws-radio--3:checked ~ .features > .feature:nth-child(3) { animation-name: bg-phase-0; }

.ws-radio--3:checked ~ .features > .feature:nth-child(1) .feature__progress { animation-name: progress-phase-1; }
.ws-radio--3:checked ~ .features > .feature:nth-child(2) .feature__progress { animation-name: progress-phase-2; }
.ws-radio--3:checked ~ .features > .feature:nth-child(3) .feature__progress { animation-name: progress-phase-0; }

.ws-radio--3:checked ~ .feature-media .feature-media__img--1 { animation-name: img-phase-1; }
.ws-radio--3:checked ~ .feature-media .feature-media__img--2 { animation-name: img-phase-2; }
.ws-radio--3:checked ~ .feature-media .feature-media__img--3 { animation-name: img-phase-0; }

/* === Hover: pause cycle, show hovered feature as active ===
   On un-hover, animations restart at iteration 0 of whatever name is currently set
   (default OR last click-rotated). */

/* Reset NON-hovered features to inactive while any feature is hovered */
.one-workspace__body:has(.feature:hover) .features > .feature:not(:hover) {
  animation: none;
  background-color: transparent;
}

.one-workspace__body:has(.feature:hover) .features > .feature:not(:hover) .feature__progress {
  animation: none;
  height: 0%;
  opacity: 0;
}

.one-workspace__body:has(.feature:hover) .feature-media__img {
  animation: none;
  opacity: 0;
}

/* Activate the hovered feature (kill its animation, apply static active styles) */
.features > .feature:hover {
  animation: none;
  background-color: #ffffff;
}

.features > .feature:hover .feature__progress {
  animation: none;
  height: 100%;
  opacity: 1;
}

.one-workspace__body:has(.features > .feature:nth-child(1):hover) .feature-media__img--1 { opacity: 1; }
.one-workspace__body:has(.features > .feature:nth-child(2):hover) .feature-media__img--2 { opacity: 1; }
.one-workspace__body:has(.features > .feature:nth-child(3):hover) .feature-media__img--3 { opacity: 1; }

/* Pause animation when reduced motion is preferred — show feature 1 */
@media (prefers-reduced-motion: reduce) {
  .features > .feature { animation: none; }
  .features > .feature:nth-child(1) { background-color: #ffffff; }
  .feature__progress--1 { height: 100%; opacity: 1; animation: none; }
  .feature__progress--2,
  .feature__progress--3 { animation: none; }
  .feature-media__img--1 { opacity: 1; animation: none; }
  .feature-media__img--2,
  .feature-media__img--3 { animation: none; }
}

/* === Desktop === */
@media (min-width: 1024px) {
  .one-workspace {
    padding-block: 75px;
  }

  .one-workspace__header {
    margin-bottom: 64px;
  }

  .one-workspace__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
  }

  .features {
    gap: 32px;
    padding-block: 12px;
  }

  .feature {
    padding-left: 28px;
  }

  .feature__title {
    font-size: 18px;
  }
}


@media (max-width: 767px) {
 .one-workspace__header {
  margin-bottom:30px;
}
.features {
    gap: 20px;
}
}