/**
 * Project Discovery Journey Widget CSS
 * Widget-specific styles only - common styles are in bugloos-design-system.css
 * 
 * Dependencies: 
 *   - bugloos-design-system.css must be loaded first
 *   - bugloos-parallax.js for parallax effects
 */

/* ===== WIDGET-SPECIFIC STYLES ONLY ===== */

/* Section Container */
.discovery-journey {
  position: relative;
  padding: var(--spacing-24) 0;
  background: linear-gradient(to bottom, var(--bugloos-white), var(--bugloos-gray-50), var(--bugloos-white));
  overflow: hidden;
}

/* Decorative Background */
.discovery-journey__bg-decoration {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background: 
    radial-gradient(circle at 20% 30%, var(--bugloos-primary) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--bugloos-secondary) 0%, transparent 50%);
  pointer-events: none;
}

/* Section Header */
.discovery-journey__header {
  text-align: center;
  margin-bottom: var(--spacing-20);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.discovery-journey__header.visible {
  opacity: 1;
  transform: translateY(0);
}

.discovery-journey__title {
  font-size: var(--text-4xl);
  color: var(--bugloos-dark);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-6);
  line-height: var(--leading-tight);
}

.discovery-journey__subtitle {
  font-size: var(--text-xl);
  color: var(--bugloos-gray-600);
  font-family: var(--font-family-primary);
  max-width: 48rem;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* Timeline Container */
.discovery-journey__timeline {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
}

/* Central Path (Desktop Only) */
.discovery-journey__path {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(
    to bottom, 
    var(--bugloos-primary) 0%, 
    var(--bugloos-secondary) 20%, 
    var(--bugloos-primary) 40%, 
    var(--bugloos-secondary) 60%, 
    var(--bugloos-primary) 80%, 
    var(--bugloos-secondary) 100%
  );
  opacity: 0.3;
  transform-origin: top;
  transform: scaleY(0);
}

/* Path grows only when visible (parallax system active) */
.discovery-journey__path.visible {
  animation: growPath 1.5s ease-in-out forwards;
  animation-delay: 0.3s;
}

@keyframes growPath {
  to {
    transform: scaleY(1);
  }
}

/* Journey Steps */
.discovery-journey__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-12);
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.discovery-journey__step.visible {
  opacity: 1;
  transform: translateX(0);
}

/* The step's transform makes it a stacking context, so the detail card's
   z-index is scoped inside it. Lift the whole step above its siblings
   (path dots, end marker) while its card is open. */
.discovery-journey__step:has(.discovery-journey__toggle:checked),
.discovery-journey__step.detail-open {
  z-index: var(--z-popover);
}

.discovery-journey__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Step Content */
.discovery-journey__step-content {
  flex: 1;
  padding-top: var(--spacing-2);
}

.discovery-journey__step-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-4);
  background: var(--bugloos-white);
  border: 2px solid;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-4);
  font-family: var(--font-family-primary);
}

.discovery-journey__step-label span:first-child {
  font-size: var(--text-sm);
  color: var(--bugloos-gray-500);
}

