/* ═══════════════════════════════════════════════════════════════════
   inryokü 円環粒子言語 — Particle Ring Styles
   ═══════════════════════════════════════════════════════════════════ */

.pring {
  --pr-c-r: #ff3344;
  --pr-c-g: #44ff66;
  --pr-c-b: #4488ff;
  --pr-c-c: #44e0ff;
  --pr-c-m: #ff44cc;
  --pr-c-y: #ffe044;
  --pr-chord-width: 0.7;
  --pr-chord-opacity: 0.78;
  --pr-band-opacity: 0.8;
  --pr-path-opacity: 0.82;
  --pr-tick-opacity: 1;
  --pr-glow-boost: 1;
  --pr-speech-glow-alpha: 0;
  --pr-tick-glow-core: 4px;
  --pr-tick-glow-outer: 14px;
  --pr-galaxy-haze: rgba(255, 255, 255, 0.14);

  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform, filter;
  animation: pring-breathe 7s ease-in-out infinite;
  /* 2026-04-29: 司「光らしさ上げて」— halo 二重 + 色拡散 */
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.18))
    drop-shadow(0 0 28px rgba(68, 224, 255, 0.14))
    drop-shadow(0 0 56px rgba(255, 68, 204, 0.06))
    drop-shadow(0 0 calc(18px * var(--pr-glow-boost)) rgba(255, 255, 255, calc(0.08 + var(--pr-speech-glow-alpha))))
    drop-shadow(0 0 calc(32px * var(--pr-glow-boost)) rgba(68, 224, 255, calc(0.04 + var(--pr-speech-glow-alpha) * 0.8)));
}

.pring--ccw {
  animation-direction: reverse;
}

@keyframes pring-breathe {
  0%, 100% { transform: scale(1.000) rotate(0deg); }
  50%      { transform: scale(1.003) rotate(0.16deg); }
}

/* ── 円周の薄い粒子トラック ─────────────────────────── */
.pring__bands {
  opacity: var(--pr-band-opacity);
}

.pring__band,
.pring__orbit {
  fill: none;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pring__band--outer {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.48;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.10))
    drop-shadow(0 0 10px rgba(68, 224, 255, 0.06));
}

.pring__band--inner {
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 0.42;
  stroke-dasharray: 1.2 3.6;
  filter: drop-shadow(0 0 5px rgba(255, 68, 204, 0.05));
}

.pring__orbit {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 0.5;
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.08))
    drop-shadow(0 0 8px rgba(68, 224, 255, 0.05));
  animation: pring-orbit-drift 18s ease-in-out infinite;
}

@keyframes pring-orbit-drift {
  0%, 100% { transform: rotate(-2.8deg) scale(0.999); opacity: 0.44; }
  50% { transform: rotate(2.8deg) scale(1.001); opacity: 0.60; }
}

.pring__path-dot {
  fill: rgba(255, 255, 255, 0.55);
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 9px rgba(68, 224, 255, 0.18));
  animation: pring-path-drift 9s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -120ms);
}

.pring__path {
  opacity: var(--pr-path-opacity);
}

@keyframes pring-path-drift {
  0%, 100% { opacity: 0.18; transform: scale(0.97); }
  50% { opacity: 0.38; transform: scale(1.02); }
}

.pring::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 48%),
    conic-gradient(from 0deg, transparent 0deg 42deg, rgba(68,224,255,0.07) 76deg 116deg, transparent 150deg 220deg, rgba(255,68,204,0.07) 252deg 292deg, transparent 324deg 360deg);
  filter: blur(8px);
  opacity: 0.22;
  animation: pring-galaxy-swirl 14s linear infinite;
  pointer-events: none;
}

.pring::after {
  content: '';
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.028) 20%, transparent 56%),
    radial-gradient(circle at 44% 46%, rgba(68,224,255,0.08) 0%, transparent 24%),
    radial-gradient(circle at 56% 54%, rgba(255,68,204,0.07) 0%, transparent 26%);
  filter: blur(6px);
  opacity: 0.18;
  animation: pring-core-pulse 9.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pring-galaxy-swirl {
  from { transform: rotate(0deg) scale(0.99); opacity: 0.14; }
  50%  { opacity: 0.24; }
  to   { transform: rotate(360deg) scale(1.01); opacity: 0.16; }
}

@keyframes pring-core-pulse {
  0%, 100% { opacity: 0.12; transform: scale(0.98); }
  50%      { opacity: 0.20; transform: scale(1.02); }
}

