/*
 * Gemini 式环境光。配 Aurora.tsx 使用。
 *
 * 结构：.aurora（定位层，控整体不透明度）→ .aurora-layer（高 500px 的带子）
 *      → 两个 .blob（巨大、重模糊）→ 每个内部一条 .strip（斜向彩虹渐变）。
 *
 * 桌面端 blob 探出顶部（问候语后面），手机端探出底部（同 Gemini App）。
 * rest：空态常亮；on：输入框聚焦提亮；busy：等待回复时最亮。不接收指针事件。
 */

.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}

.aurora-rest { opacity: var(--aurora-rest); }
.aurora-on { opacity: var(--aurora-on); }
.aurora-busy { opacity: var(--aurora-busy); }

.aurora-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 500px;
}

/*
 * 形状是静态的：动画 border-radius 意味着每帧重新光栅化一张百万像素的图层，
 * 再跑一遍上百像素的模糊。形变的观感交给 scale / translate / rotate——
 * 这三个是合成属性，只动矩阵，不碰像素。
 */
.blob {
  --morph: 17%;
  --shape-scale-min: .87;
  --shape-scale-max: 1;
  position: absolute;
  overflow: hidden;
  will-change: transform;
}

.blob-bg {
  width: 1440px;
  height: 766px;
  top: -673px;
  left: calc(50% - 820px);
  filter: blur(96px);
  border-radius:
    calc(50% - var(--morph)) calc(50% + var(--morph))
    calc(50% + var(--morph) * .6) calc(50% - var(--morph) * .6) /
    calc(50% + var(--morph) * .8) calc(50% - var(--morph) * .3)
    calc(50% + var(--morph) * .5) calc(50% - var(--morph) * .7);
  animation:
    aurora-scale-bg 9.49s ease-in-out infinite,
    aurora-sweep-bg 6s cubic-bezier(.76, 0, .24, 1) infinite;
}

.blob-fg {
  --fg-rotate-min: 58deg;
  --fg-rotate-max: 106deg;
  width: 920px;
  height: 1056px;
  top: -900px;
  left: calc(50% - 380px);
  filter: blur(96px);
  border-radius:
    calc(50% + var(--morph) * .5) calc(50% - var(--morph) * .7)
    calc(50% + var(--morph) * .3) calc(50% - var(--morph)) /
    calc(50% - var(--morph) * .4) calc(50% + var(--morph) * .6)
    calc(50% - var(--morph) * .8) calc(50% + var(--morph) * .5);
  animation:
    aurora-rotate-fg 11.7s ease-in-out infinite,
    aurora-scale-fg 9.1s ease-in-out -5.5s infinite,
    aurora-sweep-fg 4.3s cubic-bezier(.45, 0, .55, 1) -1.2s infinite;
}

.strip {
  --gradient-zoom: 714;
  position: absolute;
  inset: -1149px -1440px;
  transform: rotate(-36deg);
  /* Gemini 原版是全彩虹条；这里只留冷色，保证任何时刻都是 App 那种蓝调 */
  background-image: repeating-linear-gradient(
    #3c90ff 0px, #6f9cff 12%, #ad72ff 25%, #c68cff 38%, #f2a6e8 50%,
    #8fb8ff 62%, #00bdd2 75%, #4fa0ff 88%, #3c90ff
  );
  /*
   * 原本这里滚 background-position 做颜色漂移，但它不是合成属性：每帧都要把这张
   * 四千见方的渐变重画一遍，还是画在一个重模糊的父层里。渐变本身够宽，静止时
   * 两团光的色相已经不同，滚不滚在观感上几乎读不出来——省下的是整帧的重绘。
   */
  background-size: 100% 7140px;
}

@keyframes aurora-scale-bg { 0%, 100% { scale: var(--shape-scale-min); } 50% { scale: var(--shape-scale-max); } }
@keyframes aurora-scale-fg { 0%, 100% { scale: var(--shape-scale-max); } 50% { scale: var(--shape-scale-min); } }
@keyframes aurora-sweep-bg { 0%, 100% { translate: -200px; } 50% { translate: 200px; } }
@keyframes aurora-sweep-fg {
  0%, 100% { translate: 140px -30px; }
  25% { translate: -60px 20px; }
  50% { translate: -130px -10px; }
  75% { translate: 50px 25px; }
}
@keyframes aurora-rotate-fg { 0%, 100% { transform: rotate(var(--fg-rotate-min)); } 50% { transform: rotate(var(--fg-rotate-max)); } }

/* 手机端：光从底部升起（同 Gemini App） */
@media (max-width: 768px) {
  .aurora-layer { top: auto; bottom: 0; }
  .blob-bg { top: auto; bottom: -673px; }
  .blob-fg { top: auto; bottom: -900px; }
}

/*
 * 极光是背景层：内容一律浮在它上面。
 * 把下面的选择器换成你自己那些直接坐在 .aurora 兄弟位置上的内容容器。
 */
.wrap > .topbar,
.wrap > #app,
.wrap > .site-foot { position: relative; z-index: 1; }

/* 减弱动效：只保留淡入，不做横向流动 */
@media (prefers-reduced-motion: reduce) {
  .aurora { transition-duration: 300ms !important; }
  .blob, .strip { animation: none !important; }
}