.discovery-journey__step-label-number {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.discovery-journey__step--left .discovery-journey__step-label {
  border-color: var(--bugloos-primary);
}

.discovery-journey__step--left .discovery-journey__step-label-number {
  color: #217f8d; /* a11y contrast 4.68:1 */
}

.discovery-journey__step--right .discovery-journey__step-label {
  border-color: var(--bugloos-secondary);
}

.discovery-journey__step--right .discovery-journey__step-label-number {
  color: #6b5ca5; /* a11y contrast 5.68:1 */
}

.discovery-journey__step-title {
  font-size: var(--text-2xl);
  color: var(--bugloos-dark);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
  line-height: var(--leading-tight);
}

.discovery-journey__step-description {
  font-size: var(--text-base);
  color: var(--bugloos-gray-600);
  font-family: var(--font-family-primary);
  line-height: var(--leading-relaxed);
}

.discovery-journey__step-line {
  height: 4px;
  width: 0;
  margin-top: var(--spacing-4);
  border-radius: var(--radius-full);
}

/* Line grows only when parent step is visible */
.discovery-journey__step.visible .discovery-journey__step-line {
  animation: growLine 0.8s ease forwards;
}

@keyframes growLine {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Step Marker — positioning context for the circle + its detail card */
/* Mobile: deliberately NOT a positioning context — the detail card must size
   itself against the step (full width), not against this 5rem circle. */
.discovery-journey__step-marker {
  flex-shrink: 0;
}

/* Step Circle */
.discovery-journey__step-circle {
  position: relative;
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--bugloos-white);
  box-shadow: var(--shadow-2xl);
  transform: scale(0) rotate(-180deg);
  transition: transform 0.6s ease;
  z-index: 2;
}

.discovery-journey__step.visible .discovery-journey__step-circle {
  transform: scale(1) rotate(0deg);
}

.discovery-journey__step-circle--primary {
  background-color: var(--bugloos-primary);
  box-shadow: 
    0 10px 40px rgba(99, 195, 209, 0.4),
    0 0 0 8px rgba(99, 195, 209, 0.2);
}

.discovery-journey__step-circle--secondary {
  background-color: var(--bugloos-secondary);
  box-shadow: 
    0 10px 40px rgba(124, 110, 176, 0.4),
    0 0 0 8px rgba(124, 110, 176, 0.2);
}

.discovery-journey__step-circle {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  padding: 0;
  margin: 0;
  outline-offset: 3px;
}

.discovery-journey__step.visible .discovery-journey__step-circle:hover {
  transform: scale(1.05);
}

.discovery-journey__step.visible .discovery-journey__step-circle:active {
  transform: scale(0.95);
}

.discovery-journey__toggle:checked + .discovery-journey__step-circle--primary {
  outline: 3px solid var(--bugloos-primary);
}

.discovery-journey__toggle:checked + .discovery-journey__step-circle--secondary {
  outline: 3px solid var(--bugloos-secondary);
}

.discovery-journey__step-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

/* Glow animation only when parent step is visible */
.discovery-journey__step.visible .discovery-journey__step-glow {
  animation: pulse 2s ease-in-out infinite;
}

.discovery-journey__step-circle--primary .discovery-journey__step-glow {
  background: radial-gradient(circle, rgba(99, 195, 209, 0.4) 0%, transparent 70%);
  filter: blur(8px);
}

.discovery-journey__step-circle--secondary .discovery-journey__step-glow {
  background: radial-gradient(circle, rgba(124, 110, 176, 0.4) 0%, transparent 70%);
  filter: blur(8px);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

.discovery-journey__step-number {
  font-size: var(--text-2xl);
  color: var(--bugloos-white);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  opacity: 0.9;
  z-index: 1;
}

.discovery-journey__step-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bugloos-white);
  z-index: 1;
}

/* Decorative Dots on Circle */
.discovery-journey__step-dot {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--bugloos-white);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  display: none;
}

/* Dot animation only when parent step is visible */
.discovery-journey__step.visible .discovery-journey__step-dot {
  animation: dotPulse 2s ease-in-out infinite;
}

.discovery-journey__step-dot--top {
  top: -0.375rem;
  right: -0.375rem;
}

.discovery-journey__step-dot--bottom {
  bottom: -0.375rem;
  left: -0.375rem;
}

.discovery-journey__step-circle--primary .discovery-journey__step-dot {
  border: 2px solid var(--bugloos-primary);
}

.discovery-journey__step-circle--secondary .discovery-journey__step-dot {
  border: 2px solid var(--bugloos-secondary);
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.discovery-journey__step-dot--top {
  animation-delay: 0s;
}

.discovery-journey__step-dot--bottom {
  animation-delay: 0.5s;
}

/* ===== STEP DETAIL CARD (click on circle) ===== */
/* Mobile: the step is a narrow flex row, so there is no room beside the
   circle. The card drops below it and spans the step's full width — anchored
   to the step, not the circle, so it can never overflow the viewport. */
.discovery-journey__detail {
  position: absolute;
  /* just below the 5rem circle, which is top-aligned in the step's flex row */
  top: 5rem;
  left: 0;
  right: 0;
  margin-top: var(--spacing-3);
  transform: scaleY(0.85);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-spring), transform var(--transition-spring), visibility var(--transition-spring);
  z-index: var(--z-popover);
}

