/* celebration.css — ゲラカウンター お祭り演出 v2 (カウンター中心設計)
   設計正本: CELEBRATION_DESIGN.md。全装飾は #counterStage にアンカーされる。 */

html { overflow-x: clip; }
body.celeb-on { overflow-x: clip; }

/* ---- ステージ(カウンターブロック)と装飾レイヤ ---- */
#counterStage { position: relative; }
#counterStage > .counter, #counterStage > .counter-label { position: relative; z-index: 2; }
#celeb-orn { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#celeb-fx { position: fixed; inset: 0; z-index: 5; pointer-events: none; }

/* ---- 常駐スロット共通 ---- */
.orn { position: absolute; transform: translate(-50%, -50%);
  animation: ornPop .55s cubic-bezier(.2,1.5,.4,1) var(--delay, 0s) both; }
.orn .inner { rotate: var(--rot, 0deg); }
.orn img, .orn .celeb-emoji { display: block; width: var(--size, 32px); height: var(--size, 32px);
  user-select: none; }
.celeb-emoji { text-align: center; line-height: 1; }

/* 顔: 半透明でゆっくり呼吸するように揺れる (振幅±4px・低速) */
.orn-face { opacity: var(--op, .5); }
.orn-face .inner { animation: ornBob 3.4s ease-in-out var(--ph, 0s) infinite alternate; }
.orn-face .inner img { scale: var(--sx, 1) 1; }

/* ポッパー: カウント毎に発射モーション */
.orn-popper .inner { scale: var(--sx, 1) 1; rotate: calc(-14deg * var(--sx, 1)); }
.orn-popper.fire .inner { animation: popperKick .5s ease-out; }

/* 風船: ゆったり上下 */
.orn-balloon { opacity: .85; }
.orn-balloon .inner { animation: balloonBob 4.6s ease-in-out var(--ph, 0s) infinite alternate; }

/* 光輪 (S1) */
.orn-halo .inner { width: 240px; height: 140px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,213,74,.85), transparent 68%);
  filter: blur(8px); opacity: .12; animation: haloBreathe 4.2s ease-in-out infinite; }

/* 旗アーチ (S3) */
.orn-garland { width: 104%; opacity: .95; }
.orn-garland svg { width: 100%; height: auto; display: block; }

