/* =========================================================
   VITA UNIKA — EDITORIAL HERO V15
   ========================================================= */

.vita-hero-v15{
  position:relative;
  isolation:isolate;

  width:100%;
  min-height:100svh;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  padding:
    clamp(34px,4vw,54px)
    clamp(28px,5vw,82px)
    118px;

  background:#fff;

  color:#132725;
}


/* =========================================================
   BACKGROUND ARCHITECTURE
   ========================================================= */

.v15-geometry{
  position:absolute;
  inset:0;
  z-index:-2;

  pointer-events:none;
}

.v15-geometry span{
  position:absolute;

  display:block;

  background:#f8faf9;

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

.v15-geometry span:nth-child(1){
  width:11vw;
  height:15vh;
  min-width:110px;

  left:5%;
  top:16%;
}

.v15-geometry span:nth-child(2){
  width:17vw;
  height:13vh;

  left:17%;
  top:25%;
}

.v15-geometry span:nth-child(3){
  width:31vw;
  height:14vh;

  left:34.5%;
  top:18%;
}

.v15-geometry span:nth-child(4){
  width:22vw;
  height:13vh;

  right:11%;
  top:24%;
}

.v15-geometry span:nth-child(5){
  width:10vw;
  height:18vh;

  right:5%;
  top:33%;
}

.v15-geometry span:nth-child(6){
  width:22vw;
  height:12vh;

  left:18%;
  bottom:23%;
}

.v15-geometry span:nth-child(7){
  width:23vw;
  height:11vh;

  right:17%;
  bottom:23%;
}


/* subtle light behind logo */

.vita-hero-v15::before{
  content:"";

  position:absolute;
  z-index:-1;

  width:min(70vw,900px);
  aspect-ratio:1;

  left:50%;
  top:47%;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(11,121,120,.035) 0%,
      rgba(180,141,66,.018) 35%,
      transparent 68%
    );

  pointer-events:none;
}


/* =========================================================
   TOP MOTTO
   ========================================================= */

.v15-motto{
  width:min(100%,980px);

  margin:
    0 auto
    clamp(38px,5vh,62px);

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  gap:18px;
}

.v15-motto i{
  height:1px;

  display:block;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(180,141,66,.58)
    );
}

.v15-motto i:last-child{
  background:
    linear-gradient(
      90deg,
      rgba(180,141,66,.58),
      transparent
    );
}

.v15-motto span{
  font-size:9px;
  font-weight:500;

  letter-spacing:.27em;

  white-space:nowrap;

  color:#748481;
}


/* =========================================================
   HOURS
   ========================================================= */

.v15-hours{
  width:min(100%,900px);

  margin:
    0 auto
    clamp(22px,3vh,38px);

  display:grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items:center;

  gap:28px;

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

  letter-spacing:.12em;

  color:#9aa6a3;
}

.v15-hours-center{
  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  gap:14px;
}

.v15-hours-center::before,
.v15-hours-center::after{
  content:"";

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(180,141,66,.45),
      rgba(11,121,120,.08)
    );
}

.v15-hours-center::after{
  background:
    linear-gradient(
      90deg,
      rgba(11,121,120,.08),
      rgba(180,141,66,.45)
    );
}

.v15-open{
  display:flex;
  align-items:center;

  gap:7px;

  color:#0b7978;

  white-space:nowrap;
}

.v15-open::before{
  content:"";

  width:5px;
  height:5px;

  border-radius:50%;

  background:#0b7978;
}


/* =========================================================
   MAIN COMPOSITION
   ========================================================= */

.v15-main{
  width:min(100%,1280px);

  flex:1;

  margin:auto;

  display:grid;

  grid-template-columns:
    minmax(190px,1fr)
    minmax(460px,650px)
    minmax(190px,1fr);

  align-items:center;

  gap:
    clamp(34px,5vw,76px);
}


/* =========================================================
   SIDE NOTES
   ========================================================= */

.v15-side{
  position:relative;

  align-self:center;
}

.v15-side-number{
  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:17px;

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

  color:#b48d42;
}

.v15-side-number::after{
  content:"";

  width:28px;
  height:1px;

  background:#b48d42;
}

