/**
 * 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);
}

/* 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: var(--bugloos-primary);
}

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

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

.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 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-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* 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;
}

/* 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-circle {
    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-circle {
    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;
  }
}

/* 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);
  }
}

/* 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;
}