/* =========================================================
   VITA UNIKA — CTA FINALE V1
   The final moment.
   ========================================================= */

.vita-finale-v1{

  --finale-x:50%;
  --finale-y:50%;

  position:relative;

  min-height:100svh;

  display:flex;

  align-items:center;

  padding:
    120px
    0
    74px;

  background:#fff;

  overflow:hidden;

  isolation:isolate;
}


/* =========================================================
   AMBIENT POINTER LIGHT
   ========================================================= */

.vita-finale-v1::before{

  content:"";

  position:absolute;

  z-index:-3;

  inset:0;

  background:

    radial-gradient(
      560px circle
      at
      var(--finale-x)
      var(--finale-y),

      rgba(11,121,120,.095) 0%,
      rgba(11,121,120,.045) 24%,
      rgba(180,141,66,.020) 43%,
      transparent 68%
    );

  pointer-events:none;

  transition:
    background-position .18s linear;
}


/* =========================================================
   SECONDARY BREATHING LIGHT
   ========================================================= */

.vita-finale-v1::after{

  content:"";

  position:absolute;

  z-index:-4;

  left:50%;
  top:47%;

  width:
    min(
      760px,
      62vw
    );

  aspect-ratio:1;

  border-radius:50%;

  transform:
    translate3d(
      -50%,
      -50%,
      0
    );

  background:

    radial-gradient(
      circle,
      rgba(11,121,120,.055) 0%,
      rgba(11,121,120,.022) 38%,
      transparent 70%
    );

  filter:
    blur(18px);

  animation:
    finaleBreath
    7s
    ease-in-out
    infinite;

  pointer-events:none;
}


@keyframes finaleBreath{

  0%,
  100%{

    transform:
      translate3d(
        -50%,
        -50%,
        0
      )
      scale(.92);

    opacity:.55;
  }


  50%{

    transform:
      translate3d(
        -50%,
        -50%,
        0
      )
      scale(1.08);

    opacity:1;
  }

}


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

.vita-finale-v1__shell{

  position:relative;

  z-index:2;

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

  margin:
    0
    auto;
}


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

.vita-finale-v1__meta{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:40px;

  margin-bottom:
    clamp(
      44px,
      5vw,
      74px
    );
}


.vita-finale-v1__index{

  display:flex;

  align-items:center;

  gap:18px;

  font-size:20px;

  line-height:1;

  font-weight:500;

  color:#0b7978;
}


.vita-finale-v1__index::before{

  content:"";

  width:58px;
  height:1px;

  background:#b48d42;
}


