/* ねこふく — loading overlay (vanilla, no deps) --------------------- */
#loader {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: var(--beige, #f2ebdd);
  opacity: 1;
  transition: opacity .7s cubic-bezier(.4,0,.2,1);
}
#loader[data-hide] { opacity: 0; pointer-events: none; }
#loader[hidden] { display: none; }

.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.loader__cat { color: var(--ink, #211f1b); width: clamp(56px, 9vw, 84px); }
.loader__cat svg { width: 100%; height: auto; display: block; }
.loader__name {
  font-family: var(--serif, "Shippori Mincho", serif);
  font-weight: 700; letter-spacing: 0.34em; color: var(--ink, #211f1b);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); padding-left: 0.34em;
}
.loader__rule { width: 1px; height: 0; background: var(--navy, #38465f); }

@media (prefers-reduced-motion: no-preference) {

  /* 1. rise — cat fades + floats up */
  #loader[data-style="rise"] .loader__cat { animation: ld-rise .9s cubic-bezier(.2,.7,.3,1) both; }
  #loader[data-style="rise"] .loader__name { display: none; }
  @keyframes ld-rise {
    from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }

  /* 2. logo — wordmark fades in with a thin rule */
  #loader[data-style="logo"] .loader__cat { display: none; }
  #loader[data-style="logo"] .loader__inner { gap: 16px; }
  #loader[data-style="logo"] .loader__name { animation: ld-fade 1s ease both; }
  #loader[data-style="logo"] .loader__rule { animation: ld-rule .9s .25s cubic-bezier(.4,0,.2,1) both; }
  @keyframes ld-fade { from { opacity: 0; letter-spacing: 0.6em; } to { opacity: 1; letter-spacing: 0.34em; } }
  @keyframes ld-rule { from { height: 0; opacity: 0; } to { height: 38px; opacity: 1; } }

  /* 3. stack — cat above wordmark, both rise softly */
  #loader[data-style="stack"] .loader__cat { animation: ld-rise .85s cubic-bezier(.2,.7,.3,1) both; }
  #loader[data-style="stack"] .loader__name { animation: ld-fade .9s .22s ease both; }

  /* 4. motion — cat blinks + tail-sway loop */
  #loader[data-style="motion"] .loader__name { display: none; }
  #loader[data-style="motion"] .loader__cat { animation: ld-fade .5s ease both; transform-origin: 50% 90%; }
  #loader[data-style="motion"] .loader__cat svg { animation: ld-bob 1.1s ease-in-out infinite; transform-origin: 50% 90%; }
  #loader[data-style="motion"] .loader__tail { transform-box: fill-box; transform-origin: 0% 100%; animation: ld-tail 1.1s ease-in-out infinite; }
  @keyframes ld-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes ld-tail { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-11deg); } }
}

/* reduced motion / no-JS fallback: just show, then JS fades out */
@media (prefers-reduced-motion: reduce) {
  #loader .loader__rule { height: 38px; }
}