/**
 * RolePilot 网站 - 赛博朋克动画
 * 入场动画、故障效果、扫描线等
 */

/* ========== 透视网格动画 ========== */
@keyframes rp-grid-move {
  from {
    transform: perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px);
  }
  to {
    transform: perspective(500px) rotateX(60deg) translateY(60px) translateZ(-200px);
  }
}

/* ========== 故障效果 (Glitch) ========== */
@keyframes rp-glitch-1 {
  0% { clip: rect(12px, 9999px, 32px, 0); }
  5% { clip: rect(80px, 9999px, 90px, 0); }
  10% { clip: rect(40px, 9999px, 45px, 0); }
  15% { clip: rect(20px, 9999px, 60px, 0); }
  20% { clip: rect(70px, 9999px, 85px, 0); }
  25% { clip: rect(0, 0, 0, 0); }
  100% { clip: rect(0, 0, 0, 0); }
}

@keyframes rp-glitch-2 {
  0% { clip: rect(60px, 9999px, 70px, 0); }
  5% { clip: rect(10px, 9999px, 20px, 0); }
  10% { clip: rect(90px, 9999px, 95px, 0); }
  15% { clip: rect(50px, 9999px, 65px, 0); }
  20% { clip: rect(30px, 9999px, 40px, 0); }
  25% { clip: rect(0, 0, 0, 0); }
  100% { clip: rect(0, 0, 0, 0); }
}

/* ========== 按钮扫描光 ========== */
@keyframes rp-button-scan {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

/* ========== 悬浮卡片动画 ========== */
@keyframes rp-float-1 {
  0%, 100% {
    transform: translateY(0) rotateY(25deg) rotateZ(-10deg);
  }
  50% {
    transform: translateY(-30px) rotateY(20deg) rotateZ(-10deg);
  }
}

@keyframes rp-float-2 {
  0%, 100% {
    transform: translateY(0) rotateY(-25deg) rotateZ(10deg);
  }
  50% {
    transform: translateY(30px) rotateY(-20deg) rotateZ(10deg);
  }
}

/* ========== 闪烁效果 ========== */
@keyframes rp-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ========== 入场动画 ========== */
@keyframes rp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rp-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rp-slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rp-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== 发光脉冲 ========== */
@keyframes rp-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--rp-accent-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--rp-accent-glow);
  }
}

/* ========== 文字发光 ========== */
@keyframes rp-text-glow {
  0%, 100% {
    text-shadow: 0 0 20px var(--rp-accent-glow);
  }
  50% {
    text-shadow: 0 0 40px var(--rp-accent-glow);
  }
}

/* ========== Hero 入场动画 ========== */
.rp-hero-card {
  animation: rp-scale-in 0.8s ease-out;
}

.rp-glitch-title {
  animation: rp-slide-up 0.6s ease-out 0.2s both;
}

.rp-hero-subtitle {
  animation: rp-slide-up 0.6s ease-out 0.3s both;
}

.rp-hero-desc {
  animation: rp-slide-up 0.6s ease-out 0.4s both;
}

.rp-hero-actions {
  animation: rp-slide-up 0.6s ease-out 0.5s both;
}

/* ========== 导航栏入场 ========== */
.rp-nav {
  animation: rp-slide-down 0.5s ease-out;
}

/* ========== 打字机效果 ========== */
@keyframes rp-typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes rp-blink-caret {
  0%, 100% { border-color: var(--rp-accent); }
  50% { border-color: transparent; }
}

/* ========== 番茄钟沙漏流动 ========== */
@keyframes rp-sand-flow {
  0% { height: 0%; }
  100% { height: 100%; }
}

/* ========== 悬浮动画 ========== */
@keyframes rp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ========== 脉冲动画 ========== */
@keyframes rp-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* ========== 渐显动画 ========== */
@keyframes rp-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 滑入动画 ========== */
@keyframes rp-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rp-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========== 复选框完成动画 ========== */
@keyframes rp-check-complete {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ========== 皮肤切换动画 ========== */
@keyframes rp-skin-switch {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* ========== 灵动岛呼吸动画 ========== */
@keyframes rp-island-breathe {
  0%, 100% { width: 120px; }
  50% { width: 180px; }
}

/* ========== 对话气泡动画 ========== */
@keyframes rp-bubble-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========== 行内补全渐显 ========== */
@keyframes rp-completion-fade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* ========== 进度条动画 ========== */
@keyframes rp-progress-fill {
  from { width: 0%; }
  to { width: var(--progress, 75%); }
}

/* ========== 柱状图动画 ========== */
@keyframes rp-bar-grow {
  from { height: 0%; }
  to { height: var(--bar-height, 50%); }
}

/* ========== 功能卡片入场 ========== */
.rp-feature-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rp-feature-card.rp-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 交错入场延迟 */
.rp-feature-card:nth-child(1) { transition-delay: 0s; }
.rp-feature-card:nth-child(2) { transition-delay: 0.1s; }
.rp-feature-card:nth-child(3) { transition-delay: 0.2s; }
.rp-feature-card:nth-child(4) { transition-delay: 0.3s; }
.rp-feature-card:nth-child(5) { transition-delay: 0.4s; }
.rp-feature-card:nth-child(6) { transition-delay: 0.5s; }
.rp-feature-card:nth-child(7) { transition-delay: 0.6s; }
.rp-feature-card:nth-child(8) { transition-delay: 0.7s; }
.rp-feature-card:nth-child(9) { transition-delay: 0.8s; }
.rp-feature-card:nth-child(10) { transition-delay: 0.9s; }
.rp-feature-card:nth-child(11) { transition-delay: 1s; }
.rp-feature-card:nth-child(12) { transition-delay: 1.1s; }

/* ========== 价格卡片动画 ========== */
.rp-pricing-card {
  animation: rp-float 6s ease-in-out infinite;
}

/* ========== HUD 元素动画 ========== */
.rp-hud-element {
  animation: rp-fade-in 1s ease-out 0.5s both;
}

.rp-blink {
  animation: rp-blink 1s infinite;
}

/* ========== 透视网格应用 ========== */
.rp-perspective-grid {
  animation: rp-grid-move 5s linear infinite;
}

/* ========== 悬浮卡片应用 ========== */
.rp-card-1 {
  animation: rp-float-1 8s ease-in-out infinite;
}

.rp-card-2 {
  animation: rp-float-2 9s ease-in-out infinite;
}