/* src/ui/Topbar.css */

/* ===== TOPBAR ===== */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  z-index: var(--z-topbar); /* 60 */
  overflow: visible;

  --mx: 50;
  --my: 30;
  --m-int: 0;

  background:
    radial-gradient(900px 220px at 50% -90px,
      color-mix(in oklab, var(--header-accent, var(--accent)) 10%, transparent),
      transparent 75%),
    linear-gradient(180deg,
      rgba(0,0,0,0.62),
      rgba(0,0,0,0.14),
      transparent);

  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}

/* Brume vivante */
.topbar::before {
  content: "";
  position: absolute;
  inset: -120px -60px;
  pointer-events: none;
  background:
    radial-gradient(520px 260px at 18% 45%,
      color-mix(in oklab, var(--header-accent, var(--accent)) 12%, transparent),
      transparent 74%),
    radial-gradient(520px 260px at 82% 45%,
      color-mix(in oklab, var(--header-accent, var(--accent)) 9%, transparent),
      transparent 76%);
  opacity: 0.65;
  animation: veilDrift 10s ease-in-out infinite;
  z-index: 0; /* dans le contexte de la topbar */
}

@keyframes veilDrift {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* Sheen parallax */
.topbar::after {
  content: "";
  position: absolute;
  inset: -40px -60px;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--m-int) * 0.95);
  transition: opacity 220ms ease;
  mix-blend-mode: screen;
  background:
    radial-gradient(520px 220px at calc(var(--mx) * 1%) calc(var(--my) * 1%),
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.00) 65%),
    radial-gradient(640px 260px at calc(var(--mx) * 1%) calc(var(--my) * 1%),
      color-mix(in oklab, var(--header-accent, var(--accent)) 16%, transparent),
      transparent 72%),
    linear-gradient(115deg,
      transparent 0 42%,
      rgba(255,255,255,0.05) 50%,
      transparent 58% 100%);
  filter: blur(0.2px);
}

.topbar > * {
  position: relative;
  z-index: 2; /* au-dessus des pseudo-éléments */
}

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ===== BOUTONS PILL ===== */
.pill {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 8px;
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.76);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, color .18s ease;
}

.pill::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--header-accent, var(--accent)) 26%, rgba(255,255,255,0.12)),
    transparent);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .2s ease, transform .2s ease;
}

.pill:hover {
  color: rgba(255,255,255,0.92);
  transform: translateY(-1px);
}

.pill:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.pill .dot {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}

.pill .dot::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.92),
    color-mix(in oklab, var(--header-accent, var(--accent)) 70%, transparent) 60%,
    transparent 72%);
  box-shadow:
    0 0 16px color-mix(in oklab, var(--header-accent, var(--accent)) 45%, transparent),
    0 0 32px color-mix(in oklab, var(--header-accent, var(--accent)) 25%, transparent);
}

.pill .dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 58%,
    color-mix(in oklab, var(--header-accent, var(--accent)) 38%, transparent) 66%,
    transparent 76%);
  opacity: 0.75;
  transform: rotate(45deg) scale(.85);
}

/* Animations spécifiques */
#btnOracle .dot::after {
  animation: oraclePulse 6s ease-in-out infinite;
}
@keyframes oraclePulse {
  0%,100% { transform: rotate(45deg) scale(.82); opacity:.6; }
  50% { transform: rotate(45deg) scale(1.05); opacity:.95; }
}
#btnJump .dot::after {
  background:
    linear-gradient(120deg,
      transparent 0 55%,
      color-mix(in oklab, var(--header-accent, var(--accent)) 40%, transparent) 60%,
      transparent 70%),
    radial-gradient(circle,
      transparent 58%,
      color-mix(in oklab, var(--header-accent, var(--accent)) 30%, transparent) 66%,
      transparent 76%);
  animation: jumpSweep 3.6s linear infinite;
}
@keyframes jumpSweep {
  0% { transform: rotate(45deg) scale(.85); }
  50% { transform: rotate(65deg) scale(1); }
  100% { transform: rotate(45deg) scale(.85); }
}
#btnPhoto .dot::before {
  animation: photoTwinkle 2.8s ease-in-out infinite;
}
@keyframes photoTwinkle {
  0%,100% { opacity:.85; }
  50% { opacity:1; }
}
#btnMute .dot::after {
  animation: soundWave 2.4s ease-in-out infinite;
}
@keyframes soundWave {
  0%,100% { transform: scale(.8) rotate(45deg); opacity:.6; }
  50% { transform: scale(1.15) rotate(45deg); opacity:.95; }
}

