/* ============================================================
   yiteai.com — Animation System
   ============================================================
   Layers:
   1. Keyframes
   2. Page enter (每个页面加载时)
   3. Scroll reveal (滚动渐入)
   4. Stagger children (子元素错开进入)
   5. Hover 增强
   6. 常驻动效 (光效脉冲 / 渐变流动)
   7. 页面切换过渡
   ============================================================ */

/* ── 1. Keyframes ─────────────────────────────────────────── */

@keyframes yt-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes yt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes yt-slide-right {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes yt-slide-left {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 光晕脉冲 */
@keyframes yt-glow-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(34,211,238,0.18), 0 0 0 1px rgba(34,211,238,0.25); }
  50%       { box-shadow: 0 0 38px rgba(34,211,238,0.38), 0 0 0 1px rgba(34,211,238,0.45); }
}

/* 渐变文字流动 */
@keyframes yt-grad-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 上下浮动 */
@keyframes yt-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* shimmer 扫光 */
@keyframes yt-shimmer {
  from { transform: translateX(-100%) skewX(-12deg); }
  to   { transform: translateX(250%) skewX(-12deg); }
}

/* 进度条增长 */
@keyframes yt-bar-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* spinner */
@keyframes yt-spin {
  to { transform: rotate(360deg); }
}
/* alias so legacy `animation: spin ...` also works */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 页面退出 */
@keyframes yt-page-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* ── 2. Page Enter ────────────────────────────────────────── */

.yt-page-enter {
  animation: yt-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* 内容整体上移进入 */
.yt-page-enter-up {
  animation: yt-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ── 3. Scroll Reveal ─────────────────────────────────────── */

/* 初始状态：不可见 */
.yt-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.yt-reveal.from-left {
  transform: translateX(-24px);
}

.yt-reveal.from-right {
  transform: translateX(24px);
}

.yt-reveal.scale {
  transform: scale(0.95);
}

/* 触发后变为可见 */
.yt-reveal.is-visible {
  opacity: 1;
  transform: none !important;
}


/* ── 4. Stagger Children ──────────────────────────────────── */

/* 父容器打上 .yt-stagger，子元素自动错开 */
.yt-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.yt-stagger.is-visible > *:nth-child(1)  { transition-delay: 0.04s; }
.yt-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.09s; }
.yt-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.14s; }
.yt-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.19s; }
.yt-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.24s; }
.yt-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.29s; }
.yt-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.34s; }
.yt-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.38s; }
.yt-stagger.is-visible > *:nth-child(n+9){ transition-delay: 0.42s; }

.yt-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}


/* ── 5. Hover 增强 ────────────────────────────────────────── */

/* 卡片 — 上浮 + 边框高亮 */
.yt-card-hover {
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}
.yt-card-hover:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(34, 211, 238, 0.3) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,211,238,0.15) !important;
}

/* 主按钮点击反弹 */
.yt-btn-primary {
  transition: filter 0.15s ease, transform 0.15s cubic-bezier(0.22,1,0.36,1), box-shadow 0.15s ease !important;
}
.yt-btn-primary:active {
  transform: scale(0.96) translateY(1px) !important;
  filter: brightness(0.95) !important;
}

/* ghost 按钮 */
.yt-btn-ghost {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
}
.yt-btn-ghost:active {
  transform: scale(0.97) !important;
}

/* Logo 缩放 */
.yt-logo {
  transition: opacity 0.15s ease;
}
.yt-logo:hover {
  opacity: 0.85;
}

/* 导航链接下划线动效 */
header nav a {
  position: relative;
}
header nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.2s ease, left 0.2s ease;
}
header nav a:hover::after {
  width: 60%; left: 20%;
}


/* ── 6. 常驻动效 ──────────────────────────────────────────── */

/* Hero 渐变文字流动 */
.yt-grad-text {
  background-size: 200% auto !important;
  animation: yt-grad-flow 5s linear infinite !important;
}

/* 强调色按钮光晕脉冲 */
.yt-btn-primary {
  animation: yt-glow-pulse 3s ease-in-out infinite;
}

/* 卡片内 shimmer 扫光 — 加在需要的元素上 */
.yt-shimmer-once {
  position: relative;
  overflow: hidden;
}
.yt-shimmer-once::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.06) 50%, transparent 80%);
  animation: yt-shimmer 1.2s ease forwards;
}

/* 浮动装饰 */
.yt-float {
  animation: yt-float 4s ease-in-out infinite;
}

/* upload placeholder pulse */
@keyframes yt-upload-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.75; }
}
.yt-upload-ph {
  animation: yt-upload-pulse 1.4s ease-in-out infinite;
}

/* spinner */
.yt-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(34,211,238,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: yt-spin 0.7s linear infinite;
}

/* 进度条动画 */
.yt-progress-bar {
  animation: yt-bar-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ── 7. 页面切换遮罩 ──────────────────────────────────────── */

#yt-transition-overlay {
  position: fixed;
  inset: 0;
  background: #06080f;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

#yt-transition-overlay.fade-out {
  opacity: 1;
}


/* ── 尊重减少动效偏好 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .yt-reveal, .yt-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}