
body.public-wow-hero-page{
  --rail-bg: rgba(7,17,29,.76);
  --rail-line: rgba(255,255,255,.10);
  --rail-text: rgba(238,244,255,.80);
  --rail-accent: rgba(138,241,255,.96);
}

.public-wow-page > *,
.public-wow-hero-page > *{
  position: relative;
  z-index: 2;
}

.public-route-rail{
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 34;
  display: grid;
  gap: .55rem;
  padding: .7rem;
  border-radius: 18px;
  border: 1px solid var(--rail-line);
  background: var(--rail-bg);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
}

.public-route-rail a{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 38px;
  padding: 0 .78rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--rail-text);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  border: 1px solid transparent;
}

.public-route-rail a::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}

.public-route-rail a:hover{
  transform: translateX(2px);
  background: rgba(255,255,255,.05);
}

.public-route-rail a.is-active{
  color: #eef4ff;
  border-color: rgba(116,215,255,.22);
  background: linear-gradient(180deg, rgba(116,215,255,.16), rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px rgba(116,215,255,.08), 0 0 16px rgba(116,215,255,.08);
}

.public-route-rail a.is-active::before{
  background: var(--rail-accent);
  box-shadow: 0 0 14px rgba(116,215,255,.38);
}

.public-hero-target{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.public-hero-energy{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .88;
  z-index: 0;
}

.public-hero-energy .energy-line{
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(135,232,255,.82), transparent);
  box-shadow: 0 0 12px rgba(65,191,255,.50);
}

.public-hero-energy .line-a{
  --rot: -11deg;
  width: 28vw;
  min-width: 280px;
  left: -3vw;
  top: 34%;
  transform: rotate(var(--rot));
  animation: publicEnergyShift 10s ease-in-out infinite;
}

.public-hero-energy .line-b{
  --rot: 12deg;
  width: 24vw;
  min-width: 230px;
  right: -2vw;
  top: 26%;
  transform: rotate(var(--rot));
  animation: publicEnergyShift 12s ease-in-out infinite reverse;
}

.public-hero-energy .line-c{
  --rot: -8deg;
  width: 18vw;
  min-width: 180px;
  right: 12vw;
  bottom: 22%;
  transform: rotate(var(--rot));
  animation: publicEnergyShift 11s ease-in-out infinite;
}

.public-hero-energy .energy-orb{
  position: absolute;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #ffffff, #87e8ff 40%, rgba(65,191,255,.15) 72%, transparent 74%);
  box-shadow: 0 0 32px rgba(65,191,255,.55);
}

.public-hero-energy .orb-a{
  left: 10%;
  top: 40%;
  animation: publicOrbFloat 8.8s ease-in-out infinite;
}

.public-hero-energy .orb-b{
  right: 14%;
  top: 30%;
  animation: publicOrbFloat 10.4s ease-in-out infinite reverse;
}

.public-hero-energy .orb-c{
  right: 20%;
  bottom: 18%;
  animation: publicOrbFloat 9.6s ease-in-out infinite;
}

.public-hero-target > *{
  position: relative;
  z-index: 1;
}

.public-tilt-shell{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}

.public-tilt-shell.is-tilting{
  box-shadow:
    0 34px 90px rgba(0,0,0,.34),
    0 0 0 1px rgba(116,215,255,.06),
    0 0 28px rgba(116,215,255,.08);
}

.public-glint{
  position: relative;
  overflow: hidden;
}

.public-glint::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -120%;
  width: 42%;
  height: 180%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  animation: publicGlintSweep 5.8s ease-in-out infinite;
  pointer-events: none;
}

.public-wow-page .itdocs-shell,
.public-wow-page .itdocs-stage,
.public-wow-page .public-wow-dock{
  transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease;
}

.public-wow-page .itdocs-shell.is-hot{
  box-shadow:
    0 34px 96px rgba(0,0,0,.34),
    0 0 0 1px rgba(116,215,255,.06),
    0 0 22px rgba(116,215,255,.08);
}

@keyframes publicEnergyShift{
  0%,100%{ transform: rotate(var(--rot)) translateX(0); opacity:.82; }
  50%{ transform: rotate(var(--rot)) translateX(18px); opacity:1; }
}

@keyframes publicOrbFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); opacity:.86; }
  50%{ transform: translate3d(8px,-16px,0) scale(1.08); opacity:1; }
}

@keyframes publicGlintSweep{
  0%, 100%{ left:-120%; opacity:0; }
  8%{ opacity:1; }
  28%{ left:140%; opacity:.95; }
  36%{ opacity:0; }
}

@media (max-width: 980px){
  .public-route-rail{
    display: none;
  }
}
