/* RIO AI のホログラム演出（10/5 KOZUKI「ちょっと怖い」→ 出来上がっていく所とノイズを入れる）
   🔴 怖さの正体は「写真のように生々しい顔」。常に走査線・粒子ノイズ・青い色味を重ね、
      映像だと分かる見た目にして生々しさを抜く。
   🔴 画面に入ったとき1回だけ「組み上がる」演出：光の線が上から下へ走り、通ったところから顔が出る。
   🔴 動きを減らす設定の端末では演出もちらつきも出さない（完成形だけ）。 */
.orb .holo{position:absolute;inset:0;pointer-events:none;border-radius:50%;z-index:2;clip-path:circle(50% at 50% 50%);overflow:hidden}
/* 常時：走査線（ゆっくり流れる） */
.orb .holo .scan{position:absolute;inset:0;opacity:.32;mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg,rgba(120,200,255,.20) 0 1px,transparent 1px 3px);
  animation:hScan 6s linear infinite}
@keyframes hScan{to{background-position:0 60px}}
/* 常時：粒子ノイズ（JS が小さな canvas に描いて引き伸ばす） */
.orb .holo canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.12;mix-blend-mode:screen}
/* 常時：青い色味と、ほんのり透ける */
.orb video{filter:brightness(.98) saturate(.7) contrast(1.04)}
.orb .holo .tint{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 45%,rgba(60,150,255,.10),rgba(40,110,255,.22));mix-blend-mode:color}
/* 組み上がり：光の線 */
.orb .holo .beam{position:absolute;left:8%;right:8%;height:2px;top:0;opacity:0;
  background:linear-gradient(90deg,transparent,#9fe6ff 20%,#fff 50%,#9fe6ff 80%,transparent);
  box-shadow:0 0 14px 3px rgba(120,210,255,.75),0 0 40px 8px rgba(80,170,255,.35)}

/* ── 組み上がる間 ── */
.orb.build video{clip-path:inset(0 0 calc(100% - var(--rv,0%)) 0);
  filter:grayscale(1) brightness(1.7) contrast(1.6) sepia(1) hue-rotate(170deg) saturate(3)}
.orb.build .holo canvas{opacity:.35}
.orb.build .holo .beam{opacity:1;top:var(--rv,0%)}
/* 組み上がった直後の「ちらついて定着」 */
.orb.settle video{animation:hSettle .9s steps(1,end) 1}
@keyframes hSettle{
  0%{opacity:.35;filter:grayscale(1) brightness(1.6) sepia(1) hue-rotate(170deg) saturate(3)}
  18%{opacity:1}
  30%{opacity:.5;transform:translateX(3px)}
  42%{opacity:1;transform:none}
  60%{opacity:.75}
  72%{opacity:1}}

/* ── 時々入る乱れ（JS が数秒おきに一瞬付け外しする） ── */
.orb.glitch video{transform:translateX(var(--gx,3px)) skewX(var(--gs,-2deg));
  filter:brightness(1.15) saturate(.7) drop-shadow(3px 0 rgba(255,40,120,.55)) drop-shadow(-3px 0 rgba(40,220,255,.6))}
.orb.glitch .holo canvas{opacity:.3}
.orb.glitch .holo .scan{opacity:.6}

@media (prefers-reduced-motion:reduce){
  .orb .holo .scan{animation:none}
  .orb.build video,.orb.settle video,.orb.glitch video{clip-path:none;animation:none;transform:none}
  .orb .holo .beam{display:none}
}