/* ============================================================
   darkhorsednme – MENU.CSS (FULL REBUILD)
   Layout:
   - Left stacked headings
   - Centre logo/media LOCKED in the middle
   - Sublinks animate from clicked heading to orbit positions
   - Orbit links ALWAYS upright (no rotation nonsense)
   ============================================================ */

/* ---------- Overlay Shell ---------- */
.dh-menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;

  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(40,130,190,.16), transparent 60%),
    radial-gradient(900px 600px at 15% 80%, rgba(120,80,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(6,14,22,.85), rgba(6,14,22,.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dh-menu{
  width: min(1100px, 96vw);
}

/* ---------- Main Glass Panel ---------- */
.dh-stage{
  position: relative;
  width: 100%;
  min-height: 560px;

  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: center;

  padding: 18px;
  border-radius: 26px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* subtle inner rings for depth */
.dh-stage::before{
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 22px;
  pointer-events:none;
  background:
    radial-gradient(circle at 55% 45%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 55% 45%, rgba(80,160,255,.10), transparent 62%),
    radial-gradient(circle at 55% 45%, rgba(255,255,255,.06), transparent 70%);
  opacity: .55;
}

/* ---------- LEFT STACK ---------- */
.dh-left{
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  justify-content: center;
}

.dh-left-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  opacity: .85;
  padding: 6px 10px;
}

.dh-left-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px;
}

/* Heading buttons */
.dh-left-btn{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;

  padding: 12px 12px;
  border-radius: 16px;

  cursor: pointer;
  color: inherit;
  text-align: left;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.07);

  transition: transform 120ms ease, background 200ms ease, border-color 200ms ease;
}

.dh-left-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(120,190,255,.22);
}

.dh-left-btn[aria-current="true"]{
  background: rgba(70,160,255,.12);
  border-color: rgba(120,190,255,.32);
}

.dh-left-ico{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 16px;
}

.dh-left-txt{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- CENTRE AREA (LOCKED) ---------- */
.dh-centre-wrap{
  position: relative;
  z-index: 1;

  /* Make this a true centred square arena for orbit maths */
  width: min(560px, 100%);
  height: min(560px, 72vh);
  margin: 0 auto;

  display: grid;
  place-items: center;
}

/* Static centre media circle – NEVER moves */
.dh-centre{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 190px;
  height: 190px;
  border-radius: 999px;
  overflow: hidden;

  z-index: 4;
  pointer-events: none;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow:
    0 16px 42px rgba(0,0,0,.40),
    0 0 0 10px rgba(80,160,255,.06),
    0 0 0 26px rgba(255,255,255,.03);
}

.dh-centre img,
.dh-centre video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* swap image/video */
.dh-centre img{ opacity: 1; transition: opacity 180ms ease; }
.dh-centre video{ opacity: 0; transition: opacity 180ms ease; }
.dh-centre.is-video img{ opacity: 0; }
.dh-centre.is-video video{ opacity: 1; }

/* ---------- ORBIT LAYER ---------- */
/* Orbit is centred and same coordinate space as dh-centre-wrap */
.dh-orbit{
  position: absolute;
  inset: 0;
  z-index: 3;

  /* We want the cards clickable, but not block drags */
  pointer-events: none;
}

/* Sublink card */
.dh-orbit-link{
  pointer-events: auto;

  position: absolute;
  left: 50%;
  top: 50%;

  width: min(330px, 46vw);
  max-width: 360px;

  padding: 12px 12px;
  border-radius: 16px;

  color: inherit;
  text-decoration: none;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);

  /* IMPORTANT:
     - We translate from centre using vars
     - No rotation is applied, so text stays upright */
  transform:
    translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px)))
    scale(.98);

  opacity: 0;
  filter: blur(5px);

  transition:
    transform 560ms cubic-bezier(.2,.9,.2,1) var(--d, 0ms),
    opacity 280ms ease var(--d, 0ms),
    filter 280ms ease var(--d, 0ms),
    background 180ms ease,
    border-color 180ms ease;
}

.dh-orbit-link.is-in{
  transform:
    translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
    scale(1);
  opacity: 1;
  filter: blur(0);
}

.dh-orbit-link:hover{
  background: rgba(70,160,255,.12);
  border-color: rgba(120,190,255,.28);
}

.dh-orbit-main{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.2;
  padding-right: 18px; /* room for arrow */
}

.dh-orbit-sub{
  margin-top: 4px;
  font-size: 12px;
  opacity: .78;
  line-height: 1.25;
}

/* Arrow hint */
.dh-orbit-link::after{
  content: "↗";
  position: absolute;
  right: 12px;
  top: 10px;
  opacity: .55;
  font-weight: 900;
}

/* ---------- Error panel ---------- */
.dh-menu-error{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(620px, 92vw);
  padding: 14px 14px;
  border-radius: 16px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  z-index: 10;
}

.dh-menu-error-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.dh-menu-error-text{
  opacity: .85;
  font-size: 13px;
  line-height: 1.35;
}

.dh-menu-error code{
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .dh-stage{
    grid-template-columns: 280px 1fr;
    min-height: 600px;
  }

  .dh-centre-wrap{
    width: min(520px, 100%);
    height: min(520px, 70vh);
  }
}

@media (max-width: 820px){
  .dh-stage{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    min-height: 700px;
  }

  .dh-left{
    justify-content: flex-start;
  }

  .dh-centre-wrap{
    width: 100%;
    height: min(560px, 70vh);
  }

  .dh-centre{
    width: 170px;
    height: 170px;
  }

  .dh-orbit-link{
    width: min(360px, 90vw);
  }
}

@media (max-width: 420px){
  .dh-left-btn{
    padding: 11px 11px;
    border-radius: 14px;
  }
  .dh-left-txt{
    font-size: 13.5px;
  }
  .dh-orbit-main{ font-size: 13.5px; }
  .dh-orbit-sub{ font-size: 11.5px; }
}