/* 桌面端的微交互：不换风格，只增加光、层次与质感。 */
@media (hover: hover) and (pointer: fine) {
  /* 标题始终保持高对比可读；高光仅作为周边氛围，不把文字本身变透明。 */
  .hero-sac .hero-copy h1 {
    color: var(--ink);
    background: none;
    -webkit-text-fill-color: initial;
    animation: none;
  }
  .hero-sac .hero-copy::after {
    content: "";
    position: absolute;
    width: 130px; height: 44px; left: 32%; top: 37%;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse, rgba(102,126,255,.16), transparent 70%);
    filter: blur(13px);
    animation: hero-copy-glow 5.8s cubic-bezier(.65,0,.35,1) 1.2s infinite;
  }

  .work, .tool, .field, .office-example {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 260ms cubic-bezier(.16, 1, .3, 1), box-shadow 360ms cubic-bezier(.16, 1, .3, 1), border-color 300ms ease;
  }

  .work::before, .tool::after, .office-example::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    background: radial-gradient(330px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,255,255,.24), rgba(169,188,255,.065) 28%, transparent 64%);
    transition: opacity 240ms ease;
  }
  .tool::after { z-index: 5; }
  .office-example::after { z-index: 2; }
  .work.is-tilting::before, .tool.is-tilting::after, .office-example.is-tilting::after { opacity: 1; }

  .work.is-tilting { box-shadow: 0 30px 58px rgba(17, 25, 61, .20); }
  .tool.is-tilting, .field.is-tilting, .office-example.is-tilting { box-shadow: 0 28px 54px rgba(16, 17, 23, .16); }

  .hero-scroll { transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), color 200ms ease; }
  .hero-scroll:hover { transform: translateX(7px); color: #2e5fff; }
  .hero-scroll:hover i { transform: translateY(4px) scale(1.08); border-color: #2e5fff; }
}

@keyframes hero-copy-glow {
  0%, 100% { opacity: 0; transform: translateX(-28px) scale(.8); }
  26% { opacity: .9; }
  52% { opacity: 0; transform: translateX(175px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sac .hero-copy h1 { animation: none !important; }
}