/* ── 同心二重円（引用・伝聞） ───────────────────────── */
.pring__inner-dot {
  fill: rgba(255, 255, 255, 0.18);
}

/* ── 弦 ────────────────────────────────────────────── */
.pring__chord {
  stroke: rgba(255, 255, 255, var(--pr-chord-opacity));
  stroke-width: var(--pr-chord-width);
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 9px rgba(68,224,255,0.22))
    drop-shadow(0 0 20px rgba(255,255,255,0.08));
}

.pring__chord--arc {
  stroke-dasharray: 0;
}

/* ── 点（tick） ──────────────────────────────────── */
.pring__tick {
  fill: rgba(255, 255, 255, 1);
  opacity: var(--pr-tick-opacity);
  filter:
    drop-shadow(0 0 var(--pr-tick-glow-core) rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 var(--pr-tick-glow-outer) rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 calc(var(--pr-tick-glow-outer) * 2 * var(--pr-glow-boost)) rgba(255,255,255,0.22));
  animation: pring-tick-orbit 7.2s ease-in-out infinite;
}

@keyframes pring-tick-orbit {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50%      { transform: scale(1.03); opacity: 0.96; }
}

/* 色付き点（位相）— 2026-04-29: 三層 glow で「光る粒子」感 */
.pring__tick--c-r { fill: var(--pr-c-r); filter: drop-shadow(0 0 4px var(--pr-c-r)) drop-shadow(0 0 10px var(--pr-c-r)) drop-shadow(0 0 22px var(--pr-c-r)); }
.pring__tick--c-g { fill: var(--pr-c-g); filter: drop-shadow(0 0 4px var(--pr-c-g)) drop-shadow(0 0 10px var(--pr-c-g)) drop-shadow(0 0 22px var(--pr-c-g)); }
.pring__tick--c-b { fill: var(--pr-c-b); filter: drop-shadow(0 0 4px var(--pr-c-b)) drop-shadow(0 0 10px var(--pr-c-b)) drop-shadow(0 0 22px var(--pr-c-b)); }
.pring__tick--c-c { fill: var(--pr-c-c); filter: drop-shadow(0 0 4px var(--pr-c-c)) drop-shadow(0 0 10px var(--pr-c-c)) drop-shadow(0 0 22px var(--pr-c-c)); }
.pring__tick--c-m { fill: var(--pr-c-m); filter: drop-shadow(0 0 4px var(--pr-c-m)) drop-shadow(0 0 10px var(--pr-c-m)) drop-shadow(0 0 22px var(--pr-c-m)); }
.pring__tick--c-y { fill: var(--pr-c-y); filter: drop-shadow(0 0 4px var(--pr-c-y)) drop-shadow(0 0 10px var(--pr-c-y)) drop-shadow(0 0 22px var(--pr-c-y)); }

/* ═══════════════════════════════════════════════════════════
   結晶化アニメ — 粒子が集まり、円環が一瞬で完成する
   ═══════════════════════════════════════════════════════════ */
.pring--crystallizing .pring__path-dot,
.pring--crystallizing .pring__inner-dot,
.pring--crystallizing .pring__band,
.pring--crystallizing .pring__orbit {
  opacity: 0;
  animation: pring-path-in 860ms ease-out forwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}
@keyframes pring-path-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 0.55; transform: scale(1); }
}

.pring--crystallizing .pring__chord {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  opacity: 0;
  animation: pring-chord-in 1100ms ease-out forwards;
  animation-delay: calc(760ms + var(--i, 0) * 200ms);
}
@keyframes pring-chord-in {
  0%   { stroke-dashoffset: 80; opacity: 0; }
  15%  { opacity: 0.7; }
  100% { stroke-dashoffset: 0; opacity: 0.55; }
}

.pring--crystallizing .pring__tick {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: pring-tick-in 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(1320ms + var(--i, 0) * 120ms);
}
@keyframes pring-tick-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 0.6; }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   Particle Speech (Rings) — ロゴ周辺に表示する発話コンテナ
   ═══════════════════════════════════════════════════════════ */
.pring-speech {
  position: absolute;
  pointer-events: none;
  z-index: 35;
  --prs-offset-y: 12px;
  --prs-halo-scale: 0.72;
  --pring-speech-halo-opacity: 0.18;
  contain: layout style paint;
}

.pring-speech--below {
  top: 100%;
  left: 50%;
  transform: translate(-50%, var(--prs-offset-y));
  /* ring は中央配置 — 子の絶対配置を許可 */
  width: 0;
  height: 0;
}