.pill:hover .dot::before {
  box-shadow:
    0 0 22px color-mix(in oklab, var(--header-accent, var(--accent)) 55%, transparent),
    0 0 44px color-mix(in oklab, var(--header-accent, var(--accent)) 28%, transparent);
}
.pill:hover .dot::after { opacity: 1; }

/* ===== UNIVERS PILL ===== */
.universe-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.universe-pill .dot {
  position: relative;
  width: 8px;
  height: 8px;
  background: transparent;
  box-shadow: 0 0 22px color-mix(in oklab, var(--header-accent) 22%, transparent);
}

.universe-pill .dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.92),
    color-mix(in oklab, var(--header-accent) 55%, transparent) 55%,
    transparent 72%);
}

.universe-pill .dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 58%,
    color-mix(in oklab, var(--header-accent) 30%, transparent) 64%,
    transparent 74%);
  opacity: 0.82;
  transform: rotate(45deg) scale(0.72);
  filter: blur(0.3px);
}

#universeName {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.86);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.85),
    0 0 24px color-mix(in oklab, var(--header-accent) 18%, transparent);
}

/* ===== NAVIGATION DOTS ===== */
.dots {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 32px;
  padding: 14px 36px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 16px 60px rgba(0,0,0,0.18),
    0 0 52px color-mix(in oklab, var(--header-accent, var(--accent)) 6%, transparent);
  overflow: visible;
  /* z-index hérité de .topbar */
}

.dots__dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  backdrop-filter: none;
  --dot-accent: var(--header-accent, var(--accent));
  --tw-d: 10.5s;
  --tw-s: 8px;
  --tw-o: 0.55;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,0.085), transparent 55%),
    radial-gradient(circle at 50% 60%,
      rgba(0,0,0,0.06),
      rgba(0,0,0,0.52) 72%,
      rgba(0,0,0,0.84) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    0 0 0 1px color-mix(in oklab, var(--dot-accent) 30%, transparent),
    0 0 22px color-mix(in oklab, var(--dot-accent) 26%, transparent),
    0 14px 30px rgba(0,0,0,0.32);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Mapping univers */
.dots__dot[data-target="cosmos"]  { --dot-accent: var(--cosmos);  --tw-d: 12.6s; --tw-s: 7px;  --tw-o: 0.55; }
.dots__dot[data-target="dragon"]  { --dot-accent: var(--dragon);  --tw-d: 8.2s;  --tw-s: 6px;  --tw-o: 0.50; }
.dots__dot[data-target="ruines"]  { --dot-accent: var(--ruines);  --tw-d: 14.8s; --tw-s: 5px;  --tw-o: 0.45; }
.dots__dot[data-target="vitesse"] { --dot-accent: var(--vitesse); --tw-d: 6.6s;  --tw-s: 10px; --tw-o: 0.58; }
.dots__dot[data-target="paysage"] { --dot-accent: var(--paysage); --tw-d: 11.8s; --tw-s: 6px;  --tw-o: 0.48; }
.dots__dot[data-target="horizon"] { --dot-accent: var(--horizon); --tw-d: 15.6s; --tw-s: 5px;  --tw-o: 0.48; }

.dots__dot span {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.90);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.88),
    0 0 14px color-mix(in oklab, var(--dot-accent) 14%, transparent);
}

/* Vie interne */
@keyframes twinklePos {
  0%,100% { background-position: 0 0, 0 0, 0 0, 0 0; opacity: .42; }
  50% {
    background-position:
      var(--tw-s) calc(var(--tw-s) * -0.55),
      calc(var(--tw-s) * -0.7) calc(var(--tw-s) * 0.5),
      calc(var(--tw-s) * 0.55) var(--tw-s),
      0 0;
    opacity: .65;
  }
}

.dots__dot::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,var(--tw-o)) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 24%, rgba(255,255,255,calc(var(--tw-o) - .16)) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 64%, rgba(255,255,255,calc(var(--tw-o) - .22)) 0 1px, transparent 2px),
    radial-gradient(30px 24px at 55% 40%,
      color-mix(in oklab, var(--dot-accent) 18%, transparent),
      transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.62;
  animation: twinklePos var(--tw-d) ease-in-out infinite;
}

