/* Portal network topology. Reuses TekTinkers palette and type from style.css. */

.portal-page {
  overflow-x: clip;
}

.portal-page .gateway {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 2.25rem) var(--layout-pad-x) 0.25rem;
}

.portal-page .gateway .hero__title {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  margin-bottom: 0.7rem;
}

.portal-page .gateway .hero__lead {
  max-width: 46ch;
}

.topo-particles {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
}

.topo-particles span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(101, 165, 163, 0.45);
  box-shadow: 0 0 8px rgba(101, 165, 163, 0.35);
  animation: particle-drift 22s ease-in-out infinite;
}

.topo-particles span:nth-child(1) { left: 8%; top: 22%; animation-duration: 26s; }
.topo-particles span:nth-child(2) { left: 18%; top: 68%; animation-duration: 19s; animation-delay: -4s; }
.topo-particles span:nth-child(3) { left: 42%; top: 14%; animation-duration: 24s; animation-delay: -8s; }
.topo-particles span:nth-child(4) { left: 61%; top: 78%; animation-duration: 21s; animation-delay: -2s; }
.topo-particles span:nth-child(5) { left: 74%; top: 18%; animation-duration: 28s; animation-delay: -11s; }
.topo-particles span:nth-child(6) { left: 88%; top: 52%; animation-duration: 23s; animation-delay: -6s; }
.topo-particles span:nth-child(7) { left: 32%; top: 88%; animation-duration: 30s; animation-delay: -14s; }
.topo-particles span:nth-child(8) { left: 92%; top: 86%; animation-duration: 18s; animation-delay: -9s; }
.topo-particles span:nth-child(9) { left: 4%; top: 46%; animation-duration: 27s; animation-delay: -3s; }
.topo-particles span:nth-child(10) { left: 54%; top: 36%; width: 3px; height: 3px; animation-duration: 32s; }

@keyframes particle-drift {
  0%,
  100% { transform: translate(0, 0); opacity: 0.25; }
  50% { transform: translate(12px, -18px); opacity: 0.7; }
}

.topo {
  position: relative;
  z-index: 1;
  padding: 0.5rem 0 1.25rem;
}

.topo__tail {
  display: none;
}

.topo__map {
  position: relative;
  width: 100%;
}

.topo__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.topo__trace {
  fill: none;
  stroke: url(#traceGrad);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  transition: opacity 0.35s ease, stroke-width 0.35s ease;
}

.topo__trace--soon {
  stroke-dasharray: 3.5 7;
  opacity: 0.32;
}

.topo__pulse {
  fill: none;
  stroke: rgba(101, 165, 163, 0.85);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 7 220;
  opacity: 0;
  animation: fiber-pulse 9.5s linear infinite;
}

.topo__trace--soon + .topo__pulse,
.topo__map.is-focusing .topo__pulse:not(.is-hot) {
  opacity: 0;
  animation: none;
}

.topo__map:not(.is-focusing) .topo__pulse {
  opacity: 0.55;
}

.topo__trace.is-hot {
  stroke: url(#traceHot);
  stroke-width: 1.7;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(101, 165, 163, 0.55));
}

.topo__pulse.is-hot {
  opacity: 0.95;
  stroke: rgba(244, 232, 192, 0.9);
  animation-duration: 2.8s;
}

@keyframes fiber-pulse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -227; }
}

.topo__hub {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 1.25rem 1rem 1.75rem;
}

.topo__hub-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(28rem, 70vw);
  height: min(22rem, 50vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(101, 165, 163, 0.22), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.topo__hub-link {
  display: inline-block;
  margin: 0 auto 0.7rem;
  line-height: 0;
  cursor: pointer;
  border-radius: 50%;
}

.topo__hub-logo {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(101, 165, 163, 0.45));
  transition: filter 0.28s ease, transform 0.28s ease;
}

