/* =========================
   AUE Top Floating Message
   ========================= */

.aue-curtain {
  position: fixed;
  inset: 0 0 auto 0;
  height: 80vh;
  z-index: 99999;

  /* =========================
     幕の質感（CSSだけ）
     ========================= */
  background:
    /* 上部の重み・影 */
    linear-gradient(
      to bottom,
      rgba(0,0,0,.55),
      rgba(0,0,0,.25) 40%,
      rgba(0,0,0,.05) 70%,
      rgba(0,0,0,0)
    ),

    /* 縦ヒダ（プリーツの錯覚） */
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.02) 2px,
      rgba(0,0,0,0) 10px
    ),

    /* ベース色 */
    #1f1b17;

  transform: translateY(var(--aue-y, 0));
  opacity: var(--aue-opacity, 1);

  transition:
    transform var(--aue-rise, 1.2s) cubic-bezier(.4,0,.2,1),
    opacity .8s ease;

  will-change: transform;
}


/* 表示状態 */
.aue-curtain.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* 幕が上がる */
.aue-curtain.is-open {
  transform: translateY(-100%);
  opacity: 0;
}

/* ステージ中央 */
.aue-curtain-stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #f2f2f2;
  text-align: center;
  padding: 24px;

  letter-spacing: .04em;
}

/* 情報のトーン */
.aue-curtain-date {
  font-size: 14px;
  opacity: .7;
}

.aue-curtain-pct {
  font-size: 28px;
  font-weight: 600;
  margin: 8px 0 12px;
  color: #bfc3c8; /* 青みがかった薄グレー */	
}

.aue-curtain-msg {
  font-size: 15px;
  opacity: .85;
  max-width: 32em;
}

.aue-curtain {
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.aue-curtain {
  transition:
    transform var(--aue-rise, 1.2s) cubic-bezier(.4,0,.2,1),
    opacity .8s ease;
}

/* curtain aging */
.aue-curtain {
  filter:
    saturate(var(--aue-sat, 1))
    brightness(var(--aue-bri, 1))
    contrast(var(--aue-con, 1));
}

/* 劣化率「↓」矢印演出 */

.aue-curtain-pct::after {
  content: ' ↓';
  color: #4cff6a; /* ネオン系緑 */
  animation: aue-down 1.2s ease-out infinite;
  text-shadow: 0 0 8px rgba(255, 183, 0, 0.5);	
}

@keyframes aue-down {
  0%   { transform: translateY(-4px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(4px); opacity: 0; }
}


/* ランダムコメント右下配置 */


.aue-curtain-stage {
  position: relative;
}

.aue-curtain-random {
  position: absolute;
  right: 16px;
  bottom: 12px;

  font-size: 12px;
  opacity: 0.6;
  letter-spacing: 0.02em;
  line-height: 1.4;

  pointer-events: none; /* クリック邪魔しない */
  user-select: none;
}


/* 記事準備中 */

.aue-loading {
  margin-left: 0.8em;
  font-size: 1.05em;          /* 少し大きく */
  font-weight: 600;
  color: #ffd700;             /* 劣化率と同系色 */
  opacity: 0.9;
  text-shadow: 0 0 6px rgba(255,215,0,0.4);
}

.aue-dots {
  display: inline-block;
  letter-spacing: 0.15em;
  animation: aue-breathe 1.4s ease-in-out infinite;
}

@keyframes aue-breathe {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; }
  100% { opacity: 0.3; }
}



/* 記事タイトル 00aue-curtain-pct */

.aue-curtain-title {
  color: #ffffff;
}

/* 劣化率 数字 */

.aue-curtain-pct-value {
  font-size: 1.6em;
  font-weight: 700;
  margin-left: 0.2em;
  color: #eaeaea;
}

/* 50%超えたら黄色を混ぜる */

.aue-curtain[data-pct-high="1"] .aue-curtain-pct-value {
  color: #ffe08a; /* 白寄り・少し淡い黄 */
}

/* 90%超えたら“舞台照明”を当てる（控えめ） */

.aue-curtain[data-pct-very-high="1"] .aue-curtain-pct-value {
  color: #ffd54a;
  text-shadow: 0 0 6px rgba(255, 213, 74, 0.25);
}



.aue-curtain[data-pct-very-high="1"] .aue-curtain-warning {
  color: #ff6b6b;
  font-weight: 700;
}