/* =========================================================
   VITA UNIKA — THE VITA WAY REDESIGN V1
   Editorial motion path
   ========================================================= */

.vita-way-v1{
  --vita-way-progress:0;

  position:relative;

  padding:
    138px
    0
    142px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f9fbfa 52%,
      #ffffff 100%
    );

  overflow:hidden;
}


.vita-way-v1__shell{
  width:
    min(
      1380px,
      calc(100vw - 96px)
    );

  margin:
    0
    auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.vita-way-v1__intro{
  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(360px,.65fr);

  gap:90px;

  align-items:end;

  margin-bottom:100px;
}


.vita-way-v1__label{
  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:28px;

  font-size:16px;

  line-height:1;

  letter-spacing:.12em;

  font-weight:600;

  color:#0b7978;
}


.vita-way-v1__label::before{
  content:"";

  width:54px;
  height:1px;

  background:#b48d42;
}


.vita-way-v1 h2{
  margin:0;

  max-width:900px;

  font-size:
    clamp(
      66px,
      6.4vw,
      108px
    );

  line-height:.91;

  letter-spacing:-.06em;

  font-weight:300;

  color:#132725;
}


.vita-way-v1 h2 em{
  display:block;

  margin-top:8px;

  font-family:
    "DM Serif Display",
    Georgia,
    serif;

  font-style:italic;

  font-weight:400;

  letter-spacing:-.035em;

  color:#0b7978;
}


.vita-way-v1__lead{
  max-width:540px;

  margin:
    0
    0
    6px;

  font-size:20px;

  line-height:1.75;

  color:
    rgba(19,39,37,.60);
}


/* =========================================================
   MOTION PATH
   ========================================================= */

.vita-way-v1__path{
  position:relative;

  display:grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap:0;

  padding-top:46px;
}


/* base line */

.vita-way-v1__path::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:1px;

  background:
    rgba(19,39,37,.14);
}


/* animated progress */

.vita-way-v1__path::after{
  content:"";

  position:absolute;

  left:0;
  top:-1px;

  width:100%;
  height:3px;

  transform:
    scaleX(
      var(--vita-way-progress)
    );

  transform-origin:left center;

  background:
    linear-gradient(
      90deg,
      #0b7978 0%,
      #16928e 52%,
      #b48d42 100%
    );

  border-radius:999px;

  box-shadow:
    0 0 20px
    rgba(11,121,120,.14);

  will-change:transform;
}


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

.vita-way-v1__step{
  position:relative;

  min-height:270px;

  padding:
    30px
    38px
    10px
    0;

  transition:
    opacity .55s ease,
    transform .75s cubic-bezier(.16,1,.3,1);
}


.vita-way-v1__step:not(:last-child){
  border-right:
    1px solid
    rgba(19,39,37,.075);
}


.vita-way-v1__dot{
  position:absolute;

  left:0;
  top:-53px;

  width:15px;
  height:15px;

  border-radius:50%;

  background:#fff;

  border:
    2px solid
    rgba(19,39,37,.22);

  transform:
    translateY(-50%);

  transition:
    background .55s ease,
    border-color .55s ease,
    box-shadow .55s ease,
    transform .65s cubic-bezier(.16,1,.3,1);
}


.vita-way-v1__number{
  display:block;

  margin-bottom:32px;

  font-size:50px;

  line-height:.85;

  letter-spacing:-.055em;

  font-weight:300;

  color:
    rgba(19,39,37,.20);

  transition:
    color .55s ease,
    transform .65s cubic-bezier(.16,1,.3,1);
}


.vita-way-v1__step h3{
  max-width:260px;

  margin:
    0
    0
    18px;

  font-size:30px;

  line-height:1.08;

  letter-spacing:-.035em;

  font-weight:400;

  color:#132725;

  transition:
    color .5s ease,
    transform .65s cubic-bezier(.16,1,.3,1);
}


.vita-way-v1__step p{
  max-width:275px;

  margin:0;

  font-size:18px;

  line-height:1.7;

  color:
    rgba(19,39,37,.54);

  transition:
    color .5s ease;
}


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

.vita-way-v1__step.is-active
.vita-way-v1__dot{

  background:#0b7978;

  border-color:#0b7978;

  transform:
    translateY(-50%)
    scale(1.22);

  box-shadow:
    0 0 0 7px
    rgba(11,121,120,.08),

    0 0 24px
    rgba(11,121,120,.22);
}


.vita-way-v1__step.is-active
.vita-way-v1__number{

  color:#b48d42;

  transform:
    translateY(-3px);
}


