/* by jqu224 — one-shot random intro overlay (theme switch + first paint) */

.index-intro-fx {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}

/* --- 彩带 confetti --- */
.index-intro-fx--confetti .index-intro-piece {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: index-intro-confetti-fall 2.4s ease-in forwards;
}

@keyframes index-intro-confetti-fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0.85;
  }
}

/* --- 扁平圆球上升（无 emoji，替代气球） --- */
.index-intro-fx--orbs .index-intro-orb {
  position: absolute;
  bottom: -80px;
  width: clamp(28px, 5vw, 44px);
  height: clamp(28px, 5vw, 44px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: index-intro-orb-up 3s ease-in-out forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

@keyframes index-intro-orb-up {
  0% {
    transform: translateY(0) translateX(0) rotate(-4deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) translateX(20px) rotate(6deg);
    opacity: 0.95;
  }
}

/* --- 射线 --- */
.index-intro-fx--rays .index-intro-ray-hub {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 160vmax;
  height: 160vmax;
  margin-left: -80vmax;
  margin-top: -80vmax;
  opacity: 0.35;
  background: repeating-conic-gradient(
    from 0deg,
    var(--hm-nav-active-accent, #a78bfa) 0deg 4deg,
    transparent 4deg 18deg
  );
  animation: index-intro-rays-spin 2.2s ease-out forwards;
}

@keyframes index-intro-rays-spin {
  0% {
    transform: rotate(-25deg) scale(0.3);
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  100% {
    transform: rotate(40deg) scale(1);
    opacity: 0;
  }
}

/* --- 照相闪光 --- */
.index-intro-fx--flash .index-intro-flash-layer {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: index-intro-flash-pulse 0.65s ease-out forwards;
}

@keyframes index-intro-flash-pulse {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}

/* Light themes: visible “闪光” (white-on-white is invisible) */
.index-intro-fx--flash .index-intro-flash-layer--light {
  background: radial-gradient(
    ellipse 85% 55% at 50% 38%,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(200, 210, 255, 0.45) 38%,
    transparent 72%
  );
}

/* --- 流星 --- */
.index-intro-fx--meteors .index-intro-meteor {
  position: absolute;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hm-search-focus-border, #6366f1),
    #fff
  );
  opacity: 0;
  animation: index-intro-meteor-shoot 1.8s ease-out forwards;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

@keyframes index-intro-meteor-shoot {
  0% {
    opacity: 0;
    transform: translate(-30vw, -20vh) rotate(35deg);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
    transform: translate(40vw, 70vh) rotate(35deg);
  }
}

/* --- 气泡 --- */
.index-intro-fx--bubbles .index-intro-bubble {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.35),
    transparent 55%
  );
  animation: index-intro-bubble-rise 2.8s ease-in forwards;
}

@keyframes index-intro-bubble-rise {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-110vh) translateX(-25px);
    opacity: 0;
  }
}

/* --- 翻页 --- */
.index-intro-fx--pageflip .index-intro-page {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  transform-origin: left center;
  animation: index-intro-page-flip 1.4s ease-in-out forwards;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.12);
}

@keyframes index-intro-page-flip {
  0% {
    transform: perspective(1200px) rotateY(-92deg);
    opacity: 0.95;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: perspective(1200px) rotateY(0deg);
    opacity: 0;
  }
}

/* --- 星点（无 emoji） --- */
.index-intro-fx--dots .index-intro-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: index-intro-dot-twinkle 2s ease-out forwards;
  opacity: 0;
}

@keyframes index-intro-dot-twinkle {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translateY(40px);
  }
}

/* --- 矩阵条闪（扁平等宽字） --- */
.index-intro-fx--matrix {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.index-intro-fx--matrix .index-intro-matrix-band {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: clamp(10px, 2.2vw, 13px);
  letter-spacing: 0.12em;
  color: var(--hm-nav-active-accent, #a78bfa);
  opacity: 0;
  white-space: nowrap;
  max-width: 96vw;
  overflow: hidden;
  text-overflow: clip;
  animation: index-intro-matrix-shimmer 2.1s ease-out forwards;
}

@keyframes index-intro-matrix-shimmer {
  0% {
    opacity: 0;
    transform: translateX(12px);
    filter: blur(2px);
  }
  35% {
    opacity: 0.45;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-8px);
  }
}

/* --- 光晕脉冲（渐变由 JS 注入主题色） --- */
.index-intro-fx--bloomPulse .index-intro-bloom-layer {
  position: absolute;
  inset: -15%;
  opacity: 0;
  animation: index-intro-bloom-pulse 2s ease-out forwards;
}

@keyframes index-intro-bloom-pulse {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  40% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* --- 丝带波浪 --- */
.index-intro-fx--ribbon .index-intro-ribbon {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 24px;
  top: 38%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hm-nav-active-accent, #a78bfa),
    var(--hm-search-focus-border, #6366f1),
    transparent
  );
  opacity: 0;
  filter: blur(0.5px);
  animation: index-intro-ribbon-wave 2s ease-in-out forwards;
  transform-origin: center;
}

@keyframes index-intro-ribbon-wave {
  0% {
    opacity: 0;
    transform: translateY(20px) scaleX(0.3) skewY(-6deg);
  }
  25% {
    opacity: 0.85;
  }
  50% {
    transform: translateY(0) scaleX(1) skewY(4deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scaleX(0.9) skewY(-2deg);
  }
}