/* =========================================================
   VITA UNIKA — THE VITA WAY STICKY V2

   01 enters normally
   Section pins
   02 / 03 / 04 reveal while scrolling
   ========================================================= */


/* ---------------------------------------------------------
   LONG SCROLL AREA
   --------------------------------------------------------- */

.vita-way-v1.vita-way-sticky-v2{

  --vita-way-stage-progress:0;

  position:relative !important;

  height:440vh !important;

  padding:0 !important;

  overflow:visible !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f9fbfa 50%,
      #ffffff 100%
    ) !important;
}


/* ---------------------------------------------------------
   PINNED CONTENT
   --------------------------------------------------------- */

.vita-way-sticky-v2
.vita-way-v1__shell{

  position:sticky !important;

  top:0 !important;

  height:100vh !important;
  height:100svh !important;

  box-sizing:border-box !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  padding-top:112px !important;
  padding-bottom:62px !important;

  overflow:hidden;
}


/* ---------------------------------------------------------
   INTRO
   Slightly tighter because whole composition is one screen
   --------------------------------------------------------- */

.vita-way-sticky-v2
.vita-way-v1__intro{

  flex:0 0 auto;

  margin-bottom:64px !important;

  gap:72px !important;
}


.vita-way-sticky-v2
.vita-way-v1__label{

  margin-bottom:22px !important;
}


.vita-way-sticky-v2
.vita-way-v1 h2{

  font-size:
    clamp(
      58px,
      5.8vw,
      94px
    ) !important;
}


.vita-way-sticky-v2
.vita-way-v1__lead{

  font-size:19px !important;
}


/* ---------------------------------------------------------
   DISABLE OLD ENTRY JS DEPENDENCY
   --------------------------------------------------------- */

.vita-way-sticky-v2
[data-vita-way-reveal]{

  opacity:1 !important;

  transform:none !important;

  transition:none !important;
}


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

.vita-way-sticky-v2
.vita-way-v1__path{

  flex:0 0 auto;

  padding-top:40px !important;
}


/* Base line */

.vita-way-sticky-v2
.vita-way-v1__path::before{

  background:
    rgba(19,39,37,.11) !important;
}


/* Stage-based progress.
   It does NOT fill before the next stage is actually loaded.
*/

.vita-way-sticky-v2
.vita-way-v1__path::after{

  transform:
    scaleX(
      var(--vita-way-stage-progress)
    ) !important;

  transition:
    transform
    .85s
    cubic-bezier(.16,1,.3,1) !important;

  box-shadow:
    0 0 22px
    rgba(11,121,120,.18) !important;
}


/* =========================================================
   STEPS
   Future stages are genuinely hidden.
   ========================================================= */

.vita-way-sticky-v2
.vita-way-v1__step{

  min-height:242px !important;

  padding-top:26px !important;

  opacity:0;

  visibility:hidden;

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

  filter:
    blur(5px);

  pointer-events:none;

  transition:
    opacity .75s ease,
    transform .9s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .9s !important;
}


/* Stage has been reached */

.vita-way-sticky-v2
.vita-way-v1__step.is-revealed{

  opacity:1;

  visibility:visible;

  transform:
    translate3d(
      0,
      0,
      0
    );

  filter:
    blur(0);

  pointer-events:auto;

  transition:
    opacity .75s ease,
    transform .9s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s !important;
}


/* =========================================================
   DOTS
   Future dots hidden too.
   ========================================================= */

.vita-way-sticky-v2
.vita-way-v1__step
.vita-way-v1__dot{

  opacity:0;

  transform:
    translateY(-50%)
    scale(.6);

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


.vita-way-sticky-v2
.vita-way-v1__step.is-revealed
.vita-way-v1__dot{

  opacity:1;

  transform:
    translateY(-50%)
    scale(1);
}


/* Current newly-loaded stage */

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

  transform:
    translateY(-50%)
    scale(1.25) !important;
}


/* ---------------------------------------------------------
   Slightly dramatic reveal for the current stage
   --------------------------------------------------------- */

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

  color:#b48d42 !important;
}


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

  color:#0b7978 !important;
}


/* Previous stages stay elegant, not over-emphasized */

.vita-way-sticky-v2
.vita-way-v1__step.is-revealed:not(.is-active)
.vita-way-v1__number{

  color:
    rgba(19,39,37,.23) !important;
}


.vita-way-sticky-v2
.vita-way-v1__step.is-revealed:not(.is-active) h3{

  color:#132725 !important;
}


/* =========================================================
   FOOTER
   Don't show the CTA until the final stage.
   ========================================================= */

.vita-way-sticky-v2
.vita-way-v1__footer{

  margin-top:34px !important;

  opacity:0;

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

  pointer-events:none;

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


.vita-way-sticky-v2[data-vita-stage="3"]
.vita-way-v1__footer{

  opacity:1;

  transform:none;

  pointer-events:auto;
}


/* =========================================================
   STAGE 01 — soft initial arrival
   ========================================================= */

.vita-way-sticky-v2
.vita-way-v1__step:first-child.is-revealed{

  animation:
    vitaWayFirstArrival
    1s
    cubic-bezier(.16,1,.3,1)
    both;
}


@keyframes vitaWayFirstArrival{

  from{

    opacity:0;

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

    filter:
      blur(7px);
  }


  to{

    opacity:1;

    transform:none;

    filter:
      blur(0);
  }

}


/* =========================================================
   LARGE LAPTOP HEIGHT
   ========================================================= */

@media(
  min-width:901px
)
and
(
  max-height:820px
){

  .vita-way-sticky-v2
  .vita-way-v1__shell{

    padding-top:92px !important;
    padding-bottom:38px !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1__intro{

    margin-bottom:42px !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1 h2{

    font-size:
      clamp(
        52px,
        5vw,
        80px
      ) !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1__step{

    min-height:205px !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1__number{

    margin-bottom:22px !important;

    font-size:43px !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1__footer{

    margin-top:22px !important;
  }

}


/* =========================================================
   MOBILE / TABLET
   No 4-screen pinning on touch devices.
   Keep everything readable normally.
   ========================================================= */

@media(max-width:900px){

  .vita-way-v1.vita-way-sticky-v2{

    height:auto !important;

    padding:
      90px
      0
      94px !important;

    overflow:hidden !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1__shell{

    position:relative !important;

    top:auto !important;

    height:auto !important;

    display:block !important;

    padding:
      0 !important;

    overflow:visible !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1__step{

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    filter:none !important;

    pointer-events:auto !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1__step
  .vita-way-v1__dot{

    opacity:1 !important;
  }


  .vita-way-sticky-v2
  .vita-way-v1__footer{

    opacity:1 !important;

    transform:none !important;

    pointer-events:auto !important;
  }

}


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

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

  .vita-way-sticky-v2
  .vita-way-v1__step,

  .vita-way-sticky-v2
  .vita-way-v1__dot,

  .vita-way-sticky-v2
  .vita-way-v1__path::after,

  .vita-way-sticky-v2
  .vita-way-v1__footer{

    transition:none !important;

    animation:none !important;
  }

}