/* ==================================================================
   二次元日常 · 装饰、卡片动效、引用条
   ================================================================== */

/* ---------- 飘浮的樱花瓣与星星 ---------- */
.acg-deco{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.acg-deco .petal{
  position:absolute;
  font-size:15px;
  opacity:.5;
  animation:petalFloat 9s ease-in-out infinite;
  user-select:none;
}
.petal.p1{left:6%;  top:8%;  font-size:17px; animation-delay:0s;   animation-duration:9s}
.petal.p2{left:22%; top:64%; font-size:12px; opacity:.42; animation-delay:1.4s; animation-duration:11s}
.petal.p3{left:47%; top:16%; font-size:19px; opacity:.45; animation-delay:2.6s; animation-duration:10s}
.petal.p4{left:69%; top:72%; font-size:13px; opacity:.5;  animation-delay:.8s;  animation-duration:12s}
.petal.p5{left:84%; top:26%; font-size:16px; opacity:.4;  animation-delay:3.6s; animation-duration:9.5s}
.petal.p6{left:91%; top:58%; font-size:11px; opacity:.38; animation-delay:5s;   animation-duration:13s}

@keyframes petalFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:.28}
  25%    {transform:translate3d(9px,-14px,0) rotate(38deg);opacity:.6}
  50%    {transform:translate3d(-5px,-26px,0) rotate(72deg);opacity:.42}
  75%    {transform:translate3d(11px,-11px,0) rotate(118deg);opacity:.55}
}

/* ---------- 进度条并排 ---------- */
.ani-pair{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  margin-bottom:22px;
}
@media(min-width:760px){
  .ani-pair{grid-template-columns:1fr 1fr;gap:14px}
}
.ani-pair .ani-row{margin:0 !important}

/* ---------- 小标题 ---------- */
.acg-h{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 14px;
  font-size:16px;
  color:var(--ink-2);
}
.acg-h span{font-weight:800}
.acg-h i{
  font-style:normal;
  font-size:12.4px;
  font-weight:600;
  color:var(--ink-3);
  padding:2px 9px;
  border-radius:999px;
  background:var(--pink-soft);
  border:1px solid var(--line-2);
}

/* ---------- 收藏卡：入场动画 ---------- */
.acg-grid .acg{
  animation:acgIn .55s cubic-bezier(.2,.85,.3,1) both;
}
/* 逐张错开入场。放在 CSS 而非 JS 内联样式，
   避免 style 属性里的 animation-delay 覆盖掉 both 的填充模式 */
.acg-grid .acg:nth-child(1){animation-delay:.00s}
.acg-grid .acg:nth-child(2){animation-delay:.06s}
.acg-grid .acg:nth-child(3){animation-delay:.12s}
.acg-grid .acg:nth-child(4){animation-delay:.18s}
.acg-grid .acg:nth-child(5){animation-delay:.24s}
.acg-grid .acg:nth-child(6){animation-delay:.30s}
@keyframes acgIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to  {opacity:1;transform:none}
}

/* 封面图标轻微呼吸，hover 时停住 */
.acg-cover > *{display:block;animation:breathe 3.4s ease-in-out infinite}
.acg:hover .acg-cover > *{animation-play-state:paused;transform:scale(1.16)}
@keyframes breathe{
  0%,100%{transform:translateY(0)    scale(1)}
  50%    {transform:translateY(-3px) scale(1.08)}
}

/* ---------- 引用条 ---------- */
.acg-quote{
  position:relative;
  margin-top:24px;
  padding:24px 28px 20px;
  text-align:center;
  background:
    linear-gradient(135deg,rgba(255,183,205,.14),rgba(184,169,245,.14)),
    var(--surface);
}
.acg-quote .aq-mark{
  position:absolute;
  top:-6px;left:18px;
  font-size:52px;
  line-height:1;
  color:var(--pink);
  opacity:.3;
  font-family:Georgia,serif;
}
.acg-quote p{
  margin:0 0 10px;
  font-size:15.4px;
  line-height:1.95;
  color:var(--ink-2);
  font-weight:600;
  position:relative;
  z-index:1;
}
.acg-quote .aq-by{
  font-size:12.4px;
  color:var(--ink-3);
  font-weight:600;
}

/* 二次元区块整体留出装饰空间，避免被飘浮元素压住 */
#acg .reveal{position:relative;z-index:1}

/* 移动端减少装饰数量，避免杂乱 */
@media(max-width:560px){
  .acg-deco .petal.p4,
  .acg-deco .petal.p6{display:none}
  .acg-deco .petal{font-size:13px}
  .acg-quote{padding:20px 18px 16px}
  .acg-quote p{font-size:14.4px;line-height:1.9}
}

/* 尊重"减少动效"偏好 */
@media(prefers-reduced-motion:reduce){
  .acg-deco .petal,
  .acg-grid .acg,
  .acg-cover > *{animation:none !important}
  .acg-grid .acg{opacity:1;transform:none}
  .acg-grid .bar > i{transition:none !important}
}