/* ============================================================
   LUTONG STUDIO · Animations
   入场 / 滚动出现 / 辉光 / 浮动 / 减少动效
   ============================================================ */

/* ---------- 入场关键帧 ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.04); }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes line-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- 滚动出现（IntersectionObserver 添加 .is-visible） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 阶梯延迟 */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* 首屏内容载入即用淡入（不依赖滚动） */
.hero .reveal { opacity: 1; transform: none; }
.hero [data-hero] {
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) forwards;
}
.hero [data-hero="1"] { animation-delay: 0.1s; }
.hero [data-hero="2"] { animation-delay: 0.25s; }
.hero [data-hero="3"] { animation-delay: 0.4s; }
.hero [data-hero="4"] { animation-delay: 0.55s; }
.hero [data-hero="5"] { animation-delay: 0.7s; }

/* ---------- 持续微动效（缓慢、低占用） ---------- */
.fx-float { animation: float-soft 7s ease-in-out infinite; }
.fx-pulse { animation: pulse-glow 6s ease-in-out infinite; }
.fx-spin { animation: spin-slow 36s linear infinite; }

/* ---------- 背景光带 ---------- */
.bg-flow {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
}
.bg-flow__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: float-soft 18s ease-in-out infinite;
}
.bg-flow__blob--1 {
  width: 520px; height: 520px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.5), transparent 70%);
}
.bg-flow__blob--2 {
  width: 460px; height: 460px;
  bottom: -140px; left: -100px;
  background: radial-gradient(circle, rgba(57, 216, 255, 0.4), transparent 70%);
  animation-delay: 4s;
}

/* ---------- 标题渐变流动 ---------- */
.gradient-flow {
  background: linear-gradient(100deg, #FFFFFF, #C9D2FF, #9FE7FF, #FFFFFF);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s linear infinite;
}

/* =========================================================
   减少动态模式
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero [data-hero] { opacity: 1 !important; animation: none !important; }
  .bg-flow, .fx-float, .fx-pulse, .fx-spin { display: none !important; }
}

/* =========================================================
   技术栈横向滚动（Tech Marquee）
   纯 CSS 无限滚动 + 左右渐隐遮罩（参考 oscarhernandez.vercel.app）
   ========================================================= */
.tech-marquee {
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
  margin-top: var(--space-6);
  /* 整条滚动区不暂停、不可选中 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.tech-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: tech-scroll 38s linear infinite;
}
.tech-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-select: none;
}
.tech-marquee__item img {
  height: 1.75rem;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.tech-marquee__item span {
  font-size: 1.125rem;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s var(--ease-out);
}
.tech-marquee__item:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.tech-marquee__item:hover span {
  color: #fff;
}

/* 亮主题：文字/图标变为深色，保持与白色背景可读 */
[data-theme="light"] .tech-marquee__item img {
  opacity: 0.72;
}
[data-theme="light"] .tech-marquee__item span {
  color: rgba(0, 0, 0, 0.75);
}
[data-theme="light"] .tech-marquee__item:hover img {
  opacity: 1;
}
[data-theme="light"] .tech-marquee__item:hover span {
  color: #07070A;
}

@keyframes tech-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .tech-marquee__track { animation: none !important; transform: none !important; }
}