/* =========================================================
   VITA UNIKA — INSIDE VITA CINEMATIC V2
   Calm / architectural / image-led
   ========================================================= */

.vita-clinic-v2{

  --clinic-scale:.93;
  --clinic-radius:46px;
  --clinic-x:0px;
  --clinic-y:0px;

  position:relative;

  padding:
    138px
    0
    148px;

  background:#fff;

  overflow:hidden;
}


/* =========================================================
   SHELL
   ========================================================= */

.vita-clinic-v2__shell{

  width:
    min(
      1380px,
      calc(100vw - 96px)
    );

  margin:
    0
    auto;
}


/* =========================================================
   TOP META
   ========================================================= */

.vita-clinic-v2__meta{

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;

  margin-bottom:38px;
}


.vita-clinic-v2__index{

  display:flex;

  align-items:center;

  gap:18px;

  font-size:17px;
  line-height:1;

  font-weight:600;

  letter-spacing:.08em;

  color:#0b7978;
}


.vita-clinic-v2__index::before{

  content:"";

  width:52px;
  height:1px;

  background:#b48d42;
}


.vita-clinic-v2__meta-title{

  font-size:18px;

  line-height:1;

  font-weight:500;

  letter-spacing:.08em;

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


/* =========================================================
   HERO TYPOGRAPHY
   ========================================================= */

.vita-clinic-v2__heading{

  max-width:1120px;

  margin:0;

  font-size:
    clamp(
      70px,
      7.4vw,
      122px
    );

  line-height:.88;

  letter-spacing:-.067em;

  font-weight:300;

  color:#132725;
}


.vita-clinic-v2__heading span{

  display:block;
}


.vita-clinic-v2__heading em{

  display:inline-block;

  margin-left:.08em;

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

  font-style:italic;

  font-weight:400;

  letter-spacing:-.035em;

  color:#0b7978;
}


/* =========================================================
   CINEMATIC STAGE
   ========================================================= */

.vita-clinic-v2__stage-wrap{

  position:relative;

  margin-top:64px;
}


.vita-clinic-v2__stage{

  position:relative;

  width:100%;

  height:
    clamp(
      540px,
      62vw,
      760px
    );

  margin:
    0
    auto;

  overflow:hidden;

  border-radius:
    var(--clinic-radius);

  background:#eaf1f0;

  transform:
    scale(
      var(--clinic-scale)
    );

  transform-origin:
    center center;

  box-shadow:
    0 30px 80px
    rgba(19,39,37,.09);

  transition:
    border-radius .18s linear;

  will-change:
    transform,
    border-radius;
}


/* =========================================================
   IMAGES
   ========================================================= */

.vita-clinic-v2__image{

  position:absolute;

  inset:-12px;

  width:
    calc(100% + 24px);

  height:
    calc(100% + 24px);

  object-fit:cover;

  opacity:0;

  transform:
    translate3d(
      var(--clinic-x),
      var(--clinic-y),
      0
    )
    scale(1.055);

  filter:
    saturate(.94)
    contrast(.98);

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

  will-change:
    opacity,
    transform;
}


.vita-clinic-v2__image.is-active{

  opacity:1;

  transform:
    translate3d(
      var(--clinic-x),
      var(--clinic-y),
      0
    )
    scale(1);
}


/* =========================================================
   SOFT CINEMATIC LIGHT
   ========================================================= */

.vita-clinic-v2__stage::after{

  content:"";

  position:absolute;

  inset:0;

  z-index:2;

  background:

    linear-gradient(
      180deg,
      rgba(7,31,29,.02) 0%,
      rgba(7,31,29,0) 50%,
      rgba(7,31,29,.18) 100%
    );

  pointer-events:none;
}


/* =========================================================
   SIGN MEDALLION
   ========================================================= */

.vita-clinic-v2__sign{

  position:absolute;

  z-index:5;

  top:30px;
  right:30px;

  width:94px;
  height:94px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    rgba(255,255,255,.82);

  border:
    1px solid
    rgba(255,255,255,.72);

  box-shadow:
    0 16px 40px
    rgba(19,39,37,.10);

  backdrop-filter:
    blur(16px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(140%);

  animation:
    vitaClinicSignFloat
    5s
    ease-in-out
    infinite;
}


.vita-clinic-v2__sign img{

  width:50px;
  height:50px;

  object-fit:contain;
}


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

.vita-clinic-v2__counter{

  position:absolute;

  z-index:5;

  left:32px;
  bottom:28px;

  display:flex;

  align-items:center;

  gap:12px;

  color:#fff;

  font-size:18px;

  line-height:1;

  font-weight:500;

  text-shadow:
    0 2px 18px
    rgba(0,0,0,.28);
}


.vita-clinic-v2__counter-current{

  min-width:24px;

  color:#fff;
}


.vita-clinic-v2__counter-line{

  width:42px;
  height:1px;

  background:
    rgba(255,255,255,.65);
}


.vita-clinic-v2__counter-total{

  color:
    rgba(255,255,255,.68);
}


/* =========================================================
   BOTTOM ROW
   ========================================================= */

.vita-clinic-v2__bottom{

  display:grid;

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

  gap:70px;

  align-items:end;

  margin-top:52px;

  padding-top:32px;

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


.vita-clinic-v2__statement{

  max-width:820px;

  margin:0;

  font-size:
    clamp(
      22px,
      2vw,
      30px
    );

  line-height:1.48;

  letter-spacing:-.022em;

  font-weight:350;

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


.vita-clinic-v2__link{

  display:inline-flex;

  align-items:center;

  gap:17px;

  padding-bottom:8px;

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

  font-size:18px;

  line-height:1;

  font-weight:500;

  color:#132725;

  text-decoration:none;

  white-space:nowrap;

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


.vita-clinic-v2__link svg{

  width:21px;
  height:21px;

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


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

  .vita-clinic-v2__link:hover{

    gap:23px;

    color:#0b7978;

    border-color:#0b7978;
  }


  .vita-clinic-v2__link:hover svg{

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

}


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

.vita-clinic-v2
[data-clinic-reveal]{

  opacity:0;

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

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


.vita-clinic-v2
[data-clinic-reveal].is-visible{

  opacity:1;

  transform:none;
}


/* =========================================================
   LOOP MICRO MOTION
   ========================================================= */

@keyframes vitaClinicSignFloat{

  0%,
  100%{

    transform:
      translate3d(
        0,
        0,
        0
      );
  }


  50%{

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

}


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

@media(max-width:1050px){

  .vita-clinic-v2{

    padding:
      110px
      0
      116px;
  }


  .vita-clinic-v2__shell{

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


  .vita-clinic-v2__stage{

    height:
      clamp(
        480px,
        67vw,
        660px
      );
  }


  .vita-clinic-v2__bottom{

    grid-template-columns:1fr;

    gap:28px;
  }

}


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

@media(max-width:700px){

  .vita-clinic-v2{

    padding:
      82px
      0
      88px;
  }


  .vita-clinic-v2__shell{

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


  .vita-clinic-v2__meta{

    display:block;

    margin-bottom:28px;
  }


  .vita-clinic-v2__index{

    font-size:14px;
  }


  .vita-clinic-v2__meta-title{

    margin-top:16px;

    font-size:16px;
  }


  .vita-clinic-v2__heading{

    font-size:
      clamp(
        48px,
        13.5vw,
        66px
      );
  }


  .vita-clinic-v2__heading em{

    margin-left:0;

    display:block;

    margin-top:5px;
  }


  .vita-clinic-v2__stage-wrap{

    margin-top:42px;
  }


  .vita-clinic-v2__stage{

    height:68vw;

    min-height:330px;
    max-height:470px;

    border-radius:26px !important;

    transform:none !important;
  }


  .vita-clinic-v2__sign{

    top:18px;
    right:18px;

    width:70px;
    height:70px;
  }


  .vita-clinic-v2__sign img{

    width:38px;
    height:38px;
  }


  .vita-clinic-v2__counter{

    left:20px;
    bottom:18px;

    font-size:16px;
  }


  .vita-clinic-v2__bottom{

    margin-top:34px;

    padding-top:24px;
  }


  .vita-clinic-v2__statement{

    font-size:20px;

    line-height:1.55;
  }


  .vita-clinic-v2__link{

    font-size:17px;
  }

}


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

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

  .vita-clinic-v2__image,
  .vita-clinic-v2__sign,
  .vita-clinic-v2 [data-clinic-reveal]{

    animation:none !important;

    transition:none !important;
  }


  .vita-clinic-v2 [data-clinic-reveal]{

    opacity:1 !important;

    transform:none !important;
  }

}