/* ============================================================
   Part 3 — Loading（ローディング） cards 031–045
   All animated mains are WHITE, accents are var(--cd).
   Every class / @keyframes is prefixed l01- … l15-.
   ============================================================ */

/* ---------- 031 Ring Spinner (l01-) ---------- */
.l01-wrap{
  position:relative;
  width:64px;height:64px;
}
.l01-track{
  position:absolute;inset:0;
  border-radius:50%;
  border:8px solid var(--cd);
  opacity:.5;
}
.l01-arc{
  position:absolute;inset:0;
  border-radius:50%;
  border:8px solid transparent;
  border-top-color:#fff;
  animation:l01-turn 1s linear infinite;
}
@keyframes l01-turn{
  to{transform:rotate(360deg)}
}

/* ---------- 032 Dual Arcs (l02-) ---------- */
.l02-wrap{
  position:relative;
  width:80px;height:80px;
}
.l02-outer{
  position:absolute;inset:0;
  border-radius:50%;
  border:7px solid transparent;
  border-top-color:#fff;
  border-right-color:#fff;
  animation:l02-spin-a 1.6s linear infinite;
}
.l02-inner{
  position:absolute;inset:17px;
  border-radius:50%;
  border:7px solid transparent;
  border-bottom-color:#fff;
  border-left-color:#fff;
  animation:l02-spin-b 1s linear infinite;
}
@keyframes l02-spin-a{
  to{transform:rotate(360deg)}
}
@keyframes l02-spin-b{
  to{transform:rotate(-360deg)}
}

/* ---------- 033 Bounce Dots (l03-) ---------- */
.l03-dots{
  display:flex;
  gap:14px;
  padding-top:26px; /* keeps the arc of the bounce centered */
}
.l03-dot{
  width:18px;height:18px;
  border-radius:50%;
  background:#fff;
  animation:l03-bounce 1.2s cubic-bezier(.45,.05,.55,.95) infinite;
}
.l03-dot:nth-child(2){animation-delay:.15s}
.l03-dot:nth-child(3){animation-delay:.3s}
@keyframes l03-bounce{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-26px)}
}

/* ---------- 034 Fade Dots (l04-) ---------- */
.l04-dots{
  display:flex;
  gap:16px;
}
.l04-dot{
  width:20px;height:20px;
  border-radius:50%;
  background:#fff;
  opacity:.25;
  animation:l04-fade 1.4s ease-in-out infinite;
}
.l04-dot:nth-child(2){animation-delay:.2s}
.l04-dot:nth-child(3){animation-delay:.4s}
@keyframes l04-fade{
  0%,70%,100%{opacity:.25}
  35%{opacity:1}
}

/* ---------- 035 Progress Fill (l05-) ---------- */
.l05-track{
  width:150px;height:22px;
  border-radius:11px;
  background:var(--cd);
  overflow:hidden;
}
.l05-bar{
  width:100%;height:100%;
  border-radius:inherit;
  background:#fff;
  transform:translateX(-101%);
  animation:l05-fill 2.8s cubic-bezier(.66,0,.24,1) infinite;
}
@keyframes l05-fill{
  0%,10%{transform:translateX(-101%)}
  72%,100%{transform:translateX(0)}   /* eased fill, hold full, then snap reset on loop */
}

/* ---------- 036 Skeleton Shimmer (l06-) ---------- */
.l06-box{
  display:flex;
  flex-direction:column;
  gap:13px;
  width:150px;
}
.l06-line{
  border-radius:9px;
  background-image:linear-gradient(110deg,
    var(--cd) 42%,
    rgba(255,255,255,.85) 50%,
    var(--cd) 58%);
  background-size:300% 100%;
  background-position:100% 0;
  animation:l06-shimmer 2s ease-in-out infinite;
}
.l06-l1{height:18px;width:100%}
.l06-l2{height:14px;width:84%}
.l06-l3{height:14px;width:60%}
@keyframes l06-shimmer{
  0%{background-position:100% 0}
  65%,100%{background-position:0% 0}  /* band sweeps across, rests off-stage, repeats */
}

