vtuber-awards/frontend/src/views/networkErrorView.css

.network-scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(180deg, #14091f 0%, #26113d 36%, #3e2266 72%, #1b0d2c 100%);
  color: #fff7ff;
}

.network-scene__nebula,
.network-scene__stars,
.network-scene__orbital,
.network-scene__comet {
  position: absolute;
  pointer-events: none;
}

.network-scene__nebula {
  border-radius: 999px;
  filter: blur(56px);
  mix-blend-mode: screen;
  opacity: 0.92;
  animation: drift 18s ease-in-out infinite;
}

.network-scene__nebula--violet {
  top: -10%;
  left: -6%;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(141, 111, 255, 0.72) 0%, rgba(141, 111, 255, 0.08) 60%, transparent 78%);
}

.network-scene__nebula--rose {
  top: 18%;
  right: -10%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(255, 182, 222, 0.58) 0%, rgba(255, 182, 222, 0.05) 60%, transparent 78%);
  animation-delay: -5s;
}

.network-scene__nebula--gold {
  bottom: -16%;
  left: 18%;
  width: 30rem;
  height: 24rem;
  background: radial-gradient(circle, rgba(255, 213, 144, 0.35) 0%, rgba(255, 213, 144, 0.05) 54%, transparent 76%);
  animation-delay: -9s;
}

.network-scene__stars {
  inset: -20%;
  background-repeat: repeat;
}

.network-scene__stars--far {
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(208, 190, 255, 0.84) 0 1px, transparent 1.8px);
  background-size: 150px 150px, 240px 240px;
  animation: driftStars 44s linear infinite;
}

.network-scene__stars--near {
  opacity: 0.72;
  background-image:
    radial-gradient(circle, rgba(255, 246, 223, 0.92) 0 1.6px, transparent 2.4px),
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 1.4px, transparent 2.2px);
  background-size: 112px 112px, 164px 164px;
  animation: driftStarsNear 26s linear infinite;
}

.network-scene__orbital {
  border: 1px solid rgba(248, 232, 255, 0.12);
  border-radius: 999px;
  animation: rotateRing 26s linear infinite;
}

.network-scene__orbital--one {
  width: 38rem;
  height: 38rem;
}

.network-scene__orbital--two {
  width: 28rem;
  height: 28rem;
  border-style: dashed;
  border-color: rgba(255, 219, 171, 0.24);
  animation-direction: reverse;
  animation-duration: 18s;
}

.network-scene__comet {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 241, 213, 0.92) 60%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 0 0 16px rgba(255, 241, 213, 0.72);
  transform: rotate(-22deg);
  opacity: 0;
}

.network-scene__comet--one {
  top: 18%;
  right: 18%;
  width: 16rem;
  animation: comet 5.8s ease-out infinite;
}

.network-scene__comet--two {
  top: 34%;
  left: 14%;
  width: 12rem;
  animation: comet 6.5s ease-out infinite 1.8s;
}

.network-scene__content {
  position: relative;
  z-index: 1;
  width: min(44rem, calc(100% - 2.5rem));
  text-align: center;
}

.network-scene__signal {
  position: relative;
  display: grid;
  place-items: center;
  width: 15rem;
  height: 15rem;
  margin: 0 auto 1.5rem;
}

.network-scene__signal-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(245, 231, 255, 0.16);
}

.network-scene__signal-ring--outer {
  inset: 0;
  animation: rotateRing 22s linear infinite;
}

.network-scene__signal-ring--mid {
  inset: 1.8rem;
  border-style: dashed;
  border-color: rgba(255, 214, 167, 0.28);
  animation: rotateRing 12s linear infinite reverse;
}

.network-scene__signal-core {
  width: 8rem;
  height: 8rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98), rgba(255, 239, 208, 0.94) 28%, rgba(255, 170, 176, 0.88) 58%, rgba(145, 111, 255, 0.84) 100%);
  color: #fff;
  box-shadow:
    0 0 44px rgba(255, 227, 181, 0.66),
    0 0 88px rgba(169, 134, 255, 0.42),
    0 24px 80px rgba(16, 6, 27, 0.36);
  animation: pulse 3.2s ease-in-out infinite;
}

.network-scene__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 800;
  color: #d1b6ff;
}

.network-scene__title {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 0.96;
}

.network-scene__text {
  max-width: 38rem;
  margin: 1rem auto 0;
  color: rgba(247, 239, 255, 0.88);
  font-size: 1.05rem;
  line-height: 1.8;
}

.network-scene__detail {
  max-width: 35rem;
  margin: 1rem auto 0;
  color: rgba(224, 206, 255, 0.76);
  font-size: 0.95rem;
  line-height: 1.7;
}

.network-scene__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 2rem;
}

.network-scene__ghost {
  min-height: 2.85rem;
  padding: 0 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(239, 225, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff7ff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.network-scene__ghost:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 232, 201, 0.34);
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0.9rem, -1rem, 0) scale(1.06); }
}

@keyframes driftStars {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-6rem, 4rem, 0); }
}

@keyframes driftStarsNear {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(5rem, 6rem, 0); }
}

@keyframes rotateRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes comet {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-22deg); }
  8% { opacity: 1; }
  32% { opacity: 1; transform: translate3d(-6rem, 5rem, 0) rotate(-22deg); }
  100% { opacity: 0; transform: translate3d(-10rem, 8rem, 0) rotate(-22deg); }
}

@media (max-width: 640px) {
  .network-scene__signal {
    width: 12.5rem;
    height: 12.5rem;
  }

  .network-scene__signal-core {
    width: 6.6rem;
    height: 6.6rem;
  }

  .network-scene__text {
    font-size: 0.98rem;
  }
}