.v15-side p{
  max-width:245px;

  margin:0;

  font-size:
    clamp(14px,1.05vw,17px);

  line-height:1.65;

  font-weight:300;

  color:#73817e;
}

.v15-side--left{
  text-align:right;
}

.v15-side--left
.v15-side-number{
  justify-content:flex-end;
}

.v15-side--left
.v15-side-number::after{
  order:-1;
}

.v15-side--left p{
  margin-left:auto;
}


/* =========================================================
   CENTER
   ========================================================= */

.v15-center{
  position:relative;

  display:flex;
  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;
}


/* =========================================================
   LOGO
   ========================================================= */

.v15-logo-wrap{
  position:relative;

  width:
    clamp(
      390px,
      40vw,
      650px
    );

  max-width:100%;

  isolation:isolate;
}

.v15-logo{
  position:relative;
  z-index:2;

  width:100%;
  height:auto;

  display:block;

  opacity:0;

  transform:
    translate3d(0,13px,0)
    scale(.975);

  filter:
    blur(22px);

  will-change:
    transform,
    opacity,
    filter;
}


/* loaded logo */

html.v15-ready
.v15-logo{
  opacity:1;

  transform:
    translate3d(0,0,0)
    scale(1);

  filter:
    blur(0);

  transition:
    opacity 1500ms ease-out,
    transform 2100ms cubic-bezier(.16,1,.3,1),
    filter 1800ms cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   LIGHT SWEEP
   masked by the actual logo
   ========================================================= */

.v15-logo-shine{
  position:absolute;
  z-index:3;

  inset:0;

  pointer-events:none;

  opacity:0;

  background:
    linear-gradient(
      105deg,
      transparent 28%,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,.98) 47%,
      rgba(221,190,116,.72) 51%,
      rgba(255,255,255,.55) 55%,
      transparent 65%
    );

  background-size:
    280% 100%;

  background-position:
    140% center;

  -webkit-mask:
    url("../assets/brand/vitaunika.svg")
    center / contain
    no-repeat;

  mask:
    url("../assets/brand/vitaunika.svg")
    center / contain
    no-repeat;
}

html.v15-ready
.v15-logo-shine{
  opacity:.52;

  animation:
    vitaLogoLight
    6.8s
    2.3s
    cubic-bezier(.4,0,.2,1)
    infinite;
}

@keyframes vitaLogoLight{

  0%{
    background-position:
      140% center;
  }

  28%{
    background-position:
      -45% center;
  }

  100%{
    background-position:
      -45% center;
  }

}


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

.v15-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  width:min(100%,430px);

  margin-top:
    clamp(30px,4vh,48px);

  border:
    1px solid
    #dde5e2;

  background:#fff;

  opacity:0;

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

html.v15-ready
.v15-actions{
  opacity:1;

  transform:none;

  transition:
    opacity 1000ms 900ms ease,
    transform 1200ms 850ms
    cubic-bezier(.16,1,.3,1);
}

.v15-actions a{
  min-height:54px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  padding:
    0 18px;

  font-size:11px;
  font-weight:500;

  text-decoration:none;

  color:#132725;

  transition:
    background-color .6s ease,
    color .6s ease;
}

.v15-actions a:first-child{
  background:#0b7978;
  color:#fff;
}

.v15-actions a svg{
  width:18px;
  height:18px;

  flex:none;
}

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

  .v15-actions a:first-child:hover{
    background:#132725;
  }

  .v15-actions a:last-child:hover{
    background:#f5f7f6;
    color:#0b7978;
  }

}


/* =========================================================
   INTRO ANIMATION — OTHER ELEMENTS
   ========================================================= */

