/* 時空間占星術の背景(月の蝕の動き・星・龍)。親ページ(WordPress の固定ページ)にも、ツール自身にも置ける独立した部品。
   使い方: 親ページに次の3つを置くだけ。
     <link rel="stylesheet" href="https://shakti-b.jp/tools/astro/bg/jikukan-bg.css">
     <div id="jikukan-bg"></div>
     <script src="https://shakti-b.jp/tools/astro/bg/jikukan-bg.js"></script>
   画面に固定した層で、本文より後ろに出る。画像(龍)はこの CSS からの相対で読む。 */
#jikukan-bg{
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  margin:0;padding:0;
  -webkit-transform:translateZ(0);transform:translateZ(0);   /* iPhone の Safari でも固定の層として安定させる */
}
#jikukan-bg *{box-sizing:border-box;margin:0;padding:0;}
#jikukan-bg .jbg-dragon{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:#030a12 url('ryudao_design.webp') 70% center / cover no-repeat;
}
#jikukan-bg .jbg-eclipse{
  position:absolute;top:0;left:0;right:0;bottom:0;
  overflow:hidden;
}
#jikukan-bg .jbg-stars{
  position:absolute;top:0;left:0;right:0;bottom:0;
}
#jikukan-bg .jbg-star{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  animation:jbgTwinkle 3s ease-in-out infinite;
}
@-webkit-keyframes jbgTwinkle{0%,100%{opacity:.15;}50%{opacity:1;}}
@keyframes jbgTwinkle{
  0%,100%{opacity:.15;}
  50%{opacity:1;}
}
#jikukan-bg .jbg-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#jikukan-bg .jbg-sun{
  position:absolute;
  top:18%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  width:90px;
  height:90px;
  border-radius:50%;
  background:radial-gradient(circle,#fff7d6 0%,#f3d98c 40%,#d4a843 70%,transparent 100%);
  box-shadow:0 0 40px 10px rgba(243,217,140,.4);
  -webkit-animation:jbgSunGlow 18s linear infinite;animation:jbgSunGlow 18s linear infinite;
}
@-webkit-keyframes jbgSunGlow{0%,40%,60%,100%{box-shadow:0 0 40px 10px rgba(243,217,140,.4);}48%,52%{box-shadow:0 0 90px 30px rgba(243,217,140,.9);}}
@keyframes jbgSunGlow{
  0%,40%,60%,100%{box-shadow:0 0 40px 10px rgba(243,217,140,.4);}
  48%,52%{box-shadow:0 0 90px 30px rgba(243,217,140,.9);}
}
#jikukan-bg .jbg-moon{
  position:absolute;
  top:18%;
  left:-10%;
  -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  width:92px;
  height:92px;
  border-radius:50%;
  background:radial-gradient(circle,#1a1a2e 0%,#05050f 80%);
  box-shadow:0 0 18px 4px rgba(0,0,0,.6);
  -webkit-animation:jbgMoonOrbit 18s linear infinite;animation:jbgMoonOrbit 18s linear infinite;
}
@-webkit-keyframes jbgMoonOrbit{0%{left:-10%;}100%{left:110%;}}
@keyframes jbgMoonOrbit{
  0%{left:-10%;}
  100%{left:110%;}
}

/* 全体を暗くする黒の幕(龍・星・蝕のすべての上、本文の下)。明るすぎて文字が読みにくいため */
#jikukan-bg::after{
  content:'';
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.42);
  pointer-events:none;
}
/* 縦長の画面(スマホ):龍の顔は絵の右上(横の約78〜88%・上から17〜38%)にある。顔が画面の右寄りに入るよう、絵を右へずらす */
@media (max-aspect-ratio:1/1){
  #jikukan-bg .jbg-dragon{background-position:84% center;}
}

/* 背景の箱があるページだけ、body の濃い地(テーマが指定)を透明にして、後ろの背景を見せる。ほかのページには効かない
   (テーマの body{background-color:... !important} に勝つよう、詳しく書く) */
html body.jikukan-bg-on:not(.editor-styles-wrapper):not(.jbg-none){background-color:transparent !important;}
body:has(#jikukan-bg){background-color:transparent !important;}