/* 로딩 모션 — 바둑알 한 수가 여덟 글자가 된다.
   결과 화면(정적 13종)과 사주 정보 입력(/start, SPA)이 함께 쓴다.
   그래서 결과 전용 스타일시트가 아니라 독립 파일이다.

   2026-08-02: 돌을 키우고 바둑판 바닥선·두 겹 파문을 넣어 봤지만
   처음 것이 낫다는 판단이라 되돌렸다. 크게 만들수록 설명적이 되고
   조용한 맛이 사라졌다. */

/* ── 로딩 모션 — 바둑알 한 수가 여덟 글자가 된다 ─────────────
   묘수(妙手)는 바둑의 "신의 한 수"다. 브랜드 이름의 어원인데 지금껏
   밀서 썸네일 말고는 어디에도 안 보였다. 결제한 사람이 매번 28초씩 보는
   자리라 여기서 각인시킨다.

   3초 4비트로 돈다.
     ① 바둑알이 툭 놓인다      ② 빛의 파문이 퍼진다
     ③ 여덟 조각이 나타난다    ④ 4열 2행으로 앉아 오행 5색으로 물든다

   4:3인 이유: ④가 본질적으로 2:1이다(팔자는 년·월·일·시 네 기둥이라
   4×2를 세로로 뒤집을 수 없다). 정사각 110px에 넣으면 칸이 24px로
   쪼그라들어 오행 5색이 구분되지 않는다.

   영상이 아니라 CSS인 이유: 정확한 도형·색·이음매 없는 루프가 필요한데
   그건 AI 영상이 못 하는 쪽이다. 여기선 5KB로 또렷하고, 오행 색이
   토큰이라 팔레트가 바뀌면 같이 바뀐다.

   ⚠ 이 모션은 끝나지 않는다. 진행률·완료는 아래 단계 목록이 맡는다.
   예전에 타이머로만 흘러가는 로딩이 "완료되었어요"를 띄운 뒤 결과 화면에서
   진짜 30초를 다시 기다리게 했다. 그 자리로 돌아가지 않는다. */

