/* ===================================================================
   主站的一点季节心思 —— 现在：金桂
   ===================================================================

   只有主站首页（mimila.cn）会加载这个文件，而且**只有花季才显示**：
   判断在 `app/season.py` 里（纯函数，给个日期就能测）。
   花开过了，首页干净得像什么都没发生过 —— 不会四月里还在说桂花。

   为什么不塞进 app.css：
     app.css 有体积上限（smoke_test 盯着），而这一小段只有主站用得上。
     单独一个几 KB 的文件、只在需要它的那一页请求，两边都划算。

   规矩照旧（和 app.css 一样）：
     · 零依赖、不引图片 —— 桂花枝是手写的 SVG
     · 只用 transform / opacity 做动效，不动 layout
     · 尊重系统的「减弱动态效果」
     · 亮暗两套都调过，不是把亮色反一下就完事
   =================================================================== */

/* ===================================================================
   1. 主站的季节色
   ===================================================================
   把 iOS 蓝换成**金桂的暖金**。

   ⚠️ 金色好看，但特别容易「好看得看不见字」。所以这不是随手挑的一个金：
      主站上的 --accent 会当**底色**用（访客自己那侧的气泡、三个发送按钮），
      也会当**文字色**用（链接 hover、幽灵按钮），两头都得够对比：
        · 白字压在金色上   ≥ 4.5:1
        · 金色字写在浅灰底上 ≥ 4.5:1
      两头一起满足，亮色下的金就得深到 #96650F（白字 5.0:1、浅灰底上 4.5:1）。
      更亮的金（#C9922A 这种）只用来做**装饰**：花瓣、花蕊、那抹暖光 ——
      它们不承载文字，不适用这条规矩。
      暗色下正好反过来：金变亮，压在金上的字就得改成深色（见下面那段）。
      tests/test_page_render.py 里有一条断言真的在算这个对比度，别凭感觉改。 */
body.home {
  --accent:        #96650F;
  --accent-soft:   rgba(150, 101, 15, 0.12);

  --season-gold:   #C9922A;   /* 花瓣、花蕊（装饰，不承载文字） */
  --season-gold-2: #E8C26A;   /* 高光那一侧 */
  --season-leaf:   #6E8B5A;   /* 叶子，压灰一点，别绿得太跳 */
  --season-bg-1:   rgba(255, 249, 235, 0.95);
  --season-bg-2:   rgba(255, 240, 213, 0.55);
  /* ⚠️ 这两行是「那句小灰字」的颜色，透明度不是随便写的：
     太淡会真的看不见（第一版 .6 压在米色底上只有 2.8:1，等于白写）。
     现在 0.95 / 0.86 —— 正文 6.2:1、小字 4.6:1，都过 AA；
     两行的层次靠**字号**（14.5 / 12.5）拉开，不靠把字调淡到看不见。 */
  --season-ink:    rgba(107, 83, 32, 0.95);
  --season-ink-2:  rgba(107, 83, 32, 0.86);

  /* 顶上斜进来的一抹暖光：像下午四点，不闪不动 */
  background-image: radial-gradient(
    820px 380px at 86% -8%,
    var(--accent-soft),
    transparent 70%
  );
  background-repeat: no-repeat;
}

:root[data-theme="dark"] body.home {
  --accent:        #E4B75E;
  --accent-soft:   rgba(228, 183, 94, 0.16);

  --season-gold:   #E2B963;
  --season-gold-2: #F2D79A;
  --season-leaf:   #8FA878;
  --season-bg-1:   rgba(58, 47, 25, 0.62);
  --season-bg-2:   rgba(38, 33, 22, 0.42);
  --season-ink:    rgba(242, 228, 198, 0.92);
  --season-ink-2:  rgba(242, 228, 198, 0.58);
}

/* ⚠️ 暗色下这枚金很亮（#E4B75E），白字压上去只有 2.2:1 —— 等于看不见。
   苹果碰到黄色/金色也是配深色字，这里照做（8.6:1）。
   只改主站这一页：后厨那些页面还是原来的蓝色 + 白字。 */
