.wakka-loading{ display:grid; place-items:center; box-sizing:border-box; }
.wakka-loading *{ box-sizing:border-box; }
  .wakka-loading{
    --dim:#585f66;           /* 消えている状態の箔 */
    --lit:#ffffff;           /* 走る光 */
    --logo-w:min(62vw, 300px);
    --cycle:2s;            /* 1周 + 間 */
  }
  .wakka-loading .logo{ position:relative; width:var(--logo-w); aspect-ratio:1291/641; }
  .wakka-loading .layer{ position:absolute; inset:0;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;   mask-size:100% 100%; }
  .wakka-loading .text{ -webkit-mask-image:url(masks/text.png); mask-image:url(masks/text.png); }
  .wakka-loading .ring{ -webkit-mask-image:url(masks/ring.png); mask-image:url(masks/ring.png); }
  .wakka-loading .base{ position:absolute; inset:0; background:var(--dim); }

  /* 文字：左から右へ光が抜ける */
  .wakka-loading .text .sweep{ position:absolute; left:0; top:-10%; width:52%; height:120%;
    background:linear-gradient(100deg,
      transparent 0%,
      color-mix(in srgb, var(--lit) 1.3%, transparent) 8.3%,
      color-mix(in srgb, var(--lit) 10.9%, transparent) 16.7%,
      color-mix(in srgb, var(--lit) 33.0%, transparent) 25%,
      color-mix(in srgb, var(--lit) 63.1%, transparent) 33.3%,
      color-mix(in srgb, var(--lit) 89.5%, transparent) 41.7%,
      color-mix(in srgb, var(--lit) 100.0%, transparent) 50%,
      color-mix(in srgb, var(--lit) 89.5%, transparent) 58.3%,
      color-mix(in srgb, var(--lit) 63.1%, transparent) 66.7%,
      color-mix(in srgb, var(--lit) 33.0%, transparent) 75%,
      color-mix(in srgb, var(--lit) 10.9%, transparent) 83.3%,
      color-mix(in srgb, var(--lit) 1.3%, transparent) 91.7%,
      transparent 100%);
    animation:sweep var(--cycle) cubic-bezier(.20,.20,.90,.60) infinite; }

  /* リング：軌道上を光の玉が一方通行で1周する */
  .wakka-loading .ring .glow{ position:absolute; width:30%; aspect-ratio:1;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle closest-side,
      color-mix(in srgb, var(--lit) 100.0%, transparent) 0%,
      color-mix(in srgb, var(--lit) 96.4%, transparent) 10%,
      color-mix(in srgb, var(--lit) 86.0%, transparent) 20%,
      color-mix(in srgb, var(--lit) 70.7%, transparent) 30%,
      color-mix(in srgb, var(--lit) 53.0%, transparent) 40%,
      color-mix(in srgb, var(--lit) 35.4%, transparent) 50%,
      color-mix(in srgb, var(--lit) 20.3%, transparent) 60%,
      color-mix(in srgb, var(--lit) 9.4%, transparent) 70%,
      color-mix(in srgb, var(--lit) 3.0%, transparent) 80%,
      transparent 90%,
      transparent 100%);
    animation:orbit var(--cycle) linear infinite; }
  @keyframes orbit{
    0.00%{ left:38.47%; top:46.13%; opacity:0; }
    1.56%{ left:40.83%; top:41.32%; opacity:1; }
    3.21%{ left:43.30%; top:36.60%; opacity:1; }
    4.95%{ left:45.84%; top:32.03%; opacity:1; }
    6.75%{ left:48.43%; top:27.66%; opacity:1; }
    8.59%{ left:51.05%; top:23.51%; opacity:1; }
    10.48%{ left:53.67%; top:19.64%; opacity:1; }
    12.40%{ left:56.26%; top:16.09%; opacity:1; }
    14.34%{ left:58.79%; top:12.90%; opacity:1; }
    16.30%{ left:61.24%; top:10.09%; opacity:1; }
    18.28%{ left:63.59%; top:7.69%; opacity:1; }
    20.27%{ left:65.81%; top:5.74%; opacity:1; }
    22.26%{ left:67.87%; top:4.24%; opacity:1; }
    24.25%{ left:69.76%; top:3.22%; opacity:1; }
    26.24%{ left:71.46%; top:2.68%; opacity:1; }
    28.23%{ left:72.94%; top:2.64%; opacity:1; }
    30.21%{ left:74.20%; top:3.08%; opacity:1; }
    32.19%{ left:75.22%; top:4.01%; opacity:1; }
    34.15%{ left:75.99%; top:5.42%; opacity:1; }
    36.10%{ left:76.51%; top:7.29%; opacity:1; }
    38.04%{ left:76.76%; top:9.61%; opacity:1; }
    39.96%{ left:76.75%; top:12.35%; opacity:1; }
    41.87%{ left:76.47%; top:15.47%; opacity:1; }
    43.75%{ left:75.93%; top:18.96%; opacity:1; }
    45.62%{ left:75.14%; top:22.77%; opacity:1; }
    47.46%{ left:74.09%; top:26.87%; opacity:1; }
    49.28%{ left:72.81%; top:31.21%; opacity:1; }
    51.08%{ left:71.30%; top:35.74%; opacity:1; }
    52.85%{ left:69.59%; top:40.43%; opacity:1; }
    54.60%{ left:67.68%; top:45.23%; opacity:1; }
    56.32%{ left:65.60%; top:50.08%; opacity:1; }
    58.01%{ left:63.37%; top:54.93%; opacity:1; }
    59.67%{ left:61.01%; top:59.74%; opacity:1; }
    61.30%{ left:58.55%; top:64.46%; opacity:1; }
    62.90%{ left:56.01%; top:69.04%; opacity:1; }
    64.46%{ left:53.42%; top:73.42%; opacity:1; }
    66.00%{ left:50.80%; top:77.58%; opacity:1; }
    67.49%{ left:48.18%; top:81.45%; opacity:1; }
    68.96%{ left:45.59%; top:85.01%; opacity:1; }
    70.38%{ left:43.06%; top:88.22%; opacity:1; }
    71.77%{ left:40.60%; top:91.05%; opacity:1; }
    73.12%{ left:38.25%; top:93.46%; opacity:1; }
    74.43%{ left:36.03%; top:95.43%; opacity:1; }
    75.70%{ left:33.96%; top:96.94%; opacity:1; }
    76.93%{ left:32.07%; top:97.98%; opacity:1; }
    78.11%{ left:30.36%; top:98.53%; opacity:1; }
    79.25%{ left:28.87%; top:98.60%; opacity:1; }
    80.35%{ left:27.60%; top:98.17%; opacity:1; }
    81.40%{ left:26.57%; top:97.25%; opacity:1; }
    82.40%{ left:25.79%; top:95.86%; opacity:1; }
    83.36%{ left:25.27%; top:94.00%; opacity:1; }
    84.27%{ left:25.01%; top:91.70%; opacity:1; }
    85.12%{ left:25.01%; top:88.98%; opacity:1; }
    85.93%{ left:25.28%; top:85.87%; opacity:1; }
    86.68%{ left:25.81%; top:82.39%; opacity:1; }
    87.37%{ left:26.60%; top:78.59%; opacity:1; }
    88.02%{ left:27.63%; top:74.50%; opacity:1; }
    88.60%{ left:28.91%; top:70.17%; opacity:1; }
    89.13%{ left:30.41%; top:65.64%; opacity:1; }
    89.59%{ left:32.11%; top:60.96%; opacity:1; }
    90.00%{ left:34.02%; top:56.16%; opacity:1; }
    90.60%{ left:34.02%; top:56.16%; opacity:0; }
    100%{ left:34.02%; top:56.16%; opacity:0; }
  }
  @keyframes sweep{
    0%   { transform:translateX(-100%);   opacity:1; }
    90%  { transform:translateX(192.31%); opacity:1; }
    91%  { transform:translateX(192.31%); opacity:0; }
    100% { transform:translateX(192.31%); opacity:0; }
  }
  @media (prefers-reduced-motion:reduce){
    .wakka-loading .sweep, .wakka-loading .glow{ animation:none; opacity:.55; }
  }