/* ============================================================
   geometric.css — 全ページ共通の固定背景（連続）
   Canvasコンステレーション(#backdrop)＋ゆっくり回る歯車(#bg-geo)＋四隅ブラケット
   ============================================================ */
#backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* 共通の幾何学背景（固定＝全セクションで途切れず連続） */
#bg-geo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#bg-geo > *{position:absolute;}

.bg-gear{border-radius:50%;}
.bg-gear-a{width:56vmax;height:56vmax;right:-13vmax;top:-12vmax;opacity:.7;
  background:repeating-radial-gradient(circle,transparent 0 56px,rgba(143,196,200,.16) 56px 57px);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 72%);mask:radial-gradient(circle,#000 30%,transparent 72%);}
.bg-gear-b{width:40vmax;height:40vmax;left:-13vmax;bottom:-12vmax;opacity:.6;
  background:repeating-radial-gradient(circle,transparent 0 46px,rgba(143,196,200,.16) 46px 47px);
  -webkit-mask:radial-gradient(circle,#000 32%,transparent 72%);mask:radial-gradient(circle,#000 32%,transparent 72%);}
.bg-ticks{position:absolute;inset:7%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(91,157,162,.5) 0 .35deg,transparent .35deg 7.5deg);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61% 64%,transparent 65%);
          mask:radial-gradient(circle,transparent 60%,#000 61% 64%,transparent 65%);}
.bg-gear-a .bg-ticks{animation:geoSpin 120s linear infinite;}
.bg-gear-b .bg-ticks{animation:geoSpin 90s linear infinite reverse;}
@keyframes geoSpin{to{transform:rotate(360deg);}}

/* 大きな軌道リング：細い円に明るい弧が回る（豪華・連続） */
.bg-orbit{width:72vmax;height:72vmax;left:50%;top:50%;translate:-50% -50%;border-radius:50%;opacity:.6;
  background:conic-gradient(from 0deg,rgba(143,196,200,.12) 0 300deg,rgba(91,157,162,.6) 348deg 360deg);
  -webkit-mask:radial-gradient(circle,transparent 48.4%,#000 49% 49.5%,transparent 50%);
          mask:radial-gradient(circle,transparent 48.4%,#000 49% 49.5%,transparent 50%);
  animation:geoSpin 64s linear infinite;}
.bg-orbit.bg-orbit-2{width:48vmax;height:48vmax;animation:geoSpin 44s linear infinite reverse;opacity:.5;}

/* 淡いドットグリッド（中央は抜いて可読性確保） */
.bg-grid{inset:0;width:100%;height:100%;opacity:.22;
  background:radial-gradient(circle,rgba(91,157,162,.4) 1px,transparent 1.7px);background-size:30px 30px;
  -webkit-mask:radial-gradient(ellipse at 50% 42%,transparent 24%,#000 92%);
          mask:radial-gradient(ellipse at 50% 42%,transparent 24%,#000 92%);}

/* 四隅のブラケット枠 */
.frame{position:fixed;inset:0;z-index:7;pointer-events:none;}
.fr{position:absolute;width:22px;height:22px;opacity:.5;}
.fr-tl{top:18px;left:18px;border-top:1px solid var(--teal-500);border-left:1px solid var(--teal-500);}
.fr-tr{top:18px;right:18px;border-top:1px solid var(--teal-500);border-right:1px solid var(--teal-500);}
.fr-bl{bottom:18px;left:18px;border-bottom:1px solid var(--teal-500);border-left:1px solid var(--teal-500);}
.fr-br{bottom:18px;right:18px;border-bottom:1px solid var(--teal-500);border-right:1px solid var(--teal-500);}

@media(max-width:760px){
  .bg-gear-a{width:90vmax;}
  .bg-gear-b{width:70vmax;}
  .bg-grid{background-size:26px 26px;}
}
/* 初回ロード：背景幾何＋星座を起動するようにフェードイン */
html.intro #bg-geo,html.intro #backdrop{opacity:0;}
html.intro.intro-go #bg-geo,html.intro.intro-go #backdrop{opacity:1;transition:opacity 1.6s ease;}

@media(prefers-reduced-motion:reduce){
  .bg-ticks,.bg-orbit{animation:none;}
  html.intro #bg-geo,html.intro #backdrop{opacity:1;}
}