:root{
  --neon-orange:#E9612C;
  --hot-red:#ff164e;
  --tube-blue:#00c8ff;
  --tube-yellow:#fff200;
  --white:#fff;
  --dark:#170500;
}

html{scroll-padding-top:185px;}
body{margin-top:0!important;}

.neonutz-sticky-header{
  position:sticky;
  top:0;
  z-index:99999;
  width:100%;
  background:linear-gradient(180deg,#ff4b00 0%,var(--neon-orange) 60%,#dc3500 100%);
  box-shadow:0 6px 22px rgba(0,0,0,.45), 0 0 20px rgba(255,30,60,.35);
  border-bottom:2px solid rgba(255,255,255,.45);
  transform-origin:top center;
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease, backdrop-filter .28s ease;
}

.neonutz-sticky-header.neon-scrolled{
  transform:scale(.92);
  box-shadow:0 10px 28px rgba(0,0,0,.62),0 0 28px rgba(255,242,0,.18),0 0 32px rgba(0,200,255,.2);
  backdrop-filter:blur(5px);
}

.admin-bar .neonutz-sticky-header{top:32px;}

.neonutz-header-wrap,
.neonutz-footer-wrap{
  position:relative;
  width:100%;
  max-width:1534px;
  margin:0 auto;
  overflow:hidden;
}

.neonutz-header-img,
.neonutz-footer-img{
  display:block;
  width:100%;
  height:auto;
}

.neonutz-logo-link{display:block;line-height:0;}

.neonutz-shimmer{
  position:absolute;
  top:10%;
  left:-35%;
  width:20%;
  height:46%;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(0,200,255,.18),rgba(255,255,255,0));
  filter:blur(1px);
  pointer-events:none;
  z-index:3;
  animation:neonShimmer 10s ease-in-out infinite;
}

@keyframes neonShimmer{
  0%,58%{left:-35%;opacity:0;}
  63%{opacity:.75;}
  78%{left:118%;opacity:.2;}
  100%{left:118%;opacity:0;}
}

.neonutz-main-nav{
  position:absolute;
  left:50%;
  bottom:3.4%;
  transform:translateX(-50%);
  width:64%;
  height:10.5%;
  pointer-events:none;
  z-index:6;
}

.neon-hotlink{
  position:absolute;
  top:9%;
  height:80%;
  display:block;
  text-decoration:none!important;
  border-radius:999px;
  pointer-events:auto;
  color:transparent!important;
  font-size:0;
  line-height:0;
  outline:none;
  background:rgba(255,255,255,0);
  transition:background .22s ease, box-shadow .22s ease, transform .22s ease, border-color .22s ease, filter .22s ease;
}

.neon-hotlink span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* These percentages line up with the menu words printed in header.png */
.neon-home{left:6.5%;width:19%;}
.neon-gallery{left:28%;width:20%;}
.neon-about{left:51%;width:21%;}
.neon-contact{left:75%;width:23%;}

.neon-hotlink::before{
  content:"";
  position:absolute;
  inset:8% 2%;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0);
  box-shadow:none;
  transition:all .22s ease;
}

.neon-hotlink::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:18%;
  height:2px;
  border-radius:30px;
  background:#00c8ff;
  box-shadow:0 0 8px #00c8ff,0 0 18px #00c8ff,0 0 28px #ff164e;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}

.neon-hotlink:hover,
.neon-hotlink:focus-visible,
.neon-hotlink.is-active{
  transform:translateY(-2px) scale(1.055);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.018));
  box-shadow:0 0 14px rgba(0,200,255,.7),0 0 32px rgba(255,22,78,.55),0 0 50px rgba(255,242,0,.22), inset 0 0 18px rgba(255,255,255,.18);
  filter:brightness(1.16);
}

.neon-hotlink:hover::before,
.neon-hotlink:focus-visible::before,
.neon-hotlink.is-active::before{
  border-color:rgba(255,255,255,.75);
  box-shadow:0 0 10px #fff200,0 0 22px #ff164e,inset 0 0 13px rgba(255,255,255,.2);
}

