/* =========================================
   BASE PATH
========================================= */

.journey-line-base{
  fill:none;

  stroke:rgba(0,0,0,0.05);
  stroke-width:1.5;
}

/* =========================================
   PATH 1 / subtle
========================================= */

.journey-line-progress-1{
  fill:none;

  stroke:#5b2c2c;
  stroke-width:2;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:0.13;
/* 
  stroke-dasharray:12 34; */

  animation:pathFloat1 42s ease-in-out infinite alternate;
}

/* =========================================
   PATH 2 / primary motion
========================================= */

.journey-line-progress-2{
  fill:none;

  stroke:#5b2c2c;
  stroke-width:3;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:0.22;

  stroke-dasharray:22 18;

  animation:pathFloat2 24s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

/* =========================================
   PATH ANIMATION
========================================= */

@keyframes pathFloat1{

  0%{
    stroke-dashoffset:0;
  }

  18%{
    stroke-dashoffset:-8;
  }

  41%{
    stroke-dashoffset:-26;
  }

  73%{
    stroke-dashoffset:-58;
  }

  100%{
    stroke-dashoffset:-92;
  }

}

@keyframes pathFloat2{

  0%{
    stroke-dashoffset:0;
  }

  16%{
    stroke-dashoffset:-12;
  }

  37%{
    stroke-dashoffset:-44;
  }

  69%{
    stroke-dashoffset:-76;
  }

  100%{
    stroke-dashoffset:-138;
  }

}

/* =========================================
   JOURNEY SECTION
========================================= */

.journey-section{
  position:relative;
  overflow:hidden;

  padding:220px 6% 180px;

  background:#f5f1ea;
}

/* =========================================
   SVG PATH WRAPPER
========================================= */

.journey-path{
  position:absolute;

  top:0;
  left:50%;

  transform:translateX(-50%);

  width:720px;
  height:100%;

  pointer-events:none;

  z-index:1;

  opacity:0.72;
}

.journey-path svg{
  width:100%;
  height:100%;
  overflow:visible;
}

/* =========================================
   BASE PATH
========================================= */

.journey-line-base{
  fill:none;

  stroke:rgba(0,0,0,0.05);
  stroke-width:1.5;
}

/* =========================================
   PATH 1 / subtle
========================================= */

.journey-line-progress-1{
  fill:none;

  stroke:#5b2c2c;
  stroke-width:2;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:0.18;

  stroke-dasharray:10 28;

  animation:
    pathFloat1 34s ease-in-out infinite alternate;
}

/* =========================================
   PATH 2 / primary motion
========================================= */

.journey-line-progress-2{
  fill:none;

  stroke:#5b2c2c;
  stroke-width:3.5;

  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:0.55;

  stroke-dasharray:18 18;

  animation:
    pathFloat2 21s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

/* =========================================
   CONTENT
========================================= */

.journey-container{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;

  gap:240px;

  max-width:1320px;
  margin:0 auto;
}

/* =========================================
   STEP
========================================= */

.journey-step{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:110px;
  align-items:center;
}

.journey-step:nth-child(odd){
  transform:translateX(-50px);
}

.journey-step:nth-child(even){
  transform:translateX(50px);
}

.journey-step-reverse .journey-image{
  order:2;
}

.journey-step-reverse .journey-content{
  order:1;
}

/* =========================================
   IMAGE
========================================= */

.journey-image{
  position:relative;

  overflow:hidden;

  border-radius:22px;

  aspect-ratio:4/5;

  background:#ddd;
}

.journey-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.06);

  transition:
    transform 1.8s ease,
    filter 1.2s ease;
}

.journey-step:hover .journey-image img{
  transform:scale(1.02);
}

/* =========================================
   TEXT
========================================= */

.journey-content{
  max-width:540px;
}

.journey-title{
  font-family:'Cormorant Garamond', serif;

  font-size:clamp(2rem,3vw,5.5rem);
  line-height:0.92;
  font-weight:300;

  margin:18px 0 28px;

  color:#111;
}

.journey-text{
  color:#555;

  font-size:15px;
  line-height:1.95;

  max-width:520px;
}

/* =========================================
   REVEAL
========================================= */

.reveal-step{
  opacity:0;

  transform:
    translateY(80px)
    scale(0.98);

  transition:
    opacity 1.6s ease,
    transform 1.6s cubic-bezier(.22,1,.36,1);
}

.reveal-step.visible{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}

/* =========================================
   PATH ANIMATION
========================================= */
@keyframes pathFloat1{

  0%{
    stroke-dashoffset:0;
  }

  21%{
    stroke-dashoffset:-14;
  }

  47%{
    stroke-dashoffset:-36;
  }

  73%{
    stroke-dashoffset:-62;
  }

  100%{
    stroke-dashoffset:-92;
  }

}

@keyframes pathFloat2{

  0%{
    stroke-dashoffset:0;
  }

  17%{
    stroke-dashoffset:-10;
  }

  39%{
    stroke-dashoffset:-44;
  }

  68%{
    stroke-dashoffset:-72;
  }

  100%{
    stroke-dashoffset:-130;
  }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:900px){

  .journey-section{
    padding:110px 24px;
  }

  .journey-container{
    gap:140px;
  }

  .journey-step{
    grid-template-columns:1fr;

    gap:40px;

    transform:none !important;
  }

  .journey-step-reverse .journey-image,
  .journey-step-reverse .journey-content{
    order:initial;
  }

  .journey-path{
    left:-80px;

    transform:none;

    width:320px;

    opacity:0.28;
  }

  .journey-title{
    font-size:54px;
  }

  .journey-text{
    font-size:14px;
    line-height:1.85;
  }

}