/* ============================================================
   星抖奇玩 — motion.css
   自定义光标 / 揭示错落 / 视差 / 降级
   ============================================================ */

/* ------------------------------------------------------------ 自定义光标 */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
}

body.has-cursor .cursor { opacity: 1; }

body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor [role="button"] { cursor: none; }

.cursor__dot,
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
  transition: transform .18s var(--ease-out), opacity .2s ease;
}

.cursor__ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(232, 255, 0, .55);
  transition: transform .32s var(--ease-out), opacity .25s ease, border-color .3s ease;
}

/* 悬停交互元素时放大 */
.cursor.is-hover .cursor__ring {
  transform: scale(1.85);
  border-color: rgba(232, 255, 0, .95);
}

.cursor.is-hover .cursor__dot { opacity: 0; }

/* 按下 */
.cursor.is-down .cursor__ring { transform: scale(.72); }

/* 深层元素上反色（用于亮色区域） */
.cursor.is-invert .cursor__ring { border-color: rgba(11, 11, 11, .6); }
.cursor.is-invert .cursor__dot { background: var(--ink); }

/* 触屏 / 无精细指针设备：彻底关闭 */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button { cursor: auto; }
}

/* ------------------------------------------------------------ 揭示错落 */

.pillars [data-reveal]:nth-child(2) { transition-delay: .09s; }
.pillars [data-reveal]:nth-child(3) { transition-delay: .18s; }

.features [data-reveal]:nth-child(2) { transition-delay: .08s; }
.features [data-reveal]:nth-child(3) { transition-delay: .16s; }
.features [data-reveal]:nth-child(4) { transition-delay: .24s; }

.steps [data-reveal]:nth-child(2) { transition-delay: .09s; }
.steps [data-reveal]:nth-child(3) { transition-delay: .18s; }
.steps [data-reveal]:nth-child(4) { transition-delay: .27s; }

.why__grid [data-reveal]:nth-child(2) { transition-delay: .08s; }
.why__grid [data-reveal]:nth-child(3) { transition-delay: .16s; }
.why__grid [data-reveal]:nth-child(4) { transition-delay: .24s; }

.timeline [data-reveal]:nth-child(2) { transition-delay: .07s; }
.timeline [data-reveal]:nth-child(3) { transition-delay: .14s; }
.timeline [data-reveal]:nth-child(4) { transition-delay: .21s; }
.timeline [data-reveal]:nth-child(5) { transition-delay: .28s; }

.nfc__list [data-reveal]:nth-child(2) { transition-delay: .09s; }
.nfc__list [data-reveal]:nth-child(3) { transition-delay: .18s; }

.contact__grid [data-reveal]:nth-child(2) { transition-delay: .08s; }
.contact__grid [data-reveal]:nth-child(3) { transition-delay: .16s; }

/* 揭示的三种方向变体 */
[data-reveal="left"]  { transform: translateX(-38px); }
[data-reveal="right"] { transform: translateX(38px); }
[data-reveal="scale"] { transform: scale(.94); }

[data-reveal].is-in { transform: none; }

/* ------------------------------------------------------------ 视差 */

.parallax-media {
  transition: transform .1s linear;
  will-change: transform;
}

.scenes__bg img { will-change: transform; }

/* ------------------------------------------------------------ 磁吸按钮 */

[data-magnetic] {
  transition: translate .5s var(--ease-out);
}

[data-magnetic]:hover {
  transition: translate .1s linear;
}

/* ------------------------------------------------------------ 图片入场
   不要用 clip-path / display:none 做入场：被完全裁剪的元素在
   IntersectionObserver 里 ratio 恒为 0，会导致永远无法触发揭示。
   这里统一用 opacity + transform（不改变几何可见性）。          */

.nfc__media,
.why__band,
.seal__product {
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}

.nfc__media.is-in img,
.why__band.is-in img,
.seal__product.is-in img {
  transform: scale(1);
}

.nfc__media img,
.why__band img,
.seal__product img {
  transform: scale(1.05);
  transition: transform 1.3s var(--ease-out);
}

/* hover 缩放要在入场之后生效 */
.nfc__media.is-in:hover img,
.why__band.is-in:hover img { transform: scale(1.02); }

/* ------------------------------------------------------------ 数字滚动 */

.is-counting { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 降级：减少动态效果 */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .anim-rise,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .pillar__idx,
  .pillar__title,
  .pillar__desc,
  .tl-item__num,
  .tl-item__title,
  .tl-item__desc {
    opacity: 1 !important;
    transform: none !important;
  }

  .pillar__title::after { width: 26px !important; }

  /* 客户 logo 停止滚动 */
  .clients__track { animation: none !important; }

  .hero__title .line__in { transform: none !important; }

  .nfc__media img,
  .why__band img,
  .seal__product img { transform: none !important; }

  .orbit-item { display: none !important; }

  .bg-grid,
  .bg-glow,
  .grain,
  .cursor,
  .scroll-hint { display: none !important; }

  .scenes { height: auto !important; }
  .scenes__sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .scenes__track { flex-wrap: wrap; transform: none !important; }

  .film-reveal {
    margin-top: 0 !important;
    background: var(--paper) !important;
  }
  .film-reveal__frame { transform: none !important; }
  .film-reveal__sound { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 打印 */

@media print {
  .nav, .cursor, .grain, .bg-grid, .bg-glow,
  .scroll-progress, .scroll-hint, .stamp-demo { display: none !important; }

  body { background: #fff !important; color: #000 !important; }

  [data-reveal], .anim-rise {
    opacity: 1 !important;
    transform: none !important;
  }

  .scenes { height: auto !important; }
  .scenes__sticky { position: static !important; height: auto !important; }
  .scenes__track { flex-wrap: wrap; transform: none !important; }

  section { break-inside: avoid; }
}