.neon-hotlink:hover::after,
.neon-hotlink:focus-visible::after,
.neon-hotlink.is-active::after{transform:scaleX(1);}

.neon-hotlink.neon-load-flicker{animation:menuFlicker 1.15s both;}
.neon-gallery.neon-load-flicker{animation-delay:.18s;}
.neon-about.neon-load-flicker{animation-delay:.34s;}
.neon-contact.neon-load-flicker{animation-delay:.5s;}

@keyframes menuFlicker{
  0%,8%,14%,22%,32%{filter:brightness(.55);opacity:.55;}
  5%,12%,19%,28%,45%{filter:brightness(1.45);opacity:1;}
  60%,100%{filter:brightness(1.08);opacity:1;}
}

.neonutz-footer{
  width:100%;
  background:linear-gradient(180deg,var(--neon-orange),#e64200);
  box-shadow:0 -8px 24px rgba(0,0,0,.35);
}

.neonutz-footer-links{
  position:absolute;
  left:54%;
  top:21%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,max-content);
  gap:8px 30px;
}

.neonutz-footer-links a{
  color:#fff;
  text-decoration:none!important;
  font-weight:800;
  font-size:clamp(10px,1.4vw,18px);
  text-shadow:0 0 8px rgba(255,255,255,.65),0 2px 2px rgba(0,0,0,.55);
  transition:color .2s ease,text-shadow .2s ease,transform .2s ease;
}
.neonutz-footer-links a:hover{color:var(--tube-yellow);transform:translateX(3px);text-shadow:0 0 10px var(--tube-yellow),0 0 18px var(--hot-red);}

.neonutz-socials{
  position:absolute;
  right:3.8%;
  bottom:7%;
  display:flex;
  align-items:center;
  gap:clamp(8px,1.8vw,28px);
}

.neonutz-socials a{
  display:grid;
  place-items:center;
  width:clamp(28px,3.2vw,50px);
  height:clamp(28px,3.2vw,50px);
  border-radius:50%;
  color:#fff;
  text-decoration:none!important;
  font-weight:900;
  font-size:clamp(14px,1.8vw,26px);
  border:2px solid rgba(255,255,255,.75);
  background:rgba(255,45,0,.18);
  box-shadow:0 0 9px var(--tube-blue),inset 0 0 8px rgba(255,255,255,.25);
  transition:transform .22s ease,box-shadow .22s ease,color .22s ease;
}
.neonutz-socials a:hover{transform:translateY(-5px) rotate(-4deg) scale(1.08);color:var(--tube-yellow);box-shadow:0 0 14px var(--tube-yellow),0 0 26px var(--hot-red),inset 0 0 12px rgba(255,255,255,.35);}
.neonutz-socials .paypal{border-radius:6px;width:auto;padding:0 .55em;font-size:clamp(10px,1.2vw,18px);}

.neon-flicker .neonutz-header-img{animation:neonPulse 2.7s 2;}
@keyframes neonPulse{
  0%,100%{filter:brightness(1)}
  48%{filter:brightness(1.08)}
  50%{filter:brightness(.86)}
  52%{filter:brightness(1.12)}
}

@media (max-width:782px){
  html{scroll-padding-top:125px;}
  .admin-bar .neonutz-sticky-header{top:46px;}
  .neonutz-sticky-header.neon-scrolled{transform:scale(.96);}
  .neonutz-main-nav{
    bottom:3.3%;
    width:66%;
    height:10.5%;
  }
  .neonutz-footer-links{position:relative;left:auto;top:auto;transform:none;display:flex;flex-wrap:wrap;justify-content:center;padding:12px;background:rgba(0,0,0,.12);}
  .neonutz-socials{position:relative;right:auto;bottom:auto;justify-content:center;padding:10px 10px 16px;background:rgba(0,0,0,.12);}
}