/* Hover / active */
.dots__dot:hover {
  transform: translateY(-1px) scale(1.06);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 1px color-mix(in oklab, var(--dot-accent) 34%, transparent),
    0 0 26px color-mix(in oklab, var(--dot-accent) 26%, transparent),
    0 16px 34px rgba(0,0,0,0.36);
}

.dots__dot.is-active {
  border-color: rgba(255,255,255,0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 1px color-mix(in oklab, var(--dot-accent) 38%, transparent),
    0 0 34px color-mix(in oklab, var(--dot-accent) 30%, transparent),
    0 18px 40px rgba(0,0,0,0.36);
}

/* Signatures par univers */
.dots__dot > span::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: -1;
}
.dots__dot[data-target="cosmos"] > span::before {
  background:
    radial-gradient(circle at 28% 35%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,0.14) 0 1px, transparent 2px),
    radial-gradient(60px 45px at 45% 55%,
      color-mix(in oklab, var(--dot-accent) 16%, transparent),
      transparent 72%);
}
.dots__dot[data-target="dragon"] > span::before {
  background:
    radial-gradient(60px 50px at 40% 62%,
      color-mix(in oklab, var(--dot-accent) 18%, transparent),
      transparent 72%);
  filter: blur(0.45px);
}
.dots__dot[data-target="ruines"] > span::before {
  background:
    radial-gradient(44px 30px at 40% 50%,
      color-mix(in oklab, var(--dot-accent) 12%, transparent),
      transparent 74%);
  filter: blur(0.7px);
}
.dots__dot[data-target="vitesse"] > span::before {
  background:
    linear-gradient(105deg,
      transparent 0 46%,
      color-mix(in oklab, var(--dot-accent) 18%, transparent) 52%,
      transparent 60%),
    radial-gradient(60px 44px at 55% 55%,
      color-mix(in oklab, var(--dot-accent) 12%, transparent),
      transparent 74%);
  opacity: 0.85;
}
.dots__dot[data-target="paysage"] > span::before {
  background:
    radial-gradient(60px 44px at 45% 50%,
      color-mix(in oklab, var(--dot-accent) 14%, transparent),
      transparent 74%);
  filter: blur(0.55px);
}
.dots__dot[data-target="horizon"] > span::before {
  background:
    radial-gradient(70px 50px at 52% 56%,
      color-mix(in oklab, var(--dot-accent) 12%, transparent),
      transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  filter: blur(0.85px);
}
.dots__dot:hover > span::before,
.dots__dot.is-active > span::before {
  opacity: 0.55;
}

/* Tooltip */
.dots__dot::after {
  content: attr(data-label);
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
  background:
    radial-gradient(120px 36px at 50% 0%,
      color-mix(in oklab, var(--dot-accent) 28%, transparent),
      transparent 70%),
    linear-gradient(115deg,
      transparent 0 42%,
      rgba(255,255,255,0.10) 50%,
      transparent 58% 100%),
    rgba(0,0,0,0.58);
  border: 1px solid color-mix(in oklab, var(--dot-accent) 28%, rgba(255,255,255,0.10));
  box-shadow:
    0 16px 40px rgba(0,0,0,0.42),
    0 0 26px color-mix(in oklab, var(--dot-accent) 20%, transparent),
    inset 0 0 18px rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.93);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: var(--z-tooltip); /* 80 */
}
.dots__dot:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0px);
}

/* Chevron tooltip */
.dots__dot > span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background:
    radial-gradient(12px 12px at 30% 30%,
      color-mix(in oklab, var(--dot-accent) 20%, transparent),
      transparent 70%),
    rgba(0,0,0,0.58);
  border-left: 1px solid color-mix(in oklab, var(--dot-accent) 20%, rgba(255,255,255,0.10));
  border-top:  1px solid color-mix(in oklab, var(--dot-accent) 20%, rgba(255,255,255,0.10));
  opacity: 0;
  pointer-events: none;
  z-index: calc(var(--z-tooltip) - 1); /* 79 */
}
.dots__dot:hover > span::after {
  opacity: 1;
}

