/* =========================================================
   SKY HIGH FRAMES STUDIO
   SHARED NAVIGATION
   navigation.css - v32
   ========================================================= */

:root {
  --nav-cyan: #49c7ff;
  --nav-cyan-bright: #79ddff;
  --nav-bg: rgba(5, 20, 32, 0.88);
  --nav-border: rgba(113, 215, 255, 0.30);
  --nav-width: min(520px, calc(100vw - 20px));
  --nav-center-x: 50%;
}


/* =========================================================
   ONE NAV DESIGN
   Used by BOTH top and bottom navigation
   ========================================================= */

.site-nav {

  width: var(--nav-width) !important;

  display: flex !important;

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

  gap: 0 !important;

  padding: 14px 30px !important;

  border-radius: 999px !important;

  background: var(--nav-bg) !important;

  border:
    1px solid
    var(--nav-border) !important;

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

  box-shadow:

    0 0 6px
    rgba(84, 198, 255, 0.55),

    0 0 18px
    rgba(84, 198, 255, 0.35),

    0 0 38px
    rgba(84, 198, 255, 0.18),

    0 0 65px
    rgba(84, 198, 255, 0.08);

  isolation: isolate;

}


/* =========================================================
   LINKS
   ========================================================= */

.site-nav a {

  color: #ffffff !important;

  text-decoration: none !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: 0.13em !important;

  white-space: nowrap !important;

  opacity: 0.76;

  transition:
    opacity 0.25s ease,
    color 0.25s ease,
    text-shadow 0.25s ease;

}


/* =========================================================
   ACTIVE / HOVER
   ========================================================= */

.site-nav a:hover,
.site-nav a.active {

  opacity: 1;

  color: var(--nav-cyan-bright) !important;

  text-shadow:

    0 0 5px
    rgba(73, 199, 255, 0.90),

    0 0 12px
    rgba(73, 199, 255, 0.50);

}


/* =========================================================
   HOME
   ========================================================= */

.site-nav .home-link {
  opacity: 0.55;
}


.site-nav .home-link:hover {

  opacity: 1;

}


/* =========================================================
   ROMANIAN LABELS
   Longer labels use a tighter type scale and reserve a real
   gap for the moving play indicator.
   ========================================================= */

html[data-language="ro"] .site-nav {
  justify-content: center !important;
  gap: 25px !important;
  padding-right: 24px !important;
  padding-left: 24px !important;
}


html[data-language="ro"] .site-nav a {
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
}


/* =========================================================
   MOVING PLAY INDICATOR
   ========================================================= */

.site-nav .nav-play-indicator {

  --nav-play-x: 0px;
  --nav-play-y: 0px;
  --nav-play-scale: 1;

  position: absolute;

  z-index: 2;

  top: 0;
  left: 0;

  display: block !important;

  width: 15px !important;
  height: 15px !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    rgba(4, 24, 39, 0.92);

  border:
    1px solid
    rgba(121, 221, 255, 0.92);

  border-radius: 50%;

  box-shadow:

    0 -0.5px 4px
    rgba(73, 199, 255, 0.74),

    0 -1px 11px
    rgba(73, 199, 255, 0.32);

  pointer-events: none;

  opacity: 0;

  transform:
    translate3d(
      var(--nav-play-x),
      var(--nav-play-y),
      0
    )
    scale(var(--nav-play-scale));

  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease,
    box-shadow 0.22s ease;

  will-change: transform;

}


.site-nav .nav-play-indicator::after {
  content: "";

  position: absolute;

  top: calc(50% - 0.75px);
  left: 50%;

  width: 0;
  height: 0;

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

  border-top:
    3px solid transparent;

  border-bottom:
    3px solid transparent;

  border-left:
    5px solid var(--nav-cyan-bright);

  filter:
    drop-shadow(
      0 0 3px
      rgba(121, 221, 255, 0.90)
    );

}


.site-nav .nav-play-indicator.is-visible {
  opacity: 1;
}


.site-nav .nav-play-indicator.is-travelling {
  --nav-play-scale: 1.14;

  box-shadow:

    0 0 7px
    rgba(73, 199, 255, 0.96),

    0 0 18px
    rgba(73, 199, 255, 0.58),

    0 0 30px
    rgba(73, 199, 255, 0.20);

}


.site-nav .nav-play-indicator.is-initializing {
  transition: none;

}


/* =========================================================
   TOP POSITION
   Only POSITION differs
   ========================================================= */

.site-nav.page-top-nav {

  position: absolute !important;

  z-index: 100;

  top: 28px !important;

  right: auto !important;
  left: var(--nav-center-x) !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;

}


/* =========================================================
   BOTTOM POSITION
   Only POSITION differs
   ========================================================= */

.site-nav.bottom-nav {

  position: relative !important;

  z-index: 20;

  right: auto !important;
  left: var(--nav-center-x) !important;
  top: auto !important;

  transform: translateX(-50%) !important;

  margin:
    0 0 30px !important;

}


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

@media (max-width: 760px) {

  .site-nav {

    padding:
      11px 17px !important;

  }


  .site-nav a {

    font-size:
      10px !important;

    letter-spacing:
      0.08em !important;

  }


  html[data-language="ro"] .site-nav {
    gap: 18px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }


  html[data-language="ro"] .site-nav a {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
  }


  .site-nav .nav-play-indicator {

    width:
      12px !important;

    height:
      12px !important;

  }


  .site-nav.page-top-nav {

    top:
      16px !important;

  }

}


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

  .site-nav .nav-play-indicator {
    transition: none;
  }

}


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

@media (max-width: 480px) {

  .site-nav {

    padding:
      10px 13px !important;

  }


  .site-nav a {

    font-size:
      8px !important;

    letter-spacing:
      0.05em !important;

  }


  html[data-language="ro"] .site-nav {
    gap: 14px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }


  html[data-language="ro"] .site-nav a {
    font-size: 8px !important;
    letter-spacing: 0.035em !important;
  }


  html[data-language="ro"] .site-nav .nav-play-indicator {
    width: 10px !important;
    height: 10px !important;
  }

}