.topo__hub-link:hover .topo__hub-logo,
.topo__hub-link:focus-visible .topo__hub-logo {
  transform: scale(1.06);
  filter: drop-shadow(0 0 26px rgba(101, 165, 163, 0.75));
}

.topo__hub-link:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 6px;
}

.topo__hub-brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-teal);
  text-shadow: 0 0 18px var(--accent-teal-glow);
}

.topo__hub-title {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  letter-spacing: -0.03em;
  color: #fff8f0;
}

.topo__hub-note {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.node {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 16.5rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.28s ease,
    filter 0.28s ease,
    opacity 0.28s ease;
}

.node--soon {
  cursor: default;
  opacity: 0.55;
  filter: saturate(0.45);
}

.node[data-node="coming-soon"] {
  opacity: 1;
  filter: none;
}

.node__marker {
  flex-shrink: 0;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 32%, rgba(101, 165, 163, 0.28), rgba(26, 40, 38, 0.55) 72%);
  box-shadow:
    0 0 0 1px rgba(101, 165, 163, 0.32),
    0 0 22px rgba(101, 165, 163, 0.14);
  transition:
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

.node--soon .node__marker {
  box-shadow:
    0 0 0 1px rgba(101, 165, 163, 0.22),
    0 0 0 0 transparent;
  background-image:
    radial-gradient(circle at 40% 32%, rgba(101, 165, 163, 0.12), rgba(26, 40, 38, 0.45) 72%);
  outline: 1px dashed rgba(101, 165, 163, 0.4);
  outline-offset: 3px;
}

.node__marker--empty {
  background: radial-gradient(circle at 40% 32%, rgba(101, 165, 163, 0.08), rgba(26, 40, 38, 0.35) 72%);
}

.node[data-node="coming-soon"] .node__marker {
  outline: none;
  background: radial-gradient(circle at 40% 32%, rgba(101, 165, 163, 0.28), rgba(26, 40, 38, 0.55) 72%);
  box-shadow:
    0 0 0 1px rgba(101, 165, 163, 0.32),
    0 0 22px rgba(101, 165, 163, 0.14);
}

.node[data-node="coming-soon"]:hover .node__marker,
.node[data-node="coming-soon"]:focus-visible .node__marker,
.node[data-node="coming-soon"].is-hot .node__marker {
  box-shadow:
    0 0 0 1px rgba(244, 232, 192, 0.45),
    0 0 28px rgba(101, 165, 163, 0.55);
  transform: scale(1.06);
}

.node__icon {
  display: block;
  max-width: 68%;
  max-height: 68%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.node__icon--cover {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 50%;
  filter: none;
}

.node__icon--hatch {
  max-width: 78%;
  max-height: 90%;
}

.node__emoji {
  font-size: 1.35rem;
  line-height: 1;
}

.node__copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.node__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  color: #fff8f0;
}

.node__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted);
  opacity: 0.72;
  max-width: 14.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: opacity 0.28s ease, color 0.28s ease;
}

.node__status {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.node__status-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(244, 232, 192, 0.45);
}

.node__status--live .node__status-dot,
.node__status--online .node__status-dot {
  background: #3ddc5a;
  box-shadow: 0 0 8px rgba(61, 220, 90, 0.55);
}

.node__status--live,
.node__status--online {
  color: rgba(61, 220, 90, 0.9);
}

.node__status--offline {
  color: var(--accent-coral);
}

.node__status--offline .node__status-dot {
  background: var(--accent-coral);
}

.node__status--soon .node__status-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(244, 232, 192, 0.55);
}

.node__status--checking .node__status-dot {
  animation: status-pulse 1.2s ease-in-out infinite;
}

.node:hover .node__desc,
.node:focus-visible .node__desc,
.node.is-hot .node__desc {
  opacity: 1;
  color: var(--text);
}

.node--live:hover,
.node--live:focus-visible,
.node--live.is-hot {
  transform: translateY(-2px);
  z-index: 6;
}