.vita-way-v1__step.is-active h3{

  color:#0b7978;

  transform:
    translateY(-2px);
}


.vita-way-v1__step.is-active p{

  color:
    rgba(19,39,37,.70);
}


/* =========================================================
   ACTIVE DOT HALO
   ========================================================= */

.vita-way-v1__step.is-active
.vita-way-v1__dot::after{

  content:"";

  position:absolute;

  inset:-10px;

  border-radius:50%;

  border:
    1px solid
    rgba(180,141,66,.24);

  animation:
    vitaWayHalo
    2s
    ease-in-out
    infinite;
}


@keyframes vitaWayHalo{

  0%,
  100%{

    transform:scale(.78);

    opacity:.2;

  }

  50%{

    transform:scale(1.18);

    opacity:.75;

  }

}


/* =========================================================
   FOOTER
   ========================================================= */

.vita-way-v1__footer{
  display:flex;

  justify-content:flex-end;

  margin-top:54px;
}


.vita-way-v1__link{
  display:inline-flex;

  align-items:center;

  gap:16px;

  padding-bottom:8px;

  border-bottom:
    1px solid
    rgba(11,121,120,.28);

  font-size:18px;

  line-height:1;

  font-weight:500;

  color:#132725;

  text-decoration:none;

  transition:
    gap .5s cubic-bezier(.16,1,.3,1),
    color .4s ease,
    border-color .4s ease;
}


.vita-way-v1__link svg{
  width:21px;
  height:21px;

  transition:
    transform .5s cubic-bezier(.16,1,.3,1);
}


@media(hover:hover) and (pointer:fine){

  .vita-way-v1__link:hover{

    gap:22px;

    color:#0b7978;

    border-color:#0b7978;
  }


  .vita-way-v1__link:hover svg{

    transform:
      translate3d(
        3px,
        -3px,
        0
      );
  }

}


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

.vita-way-v1 [data-vita-way-reveal]{

  opacity:0;

  transform:
    translate3d(
      0,
      28px,
      0
    );

  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(.16,1,.3,1);
}


.vita-way-v1
[data-vita-way-reveal].is-visible{

  opacity:1;

  transform:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .vita-way-v1{

    padding:
      110px
      0
      112px;
  }


  .vita-way-v1__shell{

    width:
      calc(
        100vw - 64px
      );
  }


  .vita-way-v1__intro{

    grid-template-columns:1fr;

    gap:30px;

    margin-bottom:80px;
  }


  .vita-way-v1__lead{

    max-width:700px;
  }


  .vita-way-v1__path{

    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap:
      70px
      0;
  }


  .vita-way-v1__path::before,
  .vita-way-v1__path::after{

    display:none;
  }


  .vita-way-v1__step{

    min-height:240px;

    padding:
      30px
      34px
      20px
      0;

    border-top:
      1px solid
      rgba(19,39,37,.10);
  }


  .vita-way-v1__dot{

    top:-1px;
  }

}


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

@media(max-width:700px){

  .vita-way-v1{

    padding:
      82px
      0
      88px;
  }


  .vita-way-v1__shell{

    width:
      calc(
        100vw - 36px
      );
  }


  .vita-way-v1__label{

    margin-bottom:26px;

    font-size:14px;
  }


  .vita-way-v1 h2{

    font-size:
      clamp(
        46px,
        13vw,
        64px
      );
  }


  .vita-way-v1__lead{

    font-size:18px;

    line-height:1.65;
  }


  .vita-way-v1__intro{

    margin-bottom:58px;
  }


  .vita-way-v1__path{

    display:block;

    padding-top:0;
  }


  .vita-way-v1__step{

    min-height:0;

    padding:
      32px
      0
      38px
      42px;

    border-right:0 !important;

    border-top:
      1px solid
      rgba(19,39,37,.10);
  }


  .vita-way-v1__dot{

    left:0;
    top:33px;
  }


  .vita-way-v1__number{

    margin-bottom:22px;

    font-size:40px;
  }


  .vita-way-v1__step h3{

    max-width:none;

    font-size:27px;
  }


  .vita-way-v1__step p{

    max-width:440px;

    font-size:17px;
  }


  .vita-way-v1__footer{

    justify-content:flex-start;

    margin-top:34px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .vita-way-v1__path::after{

    transform:scaleX(1);
  }


  .vita-way-v1__dot::after{

    animation:none !important;
  }


  .vita-way-v1 [data-vita-way-reveal]{

    opacity:1 !important;

    transform:none !important;

    transition:none !important;
  }

}