:root[data-theme="dark"] body.home .btn-primary,
:root[data-theme="dark"] body.home .bubble.user { color: #2B2007; }

/* ===================================================================
   2. 那条季节小字（.season）
   ===================================================================
   位置：.home-wrap 里、聊天卡片上面。窄窄一条，比卡片矮得多，
   所以它不会抢聊天框的位置 —— 只是进门时先闻到一点味道。
   =================================================================== */

.season {
  position: relative;
  overflow: hidden;                 /* 花瓣只在条子里飘，不会飞到页面上 */
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  background-image: linear-gradient(135deg, var(--season-bg-1), var(--season-bg-2));
  box-shadow: var(--shadow-card);
  animation: season-in 0.55s var(--ease) both;
}

/* 层次：花瓣在最底下飘（但在底色之上），字和花枝压在花瓣上面 ——
   花瓣从字前面飘过去看着会有点脏，从字后面过就像窗外的花，正好。 */
.season-text,
.season-sprig { position: relative; z-index: 1; }

.season-text { min-width: 0; }

.season-line {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--season-ink);
  letter-spacing: 0.01em;
}

.season-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--season-ink-2);
}

@keyframes season-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ===================================================================
   3. 桂花枝（手写 SVG）
   ===================================================================
   四瓣小花凑成一小簇 —— 桂花就是这样一小撮一小撮开的。
   花用金色、叶子压成灰绿，风一吹让它极慢地晃一点点。
   =================================================================== */

.season-sprig {
  flex: none;
  width: 38px;
  height: 38px;
  overflow: visible;
  transform-origin: 20% 90%;
  animation: season-sway 7s ease-in-out infinite alternate;
}

.season-sprig .sprig-stem {
  fill: none;
  stroke: var(--season-leaf);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.75;
}
.season-sprig .sprig-leaf { fill: var(--season-leaf); opacity: 0.45; }
.season-sprig .sprig-bloom { fill: var(--season-gold); }
.season-sprig .sprig-core { fill: var(--season-gold-2); }

@keyframes season-sway {
  from { transform: rotate(-2deg); }
  to   { transform: rotate(2.5deg); }
}

/* ===================================================================
   4. 飘下来的花瓣
   ===================================================================
   span 是空的，位置和节奏由模板里的 --x / --t 给（每个都不一样，
   不然八片花瓣会像列队一样整齐地掉，很假）。
   全程只用 transform 和 opacity。
   =================================================================== */

.season-petal {
  position: absolute;
  z-index: 0;                       /* 从字后面飘过去，别糊在字上 */
  top: -10px;
  left: var(--x, 50%);
  width: 9px;
  height: 9px;
  border-radius: 60% 0 60% 0;
  background-image: linear-gradient(135deg, var(--season-gold-2), var(--season-gold));
  opacity: 0;
  pointer-events: none;             /* 别挡住底下的字和链接 */
  animation: season-fall 9s linear infinite;
  animation-delay: var(--t, 0s);
}

@keyframes season-fall {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
  12%  { opacity: 0.55; }
  80%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translate3d(-16px, 120px, 0) rotate(220deg); }
}

/* 小的手机上把花瓣收小一点、少飘几片 —— 小屏幕上"氛围"很容易变成"脏" */
@media (max-width: 420px) {
  .season { gap: 11px; padding: 12px 14px; }
  .season-sprig { width: 32px; height: 32px; }
  .season-line { font-size: 14px; }
  .season-petal { width: 7px; height: 7px; }
}

/* ===================================================================
   5. 减弱动态效果
   ===================================================================
   系统里开了这个开关的人，要的是「别动」：
   花瓣直接不画（留几片静止的也还是"在动"的暗示），花枝也不晃，
   只有那句字静静地在那儿。
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .season { animation: none; }
  .season-petal { display: none; }
  .season-sprig { animation: none; }
}