/**
 * dotnfilm 主站 nav N→•→N 自动循环动效
 *
 * 设计来源：web-hand-off/dotnfilm-main/pages/n-dot-n-demo.html
 * 锁定方案（Meng 2026-05-15）：
 *   - 风格 Rotate · 1200ms morph · standard 缓动
 *   - 8200ms 总周期 = 1200ms morph + 7000ms idle 静止
 *   - 自动循环（svg 默认带 class ndn-auto-loop，CSS infinite animation）
 *   - 无 hover 触发
 *
 * 适用元素：任何带 .logo-wordmark.ndn-auto-loop 的 SVG
 * 通常 nav 区由 header.php inject ndn-auto-loop；home hero 等其他位置
 * 不加 ndn-auto-loop（保持静态）
 *
 * dot 位置：cx=620 cy=148 r=32（n 字母 bounding box 几何中心，在 logo.svg
 * 内已 hardcoded）。fill 用 currentColor 跟着父 text color；如需用 accent
 * 色，override 在此文件下方的 [theme-accent-dot] selector
 */

/* 基础态：n 完整显示，dot 隐藏 */
.logo-wordmark__n {
  transform-box: fill-box;
  transform-origin: center center;
  transform: scale(1);
  opacity: 1;
}
.logo-wordmark__dot {
  transform-box: fill-box;
  transform-origin: center center;
  transform: scale(0);
  opacity: 0;
}

/* 自动循环：8200ms 总周期 = 1200ms morph (14.63%) + 7000ms idle dwell (85.37%) */
.logo-wordmark.ndn-auto-loop .logo-wordmark__n {
  animation: ndn-logo-n-cycle 8200ms cubic-bezier(.4, 0, .2, 1) infinite;
}
.logo-wordmark.ndn-auto-loop .logo-wordmark__dot {
  animation: ndn-logo-dot-cycle 8200ms cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes ndn-logo-n-cycle {
  0%      { transform: rotate(0deg)   scale(1); opacity: 1; }
  5.12%   { transform: rotate(180deg) scale(0); opacity: 0; }
  9.51%   { transform: rotate(180deg) scale(0); opacity: 0; }
  14.63%  { transform: rotate(360deg) scale(1); opacity: 1; }
  100%    { transform: rotate(360deg) scale(1); opacity: 1; }
}

@keyframes ndn-logo-dot-cycle {
  0%, 4.39%      { transform: scale(0); opacity: 0; }
  6.59%, 8.05%   { transform: scale(1); opacity: 1; }
  10.24%, 100%   { transform: scale(0); opacity: 0; }
}

/* 无障碍：prefers-reduced-motion 用户跳过动画 */
@media (prefers-reduced-motion: reduce) {
  .logo-wordmark.ndn-auto-loop .logo-wordmark__n,
  .logo-wordmark.ndn-auto-loop .logo-wordmark__dot {
    animation: none !important;
  }
  .logo-wordmark__n { transform: scale(1); opacity: 1; }
  .logo-wordmark__dot { transform: scale(0); opacity: 0; }
}