.vita-finale-v1__meta-word{

  font-size:18px;

  line-height:1;

  letter-spacing:.08em;

  font-weight:500;

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


/* =========================================================
   TYPOGRAPHY STAGE
   ========================================================= */

.vita-finale-v1__type{

  position:relative;

  z-index:2;
}


/* Giant subtle halo behind type */

.vita-finale-v1__halo{

  position:absolute;

  z-index:-1;

  left:50%;
  top:48%;

  width:
    min(
      600px,
      48vw
    );

  aspect-ratio:1;

  border-radius:50%;

  transform:
    translate3d(
      -50%,
      -50%,
      0
    );

  border:
    1px solid
    rgba(11,121,120,.12);

  pointer-events:none;
}


.vita-finale-v1__halo::before,
.vita-finale-v1__halo::after{

  content:"";

  position:absolute;

  border-radius:50%;

  pointer-events:none;
}


.vita-finale-v1__halo::before{

  inset:8%;

  border:

    1px solid
    rgba(180,141,66,.13);

  animation:
    finaleOrbit
    14s
    linear
    infinite;
}


.vita-finale-v1__halo::after{

  width:14px;
  height:14px;

  left:50%;
  top:-7px;

  background:#0b7978;

  box-shadow:

    0 0 0 7px
    rgba(11,121,120,.06),

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

  transform-origin:
    0
    calc(
      min(
        600px,
        48vw
      )
      / 2
    );

  animation:
    finaleDotOrbit
    12s
    linear
    infinite;
}


@keyframes finaleOrbit{

  to{
    transform:rotate(360deg);
  }

}


@keyframes finaleDotOrbit{

  from{

    transform:
      rotate(0deg)
      translateX(-50%);
  }

  to{

    transform:
      rotate(360deg)
      translateX(-50%);
  }

}


/* =========================================================
   MAIN HEADLINE
   ========================================================= */

.vita-finale-v1 h2{

  margin:0;

  text-align:center;

  font-weight:300;

  letter-spacing:-.075em;

  color:#132725;
}


.vita-finale-v1__ready{

  display:block;

  font-size:
    clamp(
      72px,
      10.1vw,
      170px
    );

  line-height:.77;
}


.vita-finale-v1__feel{

  display:block;

  margin-top:
    clamp(
      16px,
      1.7vw,
      30px
    );

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

  font-style:italic;

  font-weight:400;

  font-size:
    clamp(
      82px,
      11.2vw,
      188px
    );

  line-height:.76;

  letter-spacing:-.048em;

  color:#0b7978;
}


/* =========================================================
   CTA AREA
   ========================================================= */

.vita-finale-v1__actions{

  position:relative;

  z-index:5;

  margin-top:
    clamp(
      76px,
      8vw,
      118px
    );
}


/* =========================================================
   PRIMARY CTA
   ========================================================= */

.vita-finale-v1__book{

  --book-x:50%;
  --book-y:50%;

  position:relative;

  min-height:132px;

  display:grid;

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

  gap:30px;

  align-items:center;

  padding:
    20px
    22px
    20px
    38px;

  border:

    1px solid
    rgba(11,121,120,.20);

  border-radius:30px;

  overflow:hidden;

  background:

    linear-gradient(
      135deg,
      rgba(11,121,120,.052),
      rgba(255,255,255,.96) 44%,
      rgba(180,141,66,.025)
    );

  box-shadow:

    0 18px 56px
    rgba(19,39,37,.055);

  text-decoration:none;

  color:#132725;

  isolation:isolate;

  transition:

    border-color .5s ease,

    box-shadow .6s ease,

    transform .7s
    cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   BLOOM LAYER
   ========================================================= */

.vita-finale-v1__book::before{

  content:"";

  position:absolute;

  z-index:-2;

  right:28px;
  top:50%;

  width:70px;
  height:70px;

  border-radius:50%;

  background:

    radial-gradient(
      circle at 34% 30%,
      #16928e 0%,
      #0b7978 68%,
      #086360 100%
    );

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

  transition:

    width .9s
    cubic-bezier(.16,1,.3,1),

    height .9s
    cubic-bezier(.16,1,.3,1),

    right .9s
    cubic-bezier(.16,1,.3,1),

    border-radius .9s
    cubic-bezier(.16,1,.3,1);
}


/* pointer-follow highlight */

.vita-finale-v1__book::after{

  content:"";

  position:absolute;

  z-index:-1;

  inset:0;

  background:

    radial-gradient(
      480px circle
      at
      var(--book-x)
      var(--book-y),

      rgba(255,255,255,.16),
      transparent 60%
    );

  opacity:0;

  transition:
    opacity .45s ease;

  pointer-events:none;
}


/* =========================================================
   CTA LABEL
   ========================================================= */

.vita-finale-v1__book-label{

  position:relative;

  z-index:3;

  display:flex;

  align-items:center;

  gap:28px;

  min-width:0;
}


.vita-finale-v1__book-number{

  font-size:18px;

  line-height:1;

  font-weight:500;

  color:#b48d42;

  transition:
    color .5s ease;
}


.vita-finale-v1__book-text{

  font-size:
    clamp(
      32px,
      3.3vw,
      54px
    );

  line-height:1;

  letter-spacing:-.045em;

  font-weight:350;

  color:#132725;

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


/* =========================================================
   CTA ORB
   ========================================================= */

.vita-finale-v1__orb{

  position:relative;

  z-index:4;

  width:76px;
  height:76px;

  display:grid;

  place-items:center;

  justify-self:end;

  border-radius:50%;

  color:#fff;

  transform:
    translate3d(
      0,
      0,
      0
    );

  will-change:transform;

  transition:

    transform .35s ease;
}


.vita-finale-v1__orb svg{

  width:29px;
  height:29px;

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


/* =========================================================
   PRIMARY HOVER
   ========================================================= */

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

  .vita-finale-v1__book:hover{

    border-color:
      rgba(11,121,120,.40);

    box-shadow:

      0 28px 80px
      rgba(11,121,120,.13);

    transform:
      translateY(-3px);
  }


  .vita-finale-v1__book:hover::before{

    width:160%;

    height:620%;

    right:-28%;

    border-radius:46%;
  }


  .vita-finale-v1__book:hover::after{

    opacity:1;
  }


  .vita-finale-v1__book:hover
  .vita-finale-v1__book-number{

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


  .vita-finale-v1__book:hover
  .vita-finale-v1__book-text{

    color:#fff;

    transform:
      translateX(8px);
  }


  .vita-finale-v1__book:hover
  .vita-finale-v1__orb svg{

    transform:
      translate3d(
        4px,
        -4px,
        0
      )
      rotate(4deg);
  }

}


/* =========================================================
   SECONDARY ACTION
   ========================================================= */

.vita-finale-v1__secondary{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:40px;

  margin-top:30px;

  padding:
    0
    6px;
}


.vita-finale-v1__secondary-copy{

  font-size:19px;

  line-height:1.55;

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


.vita-finale-v1__call{

  display:inline-flex;

  align-items:center;

  gap:15px;

  padding-bottom:8px;

  border-bottom:

    1px solid
    rgba(11,121,120,.25);

  color:#132725;

  text-decoration:none;

  font-size:18px;

  line-height:1;

  font-weight:500;

  white-space:nowrap;

  transition:

    color .4s ease,

    gap .55s
    cubic-bezier(.16,1,.3,1),

    border-color .4s ease;
}


.vita-finale-v1__call svg{

  width:19px;
  height:19px;

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


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

  .vita-finale-v1__call:hover{

    gap:21px;

    color:#0b7978;

    border-color:#0b7978;
  }


  .vita-finale-v1__call:hover svg{

    transform:
      translateX(3px);
  }

}


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

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

  opacity:0;

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

  filter:
    blur(5px);

  transition:

    opacity .9s ease,

    transform 1.05s
    cubic-bezier(.16,1,.3,1),

    filter 1.05s
    cubic-bezier(.16,1,.3,1);
}


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

  opacity:1;

  transform:none;

  filter:none;
}


.vita-finale-v1
[data-finale-delay="1"]{

  transition-delay:.10s;
}


.vita-finale-v1
[data-finale-delay="2"]{

  transition-delay:.22s;
}


.vita-finale-v1
[data-finale-delay="3"]{

  transition-delay:.34s;
}


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

@media(max-width:1050px){

  .vita-finale-v1{

    min-height:auto;

    padding:
      112px
      0
      90px;
  }


  .vita-finale-v1__shell{

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


  .vita-finale-v1__halo{

    width:54vw;
  }

}


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

@media(max-width:700px){

  .vita-finale-v1{

    min-height:auto;

    padding:
      86px
      0
      72px;
  }


  .vita-finale-v1__shell{

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


  .vita-finale-v1__meta{

    margin-bottom:46px;
  }


  .vita-finale-v1__index{

    font-size:16px;
  }


  .vita-finale-v1__meta-word{

    display:none;
  }


  .vita-finale-v1__ready{

    font-size:
      clamp(
        58px,
        18vw,
        88px
      );

    line-height:.81;
  }


  .vita-finale-v1__feel{

    font-size:
      clamp(
        64px,
        19vw,
        94px
      );

    line-height:.82;
  }


  .vita-finale-v1__halo{

    width:76vw;
  }


  .vita-finale-v1__actions{

    margin-top:70px;
  }


  .vita-finale-v1__book{

    min-height:108px;

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

    gap:16px;

    padding:
      16px
      16px
      16px
      22px;

    border-radius:24px;
  }


  .vita-finale-v1__book::before{

    right:15px;

    width:58px;
    height:58px;
  }


  .vita-finale-v1__book-label{

    gap:14px;
  }


  .vita-finale-v1__book-number{

    font-size:15px;
  }


  .vita-finale-v1__book-text{

    font-size:
      clamp(
        25px,
        8vw,
        34px
      );
  }


  .vita-finale-v1__orb{

    width:58px;
    height:58px;
  }


  .vita-finale-v1__orb svg{

    width:23px;
    height:23px;
  }


  .vita-finale-v1__secondary{

    display:block;

    margin-top:28px;

    padding:0;
  }


  .vita-finale-v1__secondary-copy{

    margin-bottom:22px;

    font-size:17px;
  }


  .vita-finale-v1__call{

    font-size:17px;
  }

}


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

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

  .vita-finale-v1 *,
  .vita-finale-v1 *::before,
  .vita-finale-v1 *::after{

    animation:none !important;

    transition:none !important;
  }


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

    opacity:1 !important;

    transform:none !important;

    filter:none !important;
  }

}