.node--live:hover .node__marker,
.node--live:focus-visible .node__marker,
.node--live.is-hot .node__marker {
  box-shadow:
    0 0 0 1px rgba(244, 232, 192, 0.45),
    0 0 28px rgba(101, 165, 163, 0.55);
  transform: scale(1.06);
}

.node--soon:hover,
.node--soon.is-hot {
  opacity: 0.78;
  filter: saturate(0.7);
}

.node[data-node="coming-soon"]:hover,
.node[data-node="coming-soon"]:focus-visible,
.node[data-node="coming-soon"].is-hot {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
  z-index: 6;
}

.node--live:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 6px;
  border-radius: 4px;
}

.topo__map.is-focusing .node:not(.is-hot) {
  opacity: 0.42;
}

.topo__map.is-focusing .node--soon:not(.is-hot) {
  opacity: 0.28;
}

.topo__map.is-focusing .node[data-node="coming-soon"]:not(.is-hot) {
  opacity: 0.55;
}

.topo__map.is-focusing .topo__trace:not(.is-hot) {
  opacity: 0.16;
}

/* Mobile / tablet: vertical network path */
@media (max-width: 1099px) {
  .topo {
    padding: 0.25rem 0 1.5rem;
  }

  .topo__map {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.5rem var(--layout-pad-x) 2rem 0;
    max-width: 36rem;
    margin: 0 auto;
  }

  .topo__hub {
    padding: 0.5rem 0 1.25rem 3.35rem;
    text-align: left;
  }

  .topo__hub-link {
    margin: 0 0 0.55rem;
  }

  .topo__hub-glow {
    left: 2.2rem;
    width: 16rem;
    height: 12rem;
  }

  .topo__map .node--sub {
    padding-left: 4.75rem;
  }

  .topo__map .node--sub[data-parent="zemewstudios"] {
    padding-left: 6.5rem;
  }

  .topo__map .node__desc {
    max-width: none;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }

  .node--west,
  .node--east,
  .node--north,
  .node--south {
    flex-direction: row;
    text-align: left;
  }
}