/* ===== ÉTAT ACTIF ===== */
body[data-universe="cosmos"]  .dots__dot[data-target="cosmos"],
body[data-universe="dragon"]  .dots__dot[data-target="dragon"],
body[data-universe="ruines"]  .dots__dot[data-target="ruines"],
body[data-universe="vitesse"] .dots__dot[data-target="vitesse"],
body[data-universe="paysage"] .dots__dot[data-target="paysage"],
body[data-universe="horizon"] .dots__dot[data-target="horizon"] {
  border-color: rgba(255,255,255,0.30);
  transform: translateY(-1px) scale(1.06);
  animation:
    dotsActivePulse 1.9s ease-in-out infinite,
    dotsPingShadow 2.9s ease-out infinite;
}

@keyframes dotsActivePulse {
  0%,100% { transform: translateY(-1px) scale(1.06); filter: brightness(1.00) saturate(1.00); }
  50% { transform: translateY(-2px) scale(1.10); filter: brightness(1.06) saturate(1.06); }
}

@keyframes dotsPingShadow {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.08),
      0 0 0 1px color-mix(in oklab, var(--dot-accent) 38%, transparent),
      0 0 34px color-mix(in oklab, var(--dot-accent) 30%, transparent),
      0 18px 40px rgba(0,0,0,0.36),
      0 0 0 0 color-mix(in oklab, var(--dot-accent) 14%, transparent);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.08),
      0 0 0 1px color-mix(in oklab, var(--dot-accent) 38%, transparent),
      0 0 34px color-mix(in oklab, var(--dot-accent) 30%, transparent),
      0 18px 40px rgba(0,0,0,0.36),
      0 0 0 18px rgba(0,0,0,0);
  }
}

body[data-universe="cosmos"]  .dots__dot[data-target="cosmos"]::before,
body[data-universe="dragon"]  .dots__dot[data-target="dragon"]::before,
body[data-universe="ruines"]  .dots__dot[data-target="ruines"]::before,
body[data-universe="vitesse"] .dots__dot[data-target="vitesse"]::before,
body[data-universe="paysage"] .dots__dot[data-target="paysage"]::before,
body[data-universe="horizon"] .dots__dot[data-target="horizon"]::before {
  background-image:
    radial-gradient(circle at 50% 52%,
      color-mix(in oklab, var(--dot-accent) 40%, transparent) 0%,
      color-mix(in oklab, var(--dot-accent) 22%, transparent) 38%,
      transparent 72%),
    radial-gradient(circle at 22% 30%, rgba(255,255,255,var(--tw-o)) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 24%, rgba(255,255,255,calc(var(--tw-o) - .16)) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 64%, rgba(255,255,255,calc(var(--tw-o) - .22)) 0 1px, transparent 2px),
    radial-gradient(30px 24px at 55% 40%,
      color-mix(in oklab, var(--dot-accent) 18%, transparent),
      transparent 72%);
  opacity: 0.72;
  animation:
    twinklePos var(--tw-d) ease-in-out infinite,
    dotsActiveBloom 2.6s ease-in-out infinite;
}

@keyframes dotsActiveBloom {
  0%,100% { transform: scale(.92); opacity: .62; }
  50% { transform: scale(1.04); opacity: .82; }
}

body[data-universe="cosmos"]  .dots__dot[data-target="cosmos"] > span::before,
body[data-universe="dragon"]  .dots__dot[data-target="dragon"] > span::before,
body[data-universe="ruines"]  .dots__dot[data-target="ruines"] > span::before,
body[data-universe="vitesse"] .dots__dot[data-target="vitesse"] > span::before,
body[data-universe="paysage"] .dots__dot[data-target="paysage"] > span::before,
body[data-universe="horizon"] .dots__dot[data-target="horizon"] > span::before {
  opacity: 0.70;
}

/* ===== MEDIA QUERIES ===== */
@media (max-width: var(--breakpoint-lg)) {  /* 920px */
  .pill { font-size: 10.5px; letter-spacing: 0.18em; padding: 10px 6px; }
  .dots { gap: 20px; padding: 12px 18px; }
}

@media (max-width: var(--breakpoint-md)) {  /* 720px */
  .dots { display: none; }
}

@media (max-width: 620px) {
  .topbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar::before,
  .dots__dot::before,
  .pill .dot::after,
  .pill .dot::before,
  body[data-universe] .dots__dot[data-target],
  body[data-universe] .dots__dot[data-target]::before {
    animation: none !important;
    transition: none !important;
  }
}