/* ミラーボール (S4) — 吊り下がって振り子スイング+光帯が表面を流れて回転して見える */
.orn-mirrorball .inner { display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 0; animation: mbSwing 4.2s ease-in-out infinite alternate; }
.orn-mirrorball .mb-string { width: 2px; height: 24px; background: linear-gradient(#666, #aaa); }
.orn-mirrorball .mb-ball { width: var(--size, 54px); height: var(--size, 54px); position: relative;
  animation: mbShimmer 4.5s ease-in-out infinite; }
.orn-mirrorball .mb-ball img { width: 100%; height: 100%; }
.orn-mirrorball .mb-glow { position: absolute; inset: -45%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 65%);
  animation: mbGlow 2.6s ease-in-out infinite; }
.orn-mirrorball .mb-sheen { position: absolute; inset: 7% 8% 4% 8%; border-radius: 50%;
  mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(104deg,
    transparent 34%, rgba(255,255,255,.5) 45%, rgba(210,230,255,.2) 51%, transparent 60%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: mbSheen 2.8s linear infinite; }

/* 光のコーン (S4) — 上両角から数字へ。静的な淡い照明 */
.orn-beam .inner { width: 170px; height: 220px;
  background: linear-gradient(to bottom, rgba(255,240,200,.14), transparent 72%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0; rotate: calc(16deg * var(--bdir, 1));
  animation: beamPulse 5s ease-in-out infinite; }
.orn[data-slot="beam-L"] .inner { --bdir: 1; }
.orn[data-slot="beam-R"] .inner { --bdir: -1; }

/* 立ち昇り顔 (カウント毎・寿命1.8s) */
.celeb-riser { position: absolute; z-index: 1; pointer-events: none;
  animation: riseUp 1.8s ease-out forwards; }
.celeb-riser img, .celeb-riser .celeb-emoji { display: block; width: var(--size, 30px); height: var(--size, 30px); }

/* ---- カウンター段階強化 ---- */
body.celeb-s2 .counter { text-shadow: 0 0 22px rgba(255,213,74,.4); }
body.celeb-s3 .counter { text-shadow: 0 0 28px rgba(255,170,74,.5); }
body.celeb-s4 .counter { text-shadow: 0 0 34px rgba(244,114,182,.55); animation: counterPulse 2.4s ease-in-out infinite; }
body.celeb-s5 .counter {
  background: linear-gradient(90deg, #ffd54a, #ff6b81, #a78bfa, #60a5fa, #4ade80, #ffd54a);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,213,74,.45));
  animation: counterRainbow 3.2s linear infinite, counterPulse 2s ease-in-out infinite;
}

/* ---- ステージ背景トーン (カウンター上空を淡く照らす) ---- */
body.celeb-on::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease; }
body.celeb-on > :not(#celeb-fx):not(#celeb-demo):not(#counterStage) { position: relative; z-index: 1; }
/* stage はメーター等の兄弟より上 — トースト/装飾がカウンター周辺で隠れない */
body.celeb-on > #counterStage { position: relative; z-index: 2; }
body.celeb-s1::before { opacity: 1; background: radial-gradient(ellipse 90% 40% at 50% 6%, rgba(255,213,74,.05), transparent 70%); }
body.celeb-s2::before { opacity: 1; background: radial-gradient(ellipse 90% 40% at 50% 6%, rgba(255,213,74,.09), transparent 70%); }
body.celeb-s3::before { opacity: 1; background:
  radial-gradient(ellipse 90% 42% at 50% 6%, rgba(255,170,74,.12), transparent 70%); }
body.celeb-s4::before { opacity: 1; background:
  radial-gradient(ellipse 60% 38% at 30% 4%, rgba(244,114,182,.12), transparent 70%),
  radial-gradient(ellipse 60% 38% at 70% 4%, rgba(96,165,250,.12), transparent 70%); }
body.celeb-s5::before { opacity: 1; background:
  radial-gradient(ellipse 55% 36% at 25% 4%, rgba(244,114,182,.15), transparent 70%),
  radial-gradient(ellipse 55% 36% at 75% 4%, rgba(96,165,250,.15), transparent 70%),
  radial-gradient(ellipse 90% 30% at 50% 14%, rgba(255,213,74,.08), transparent 70%);
  animation: bgHue 14s linear infinite; }

/* ---- トースト (stage直下・排他1個) ---- */
#celeb-toast-host { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; pointer-events: none; }
.celeb-toast { padding: 8px 22px; border-radius: 999px; font-weight: 800; font-size: 15px;
  color: #fff; background: linear-gradient(135deg, #ff6b81, #ffb020); border: 2px solid #ffffff55;
  box-shadow: 0 6px 28px rgba(255,140,60,.45); letter-spacing: .04em; white-space: nowrap;
  animation: toastPop 2.8s cubic-bezier(.2,1.3,.4,1) forwards; }

/* ---- デモバー ---- */
#celeb-demo { position: fixed; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 6px; align-items: center;
  background: #1d1d2bcc; border: 1px solid #3a3a58; border-radius: 10px; padding: 8px 10px; backdrop-filter: blur(4px); }
#celeb-demo button { padding: 6px 10px; font-size: 12px; }
#celeb-demo .lbl { font-size: 11px; color: #889; margin-right: 2px; }

/* ---- keyframes ---- */
@keyframes ornPop {
  from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes ornBob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes balloonBob {
  from { transform: translateY(-6px) rotate(-4deg); }
  to   { transform: translateY(6px) rotate(4deg); }
}
@keyframes popperKick {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.2) translateY(-4px); }
  100% { transform: scale(1); }
}
@keyframes haloBreathe { 0%, 100% { opacity: .09; } 50% { opacity: .16; } }
@keyframes mbShimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
@keyframes mbGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes mbSwing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes mbSheen { from { background-position: 130% 0; } to { background-position: -160% 0; } }
@keyframes beamPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes riseUp {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  15%  { opacity: .85; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 120px)) scale(1.1); opacity: 0; }
}
@keyframes counterPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes counterRainbow { from { background-position: 0% 0; } to { background-position: 300% 0; } }
@keyframes bgHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes toastPop {
  0%   { transform: scale(.4) translateY(-8px); opacity: 0; }
  14%  { transform: scale(1.06); opacity: 1; }
  22%  { transform: scale(1); }
  82%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(.94) translateY(-6px); opacity: 0; }
}

/* ---- モバイル: 外周スロットを内側へ寄せ、光コーンを縮小 (はみ出し=hスクロール禁止) ---- */
@media (max-width: 480px) {
  .orn[data-slot="balloon-L"] { left: 1% !important; }
  .orn[data-slot="balloon-R"] { left: 99% !important; }
  .orn[data-slot="beam-L"] { left: 12% !important; }
  .orn[data-slot="beam-R"] { left: 88% !important; }
  .orn-beam .inner { width: 96px; height: 150px; }
}

/* ---- reduced motion: 装飾は残し、動きを止める ---- */
@media (prefers-reduced-motion: reduce) {
  .orn, .orn-face .inner, .orn-balloon .inner, .orn-halo .inner, .orn-mirrorball .inner,
  .orn-mirrorball .mb-ball, .orn-mirrorball .mb-glow, .orn-mirrorball .mb-sheen, .orn-beam .inner { animation: none; }
  body.celeb-s4 .counter, body.celeb-s5 .counter { animation: none; }
}