/* ---------- 037 Orbit (l07-) ---------- */
.l07-space{
  position:relative;
  width:96px;height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.l07-center{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--cd);
}
.l07-ring{
  position:absolute;inset:0;
  animation:l07-orbit 1.6s linear infinite;
}
.l07-dot{
  position:absolute;
  top:0;left:50%;
  width:16px;height:16px;
  margin-left:-8px;
  border-radius:50%;
  background:#fff;
}
@keyframes l07-orbit{
  to{transform:rotate(360deg)}
}

/* ---------- 038 Flip Square (l08-) ---------- */
.l08-sq{
  position:relative;
  width:56px;height:56px;
  border-radius:12px;
  background:#fff;
  animation:l08-flip 2.4s cubic-bezier(.45,0,.2,1) infinite;
}
.l08-sq::after{
  content:"";
  position:absolute;inset:19px;
  border-radius:50%;
  background:var(--cd);
  opacity:.85;
}
@keyframes l08-flip{
  0%  {transform:perspective(220px) rotateX(0deg)    rotateY(0deg)}
  30% {transform:perspective(220px) rotateX(-180deg) rotateY(0deg)}
  50% {transform:perspective(220px) rotateX(-180deg) rotateY(0deg)}    /* pause */
  80% {transform:perspective(220px) rotateX(-180deg) rotateY(-180deg)}
  100%{transform:perspective(220px) rotateX(-180deg) rotateY(-180deg)} /* pause */
}

/* ---------- 039 Equalizer (l09-) ---------- */
.l09-bars{
  display:flex;
  align-items:flex-end;
  gap:9px;
  height:72px;
}
.l09-bar{
  width:12px;height:72px;
  border-radius:6px;
  background:#fff;
  transform-origin:50% 100%;
  transform:scaleY(.3);
  animation:l09-eq 1.2s ease-in-out infinite;
}
.l09-bar:nth-child(1){animation-delay:-1.2s}
.l09-bar:nth-child(2){animation-delay:-1s}
.l09-bar:nth-child(3){animation-delay:-.8s}
.l09-bar:nth-child(4){animation-delay:-.6s}
.l09-bar:nth-child(5){animation-delay:-.4s}
@keyframes l09-eq{
  0%,100%{transform:scaleY(.25)}
  50%{transform:scaleY(1)}
}

/* ---------- 040 Clock (l10-) ---------- */
.l10-face{
  position:relative;
  width:88px;height:88px;
  border-radius:50%;
  background:var(--cd);
  border:5px solid #fff;
}
.l10-hour{
  position:absolute;
  left:50%;bottom:50%;
  width:7px;height:21px;
  margin-left:-3.5px;
  border-radius:4px;
  background:#fff;
  transform-origin:50% 100%;
  animation:l10-hour 4.4s linear infinite;
}
.l10-minute{
  position:absolute;
  left:50%;bottom:50%;
  width:6px;height:30px;
  margin-left:-3px;
  border-radius:3px;
  background:#fff;
  transform-origin:50% 100%;
  animation:l10-min 1.1s linear infinite;
}
.l10-pin{
  position:absolute;
  left:50%;top:50%;
  width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  background:#fff;
}
@keyframes l10-min{
  to{transform:rotate(360deg)}
}
@keyframes l10-hour{
  to{transform:rotate(360deg)}
}

