*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #fff;
  color: #111;
  font-family: Georgia, serif;
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
  line-height: 1.6;
}

#bg {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 20%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 20%, black 100%);
}

main, footer { position: relative; z-index: 1; }

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: .5rem;
}

.tagline {
  font-family: Georgia, serif;
  font-size: .9rem;
  color: #888;
  margin-bottom: 3rem;
}

.projects {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.projects li {
  padding-left: 0;
  cursor: pointer;
}

.project-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: .25rem;
}

.icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
}

.projects a {
  font-size: 1rem;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  text-decoration: none;
}

.projects a::after {
  content: ' ↗';
  opacity: 0;
  transition: opacity .2s;
}
.projects li:hover a::after { opacity: 1; }
.projects li:hover a { text-decoration: underline; }

.projects p {
  font-size: .88rem;
  color: #666;
}

.c-cyan    { color: #00b4c4; }
.c-magenta { color: #cc0077; }
.c-gold    { color: #b8960c; }

footer {
  margin-top: 4rem;
  font-size: .75rem;
  color: #ccc;
  font-family: 'Courier New', monospace;
}

/* Dots: lines trace through the network one by one */
.projects li:hover .icon-dots line {
  stroke-dasharray: 40;
  animation: line-trace 2s ease-in-out infinite;
}
.projects li:hover .icon-dots line:nth-child(8)  { animation-delay: .3s; }
.projects li:hover .icon-dots line:nth-child(9)  { animation-delay: .6s; }
.projects li:hover .icon-dots line:nth-child(10) { animation-delay: .9s; }
.projects li:hover .icon-dots line:nth-child(11) { animation-delay: 1.2s; }
@keyframes line-trace {
  0%        { stroke-dashoffset: 40; opacity: 0; }
  15%       { opacity: .6; }
  55%       { stroke-dashoffset: 0; opacity: .45; }
  85%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Chokepoint: opacity wave flows left → chokepoint → right */
.projects li:hover .icon-chokepoint line:nth-child(1),
.projects li:hover .icon-chokepoint line:nth-child(2),
.projects li:hover .icon-chokepoint line:nth-child(3) {
  animation: flow-pulse 1.6s ease-in-out infinite;
}
.projects li:hover .icon-chokepoint line:nth-child(4),
.projects li:hover .icon-chokepoint line:nth-child(5),
.projects li:hover .icon-chokepoint line:nth-child(6),
.projects li:hover .icon-chokepoint circle {
  animation: flow-pulse 1.6s ease-in-out infinite;
  animation-delay: .4s;
}
.projects li:hover .icon-chokepoint line:nth-child(9),
.projects li:hover .icon-chokepoint line:nth-child(10),
.projects li:hover .icon-chokepoint line:nth-child(11) {
  animation: flow-pulse 1.6s ease-in-out infinite;
  animation-delay: .8s;
}
@keyframes flow-pulse {
  0%, 100% { opacity: .1; }
  35%, 65%  { opacity: 1; }
}

/* Iron Sky: orbit rings counter-rotate at different speeds */
.projects li:hover .icon-ironsky ellipse:nth-of-type(1) {
  animation: orbit-spin 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.projects li:hover .icon-ironsky ellipse:nth-of-type(2) {
  animation: orbit-spin 9s linear infinite reverse;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}