/* ============================================================
   motion.css —— 高级动效系统
   Hero 入场 / 字符 stagger / 视差 / 3D 卡片 / 滚动进度 / 磁吸 / Ken Burns / 光标光晕
   配合 main.js 的 IntersectionObserver 与 rAF 实现
   ============================================================ */

/* ============ 滚动进度条 ============ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--bee-yellow), var(--bee-honey));
  z-index: 200;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.6);
}

/* ============ 光标光晕(桌面端) ============ */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.5), rgba(255, 193, 7, 0));
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, opacity 0.3s ease;
  mix-blend-mode: screen;
  opacity: 0;
}

.cursor-glow.is-active { opacity: 1; }

@media (hover: none), (max-width: 980px) {
  .cursor-glow { display: none; }
}

/* ============ Hero 入场编排 ============ */
/* 页面加载后逐元素 stagger 上推渐入 */
.hero .hero__eyebrow,
.hero .hero__title,
.hero .hero__desc,
.hero .hero__cta {
  opacity: 0;
  transform: translateY(36px);
  animation: heroIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero .hero__eyebrow { animation-delay: 0.15s; }
.hero .hero__title  { animation-delay: 0.35s; }
.hero .hero__desc   { animation-delay: 0.6s; }
.hero .hero__cta    { animation-delay: 0.8s; }

@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* Hero 右侧视觉：缩放+旋进入场 */
.hero .hero__visual {
  opacity: 0;
  transform: scale(0.8) rotate(-6deg);
  animation: heroVisualIn 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
}
@keyframes heroVisualIn {
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* Hero 蜂巢视觉:默认静止,hover 时轻微放大(避免持续自动抖动) */
.hero__visual .hex-frame {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero__visual:hover .hex-frame {
  transform: scale(1.03);
}

/* ============ 标题字符 stagger ============ */
/* JS 将 .split-text 的文字拆成 .char,进入视口逐字上推 */
.split-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(6deg);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.split-text.is-visible .char {
  opacity: 1;
  transform: none;
}

/* eyebrow 也做一个小入场 */
.section-head .eyebrow {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.section-head.is-visible .eyebrow,
.section-head .eyebrow.is-visible {
  opacity: 1;
  transform: none;
}

/* ============ 增强滚动渐显（带 blur 对焦感）============ */
.reveal-blur {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease;
}
.reveal-blur.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ============ 视差层 ============ */
[data-parallax] {
  will-change: transform;
}

/* ============ Ken Burns 入场缩放（一次性推近 + hover，不再无限推拉）============ */
.kenburns {
  overflow: hidden;
}
.kenburns img {
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* 进入视口后一次性缓慢推近,停住不动 */
.kenburns.is-visible img {
  transform: scale(1.08);
}
/* hover 时再轻微推近,增加交互响应 */
.kenburns:hover img {
  transform: scale(1.12);
}

/* ============ 产品卡 3D 倾斜 ============ */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  will-change: transform;
}

.tilt__shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.25),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tilt:hover .tilt__shine { opacity: 1; }

/* 卡片内文字/图标轻微浮起(3D 层次) */
.tilt .product-card__title,
.tilt .feature-card h3 {
  transform: translateZ(40px);
}

/* ============ 磁吸按钮 ============ */
.magnetic {
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* ============ Nav 滚动收缩 ============ */
.site-header {
  transition: box-shadow var(--t), padding 0s;
}
.site-header.is-scrolled .nav {
  height: 60px;
}
.site-header .nav {
  transition: height 0.3s ease;
}

/* ============ 数据墙数字强调 ============ */
.stat__num {
  text-shadow: 0 0 40px rgba(255, 193, 7, 0.3);
}

/* ============ 浮动装饰(可复用) ============ */
.float-slow {
  animation: floatY 7s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ============ 画廊切换淡入 ============ */
.product-gallery__main img {
  transition: opacity 0.4s ease;
}
.product-gallery__main.is-switching img {
  opacity: 0.3;
}

/* ============ 链接下划线动画增强 ============ */
.menu__item {
  position: relative;
  overflow: hidden;
}

/* ============ CTA banner 文案入场 ============ */
.cta-banner__inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta-banner__inner.is-visible > * {
  opacity: 1;
  transform: none;
}
.cta-banner__inner.is-visible > *:nth-child(1) { transition-delay: 0s; }
.cta-banner__inner.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.cta-banner__inner.is-visible > *:nth-child(3) { transition-delay: 0.24s; }

/* ============ 产品详情主图浮入 ============ */
.product-gallery,
.product-info {
  opacity: 0;
}
.product-gallery { transform: translateX(-30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.product-info { transform: translateX(30px); transition: opacity .8s ease .15s, transform .8s cubic-bezier(.2,.8,.2,1) .15s; }
.product-hero.is-visible .product-gallery,
.product-hero.is-visible .product-info {
  opacity: 1;
  transform: none;
}

/* ============ 减弱动效偏好 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero .hero__eyebrow,
  .hero .hero__title,
  .hero .hero__desc,
  .hero .hero__cta,
  .hero .hero__visual,
  .split-text .char,
  .reveal-blur,
  .product-gallery,
  .product-info,
  .cta-banner__inner > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .cursor-glow, .scroll-progress { display: none !important; }
}