/* メーカー共通のロード画面(maker/ui/makerLoader.ts)。見本画像のまわりを進み具合の輪が回り、メーカーの色で背景がゆっくり光る。
   描画の準備で画面の処理が止まっているあいだも動いて見えるよう、動きは transform / opacity だけにする(合成だけで動く) */
@property --p { syntax:'<number>'; inherits:true; initial-value:0; }
.maker-loader { --c1:#ff7aa8; --c2:#ffc0d8; --glow:rgba(255,122,168,.32); --art:min(46vw, 176px, 30vh); position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:24px 16px; overflow:hidden; background:#110d0f; color:#f6eef2; font:700 14px/1.5 "Noto Sans JP", system-ui, sans-serif; transition:opacity .3s ease, transform .3s ease; }
.maker-loader[data-maker="water"] { --c1:#3fb5ff; --c2:#a6ecff; --glow:rgba(56,150,255,.34); }
.maker-loader[data-maker="jelly"] { --c1:#45b8f5; --c2:#bfeaff; --glow:rgba(69,184,245,.30); }
.maker-loader[data-maker="mochi"] { --c1:#ffb7cb; --c2:#fff0e6; --glow:rgba(255,183,203,.30); }
.maker-loader[data-maker="balloon"] { --c1:#f5c542; --c2:#ffe9a0; --glow:rgba(245,197,66,.30); }
.maker-loader[data-maker="fire"] { --c1:#ff5a1f; --c2:#ffc24d; --glow:rgba(255,96,32,.32); }
.maker-loader.is-done { opacity:0; transform:scale(1.04); pointer-events:none; }
/* 背景の光: ぼかした色の玉が2つ、ゆっくり漂う */
.maker-loader::before, .maker-loader::after { content:""; position:absolute; width:120vmax; height:120vmax; left:50%; top:50%; margin:-60vmax 0 0 -60vmax; border-radius:50%; background:radial-gradient(circle, var(--glow) 0, transparent 42%); pointer-events:none; animation:maker-loader-drift 9s ease-in-out infinite alternate; }
.maker-loader::after { background:radial-gradient(circle, color-mix(in srgb, var(--c2) 18%, transparent) 0, transparent 30%); animation-duration:12s; animation-direction:alternate-reverse; }
.maker-loader-body { position:relative; z-index:1; width:min(86vw, 320px); display:grid; justify-items:center; gap:0; }
/* 進み具合の輪(::before)と、輪の上を回り続ける光(::after)。見本画像のまわりに重ねる */
.maker-loader-body::before, .maker-loader-body::after { content:""; position:absolute; top:calc(var(--art) * -0.09); left:50%; width:calc(var(--art) * 1.18); aspect-ratio:1; margin-left:calc(var(--art) * -0.59); border-radius:50%; -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); pointer-events:none; }
.maker-loader-body::before { background:conic-gradient(from 0deg, var(--c1), var(--c2) calc(var(--p) * 1%), rgba(255,255,255,.09) 0); transition:--p .45s cubic-bezier(.2,.8,.2,1); }
.maker-loader-body::after { background:conic-gradient(from 0deg, transparent 0 80%, rgba(255,255,255,.85) 96%, transparent 100%); animation:maker-loader-spin 1.6s linear infinite; opacity:.55; }
.maker-loader-art { display:block; width:var(--art); height:var(--art); object-fit:cover; border-radius:50%; background:#1c1619; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 18px 50px -10px var(--glow), 0 0 60px -6px var(--glow); animation:maker-loader-breathe 2.8s ease-in-out infinite; }
/* 棒のバーは読み上げ用に残し、見た目は輪にまかせる */
.maker-loader-bar { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.maker-loader-line { margin:calc(var(--art) * 0.2 + 10px) 0 0; display:flex; flex-direction:column-reverse; align-items:center; gap:6px; }
.maker-loader-pct { font:800 30px/1 "Noto Sans JP", system-ui, sans-serif; letter-spacing:.02em; font-variant-numeric:tabular-nums; background:linear-gradient(90deg, #fff, var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.maker-loader-label { min-height:1.5em; color:#b7aab0; font-size:12px; font-weight:700; letter-spacing:.08em; text-align:center; }
@keyframes maker-loader-spin { to { transform:rotate(360deg); } }
@keyframes maker-loader-breathe { 50% { transform:scale(1.035); } }
@keyframes maker-loader-drift { 0% { transform:translate(-14%, -10%); } 100% { transform:translate(12%, 14%); } }
@media (prefers-reduced-motion: reduce) {
  .maker-loader, .maker-loader-body::before { transition:none; }
  .maker-loader::before, .maker-loader::after, .maker-loader-body::after, .maker-loader-art { animation:none; }
}