/* Barra in cima a tutti i siti di THETA DIVISION: un logo per gioco, porta al suo sito. */
:root { --switch-h: 56px; }
/* La barra resta in cima: i link interni (#demo...) si fermano sotto di lei. */
html { scroll-padding-top: var(--switch-h); }
.switch { position: sticky; top: 0; z-index: 20; height: var(--switch-h); background: #000; display: flex; justify-content: center; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,0.08); }
.switch a { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 30px; opacity: 0.45; transition: opacity .2s, background-color .2s; }
.switch a + a { border-left: 1px solid rgba(255,255,255,0.08); }
.switch img { display: block; width: auto; transition: filter .2s; }
.switch .ntb img { height: 27px; } /* logo vettoriale (logo_bar.svg): linee piene anche piccolo */
.switch .vv img { height: 38px; }
.switch a:hover, .switch a:focus-visible { opacity: 1; background-color: rgba(255,255,255,0.07); outline: none; }
.switch .ntb:hover img, .switch .ntb:focus-visible img { filter: brightness(1.25) drop-shadow(0 0 6px rgba(143,220,255,0.7)); }
.switch .vv:hover .glitch, .switch .vv:focus-visible .glitch { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,47,208,0.7)); }
.switch a[aria-current="page"] { opacity: 1; }
/* Il gioco attivo: una barra luminosa sul bordo IN ALTO e una luce che
   scende sulla voce (una linea sotto si confondeva con quella del logo di
   No Trace Back). */
.switch a[aria-current="page"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--hl), transparent 70%); opacity: 0.16; }
.switch a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--hl); box-shadow: 0 0 10px var(--hl); }
.switch .ntb { --hl: #8fdcff; }
.switch .vv { --hl: #ff2fd0; }
@media (max-width: 480px) {
  :root { --switch-h: 48px; }
  .switch a { padding: 0 16px; }
  .switch .ntb img { height: 19px; }
  .switch .vv img { height: 30px; }
}

/* VIRTUAVERSE: il glitch delle GIF promo. Ogni tanto il logo si spezza in
   fasce orizzontali spostate (due copie ritagliate), con un lampo di un
   fotogramma bianco, ciano o giallo; al passaggio del mouse la raffica parte
   subito. Con "riduci movimento" resta fermo. */
.switch .glitch { position: relative; display: block; transition: filter .2s; }
.switch .glitch .sl { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .switch .vv .glitch > img:first-child { animation: vv-flash 6s steps(1, end) infinite; }
  .switch .vv .glitch .a { animation: vv-slice-a 6s steps(1, end) infinite; }
  .switch .vv .glitch .b { animation: vv-slice-b 6s steps(1, end) infinite; }
  .switch .vv:hover .glitch > img:first-child, .switch .vv:focus-visible .glitch > img:first-child { animation-duration: .9s; }
  .switch .vv:hover .glitch .sl, .switch .vv:focus-visible .glitch .sl { animation-duration: .9s; }
}
/* La raffica dura l'ultimo 12% del ciclo (~0.7 s su 6 s). */
@keyframes vv-flash {
  0%, 88% { filter: none; transform: none; }
  89% { transform: translateX(2px); }
  91% { filter: brightness(0) invert(1); transform: translateX(-2px); }      /* bianco */
  92% { filter: none; transform: none; }
  95% { filter: hue-rotate(-120deg) saturate(1.6); transform: translateX(3px); } /* ciano */
  96% { filter: none; transform: none; }
  98% { filter: hue-rotate(120deg) saturate(2) brightness(1.3); }           /* giallo */
  99%, 100% { filter: none; transform: none; }
}
@keyframes vv-slice-a {
  0%, 88% { opacity: 0; }
  89% { opacity: 1; clip-path: inset(18% 0 58% 0); transform: translateX(-7px); }
  91% { opacity: 1; clip-path: inset(52% 0 30% 0); transform: translateX(6px); filter: brightness(0) invert(1); }
  93% { opacity: 1; clip-path: inset(70% 0 8% 0); transform: translateX(-4px); filter: none; }
  95% { opacity: 1; clip-path: inset(30% 0 48% 0); transform: translateX(9px); filter: hue-rotate(-120deg); }
  97% { opacity: 0; }
  98% { opacity: 1; clip-path: inset(8% 0 76% 0); transform: translateX(-5px); filter: hue-rotate(120deg) saturate(2); }
  99%, 100% { opacity: 0; }
}
@keyframes vv-slice-b {
  0%, 89% { opacity: 0; }
  90% { opacity: 1; clip-path: inset(62% 0 14% 0); transform: translateX(8px); }
  92% { opacity: 1; clip-path: inset(10% 0 70% 0); transform: translateX(-6px); filter: hue-rotate(-120deg); }
  94% { opacity: 0; }
  96% { opacity: 1; clip-path: inset(44% 0 36% 0); transform: translateX(-9px); filter: none; }
  98% { opacity: 0; }
}

/* NO TRACE BACK: il bagliore azzurro della scritta respira (sale e scende in
   4 s); col mouse sopra resta acceso pieno. La testina che corre sulla riga
   e' dentro logo_bar.svg. */
@media (prefers-reduced-motion: no-preference) {
  .switch .ntb img { animation: ntb-glow 4s ease-in-out infinite; }
  .switch .ntb:hover img, .switch .ntb:focus-visible img { animation: none; }
}
@keyframes ntb-glow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(143,220,255,0.35)); }
  50% { filter: drop-shadow(0 0 2px rgba(143,220,255,1)) drop-shadow(0 0 8px rgba(143,220,255,0.9)) drop-shadow(0 0 16px rgba(143,220,255,0.55)); }
}