/* =========================================================
   VITA UNIKA — GLASSMORPHISM V27

   Full-width glass background only.
   Navigation layout remains untouched.
   ========================================================= */


/* ---------------------------------------------------------
   HEADER ITSELF
   --------------------------------------------------------- */

.hero-float-nav{
  isolation:isolate!important;
  overflow:visible!important;

  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;

  border-color:transparent!important;
  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


.hero-float-nav.is-docked{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;

  border-color:transparent!important;
  box-shadow:none!important;
}


/* =========================================================
   FULL-WIDTH GLASS SURFACE
   ========================================================= */

.hero-float-nav::before{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  left:50%;

  width:100vw;

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

  z-index:0;

  pointer-events:none;

  box-sizing:border-box;


  /* classic frosted glass */

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72) 0%,
      rgba(250,253,252,.58) 100%
    );


  -webkit-backdrop-filter:
    blur(22px)
    saturate(165%);

  backdrop-filter:
    blur(22px)
    saturate(165%);


  /* glass edges */

  border-top:
    1px solid
    rgba(255,255,255,.94);

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


  /* depth */

  box-shadow:

    inset 0 1px 0
    rgba(255,255,255,.95),

    inset 0 -1px 0
    rgba(255,255,255,.35),

    0 10px 34px
    rgba(20,46,43,.055);
}


/* =========================================================
   SOFT GLASS REFLECTION
   ========================================================= */

.hero-float-nav::after{
  content:"";

  position:absolute;

  top:0;
  bottom:0;

  left:50%;

  width:100vw;

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

  z-index:1;

  pointer-events:none;


  background:

    radial-gradient(
      ellipse at 18% -80%,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,0) 42%
    ),

    radial-gradient(
      ellipse at 82% 160%,
      rgba(11,121,120,.045) 0%,
      rgba(11,121,120,0) 44%
    ),

    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,255,255,.03) 34%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,.04) 65%,
      transparent 100%
    );

  opacity:.78;
}


/* =========================================================
   CONTENT ABOVE GLASS
   stacking only
   ========================================================= */

.hero-float-nav > *{
  position:relative;
  z-index:3;
}


/* =========================================================
   DOCKED STATE
   slightly stronger frosted glass
   ========================================================= */

.hero-float-nav.is-docked::before{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.76) 0%,
      rgba(248,252,251,.62) 100%
    );


  -webkit-backdrop-filter:
    blur(26px)
    saturate(175%);

  backdrop-filter:
    blur(26px)
    saturate(175%);


  box-shadow:

    inset 0 1px 0
    rgba(255,255,255,.98),

    inset 0 -1px 0
    rgba(255,255,255,.38),

    0 12px 38px
    rgba(20,46,43,.065);
}


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

@media(max-width:760px){

  .hero-float-nav::before{

    background:
      rgba(250,253,252,.76);


    -webkit-backdrop-filter:
      blur(18px)
      saturate(150%);

    backdrop-filter:
      blur(18px)
      saturate(150%);

  }

}


/* =========================================================
   FALLBACK
   ========================================================= */

@supports not (
  backdrop-filter:blur(10px)
){

  .hero-float-nav::before{

    background:
      rgba(248,252,251,.94);

  }

}