/* ==========================================================
   BIG RING ✕ INFINITY — シネマティック・オープニング
   外部通信ゼロ / WebGL + Canvas + CSS3D
   ========================================================== */
#bigring-open{
  position:fixed;inset:0;z-index:9999;background:#01030a;
  display:grid;place-items:center;overflow:hidden;
  transition:opacity .9s cubic-bezier(.2,.8,.2,1),filter .9s;
}
#bigring-open.gone{opacity:0;filter:blur(14px) brightness(2.2);pointer-events:none}
#bigring-open canvas{position:absolute;inset:0;width:100%;height:100%}
#bo-gl{z-index:1}
#bo-fx{z-index:2}

/* 中央の光芒 */
.bo-core{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;pointer-events:none;
  width:min(760px,92vw);aspect-ratio:1;opacity:0;
  background:radial-gradient(circle,rgba(150,225,255,.42),rgba(60,150,255,.14) 34%,transparent 66%);
  filter:blur(26px)}

/* ── Big Ring（CSS 3D 軌道） ── */
.bo-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;
  width:min(560px,80vw);aspect-ratio:1;perspective:1200px;opacity:0;pointer-events:none}
.bo-ring .rot{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(72deg);animation:boSpin 14s linear infinite}
@keyframes boSpin{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
.bo-ring .halo{position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(140,215,255,.55);
  box-shadow:0 0 40px rgba(90,180,255,.55),inset 0 0 60px rgba(90,180,255,.4)}
.bo-ring .halo::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(120,255,210,.32)}
.bo-ring b{position:absolute;left:50%;top:50%;margin:-.6em 0 0 -.5em;
  font-family:"Hiragino Sans",system-ui,sans-serif;font-weight:800;
  font-size:clamp(13px,1.7vw,20px);letter-spacing:.06em;color:#dff2ff;
  text-shadow:0 0 12px rgba(120,200,255,.9),0 0 26px rgba(60,150,255,.6);
  transform-style:preserve-3d;white-space:pre}
.bo-ring img{position:absolute;left:50%;top:50%;width:74px;margin:-37px 0 0 -37px;
  filter:drop-shadow(0 0 16px rgba(120,220,255,.85));transform-style:preserve-3d}

/* ── UI：上下2ゾーンで構造的に重ならない ── */
.bo-ui{position:absolute;inset:0;z-index:6;display:grid;grid-template-rows:44% 56%;
  place-items:center;pointer-events:none}
.bo-brandzone{align-self:end;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  width:min(92vw,900px);padding-bottom:clamp(10px,1.8vh,22px)}
/* ロゴは CSS だけで水平中央に物理固定（JS は位置を一切決めない） */
.bo-logo{display:block;width:clamp(96px,15vw,190px);height:auto;
  margin:0 auto clamp(12px,2.2vh,26px);opacity:0;pointer-events:none;
  transition:opacity .25s linear}
.bo-logo.on{opacity:1}
.bo-copyzone{align-self:start;width:min(88vw,860px);text-align:center;
  padding-top:clamp(16px,2.8vh,32px)}

/* ブランド名：ロゴと同質の「機械加工された金属」
   ぼかし半径は一切使わない（text-shadow / drop-shadow / blur すべてゼロ）。
   ※ background-clip:text と text-shadow を併用すると Chrome が影を文字の上に描き
     グリフが中空になる。ゆえに影は使わず、金属階調だけで立体を出す。 */