.discovery-journey__toggle:checked + .discovery-journey__step-circle + .discovery-journey__detail {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

/* Arrow points up at the circle it belongs to */
.discovery-journey__detail::before {
  content: '';
  position: absolute;
  bottom: 100%;
  border: 7px solid transparent;
  border-bottom-width: 9px;
}

/* circle sits on the left in --right steps, on the right in --left steps */
.discovery-journey__step--right .discovery-journey__detail::before {
  left: 2.5rem;
  margin-left: -7px;
}

.discovery-journey__step--left .discovery-journey__detail::before {
  right: 2.5rem;
  margin-right: -7px;
}

.discovery-journey__step-circle--primary + .discovery-journey__detail::before {
  border-bottom-color: rgba(99, 195, 209, 0.3);
}

.discovery-journey__step-circle--secondary + .discovery-journey__detail::before {
  border-bottom-color: rgba(124, 110, 176, 0.3);
}

.discovery-journey__detail-card {
  padding: var(--spacing-4);
  border: 1px solid;
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  text-align: left;
}

.discovery-journey__step-circle--primary + .discovery-journey__detail .discovery-journey__detail-card {
  border-color: rgba(99, 195, 209, 0.25);
  box-shadow: 0 8px 32px rgba(99, 195, 209, 0.13), var(--shadow-md);
}

.discovery-journey__step-circle--secondary + .discovery-journey__detail .discovery-journey__detail-card {
  border-color: rgba(124, 110, 176, 0.25);
  box-shadow: 0 8px 32px rgba(124, 110, 176, 0.13), var(--shadow-md);
}

.discovery-journey__detail-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.discovery-journey__detail-badge {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discovery-journey__step-circle--primary + .discovery-journey__detail .discovery-journey__detail-badge {
  background: var(--bugloos-primary);
}

.discovery-journey__step-circle--secondary + .discovery-journey__detail .discovery-journey__detail-badge {
  background: var(--bugloos-secondary);
}

.discovery-journey__detail-badge svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--bugloos-white);
}

.discovery-journey__detail-number {
  font-family: var(--font-family-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.1em;
}

.discovery-journey__step-circle--primary + .discovery-journey__detail .discovery-journey__detail-number {
  color: var(--bugloos-primary);
}

.discovery-journey__step-circle--secondary + .discovery-journey__detail .discovery-journey__detail-number {
  color: var(--bugloos-secondary);
}

.discovery-journey__detail-title {
  font-family: var(--font-family-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--bugloos-dark);
  line-height: var(--leading-snug);
  margin-bottom: var(--spacing-1);
}

.discovery-journey__detail-description {
  font-family: var(--font-family-primary);
  font-size: var(--text-xs);
  color: var(--bugloos-gray-500);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--spacing-3);
}

.discovery-journey__detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--bugloos-gray-100);
}

.discovery-journey__detail-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 0.125rem var(--spacing-2);
  border-radius: var(--radius-full);
  font-family: var(--font-family-primary);
  font-size: 0.5625rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
}

.discovery-journey__step-circle--primary + .discovery-journey__detail .discovery-journey__detail-tag {
  background: rgba(99, 195, 209, 0.1);
  color: var(--bugloos-primary);
}

.discovery-journey__step-circle--secondary + .discovery-journey__detail .discovery-journey__detail-tag {
  background: rgba(124, 110, 176, 0.1);
  color: var(--bugloos-secondary);
}

.discovery-journey__detail-tag svg {
  width: 0.4375rem;
  height: 0.4375rem;
  flex-shrink: 0;
}

/* Path Dots (Desktop Only) */
.discovery-journey__path-dot {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease;
  z-index: 1;
}

.discovery-journey__step.visible .discovery-journey__path-dot {
  transform: scale(1);
}

/* End Marker */
.discovery-journey__end-marker {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4rem;
  height: 4rem;
  margin-left: -2rem;
  background: linear-gradient(135deg, var(--bugloos-primary), var(--bugloos-secondary));
  border-radius: 50%;
  box-shadow: var(--shadow-2xl);
  align-items: center;
  justify-content: center;
  transform: scale(0) rotate(-180deg);
  transition: transform 0.8s ease;
  z-index: 2;
}