.ld-motion{position:relative;width:200px;height:150px;margin-bottom:22px}
.ld-motion > *{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* ① 바둑알 — 왼쪽 위에서 빛을 받는 돌 하나 */
.ld-stone{width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #C9B2FF, #875AEF 52%, #4C2E8F);
  box-shadow:0 0 18px rgba(135,90,239,.5);
  animation:ldStone 3s cubic-bezier(.2,.9,.25,1) infinite}
@keyframes ldStone{
  0%   {opacity:0;transform:translate(-50%,-140%) scale(.7)}
  12%  {opacity:1;transform:translate(-50%,-50%)  scale(1.1,.82)}  /* 닿는 순간 눌린다 */
  20%  {opacity:1;transform:translate(-50%,-50%)  scale(1)}
  42%  {opacity:1;transform:translate(-50%,-50%)  scale(1)}
  52%  {opacity:0;transform:translate(-50%,-50%)  scale(.6)}
  100% {opacity:0;transform:translate(-50%,-140%) scale(.7)}
}

/* ② 파문 — 금빛 한 겹. 놓인 자리에서 번진다 */
.ld-ripple{width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(252,211,77,.75);
  animation:ldRipple 3s ease-out infinite}
@keyframes ldRipple{
  0%,16% {opacity:0;width:26px;height:26px}
  20%    {opacity:.9}
  46%    {opacity:0;width:150px;height:150px}
  100%   {opacity:0;width:150px;height:150px}
}

/* ③④ 여덟 글자 — 가운데서 자라나 4열 2행으로 앉는다 */
.ld-grid{display:grid;grid-template-columns:repeat(4,32px);grid-auto-rows:32px;gap:6px;
  animation:ldGrid 3s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes ldGrid{
  0%,44%  {opacity:0;transform:translate(-50%,-50%) scale(.34)}
  60%     {opacity:1;transform:translate(-50%,-50%) scale(1.04)}
  66%     {opacity:1;transform:translate(-50%,-50%) scale(1)}
  92%     {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%    {opacity:0;transform:translate(-50%,-50%) scale(1)}
}
.ld-grid i{border-radius:7px;background:rgba(255,255,255,.10);
  animation:ldTile 3s ease-out infinite}
/* 칸마다 조금씩 늦게 물든다 — 한 번에 켜지면 격자가 아니라 판때기로 보인다 */
/* 오행 색 토큰은 theme-result.css의 :root에 있고 그 파일은 결과 화면만 링크한다.
   SPA(/start)에서는 값이 비어 칸이 안 물들었다. 같은 값을 폴백으로 둔다. */
.ld-grid i:nth-child(1){animation-delay:.00s;--c:var(--el-mok, #70DCA4)}
.ld-grid i:nth-child(2){animation-delay:.05s;--c:var(--el-hwa, #F98D74)}
.ld-grid i:nth-child(3){animation-delay:.10s;--c:var(--el-to, #F2C063)}
.ld-grid i:nth-child(4){animation-delay:.15s;--c:var(--el-geum, #C6D3E6)}
.ld-grid i:nth-child(5){animation-delay:.20s;--c:var(--el-su, #7FA9F2)}
.ld-grid i:nth-child(6){animation-delay:.25s;--c:var(--el-mok, #70DCA4)}
.ld-grid i:nth-child(7){animation-delay:.30s;--c:var(--el-hwa, #F98D74)}
.ld-grid i:nth-child(8){animation-delay:.35s;--c:var(--el-to, #F2C063)}
@keyframes ldTile{
  0%,52% {background:rgba(255,255,255,.10)}
  70%    {background:var(--c)}
  92%    {background:var(--c)}
  100%   {background:rgba(255,255,255,.10)}
}

/* 움직임을 줄여 달라는 설정이면 마지막 모습으로 세워 둔다 */
@media (prefers-reduced-motion: reduce){
  .ld-stone, .ld-ripple{display:none}
  .ld-grid{animation:none;opacity:1;transform:translate(-50%,-50%)}
  .ld-grid i{animation:none;background:var(--c)}
}

/* ── 영상판 ────────────────────────────────────────────────
   손이 바둑알을 놓는 4초 영상. 원본이 5760×4320 · 12.8MB라
   640×480 webm(264KB)으로 줄였다 — 110px 자리에 4K의 4배를 싣는 건
   모바일 데이터를 그냥 태우는 일이다.

   가장자리를 마스크로 흐린다. 영상 배경이 화면(#121217)보다 살짝 밝아
   그냥 얹으면 네모난 판이 떠 있는 게 보인다. 색을 덧칠하지 않고 마스크로
   지우는 이유는, 배경색이 바뀌어도 따라오기 때문이다.

   CSS 모션은 그대로 밑에 깔아 둔다. 영상을 못 트는 브라우저
   (webm 미지원 등)에서는 그게 그대로 보인다 — 빈 네모가 뜨지 않는다. */
/* 화면 폭을 꽉 채우는 판. 200×150은 영상이 들어오기 전 크기였다 —
   실제 영상은 손과 돌이 보여야 해서 작으면 무엇인지 안 읽힌다.
   영상이 4:3이라 비율을 그대로 둬야 잘리지 않는다. */
.ld-motion.full{width:100%;max-width:440px;height:auto;aspect-ratio:4/3;margin-bottom:8px}

.ld-video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;
  /* 반지름은 박스 절반(50%)을 넘지 않아야 한다. 넘으면 가장자리에서 투명해지기
     전에 박스가 끝나 딱 잘린 선이 보인다 — 밝은 장면에서 위아래로 그랬다.
     가로·세로를 따로 겹쳐 네 변이 모두 사라지게 한다. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-composite:intersect}
/* 재생이 준비되면 영상이 드러나고 그 밑의 CSS 모션은 감춘다 */
.ld-motion.playing .ld-video{opacity:1}
.ld-motion.playing .ld-stone,
.ld-motion.playing .ld-ripple,
.ld-motion.playing .ld-grid{visibility:hidden}