/* Desktop: constellation */
@media (min-width: 1100px) {
  .topo {
    padding: 0 0 2.5rem;
  }

  .topo__map {
    min-height: max(90rem, calc(100vh - var(--header-h) + 22rem));
    padding: 0.5rem 1rem 18rem;
    overflow: visible;
  }

  .topo__tail {
    display: block;
    height: 10rem;
  }

  .topo__map::before {
    content: "";
    position: absolute;
    inset: 4% 2% 6%;
    background-image:
      linear-gradient(rgba(101, 165, 163, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(101, 165, 163, 0.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 68% at 50% 48%, black 20%, transparent 78%);
    pointer-events: none;
    z-index: 0;
  }

  .topo__hub {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 16.5rem;
    padding: 0;
  }

  .topo__map .node {
    position: absolute;
    left: var(--nx);
    top: var(--ny);
    transform: translate(-50%, -50%);
    max-width: 13.75rem;
  }

  .topo__map .node--sub {
    max-width: 12.25rem;
  }

  .topo__map .node--west {
    flex-direction: row-reverse;
    text-align: right;
    transform: translate(-100%, -50%);
  }

  .topo__map .node--east {
    flex-direction: row;
    text-align: left;
    transform: translate(0, -50%);
  }

  .topo__map .node--north {
    flex-direction: column-reverse;
    text-align: center;
    transform: translate(-50%, -100%);
  }

  .topo__map .node--south {
    flex-direction: column;
    text-align: center;
    transform: translate(-50%, 0);
  }

  .topo__map .node--north .node__copy,
  .topo__map .node--south .node__copy {
    align-items: center;
  }

  .topo__map .node--live.node--west:hover,
  .topo__map .node--live.node--west:focus-visible,
  .topo__map .node--live.node--west.is-hot {
    transform: translate(-100%, -50%) translateY(-3px);
  }

  .topo__map .node--live.node--east:hover,
  .topo__map .node--live.node--east:focus-visible,
  .topo__map .node--live.node--east.is-hot {
    transform: translate(0, -50%) translateY(-3px);
  }

  .topo__map .node--live.node--north:hover,
  .topo__map .node--live.node--north:focus-visible,
  .topo__map .node--live.node--north.is-hot {
    transform: translate(-50%, -100%) translateY(-3px);
  }

  .topo__map .node--live.node--south:hover,
  .topo__map .node--live.node--south:focus-visible,
  .topo__map .node--live.node--south.is-hot {
    transform: translate(-50%, 0) translateY(-3px);
  }

  .topo__map .node--soon.node--south:hover,
  .topo__map .node--soon.node--south.is-hot {
    transform: translate(-50%, 0) translateY(-3px);
  }

  .node[data-node="tunes"] { --nx: 50%; --ny: 12%; }
  .node[data-node="zemew"] { --nx: 34%; --ny: 28%; }
  .node[data-node="zemewstudios"] { --nx: 17%; --ny: 28%; }
  .node[data-node="astroio"] { --nx: 17%; --ny: 36%; }
  .node[data-node="weather"] { --nx: 34%; --ny: 56%; }
  .node[data-node="gsc"] { --nx: 32%; --ny: 68%; }
  .node[data-node="recall"] { --nx: 32%; --ny: 80%; }
  .node[data-node="tools"] { --nx: 42%; --ny: 75%; }
  .node[data-node="nachonut"] { --nx: 68%; --ny: 28%; }
  .node[data-node="cloud"] { --nx: 68%; --ny: 44%; }
  .node[data-node="craft"] { --nx: 68%; --ny: 60%; }
  .node[data-node="gaming"] { --nx: 62%; --ny: 75%; }
  .node[data-node="coming-soon"] { --nx: 50%; --ny: 90%; }
  .node[data-node="movies"] { --nx: 25%; --ny: 100%; }
  .node[data-node="zemewlan"] { --nx: 42%; --ny: 102%; }
  .node[data-node="zemewpc"] { --nx: 58%; --ny: 102%; }
  .node[data-node="zemewhosting"] { --nx: 75%; --ny: 100%; }
}

@media (min-width: 1480px) {
  .node[data-node="tunes"] { --nx: 50%; --ny: 11%; }
  .node[data-node="zemew"] { --nx: 32%; --ny: 27%; }
  .node[data-node="zemewstudios"] { --nx: 15%; --ny: 27%; }
  .node[data-node="astroio"] { --nx: 15%; --ny: 35%; }
  .node[data-node="weather"] { --nx: 32%; --ny: 55%; }
  .node[data-node="gsc"] { --nx: 30%; --ny: 67%; }
  .node[data-node="recall"] { --nx: 30%; --ny: 79%; }
  .node[data-node="nachonut"] { --nx: 70%; --ny: 27%; }
  .node[data-node="cloud"] { --nx: 70%; --ny: 43%; }
  .node[data-node="craft"] { --nx: 70%; --ny: 59%; }
  .node[data-node="tools"] { --nx: 42%; --ny: 74%; }
  .node[data-node="gaming"] { --nx: 64%; --ny: 74%; }
  .node[data-node="coming-soon"] { --nx: 50%; --ny: 89%; }
  .node[data-node="movies"] { --nx: 22%; --ny: 99%; }
  .node[data-node="zemewlan"] { --nx: 41%; --ny: 101%; }
  .node[data-node="zemewpc"] { --nx: 59%; --ny: 101%; }
  .node[data-node="zemewhosting"] { --nx: 78%; --ny: 99%; }
}

@media (prefers-reduced-motion: reduce) {
  .topo-particles span,
  .topo__pulse,
  .node,
  .node__marker,
  .node__desc,
  .topo__trace {
    animation: none !important;
    transition: none !important;
  }

  .topo-particles {
    display: none;
  }
}