섹션 블록이 떨어져 페이지를 쌓는 빌딩 로딩

import { useEffect, useState } from "react";

const A = "#3182f6";
const B = "#64a8ff";
const C = "#a9d1ff";

// 무대 240x220. 블록 최종 top: 푸터 178, 카드 136, 히어로 76, 내비 56. 한 주기 9초.
const drop = (name, from, start) => {
  const s = start;
  return `@keyframes ${name}{0%${s ? `,${s}%` : ""}{transform:translateY(-${from}px);opacity:0}${s + 2}%{transform:translateY(-${from}px);opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}${s + 13}%{transform:translateY(0);animation-timing-function:ease-out}${s + 14.5}%{transform:translateY(-3px)}${s + 16}%{transform:translateY(0);opacity:1}86%{transform:translateY(0);opacity:1}94%,100%{transform:translateY(0);opacity:0}}`;
};

const CSS = `
@media (prefers-reduced-motion:no-preference){
.bsb-footer{animation:bsb-footer 9s linear infinite}
.bsb-cards{animation:bsb-cards 9s linear infinite}
.bsb-hero{animation:bsb-hero 9s linear infinite}
.bsb-nav{animation:bsb-nav 9s linear infinite}
.bsb-dot{animation:bsb-bounce 1.1s ease-in-out infinite}
}
${drop("bsb-footer", 184, 0)}
${drop("bsb-cards", 142, 18)}
${drop("bsb-hero", 82, 36)}
${drop("bsb-nav", 62, 54)}
@keyframes bsb-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
`;

export default function BuildStackLoader() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const started = Date.now();
    const timer = setInterval(() => setSeconds(Math.floor((Date.now() - started) / 1000)), 1000);
    return () => clearInterval(timer);
  }, []);

  const block = "absolute left-1/2 -ml-[75px] w-[150px] rounded-md";

  return (
    <section className="w-full bg-[#f2f4f6] px-4 py-20 sm:py-28">
      <style>{CSS}</style>
      <div role="status" aria-live="polite" className="mx-auto flex max-w-xl flex-col items-center gap-8 text-[#191f28]">
        <div className="relative h-[220px] w-[240px]" aria-hidden>
          <span className={`bsb-footer ${block} top-[178px] h-[30px]`} style={{ background: `color-mix(in srgb, ${A} 80%, #191f28)` }} />
          <span className={`bsb-cards ${block} top-[136px] flex h-9 gap-[5px]`}>
            <i className="flex-1 rounded-md" style={{ background: C }} />
            <i className="flex-1 rounded-md" style={{ background: C }} />
            <i className="flex-1 rounded-md" style={{ background: C }} />
          </span>
          <span className={`bsb-hero ${block} top-[76px] h-[54px]`} style={{ background: A }} />
          <span className={`bsb-nav ${block} top-[56px] h-[14px]`} style={{ background: B }} />
        </div>
        <div className="text-center">
          <p className="text-[19px] font-bold tracking-[-0.01em]">페이지를 짓는 중입니다</p>
          <div className="mt-2 flex items-center justify-center gap-2">
            <span className="flex gap-1" aria-hidden>
              {[A, B, C].map((c, i) => (
                <span key={c} className="bsb-dot h-1.5 w-1.5 rounded-full" style={{ background: c, animationDelay: `${i * 0.15}s` }} />
              ))}
            </span>
            <span className="font-mono text-[13px] text-[#8b95a1]">
              {Math.floor(seconds / 60)}:{String(seconds % 60).padStart(2, "0")}
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}