/* 画面全体のオーバーレイ（クリック透過） */
.shooting-layer{
  position: fixed;
  inset: 0;
  z-index: var(--shoot-layer-z, 9999);
  pointer-events: none;
  overflow: visible;
}

/* 外側：流れ星全体の回転だけ担当（軌道角） */
.shooting-star{
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  transform: rotate(var(--deg, 28deg));
}

/* 内側：実体の移動だけ担当（ビューポート対角へ） */
.shooting-star .body{
  position: absolute;
  left: 0; top: 0;
  width: var(--len, 300px);
  height: var(--head, 16px);
  transform: translate3d(-12vw,-12vh,0);
  animation: shootPath var(--dur, 2.4s) linear forwards;
  opacity: 1;
}

/* ヘッド（先端の光）= 進行方向の先頭（右側） */
.shooting-star .body::before{
  content:"";
  position: absolute;
  right: 0; top: 50%;
  width: var(--head, 16px);
  height: var(--head, 16px);
  transform: translate(2px,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, #e9f1ff 36% 60%, rgba(255,255,255,0) 61%);
  filter: drop-shadow(0 0 12px rgba(255,255,255,.95))
          drop-shadow(0 0 20px rgba(170,200,255,.85));
}

/* 尾（虹色。右=ヘッド側が最も明るい） */
.shooting-star .body::after{
  content:"";
  position: absolute;
  right: calc(var(--head,16px) - 4px);
  top: 50%;
  width: calc(var(--len,300px) - var(--head,16px));
  height: var(--tail, 3px);
  /* 尾の角度：ヘッド側（右）を軸に回転 */
  transform: translateY(-50%) rotate(var(--tail-angle, 0deg));
  transform-origin: right center;

  /* 虹色グラデーション（透明→赤→橙→黄→緑→シアン→青→紫→白） */
  background: linear-gradient(90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,  0,  0,.22) 15%,
    rgba(255,165,  0,.30) 30%,
    rgba(255,255,  0,.34) 45%,
    rgba( 32,227,123,.38) 60%,
    rgba( 36,200,255,.44) 75%,
    rgba( 58,111,255,.52) 88%,
    rgba(166, 77,255,.68) 94%,
    rgba(255,255,255,.95)100%);
  filter: blur(0.5px) drop-shadow(0 0 8px rgba(170,200,255,.55));
  border-radius: 10px;
}

@keyframes shootPath{
  0%   { transform: translate3d(-12vw,-12vh,0); opacity:1; }
  75%  { opacity:1; }
  100% { transform: translate3d(115vw, 95vh,0); opacity:0; }
}

/* OSの「動きを減らす」を尊重する場合のみ非表示（JSがclass付与） */
@media (prefers-reduced-motion:reduce){
  .respect-shoot-reduce .shooting-layer{ display:none; }
}