:root{
  --nav-core-size:3px;
  --nav-corona-spread:55px;
  --nav-flare-width:708px;
  --nav-ray-opacity:0.01;
  --nav-move-speed:1.1s;
  --nav-sun-y-offset:-1px;
}

#horizon-nav{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  width:min(1040px,calc(100vw - 36px));
  padding:8px 12px 22px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:18px;
  background:rgba(10,14,26,.58);
  backdrop-filter:blur(10px);
  border:1px solid rgba(245,166,35,.08);
}

.hnav-main,
.hnav-tools{
  display:flex;
  align-items:center;
  gap:8px;
}

.hnav-tools{
  margin-left:14px;
  padding-left:14px;
  border-left:1px solid rgba(245,166,35,.14);
}

.hnav-item{
  position:relative;
  z-index:30;
  border:0;
  background:none;
  color:rgba(255,255,255,.32);
  font:inherit;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:8px 9px;
  cursor:pointer;
  transition:color .35s ease,text-shadow .35s ease;
  white-space:nowrap;
}

.hnav-item.active{
  color:#fff;
  text-shadow:0 0 12px rgba(245,166,35,.45);
}

.hnav-tool{
  color:rgba(245,166,35,.62);
  font-size:8px;
}

.hnav-horizon{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(245,166,35,.12) 15%,
    rgba(245,166,35,.14) 50%,
    rgba(245,166,35,.12) 85%,
    transparent 100%
  );
  z-index:10;
}

.hnav-sun{
  position:absolute;
  bottom:calc(12px + var(--nav-sun-y-offset));
  left:0;
  width:0;
  height:0;
  transform:translateX(0);
  transition:transform var(--nav-move-speed) cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:20;
}

.hnav-flare{
  position:absolute;
  width:var(--nav-flare-width);
  height:120px;
  left:calc(var(--nav-flare-width) / -2);
  bottom:0;
  background:
    radial-gradient(ellipse 50% 12% at 50% 100%,
      rgba(255,245,200,.70) 0%,
      rgba(245,166,35,.35) 30%,
      rgba(245,158,11,.08) 65%,
      transparent 100%),
    radial-gradient(ellipse 18% 80% at 50% 100%,
      rgba(245,166,35,.45) 0%,
      rgba(245,158,11,.15) 45%,
      transparent 80%);
  z-index:21;
}

.hnav-corona{
  position:absolute;
  width:var(--nav-corona-spread);
  height:var(--nav-corona-spread);
  left:calc(var(--nav-corona-spread) / -2);
  bottom:calc(var(--nav-corona-spread) / -2);
  background:radial-gradient(circle,
    rgba(245,166,35,.90) 0%,
    rgba(245,158,11,.42) 35%,
    rgba(245,120,0,0) 70%);
  border-radius:50%;
  mix-blend-mode:screen;
  opacity:.7;
  z-index:22;
}

.hnav-rays{
  position:absolute;
  width:calc(var(--nav-corona-spread) * 2.2);
  height:calc(var(--nav-corona-spread) * 2.2);
  left:calc(var(--nav-corona-spread) * -1.1);
  bottom:calc(var(--nav-corona-spread) * -1.1);
  background:repeating-conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(245,180,60,calc(var(--nav-ray-opacity) * .25)) 5deg,
    transparent 12deg,
    transparent 22deg,
    rgba(245,158,11,calc(var(--nav-ray-opacity) * .14)) 27deg,
    transparent 34deg
  );
  border-radius:50%;
  filter:blur(10px);
  mask-image:radial-gradient(circle, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  animation:hnav-rotate 90s linear infinite;
  mix-blend-mode:screen;
  z-index:20;
}

.hnav-core{
  position:absolute;
  width:var(--nav-core-size);
  height:var(--nav-core-size);
  left:calc(var(--nav-core-size) / -2);
  bottom:calc(var(--nav-core-size) / -2);
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 6px 2px rgba(245,166,35,.55);
  z-index:24;
}

@keyframes hnav-rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.optional-return-nav{
  position:fixed;
  top:16px;
  left:16px;
  z-index:10000;
  display:flex;
  gap:8px;
}

.optional-return-nav a{
  color:var(--accent-solar,#f5a623);
  font-family:inherit;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--bg-border,#1a2a3e);
  background:rgba(10,14,26,.88);
  backdrop-filter:blur(8px);
  padding:6px 12px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}

.optional-return-nav a:hover{
  border-color:var(--accent-solar,#f5a623);
  box-shadow:var(--glow-solar,0 0 18px rgba(245,166,35,.5));
  background:rgba(245,166,35,.08);
}

@media (max-width:768px){
  #horizon-nav{
    top:0;
    left:0;
    right:0;
    transform:none;
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    padding:8px 10px 20px;
  }

  .hnav-main,
  .hnav-tools{
    gap:2px;
  }

  .hnav-tools{
    margin-left:6px;
    padding-left:6px;
  }

  .hnav-item{
    font-size:8px;
    padding:7px;
  }
}