/* ---------- 041 Ball & Shadow (l11-) ---------- */
.l11-scene{
  position:relative;
  width:90px;height:112px;
}
.l11-ball{
  position:absolute;
  left:50%;top:6px;
  width:44px;height:44px;
  margin-left:-22px;
  border-radius:50%;
  background:#fff;
  animation:l11-ball 1.1s infinite;
}
.l11-shadow{
  position:absolute;
  left:50%;bottom:0;
  width:54px;height:12px;
  margin-left:-27px;
  border-radius:50%;
  background:var(--cd);
  opacity:.6;
  animation:l11-shadow 1.1s infinite;
}
@keyframes l11-ball{
  0%,100%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
  50%{transform:translateY(48px) scale(1.14,.8);animation-timing-function:cubic-bezier(.18,.6,.45,1)}
}
@keyframes l11-shadow{
  0%,100%{transform:scale(.5);opacity:.4;animation-timing-function:cubic-bezier(.55,0,.85,.4)}
  50%{transform:scale(1.12);opacity:.85;animation-timing-function:cubic-bezier(.18,.6,.45,1)}
}

/* ---------- 042 Infinity Trace (l12-) ---------- */
.l12-svg{
  width:160px;height:96px;
  overflow:visible;
}
.l12-path{
  fill:none;
  stroke:var(--cd);
  stroke-width:6.5;
  stroke-linecap:round;
  opacity:.55;
}
.l12-dash{
  fill:none;
  stroke:#fff;
  stroke-width:6.5;
  stroke-linecap:round;
  stroke-dasharray:22 78; /* pathLength=100 → seamless loop */
  stroke-dashoffset:0;
  animation:l12-trace 2s linear infinite;
}
@keyframes l12-trace{
  to{stroke-dashoffset:-100}
}

/* ---------- 043 Typing Bubble (l13-) ---------- */
.l13-bubble{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:114px;height:58px;
  border-radius:29px;
  background:#fff;
  margin-bottom:10px; /* room for the tail */
}
.l13-bubble::before{
  content:"";
  position:absolute;
  left:16px;bottom:-6px;
  width:20px;height:20px;
  border-radius:5px;
  background:#fff;
  transform:rotate(45deg);
  z-index:-1;
}
.l13-dot{
  width:12px;height:12px;
  border-radius:50%;
  background:var(--cd);
  animation:l13-typing 1.3s ease-in-out infinite;
}
.l13-dot:nth-child(2){animation-delay:.16s}
.l13-dot:nth-child(3){animation-delay:.32s}
@keyframes l13-typing{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  28%{transform:translateY(-7px);opacity:1}
}

/* ---------- 044 Pie Sweep (l14-) ---------- */
@property --l14-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.l14-pie{
  width:84px;height:84px;
  border-radius:50%;
  border:5px solid #fff;
  background:conic-gradient(#fff var(--l14-angle), var(--cd) var(--l14-angle));
  animation:l14-sweep 3s cubic-bezier(.6,.05,.35,.95) infinite;
}
@keyframes l14-sweep{
  0%,8%{--l14-angle:0deg}
  78%,100%{--l14-angle:360deg} /* fills to full, holds, snaps back on loop */
}

/* ---------- 045 Dot Grid Wave (l15-) ---------- */
.l15-grid{
  display:grid;
  grid-template-columns:repeat(3,22px);
  gap:13px;
}
.l15-cell{
  width:22px;height:22px;
  border-radius:50%;
  background:#fff;
  animation:l15-pulse 1.5s ease-in-out infinite;
}
/* diagonal wave: delay = (row + col) * .12s, applied as negative offsets */
.l15-cell:nth-child(1){animation-delay:-1.5s}
.l15-cell:nth-child(2){animation-delay:-1.38s}
.l15-cell:nth-child(3){animation-delay:-1.26s}
.l15-cell:nth-child(4){animation-delay:-1.38s}
.l15-cell:nth-child(5){animation-delay:-1.26s}
.l15-cell:nth-child(6){animation-delay:-1.14s}
.l15-cell:nth-child(7){animation-delay:-1.26s}
.l15-cell:nth-child(8){animation-delay:-1.14s}
.l15-cell:nth-child(9){animation-delay:-1.02s}
@keyframes l15-pulse{
  0%,100%{transform:scale(.5);opacity:.5}
  40%{transform:scale(1.12);opacity:1}
}