/* ==========================================================================
   Aurora Background —— 官方组件实现（加速一倍版）
   源码：motionsites.org/r/user_aceternity/aurora-background.json
   ──────────────────────────────────────────────────────────────────────────
   Tailwind 类名 → CSS 逐条对应：

     光源层
       -inset-[10px]                        → inset: -10px
       [background-image:var(--white-gradient),var(--aurora)]
       [background-size:300%,_200%]
       [background-position:50%_50%,50%_50%]
       opacity-50                           → opacity: .5
       blur-[10px] invert filter            → filter: blur(16px) invert(1)
       [mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,transparent_70%)]

     ::after
       after:[background-image:var(--white-gradient),var(--aurora)]
       after:[background-size:200%,_100%]
       after:[background-attachment:fixed]
       after:mix-blend-difference
       after:animate-aurora                 → animation: aurora 30s linear infinite

   ★ invert + difference 必须成对
     实测亮度（参考视频 246）：
       invert=1 + difference + mask → 247  ✅
       invert=0 + difference + mask → 216  ✗
       invert=1 + normal   + mask → 215  ✗
     基底层先反相成暗色，叠加层再用差值抵消出光 —— 这就是极光的来源。

   ★ 本站只改了两处
     1. 白条纹层加宽：官方 7%/10%/12%/16% 会产生 1px 级细丝，改成 5%/12%/19%/26%
     2. 模糊 10px → 16px，把细丝彻底晕开
     3. 速度 60s → 30s（加速一倍）
   ========================================================================== */

:root {
  /* 速度：官方原值 60s，本站加速一倍 */
  --aurora-duration: 30s;
}

.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #fafafa;   /* 源码 bg-zinc-50 */
  color: #020617;              /* 源码 text-slate-950 */
}

.aurora__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 光源层 */
.aurora__layer {
  position: absolute;
  inset: -10px;
  pointer-events: none;

  /* ───────────────────────────────────────────────────────────────────
     ★ 为什么周期用 vw 而不是 %

     100deg 渐变的百分比色标是沿「渐变线方向」计算的，而 background-size
     的百分比是沿「元素宽度」计算的 —— 两者不在同一方向。所以无论周期取
     20% 还是 30%，图块边界都不可能对齐，接缝必然出现。

     改用绝对单位 vw 就能精确闭合：
       每 300vw 宽度的平铺，沿线方向推进 300 × sin100° = 295.44vw
       取 P = 295.44 / 6 = 49.24vw  → 300% 层正好 6 个周期
                                    200% 层正好 4 个周期
     两层同时整除 → 平铺边界处的色值必然相等 → 无接缝。
     ─────────────────────────────────────────────────────────────────── */

  /* 白色条纹层：周期 49.24vw（= 色带周期的 1/2，同样被整除） */
  --white-gradient: repeating-linear-gradient(
    100deg,
    #fff 0vw,
    #fff 9.85vw,
    transparent 22.16vw,
    transparent 36.93vw,
    #fff 49.24vw
  );

  /* 彩色色带层：官方原色，周期 49.24vw，首尾同为 #3b82f6 → 闭合 */
  --aurora: repeating-linear-gradient(
    100deg,
    #3b82f6 0vw,
    #a5b4fc 12.31vw,
    #93c5fd 24.62vw,
    #ddd6fe 36.93vw,
    #60a5fa 44.32vw,
    #3b82f6 49.24vw
  );

  background-image: var(--white-gradient), var(--aurora);
  /* 300%/200% 是官方值。周期 49.24vw 与它们整除，所以平铺无缝；
     但官方动画把 position 推到 350%，会把色带整体推出可视区 → 那一段就是白屏。
     这里把平铺宽度改成 2 个周期（=98.48vw），位移也只走 1 个周期，
     色彩永远覆盖画面。 */
  background-size: 98.48vw 100%, 98.48vw 100%;
  background-position: 0 0, 0 0;
  opacity: 0.5;
  filter: blur(16px) invert(1);

  /* 基础层：位移一个周期（49.24vw）。
     8s 走完 ≈ 6.2vw/s ≈ 89px/s（1440 宽下），动感明显。 */
  animation: aurora-base 8s linear infinite;

  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
}

/* ::after */
.aurora__layer::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--white-gradient), var(--aurora);
  background-size: 98.48vw 100%, 98.48vw 100%;
  mix-blend-mode: difference;

  /* ★ difference 的正确用法：两层「同速同向 + 固定偏移」。
        A(x)=G(x−vt)、B(x)=G(x−vt+d)  →  |A−B| = |G(u)−G(u+d)|，u=x−vt
       差值图案是「恒定亮度」的，只是整体以速度 v 平移。
       所以速度可以随便调快，都不会出现明暗呼吸或白屏。
     之前两层偏移都是 0 → d=0 → |G−G|=0 → 整屏变白（那个闪烁）。
     起始偏移 24.62vw（= 半个周期）差值最大，光最明显。 */
  animation: aurora-overlay 8s linear infinite;
  animation-delay: 0s;
  background-position: 24.62vw 0, 24.62vw 0;
}

/* 源码 tailwind.config 的 animate-aurora */
/* 位移正好一个周期（49.24vw），首尾等值 → 无缝循环，
   且任意时刻色带都覆盖整个画面 → 不会出现白屏 */
/* 基础层：向左漂移一个周期 */
@keyframes aurora-base {
  from { background-position: 0 0, 0 0; }
  to   { background-position: -49.24vw 0, -49.24vw 0; }
}

/* 叠加层：同样向左漂移一个周期，但起点偏移 +24.62vw（half period）。
   首尾都保持 24.62vw 的相对偏移 → 差值图案恒亮且随基础层一起平移。 */
@keyframes aurora-overlay {
  from { background-position: 24.62vw 0, 24.62vw 0; }
  to   { background-position: -24.62vw 0, -24.62vw 0; }
}

/* --------------------------------------------------------------------------
   站点适配：左侧文字区提白（官方组件常用于居中短标题，这里是左对齐长文案）
   -------------------------------------------------------------------------- */
.aurora::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    50% 58% at 10% 46%,
    rgba(250, 250, 250, 0.92) 0%,
    rgba(250, 250, 250, 0.42) 50%,
    rgba(250, 250, 250, 0) 78%
  );
}

@media (prefers-reduced-motion: reduce) {
  .aurora__layer::after { animation: none; }
}

/* ==========================================================================
   恒定彩色底
   ──────────────────────────────────────────────────────────────────────────
   difference 混合在两层相位对齐时差值归零，那一瞬间画面会变成纯白
   （每 48 秒出现一次，肉眼就是"隔一会闪一下"）。

   这层是静态的柔和色光，不参与混合，位于差分层之下。
   它保证任何相位下都有颜色，同时给差分层提供背景参照。
   ========================================================================== */
.aurora__base {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 86% 10%, rgba(147, 197, 253, 0.55) 0%, rgba(147, 197, 253, 0) 62%),
    radial-gradient(48% 54% at 96% 46%, rgba(165, 180, 252, 0.48) 0%, rgba(165, 180, 252, 0) 66%),
    radial-gradient(42% 48% at 72% 84%, rgba(221, 214, 254, 0.42) 0%, rgba(221, 214, 254, 0) 70%),
    linear-gradient(180deg, #f8fbff 0%, #fafafa 62%, #f7f9ff 100%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 20%, transparent 94%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 20%, transparent 94%);
}