.bo-brand{display:flex;flex-wrap:wrap;justify-content:center;gap:.03em;margin:0;
  font-family:"Orbitron","Michroma","Eurostile","DIN Alternate","Bahnschrift","DIN Next LT Pro",
              "Avenir Next Condensed","Helvetica Neue",Arial,system-ui,sans-serif;
  font-weight:700;font-size:clamp(16px,2.8vw,36px);line-height:1.1;
  letter-spacing:.18em;color:#eef5f2;text-transform:uppercase;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

.bo-brand .ch{display:inline-block;opacity:0;color:#eef5f2;
  transform:translate3d(var(--x),var(--y),900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(3.6)}
.bo-brand .ch.gold{color:#f2dfae}

/* クローム（プラチナ）／ CO., LTD はゴールド */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .bo-brand .ch{
    background-image:linear-gradient(180deg,
      #ffffff 0%,#ffffff 17%,#c6d6cf 35%,#ffffff 46.5%,#ffffff 53.5%,
      #b0c3ba 64%,#edf4f1 82%,#ffffff 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent}
  .bo-brand .ch.gold{
    background-image:linear-gradient(180deg,
      #fffdf6 0%,#fdf3d6 17%,#e7c676 35%,#fffdf5 46.5%,#fffdf5 53.5%,
      #d9b458 64%,#f7e9c0 82%,#fffdf6 100%);
    color:transparent;-webkit-text-fill-color:transparent}
}

.bo-brand .ch.lock{animation:boLock .46s cubic-bezier(.08,.78,.14,1) forwards}
@keyframes boLock{
  0%{opacity:0;transform:translate3d(var(--x),var(--y),900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(3.6);
     filter:brightness(2.4)}
  62%{opacity:1;transform:translate3d(0,0,-18px) scale(.96);filter:brightness(2)}
  78%{transform:translate3d(0,0,10px) scale(1.03);filter:brightness(1.25)}
  100%{opacity:1;transform:none;filter:none}}
/* 着地後は inline style で opacity:1 / transform:none を焼き付ける（JS側）。
   アニメーションを重ねると boLock の forwards が失われて文字が消えるため禁止。 */
.bo-brand .ch.set{opacity:1!important;transform:none!important;animation:none!important}

.bo-rule{width:0;height:2px;margin-top:14px;
  background:linear-gradient(90deg,transparent,#8fa39a,#ffffff 44%,#fffdf5 52%,#d9b458,transparent);
  transition:width .6s ease}
.bo-rule.on{width:min(76vw,660px)}

/* 本文：順次デコード */
.bo-line{opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s ease-out,transform .3s cubic-bezier(.2,.8,.2,1)}
.bo-line.on{opacity:1;visibility:visible;transform:none}
.bo-line.typing{color:#7bffc8}
.bo-copyzone h2{min-height:1.4em;min-height:1.4em;font-family:"Hiragino Mincho ProN",serif;font-weight:700;
  font-size:clamp(21px,3.2vw,34px);letter-spacing:.1em;line-height:1.5;margin-bottom:8px;
  background:linear-gradient(100deg,#eafaff,#9fd6ff 42%,#7bffc8 78%,#eafaff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 6px rgba(90,180,255,.35))}
.bo-copyzone .en{display:block;min-height:1em;min-height:1em;font-family:system-ui,sans-serif;font-size:9.5px;letter-spacing:.42em;
  color:#6fd8ff;margin-bottom:20px;font-weight:700}
.bo-copyzone p{min-height:2.2em;color:#a9c8e0;font-size:12.5px;line-height:2.1;letter-spacing:.05em;max-width:38em;margin:0 auto}
.bo-copyzone .policy{min-height:3em;margin-top:12px;padding:14px 18px;border-radius:12px;
  border:1px solid rgba(120,200,255,.22);background:rgba(10,26,48,.5);
  font-size:11.5px;color:#8fb6d4;line-height:1.95}
.bo-enter{pointer-events:auto;margin-top:22px;display:inline-flex;align-items:center;gap:12px;
  height:58px;padding:0 40px;border-radius:15px;border:0;cursor:pointer;
  font-family:"Hiragino Sans",system-ui,sans-serif;font-size:14px;font-weight:800;letter-spacing:.14em;
  color:#02121f;background:linear-gradient(118deg,#7bffc8,#6fd8ff 52%,#a8e0ff);
  box-shadow:0 0 0 1px rgba(180,240,255,.5),0 16px 44px -14px rgba(90,200,255,.95),
             inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;position:relative;overflow:hidden}
.bo-enter::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:boShine 3.4s ease-in-out infinite}
@keyframes boShine{0%,62%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}
.bo-enter:hover{transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 0 1px rgba(200,250,255,.75),0 26px 60px -14px rgba(90,200,255,1)}
.bo-skip{position:fixed;top:22px;right:24px;z-index:7;
  background:rgba(10,26,48,.55);border:1px solid rgba(120,200,255,.3);border-radius:10px;
  color:#9fd6ff;font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.2em;font-weight:700;
  padding:10px 16px;cursor:pointer;opacity:0;transition:opacity .6s,background .3s,border-color .3s}
.bo-skip.show{opacity:1}
.bo-skip:hover{background:rgba(20,50,84,.8);border-color:#6fd8ff;color:#dff2ff}
.bo-sound{position:fixed;top:22px;right:120px;z-index:7;
  background:rgba(10,26,48,.55);border:1px solid rgba(120,200,255,.3);border-radius:10px;
  color:#9fd6ff;font-size:13px;padding:9px 12px;cursor:pointer;opacity:0;transition:opacity .6s}
.bo-sound.show{opacity:1}

/* 白フラッシュ */
.bo-flash{position:absolute;inset:0;z-index:8;background:#eaf9ff;opacity:0;pointer-events:none}

body.bo-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){#bigring-open{display:none}}
@media(max-height:720px){.bo-ui{grid-template-rows:41% 59%}
  .bo-copyzone{padding-top:10px}.bo-enter{margin-top:14px;height:50px}}
@media(max-width:600px){.bo-ui{grid-template-rows:40% 60%}
  .bo-brand{font-size:clamp(12px,4vw,18px);letter-spacing:.14em}
  .bo-copyzone{width:92vw;padding-top:12px}
  .bo-copyzone h2{font-size:clamp(17px,5.4vw,24px)}}
@media(max-width:560px){.bo-sound{right:auto;left:24px}}