/* ロゴと同心配置 — JS が top/left をロゴ中心に合わせる */
.pring-speech--halo {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  z-index: 31; /* ロゴ z=30 のすぐ上 */
}

.pring-speech--bottomRight {
  top: 100%;
  right: 0;
  transform: translate(50%, var(--prs-offset-y));
  width: 0;
  height: 0;
}

.pring-speech__ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity, transform;
  transform-origin: 50% 50%;
  animation: pring-speech-fadein 700ms ease-out forwards;
  filter:
    drop-shadow(0 0 16px rgba(255,255,255,calc(var(--pring-speech-halo-opacity) * 0.55)))
    drop-shadow(0 0 30px rgba(68,224,255,calc(var(--pring-speech-halo-opacity) * 0.72)))
    drop-shadow(0 0 48px rgba(255,68,204,calc(var(--pring-speech-halo-opacity) * 0.38)));
}

.pring-speech--halo .pring-speech__ring {
  transform: translate(-50%, -50%) scale(var(--prs-halo-scale));
}

.pring-speech__ring .pring {
  --pr-band-opacity: 0.88;
  --pr-path-opacity: 0.9;
  --pr-chord-opacity: 0.82;
  --pr-tick-opacity: 1;
  --pr-glow-boost: 1.08;
  --pr-speech-glow-alpha: calc(var(--pring-speech-halo-opacity) * 0.52);
}

@keyframes pring-speech-fadein {
  from { opacity: 0; }
  to   { opacity: var(--pring-speech-target-opacity, 0.84); }
}

.pring-speech__ring--whisper {
  /* 囁きは薄め */
  animation: pring-speech-fadein-whisper 700ms ease-out forwards;
  --pring-speech-halo-opacity: 0.15;
}
@keyframes pring-speech-fadein-whisper {
  from { opacity: 0; }
  to   { opacity: var(--pring-speech-target-opacity, 0.48); }
}

.pring-speech__ring--hover {
  --pring-speech-target-opacity: 0.72;
  --pring-speech-halo-opacity: 0.22;
}

.pring-speech__ring--click {
  --pring-speech-target-opacity: 0.84;
  --pring-speech-halo-opacity: 0.30;
}

.pring-speech__ring--special {
  --pring-speech-target-opacity: 0.9;
  --pring-speech-halo-opacity: 0.34;
}

.pring-speech__ring--hover .pring {
  --pr-band-opacity: 0.94;
  --pr-path-opacity: 0.96;
  --pr-chord-opacity: 0.86;
  --pr-glow-boost: 1.14;
}

.pring-speech__ring--click .pring {
  --pr-band-opacity: 1.02;
  --pr-path-opacity: 1.02;
  --pr-chord-opacity: 0.94;
  --pr-glow-boost: 1.2;
}

.pring-speech__ring--special .pring {
  --pr-band-opacity: 1.06;
  --pr-path-opacity: 1.06;
  --pr-chord-opacity: 0.98;
  --pr-glow-boost: 1.24;
}

.pring-speech__ring--whisper {
  z-index: 1;
}

.pring-speech__ring--hover,
.pring-speech__ring--click,
.pring-speech__ring--special {
  z-index: 2;
}

.pring-speech__ring--click .pring__tick,
.pring-speech__ring--special .pring__tick {
  transform-origin: center;
  transform-box: fill-box;
  animation-duration: 6.2s;
}

.pring-speech__ring--click .pring__chord,
.pring-speech__ring--special .pring__chord {
  stroke-width: calc(var(--pr-chord-width) + 0.08);
}

@media (max-width: 767px) {
  .pring-speech {
    z-index: 34;
  }

  .pring-speech__ring {
    filter:
      drop-shadow(0 0 12px rgba(255,255,255,calc(var(--pring-speech-halo-opacity) * 0.48)))
      drop-shadow(0 0 22px rgba(68,224,255,calc(var(--pring-speech-halo-opacity) * 0.62)));
  }
}

.pring-speech__ring--fade {
  animation: pring-speech-fadeout 1200ms ease-in forwards !important;
}

@keyframes pring-speech-fadeout {
  from { opacity: var(--pring-speech-current-opacity, 0.92); }
  to   { opacity: 0; }
}

/* ── アクセシビリティ: モーション削減 ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .pring,
  .pring--crystallizing .pring__path-dot,
  .pring--crystallizing .pring__chord,
  .pring--crystallizing .pring__tick,
  .pring--crystallizing .pring__inner-dot {
    animation-duration: 0.3s !important;
    animation-delay: 0ms !important;
  }
}