/* ==========================================================================
   星澜 AI 官网 · 动效层（anim.css）
   分级揭示 / 视差 / 3D tilt / 渐变流动 / 滚动指示 / 页面加载 /
   全部仅使用 transform + opacity；prefers-reduced-motion 下自动降级
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 首屏加载态（main.js 在 DOMContentLoaded 后加 .page-ready）
   -------------------------------------------------------------------------- */
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__actions,
.hero__meta,
.hero__visual,
.hero__scroll {
  opacity: 0;
}

.page-ready .hero__eyebrow,
.page-ready .hero__title,
.page-ready .hero__lead,
.page-ready .hero__actions,
.page-ready .hero__meta,
.page-ready .hero__visual,
.page-ready .hero__scroll {
  animation: hero-in 0.9s var(--ease-expo) both;
}

.page-ready .hero__eyebrow {
  animation-delay: 0.05s;
}
.page-ready .hero__title {
  animation-delay: 0.14s;
}
.page-ready .hero__lead {
  animation-delay: 0.26s;
}
.page-ready .hero__actions {
  animation-delay: 0.36s;
}
.page-ready .hero__meta {
  animation-delay: 0.44s;
}
.page-ready .hero__visual {
  animation-delay: 0.3s;
  animation-duration: 1.15s;
}
.page-ready .hero__scroll {
  animation-delay: 0.9s;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* 首屏标题逐字浮现（hero-canvas 之外的纯 CSS 补充：整段渐变流动） */
.page-ready .hero__title .grad-text {
  animation: gradient-pan 9s linear infinite;
}

@keyframes gradient-pan {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}

/* --------------------------------------------------------------------------
   2. 滚动揭示（reveal.js 加 .is-visible）
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.75s var(--ease-out), transform 0.85s var(--ease-expo), filter 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="up"] {
  transform: translate3d(0, 34px, 0);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translate3d(-38px, 0, 0);
}

[data-reveal="right"] {
  transform: translate3d(38px, 0, 0);
}

[data-reveal="zoom"] {
  transform: scale(0.94);
}

[data-reveal="blur"] {
  transform: translate3d(0, 20px, 0);
  filter: blur(10px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 分级子元素（父容器 data-reveal-group，子元素逐个入场） */
[data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-expo);
}

[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  /* 窄屏：左右位移改为纵向，彻底避免横向溢出 */
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translate3d(0, 26px, 0);
  }
}

/* --------------------------------------------------------------------------
   3. 标题逐字/逐行（grad-text 动画已在页面使用）
   -------------------------------------------------------------------------- */
.title-line {
  display: block;
  overflow: hidden;
}

.title-line > span {
  display: block;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.95s var(--ease-expo);
}

.title-line.is-in > span {
  transform: none;
}

.title-line[data-delay="1"] > span {
  transition-delay: 0.1s;
}
.title-line[data-delay="2"] > span {
  transition-delay: 0.2s;
}
.title-line[data-delay="3"] > span {
  transition-delay: 0.3s;
}

/* 文字渐变描边（大标题备用） */
.text-stroke {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.32);
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. 滚动视差（main.js 写入 --py）
   -------------------------------------------------------------------------- */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* 回到顶部悬浮按钮（页面底部出现） */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-sticky);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(16, 18, 30, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text-2);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out),
    visibility var(--dur-3), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  color: var(--text-1);
  border-color: rgba(34, 211, 238, 0.42);
}

.to-top .ico {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   5. 3D 倾斜（tilt.js 写入 --rx/--ry/--gx/--gy）
   -------------------------------------------------------------------------- */
[data-tilt] {
  transform: perspective(var(--tilt-persp, 1100px)) rotateX(calc(var(--tilt-base-x, 0deg) + var(--rx, 0deg)))
    rotateY(calc(var(--tilt-base-y, 0deg) + var(--ry, 0deg)));
  transition: transform 0.6s var(--ease-out);
  transform-style: preserve-3d;
}

[data-tilt].is-tilting {
  transition: transform 90ms linear;
}

/* 磁吸按钮（tilt.js 写入 translate3d） */
[data-magnetic] {
  transition: transform 0.55s var(--ease-spring), box-shadow var(--dur-3) var(--ease-out);
  will-change: transform;
}

[data-magnetic].is-magnet {
  transition: transform 0.1s linear, box-shadow var(--dur-3) var(--ease-out);
}

/* 卡片内高光跟随指针 */
[data-tilt] .tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    420px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, 0.14),
    transparent 62%
  );
  transition: opacity var(--dur-3) var(--ease-out);
}

[data-tilt]:hover .tilt-glare {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6. 滚动指示 / 点线动画
   -------------------------------------------------------------------------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 2.4vw, 2rem);
  translate: -50% 0;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-3);
}

.scroll-cue__rail {
  position: relative;
  width: 22px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.scroll-cue__dot {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 7px;
  border-radius: 3px;
  background: var(--c-cyan);
  translate: -50% 0;
  animation: cue-dot 2.1s var(--ease-in-out) infinite;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
}

@keyframes cue-dot {
  0% {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
  22% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate3d(0, 13px, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 17px, 0);
  }
}

/* 小型动效工具类 */
.dot-pulse,
.dot {
  animation: dot-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes dot-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.pulse-ring {
  position: relative;
}

.pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(34, 211, 238, 0.4);
  animation: pulse-ring 2.6s var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes pulse-ring {
  0% {
    opacity: 0.8;
    transform: scale(0.96);
  }
  70% {
    opacity: 0;
    transform: scale(1.18);
  }
  100% {
    opacity: 0;
  }
}

.spin-slow {
  animation: spin 14s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 环境光呼吸 */
.breathe {
  animation: breathe 7s var(--ease-in-out) infinite;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

/* 骨架屏（异步内容占位，demo/下载页可用） */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate3d(-100%, 0, 0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: shimmer 1.6s var(--ease-in-out) infinite;
}

@keyframes shimmer {
  to {
    transform: translate3d(100%, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   7. 减少动态效果 / 移动端降级
   -------------------------------------------------------------------------- */
@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;
  }

  [data-reveal],
  [data-reveal-group] > *,
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .hero__meta,
  .hero__visual,
  .hero__scroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  [data-tilt] {
    transform: none !important;
  }

  .marquee__track,
  .float-card,
  .breathe,
  .spin-slow,
  .pulse-ring::after,
  .scroll-cue__dot {
    animation: none !important;
  }

  .page-progress {
    display: none;
  }

  .cursor-glow {
    display: none;
  }

  .to-top {
    transition: none;
  }
}

/* 触屏设备：关闭 hover 相关重效果（tilt/cursor 由 JS 判断，这里兜底） */
@media (hover: none) {
  .cursor-glow {
    display: none;
  }

  .feature-card:hover {
    transform: none;
  }
}