.discovery-journey__end-marker.visible {
  transform: scale(1) rotate(0deg);
}

.discovery-journey__end-marker-inner {
  width: 2rem;
  height: 2rem;
  background: var(--bugloos-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discovery-journey__end-marker-inner::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background: linear-gradient(135deg, var(--bugloos-primary), var(--bugloos-secondary));
  border-radius: 50%;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (min-width: 768px) {
  .discovery-journey__title {
    font-size: var(--text-5xl);
  }

  .discovery-journey__step-title {
    font-size: var(--text-3xl);
  }

  .discovery-journey__step-description {
    font-size: var(--text-lg);
  }

  .discovery-journey__step.visible .discovery-journey__step-line {
    animation: growLine 0.8s ease forwards;
  }

  @keyframes growLine {
    from {
      width: 0;
    }
    to {
      width: 80px;
    }
  }
}

/* Desktop - Alternating Layout */
@media (min-width: 1024px) {
  .discovery-journey__path {
    display: block;
  }

  .discovery-journey__path-dot {
    display: block;
  }

  .discovery-journey__end-marker {
    display: flex;
  }

  .discovery-journey__timeline {
    padding: 0 var(--spacing-8);
  }

  .discovery-journey__step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
    margin-bottom: var(--spacing-24);
  }

  /* Left Side Steps */
  .discovery-journey__step--left {
    transform: translateX(-50px);
  }

  .discovery-journey__step--left.visible {
    transform: translateX(0);
  }

  .discovery-journey__step--left .discovery-journey__step-content {
    text-align: right;
    padding-right: var(--spacing-12);
  }

  .discovery-journey__step--left .discovery-journey__step-line {
    margin-left: auto;
  }

  .discovery-journey__step--left .discovery-journey__step-marker {
    grid-column: 2;
  }

  /* Right Side Steps */
  .discovery-journey__step--right {
    transform: translateX(50px);
  }

  .discovery-journey__step--right.visible {
    transform: translateX(0);
  }

  .discovery-journey__step--right .discovery-journey__step-marker {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .discovery-journey__step--right .discovery-journey__step-content {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-left: var(--spacing-12);
  }

  .discovery-journey__step-circle {
    width: 8rem;
    height: 8rem;
  }

  .discovery-journey__step-number {
    font-size: var(--text-4xl);
  }

  .discovery-journey__step-icon {
    width: 2rem;
    height: 2rem;
    display: none;
  }

  .discovery-journey__step-dot {
    width: 1rem;
    height: 1rem;
    display: none;
  }

  .discovery-journey__step-dot--top {
    top: -0.5rem;
    right: -0.5rem;
  }

  .discovery-journey__step-dot--bottom {
    bottom: -0.5rem;
    left: -0.5rem;
  }

  /* Desktop only: the marker becomes the card's containing block, shrunk to
     the circle so the card's 100% offsets resolve at the circle's edges. */
  .discovery-journey__step-marker {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
  }

  /* Detail card sits beside the circle on desktop, growing out of the
     centre path dot: left steps open rightward, right steps mirror leftward.
     The card's anchored edge is the circle's centre-facing edge, which is
     where the path dot sits. */
  .discovery-journey__detail {
    top: 50%;
    width: 16rem;
    margin-top: 0;
    left: auto;
    right: auto;
  }

  /* --left / --right name where the TEXT sits, so the circle is on the
     opposite side of the centre line.

     --left: content in column 1, circle in column 2 (right of centre). Its
     centre-facing edge is the LEFT one, where the path dot sits, so the card
     is anchored there and unfurls leftward, back across the centre. */
  .discovery-journey__step--left .discovery-journey__detail {
    /* Half the 4rem grid gap separates the circle edge from the centre line,
       so push the card that far past the edge to land its arrow on the dot. */
    right: calc(100% + var(--spacing-8));
    margin-right: 0;
    transform-origin: right center;
    transform: translateY(-50%) scaleX(0.85);
  }

  /* --right: circle in column 1 (left of centre), centre-facing edge is the
     RIGHT one. Exact mirror — unfurls rightward. */
  .discovery-journey__step--right .discovery-journey__detail {
    left: calc(100% + var(--spacing-8));
    margin-left: 0;
    transform-origin: left center;
    transform: translateY(-50%) scaleX(0.85);
  }

  .discovery-journey__toggle:checked + .discovery-journey__step-circle + .discovery-journey__detail {
    transform: translateY(-50%) scaleX(1);
  }

  /* Arrow points back toward the circle / centre dot */
  .discovery-journey__detail::before {
    bottom: auto;
    top: 50%;
    margin-top: -7px;
    border-bottom-width: 7px;
    border-bottom-color: transparent !important;
  }

  /* Arrow sits on the card's centre-facing edge, pointing back at the dot */
  .discovery-journey__step--left .discovery-journey__detail::before {
    left: 100%;
    right: auto;
    margin-right: 0;
    border-left-width: 9px;
  }

  .discovery-journey__step--right .discovery-journey__detail::before {
    left: auto;
    right: 100%;
    margin-left: 0;
    border-right-width: 9px;
  }

  .discovery-journey__step--left .discovery-journey__step-circle--primary + .discovery-journey__detail::before {
    border-left-color: rgba(99, 195, 209, 0.3);
  }

  .discovery-journey__step--left .discovery-journey__step-circle--secondary + .discovery-journey__detail::before {
    border-left-color: rgba(124, 110, 176, 0.3);
  }

  .discovery-journey__step--right .discovery-journey__step-circle--primary + .discovery-journey__detail::before {
    border-right-color: rgba(99, 195, 209, 0.3);
  }

  .discovery-journey__step--right .discovery-journey__step-circle--secondary + .discovery-journey__detail::before {
    border-right-color: rgba(124, 110, 176, 0.3);
  }

  /* --left cards sit left of the dot, so they read toward it (right-aligned) */
  .discovery-journey__step--left .discovery-journey__detail-card {
    text-align: right;
  }

  .discovery-journey__step--left .discovery-journey__detail-header,
  .discovery-journey__step--left .discovery-journey__detail-tags {
    flex-direction: row-reverse;
  }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .discovery-journey__path,
  .discovery-journey__step,
  .discovery-journey__step-circle,
  .discovery-journey__step-line,
  .discovery-journey__end-marker {
    animation: none !important;
    transition: none !important;
  }

  .discovery-journey__step-glow,
  .discovery-journey__step-dot {
    animation: none !important;
  }

  .discovery-journey__step {
    opacity: 1;
    transform: none;
  }

  .discovery-journey__step-circle {
    transform: scale(1) rotate(0deg);
  }

  .discovery-journey__path {
    transform: scaleY(1);
  }
  
  .discovery-journey__step-line {
    width: 60px;
  }
  
  .discovery-journey__end-marker {
    transform: scale(1) rotate(0deg);
  }

  /* Detail card must still open — drop the transition, keep the placement */
  .discovery-journey__detail,
  .discovery-journey__toggle:checked + .discovery-journey__step-circle + .discovery-journey__detail {
    transition: none !important;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .discovery-journey__detail,
  .discovery-journey__toggle:checked + .discovery-journey__step-circle + .discovery-journey__detail {
    transform: translateY(-50%);
  }

}

/* When visible class is added without animations (no parallax loaded) */
.discovery-journey__header.visible,
.discovery-journey__step.visible,
.discovery-journey__end-marker.visible,
.discovery-journey__path.visible {
  /* These will be visible, but only animate if parallax system is active */
  /* The .visible class ensures content shows even without parallax */
}

/* Show elements immediately when visible without parallax (no animations) */
body.no-parallax .discovery-journey__header.visible {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

body.no-parallax .discovery-journey__step.visible {
  opacity: 1;
  transform: translateX(0);
  transition: none;
}

body.no-parallax .discovery-journey__step.visible .discovery-journey__step-circle {
  transform: scale(1) rotate(0deg);
  transition: none;
}

body.no-parallax .discovery-journey__path.visible {
  transform: scaleY(1);
  animation: none;
}

body.no-parallax .discovery-journey__step.visible .discovery-journey__step-line {
  width: 60px;
  animation: none;
}

body.no-parallax .discovery-journey__end-marker.visible {
  transform: scale(1) rotate(0deg);
  transition: none;
}

body.no-parallax .discovery-journey__step.visible .discovery-journey__step-glow {
  animation: none;
}

/* ===== RTL SUPPORT ===== */
html.rtl .discovery-journey__step,
[dir="rtl"] .discovery-journey__step {
    transform: translateX(30px);
}

html.rtl .discovery-journey__detail-card,
[dir="rtl"] .discovery-journey__detail-card {
    text-align: right;
}

/* Mobile card spans the step's full width in RTL too, so only the arrow
   mirrors — the flex row reverses, putting the circle on the other side.
   Scoped below the desktop breakpoint so it cannot fight the desktop arrow. */
@media (max-width: 1023px) {
    html.rtl .discovery-journey__step--right .discovery-journey__detail::before,
    [dir="rtl"] .discovery-journey__step--right .discovery-journey__detail::before {
        left: auto;
        margin-left: 0;
        right: 2.5rem;
        margin-right: -7px;
    }

    html.rtl .discovery-journey__step--left .discovery-journey__detail::before,
    [dir="rtl"] .discovery-journey__step--left .discovery-journey__detail::before {
        right: auto;
        margin-right: 0;
        left: 2.5rem;
        margin-left: -7px;
    }
}

html.rtl .discovery-journey__step.visible,
[dir="rtl"] .discovery-journey__step.visible {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    html.rtl .discovery-journey__path,
    [dir="rtl"] .discovery-journey__path {
        left: auto;
        right: 50%;
        margin-left: 0;
        margin-right: -1px;
    }

    html.rtl .discovery-journey__step--left .discovery-journey__step-content,
    [dir="rtl"] .discovery-journey__step--left .discovery-journey__step-content {
        padding-right: 0;
        padding-left: var(--spacing-12);
        text-align: left;
    }
    
    html.rtl .discovery-journey__step--right .discovery-journey__step-content,
    [dir="rtl"] .discovery-journey__step--right .discovery-journey__step-content {
        padding-left: 0;
        padding-right: var(--spacing-12);
        text-align: right;
    }
    
    html.rtl .discovery-journey__step--left .discovery-journey__step-line,
    [dir="rtl"] .discovery-journey__step--left .discovery-journey__step-line {
      margin-right: auto;
      margin-left: 0;
    }
    
    html.rtl .discovery-journey__step--right .discovery-journey__step-line,
    [dir="rtl"] .discovery-journey__step--right .discovery-journey__step-line {
        right: auto;
        left: calc(-18px - var(--spacing-12));
    }

    /* The timeline grid does not flip in RTL, so the LTR desktop geometry
       (cards fanning outward from the centre dot) already holds. Only the
       text direction inside the card mirrors. */
    html.rtl .discovery-journey__step--right .discovery-journey__detail-card,
    [dir="rtl"] .discovery-journey__step--right .discovery-journey__detail-card {
        text-align: right;
    }

    html.rtl .discovery-journey__step--left .discovery-journey__detail-card,
    [dir="rtl"] .discovery-journey__step--left .discovery-journey__detail-card {
        text-align: left;
    }

    html.rtl .discovery-journey__step--left .discovery-journey__detail-header,
    html.rtl .discovery-journey__step--left .discovery-journey__detail-tags,
    [dir="rtl"] .discovery-journey__step--left .discovery-journey__detail-header,
    [dir="rtl"] .discovery-journey__step--left .discovery-journey__detail-tags {
        flex-direction: row;
    }
}

/* Keep the reused step SVG visible inside the detail badge (desktop hides .discovery-journey__step-icon). */
.discovery-journey__detail-badge .discovery-journey__step-icon {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
}

.discovery-journey.is-ready .discovery-journey__path.visible {
  transform: scaleY(1);
  animation: none;
}

.discovery-journey.is-ready .discovery-journey__step.visible .discovery-journey__step-line {
  width: 60px;
  animation: none;
}

.elementor-editor-active .discovery-journey.is-ready .discovery-journey__path.visible,
.elementor-editor-active .discovery-journey.is-ready .discovery-journey__step.visible .discovery-journey__step-line {
  transition: none !important;
  animation: none !important;
}

@media (min-width: 1024px) {
  .discovery-journey.is-ready .discovery-journey__step.visible .discovery-journey__step-line {
    width: 80px;
  }
}