/* ==========================================================================
   安徽盘网 · 动效特效层
   纯原生 CSS，只做视觉增强；由 assets/js/effects.js 配合驱动
   全部动效在 prefers-reduced-motion 下自动关闭
   ========================================================================== */

:root { --fx-ease: cubic-bezier(.22, .61, .36, 1); }

/* ---------- 1. 顶部滚动进度条 ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; z-index: 1200;
  width: 100%; height: 3.2px; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-400) 55%, #fff);
  box-shadow: 0 0 12.8px rgba(217, 101, 13, .5);
  will-change: transform;
}

/* ---------- 2. 光标聚光灯（仅精确指针设备） ---------- */
.fx-cursor {
  position: fixed; top: 0; left: 0; z-index: 1150;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle,
    rgba(217, 101, 13, .10) 0%,
    rgba(64, 57, 208, .08) 38%,
    transparent 66%);
  transition: opacity .5s ease;
  will-change: transform;
}
.fx-cursor.is-on { opacity: 1; }
@media (pointer: coarse) { .fx-cursor { display: none; } }

/* ---------- 3. 深色区极光流动 ---------- */
/* 宿主必须建立定位上下文并裁剪：极光用 inset:-25% 向外扩散，宿主若没有
   overflow:hidden，这层会把整页撑出横向滚动条（实测 +403px）。 */
.hero, .pagehead, .section--indigo { position: relative; overflow: hidden; }
.fx-aurora {
  position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 52% at 22% 24%, rgba(217, 101, 13, .13), transparent 62%),
    radial-gradient(48% 58% at 78% 28%, rgba(64, 57, 208, .32), transparent 64%),
    radial-gradient(38% 46% at 55% 88%, rgba(150, 146, 211, .15), transparent 60%);
  filter: blur(8px);
  animation: fxAurora 22s var(--fx-ease) infinite alternate;
  will-change: transform, opacity;
}
@keyframes fxAurora {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1);    opacity: .72; }
  50%  { transform: translate3d(2%, 2.5%, 0)      scale(1.07); opacity: 1; }
  100% { transform: translate3d(-1.5%, 3%, 0)     scale(1.03); opacity: .82; }
}
/* 内容压在极光之上 */
.hero > .wrap, .pagehead > .wrap, .section--indigo > .wrap { position: relative; z-index: 2; }

/* ---------- 4. 英雄区粒子画布 ---------- */
.fx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; display: block;
}

/* ---------- 5. 按钮扫光 ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left .65s var(--fx-ease);
}
.btn:hover::after { left: 150%; }
.btn--ghost::after {
  background: linear-gradient(100deg, transparent 0%, rgba(39, 34, 123, .10) 50%, transparent 100%);
}

/* ---------- 6. 卡片 3D 倾斜 + 流光 ---------- */
.fx-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-tilt.fx-tilting { transition: transform .08s linear !important; }
.fx-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease; z-index: 1;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, .18), rgba(64, 57, 208, .06) 42%, transparent 62%);
}
.fx-tilt:hover .fx-glare { opacity: 1; }

/* ---------- 7. 标题 / 眉标进场（配合 main.js 的 is-in） ---------- */
.sec-head .sec-title, .sec-head .sec-sub {
  opacity: 0; transform: translateY(40px); filter: blur(6px);
  transition: opacity .7s var(--fx-ease), transform .9s var(--fx-ease), filter .9s var(--fx-ease);
  will-change: transform, opacity, filter;
}
.sec-head .sec-sub { transition-delay: .12s; }
.sec-head.is-in .sec-title, .sec-head.is-in .sec-sub { opacity: 1; transform: none; filter: blur(0); }

.sec-head .eyebrow::before {
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .8s var(--fx-ease) .08s;
}
.sec-head.is-in .eyebrow::before { transform: scaleX(1); }

/* ---------- 8. 栅格子项级联进场（.fx-cascade 由 JS 判定后添加） ---------- */
.fx-cascade > * {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-in .fx-cascade > * { opacity: 1; transform: none; }

/* ---------- 9. 返回顶部 ---------- */
.fx-top {
  position: fixed; right: 41.6px; bottom: 140px; z-index: 790;
  width: 60.8px; height: 60.8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--indigo-600), var(--indigo-800));
  color: #fff; cursor: pointer; border: none;
  box-shadow: var(--sh-indigo);
  opacity: 0; transform: translateY(19.2px) scale(.9); pointer-events: none;
  transition: opacity .35s var(--fx-ease), transform .35s var(--fx-ease), box-shadow .3s;
}
.fx-top.is-show { opacity: 1; transform: none; pointer-events: auto; }
.fx-top:hover { transform: translateY(-4.8px); box-shadow: 0 28.8px 64px rgba(39, 34, 123, .45); }
.fx-top svg { width: 28.8px; height: 28.8px; }

/* ---------- 10. 轻量微交互 ---------- */
.chip, .platform { transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease); }
.chip:hover, .platform:hover { transform: translateY(-4.8px); }

.hero__map, .hero__deco, .hero__grid { will-change: transform; }

/* ---------- 11. 移动端微调 ---------- */
@media (max-width: 560px) {
  .fx-top { right: 18px; bottom: 120px; width: 51.2px; height: 51.2px; }
  .fx-cursor { display: none; }
}

/* ---------- 12. 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-progress, .fx-cursor, .fx-aurora, .fx-glare, .fx-canvas { display: none !important; }
  .fx-tilt { transform: none !important; }
  .btn::after { display: none; }
  .sec-head .sec-title, .sec-head .sec-sub { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sec-head .eyebrow::before { transform: scaleX(1) !important; }
  .fx-cascade > * { opacity: 1 !important; transform: none !important; }
  .fx-top { transition: none; }
}