.v15-motto,
.v15-hours,
.v15-side{
  opacity:0;

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

html.v15-ready
.v15-motto{
  opacity:1;
  transform:none;

  transition:
    opacity 1000ms 150ms ease,
    transform 1200ms 150ms
    cubic-bezier(.16,1,.3,1);
}

html.v15-ready
.v15-hours{
  opacity:1;
  transform:none;

  transition:
    opacity 1100ms 420ms ease,
    transform 1300ms 420ms
    cubic-bezier(.16,1,.3,1);
}

html.v15-ready
.v15-side--left{
  opacity:1;
  transform:none;

  transition:
    opacity 1100ms 720ms ease,
    transform 1400ms 680ms
    cubic-bezier(.16,1,.3,1);
}

html.v15-ready
.v15-side--right{
  opacity:1;
  transform:none;

  transition:
    opacity 1100ms 820ms ease,
    transform 1400ms 780ms
    cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   HEADER:
   START AT BOTTOM
   MOVE TO TOP
   STAY FIXED
   ========================================================= */

.hero-float-nav{
  --hero-nav-y:0px;

  position:fixed!important;

  top:14px!important;
  bottom:auto!important;

  left:50%!important;
  right:auto!important;

  width:
    min(
      1220px,
      calc(100% - 48px)
    )!important;

  margin:0!important;

  z-index:9990!important;

  transform:
    translate3d(
      -50%,
      var(--hero-nav-y),
      0
    )!important;

  transition:
    background-color .55s ease,
    border-color .55s ease,
    box-shadow .55s ease!important;

  background:
    rgba(255,255,255,.94)!important;

  border:
    1px solid
    rgba(19,39,37,.12)!important;

  box-shadow:none!important;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  will-change:transform;
}


/* once docked at top */

.hero-float-nav.is-docked{
  background:
    rgba(255,255,255,.92)!important;

  border-color:
    rgba(11,121,120,.12)!important;

  box-shadow:
    0 10px 35px
    rgba(19,39,37,.055)!important;
}


/* shrink chrome slightly when docked */

.hero-float-nav.is-docked{
  --header-docked:1;
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.v15-scroll{
  position:absolute;

  left:50%;
  bottom:88px;

  transform:
    translateX(-50%);

  display:flex;

  align-items:center;

  gap:9px;

  font-size:8px;

  letter-spacing:.18em;

  color:#9aa6a3;

  opacity:0;
}

.v15-scroll::before{
  content:"";

  width:4px;
  height:4px;

  border-radius:50%;

  background:#b48d42;
}

html.v15-ready
.v15-scroll{
  opacity:1;

  transition:
    opacity 1000ms 1500ms ease;
}


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

@media(max-width:1050px){

  .v15-main{
    grid-template-columns:
      minmax(130px,.8fr)
      minmax(380px,1.7fr)
      minmax(130px,.8fr);

    gap:25px;
  }

  .v15-side p{
    font-size:13px;
  }

}


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

@media(max-width:760px){

  .vita-hero-v15{
    min-height:auto;

    padding:
      104px
      22px
      54px;
  }

  .hero-float-nav{
    --hero-nav-y:0px!important;

    top:10px!important;

    width:
      calc(100% - 20px)!important;

    transform:
      translate3d(
        -50%,
        0,
        0
      )!important;
  }

  .v15-motto{
    margin-bottom:32px;

    gap:10px;
  }

  .v15-motto span{
    font-size:7px;

    letter-spacing:.19em;
  }

  .v15-hours{
    grid-template-columns:1fr;

    gap:13px;

    text-align:center;

    margin-bottom:42px;
  }

  .v15-hours > span{
    display:none;
  }

  .v15-main{
    display:flex;

    flex-direction:column;

    gap:32px;
  }

  .v15-center{
    order:1;
  }

  .v15-side{
    order:2;

    width:100%;

    text-align:left;
  }

  .v15-side--right{
    display:none;
  }

  .v15-side--left
  .v15-side-number{
    justify-content:flex-start;
  }

  .v15-side--left
  .v15-side-number::after{
    order:initial;
  }

  .v15-side--left p{
    margin:0;
    max-width:100%;
  }

  .v15-logo-wrap{
    width:min(92vw,500px);
  }

  .v15-actions{
    grid-template-columns:1fr;

    width:100%;

    margin-top:34px;
  }

  .v15-actions a + a{
    border-top:
      1px solid #dde5e2;
  }

  .v15-scroll{
    display:none;
  }

  .v15-geometry span{
    opacity:.45;
  }

}


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

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

  .v15-logo,
  .v15-actions,
  .v15-motto,
  .v15-hours,
  .v15-side{

    opacity:1!important;

    filter:none!important;

    transform:none!important;

    transition:none!important;
  }

  .v15-logo-shine{
    display:none!important;
  }

  .hero-float-nav{
    transition:none!important;
  }

}