/* ============================================================
   COOPER DEBATE TEAM — dome-nav.css
   Dome navigation adapted from Langley Legacy TSA 2026
   by Hannah Shiv, Netre, and Moorva — Cooper Middle School
   ============================================================ */

:root {
  --red:      #b30000;
  --nav-gold: #ffe58f;
}

#radial-nav { display: none !important; }

/* === WRAP — fixed, top center ===
   IMPORTANT: NO transform here — a CSS transform on a fixed ancestor
   creates a containing block, which breaks position:fixed on children
   (intel-threads SVG would be clipped to 72px instead of full viewport).
   Use left:calc(50% - 36px) to center without transform.               */
#circ-wrap {
  position: fixed;
  top: 8px;
  left: calc(50% - 36px);
  width: 72px !important;
  z-index: 9999;
}

/* === CENTER BUTTON (exact Langley spec) === */
#circ-btn {
  position: relative;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--nav-gold);
  box-shadow: 0 0 20px rgba(179,0,0,0.50), 0 4px 24px rgba(0,0,0,0.60);
  cursor: pointer;
  transition: background 0.25s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  z-index: 2;
}
#circ-btn:hover { background: #900000; }
#circ-btn.open  { transform: none; }

/* Pulse rings */
#circ-btn::before,
#circ-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 229, 143, 0.28);
  animation: dnPulse 3.6s ease-out infinite;
  pointer-events: none;
}
#circ-btn::after {
  inset: -14px;
  border-color: rgba(255, 229, 143, 0.14);
  animation-delay: 1.2s;
}
@keyframes dnPulse {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
#circ-btn.open::before,
#circ-btn.open::after { animation: none; opacity: 0; }

/* Hamburger rotation when open */
#circ-wrap.open #circ-btn .dn-hamburger { transform: rotate(90deg); }

/* === DOME BACKDROP (exact Langley spec) === */
#circ-wrap::before {
  content: "";
  position: absolute;
  width: 356px;
  height: 223px;
  left: -148px;
  top: -8px;
  background: rgba(5, 8, 16, 0.97);
  border-radius: 0 0 178px 178px;
  border-left:   1px solid rgba(255, 229, 143, 0.18);
  border-right:  1px solid rgba(255, 229, 143, 0.18);
  border-bottom: 1px solid rgba(255, 229, 143, 0.18);
  display: none;
  pointer-events: none;
  z-index: -1;
}
#circ-wrap.open::before { display: block; }

/* === MAIN CIRCLE ITEMS (exact Langley spec) === */
.dn-item {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #050810;
  border: 2.5px solid var(--red);
  color: var(--nav-gold);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  padding: 9px 0 0;
  opacity: 0;
  transform: scale(0.15);
  pointer-events: none;
  transition:
    opacity      0.3s  ease-out,
    transform    0.4s  cubic-bezier(0.4, 0, 0.6, 1),
    background   0.18s ease,
    border-color 0.18s ease;
  z-index: 3;
}

#circ-wrap.open .dn-item {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition:
    opacity      0.26s ease,
    transform    0.4s  cubic-bezier(0.16, 1, 0.3, 1),
    background   0.18s ease,
    border-color 0.18s ease;
}

/* Active page circle */
.dn-item.active {
  background: var(--red);
  border-color: var(--nav-gold);
  color: #fff;
}
.dn-item.active .dn-icon { stroke: #fff; }

/* Hover */
.dn-item:hover {
  background:   var(--red)      !important;
  border-color: var(--nav-gold) !important;
  color:        #fff            !important;
}
.dn-item:hover .dn-icon { stroke: #fff !important; }

/* Icon */
.dn-icon {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  stroke: #ffe58f;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin: 0;
}

/* === CIRCLE POSITIONS — R=130, downward semicircle (exact Langley) === */
.dn-p1 { left: -136px; top:  -6px; transform-origin:  172px  42px; }
.dn-p2 { left: -111px; top:  70px; transform-origin:  147px -34px; }
.dn-p3 { left:  -46px; top: 118px; transform-origin:   82px -82px; }
.dn-p4 { left:   34px; top: 118px; transform-origin:    2px -82px; }
.dn-p5 { left:   99px; top:  70px; transform-origin:  -63px -34px; }
.dn-p6 { left:  124px; top:  -6px; transform-origin:  -88px  42px; }

.dn-p1, .dn-p2 { font-size: 13px; }
.dn-p6 { font-size: 9.5px; letter-spacing: 0.01em; }

/* Staggered open delays */
#circ-wrap.open .dn-p1,
#circ-wrap.open .dn-p6 { transition-delay: 0.05s; }
#circ-wrap.open .dn-p2,
#circ-wrap.open .dn-p5 { transition-delay: 0.10s; }
#circ-wrap.open .dn-p3,
#circ-wrap.open .dn-p4 { transition-delay: 0.15s; }

/* === INTEL THREADS (child of #circ-wrap, built dynamically by dome-nav.js) ===
   position:fixed anchors to viewport (not to the 52px wrap parent).
   z-index:1 is within circ-wrap's stacking context — above ::before (-1)
   but below #circ-btn (z-index 2) and .dn-item (z-index 3).             */
#intel-threads {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 130px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.48s ease;
}
#intel-threads.open { opacity: 1; }

.thr-dot {
  animation: thrPulse 2.4s ease-in-out infinite;
}
@keyframes thrPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1.0;  }
}

/* === MEMBER LOGIN PILL === */
#member-login-btn {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid rgba(255, 229, 143, 0.40);
  border-radius: 50px;
  padding: 8px 16px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 229, 143, 0.80);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#member-login-btn:hover {
  background: rgba(255, 229, 143, 0.10);
  border-color: var(--nav-gold);
  color: var(--nav-gold);
}
#member-login-btn svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2;
}

/* === HERO / PAGE HEADER PUSH === */
#circ-wrap.open ~ .home-hero .hero-content { padding-top: 250px; }
#circ-wrap.open ~ .page-header { padding-top: 240px; }

/* === MOBILE (≤600px) === */
@media (max-width: 600px) {
  /* 52px circles — enough room for all 6 without collision */
  #circ-btn  { width: 52px !important; height: 52px !important; }
  #circ-wrap { width: 52px !important; left: calc(50% - 26px); }

  #circ-wrap::before {
    width: 282px; height: 182px;
    left: -115px; top: -8px;
    border-radius: 0 0 141px 141px;
  }

  .dn-item { width: 52px; height: 52px; font-size: 8px; }
  .dn-icon  { width: 10px; height: 10px; top: 8px; }

  /* Positions scaled for 52px circles, R≈118.
     transform-origin = (wrap_center - circle_top_left)
     wrap_center = (26, 26) for 52px wrap.             */
  .dn-p1 { left: -104px; top:  -4px; transform-origin: 130px  30px; }
  .dn-p2 { left:  -83px; top:  54px; transform-origin: 109px -28px; }
  .dn-p3 { left:  -40px; top:  96px; transform-origin:  66px -70px; }
  .dn-p4 { left:   28px; top:  96px; transform-origin:  -2px -70px; }
  .dn-p5 { left:   79px; top:  54px; transform-origin: -53px -28px; }
  .dn-p6 { left:  100px; top:  -4px; transform-origin: -74px  30px; }

  #circ-wrap.open ~ .home-hero .hero-content { padding-top: 210px; }
  #circ-wrap.open ~ .page-header { padding-top: 200px; }
  #member-login-btn { display: none; }
}