/* Nether Forge — 动效层 */

/* 熔岩裂缝背景流动（作用于 .hero-bg--lava） */
.hero-bg--lava {
  background-color: #0d0d0f !important;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(255, 107, 53, 0.04) 2px,
      rgba(255, 107, 53, 0.04) 3px
    ),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(255, 80, 40, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #0d0d0f 0%, #1a1010 50%, #0d0d0f 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: lavaFlow 18s ease-in-out infinite;
}

.hero-bg--lava.lava--low {
  animation-duration: 28s;
  filter: saturate(0.85);
}

.hero-bg--lava.lava--high {
  animation-duration: 12s;
  filter: saturate(1.15);
}

@keyframes lavaFlow {
  0%,
  100% {
    background-position: 0% 0%, 50% 100%, 0% 0%;
    opacity: 1;
  }
  50% {
    background-position: 2% 1%, 48% 98%, 0% 0%;
    opacity: 0.96;
  }
}

/* 液位计高度变化由 JS 设置 height，此处增强高光脉动 */
.gauge-lava-fill::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: lavaShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lavaShimmer {
  0% {
    transform: translateX(-100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0.5;
  }
}

/* 页面切换 */
.page.page--leaving {
  animation: pageLeave 0.35s ease both;
}

.page.page--entering {
  animation: pageEnterAnim 0.4s ease both;
}

@keyframes pageLeave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes pageEnterAnim {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 图集卡片悬停辉光 */
.gallery-item:hover {
  animation: glowPulse 0.8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.25);
  }
  50% {
    box-shadow: 0 0 28px rgba(255, 107, 53, 0.45);
  }
}

/* 顶栏当前项：底部熔岩细线 */
.nether-nav__link.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 40%;
  height: 2px;
  margin-left: -20%;
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  border-radius: 2px;
  opacity: 0.9;
  animation: navEmber 2.2s ease-in-out infinite;
}

@media (max-width: 768px) {
  .nether-nav__link.active::after {
    bottom: 8px;
    left: 18px;
    right: auto;
    width: 3px;
    height: 60%;
    margin-left: 0;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    animation: none;
    border-radius: 2px;
  }
}

@keyframes navEmber {
  0%,
  100% {
    opacity: 0.55;
    transform: scaleX(0.92);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* 标题微光（可关） */
.hero-title:not(.no-shimmer) {
  animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
  0%,
  100% {
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.2);
  }
  50% {
    text-shadow: 0 0 32px rgba(255, 107, 53, 0.45);
  }
}