/* =========================
   背景装飾（惑星・UFO）共通パーツ
   複数ページで使い回す想定の「構造・アニメーション」のみを定義する。
   位置(top/left/right)・サイズ・使うアセットはページごとに異なるため、
   各ページのCSSファイル側で .deco-planet / .deco-ufo に対する
   修飾クラス（is-xxx）として個別に指定すること。

   使い方の例:
     <main>
       <div class="deco-wrapper">
         <img src="img/FV_planet_02.svg" class="deco-planet is-blue" alt="" />
         <span class="deco-ufo is-hero"><img src="img/Spaceship.svg" alt="" /></span>
       </div>
       <article>...</article>
     </main>

   .deco-wrapper はページ本文のpadding-topに関係なく常にページの最上部
   （固定ヘッダーの裏）を原点にするための専用ラッパー。各ページのコンテンツ
   側コンテナ（.project-detail-inner 等）のpadding-top計算と装飾の位置が
   ズレる事故を防ぐため、装飾はこのラッパーの中にだけ置く。
========================= */

/* コンテナ幅は .project-detail-inner 等と同じ 1100px
   （+左右padding16px/SP20px）にそろえ、位置・サイズを
   100cqi基準の数値で指定できるようにする */
.deco-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: calc(1100px + 32px);
  margin: 0 auto;
  padding: 0 16px;
  pointer-events: none;
  container-type: inline-size;
  container-name: deco-wrapper;

  @media (max-width: 768px) {
    padding: 0 20px;
  }
}

.deco-planet,
.deco-ufo {
  position: absolute;
  pointer-events: none;
  z-index: -1;

  @media (max-width: 768px) {
    display: none;
  }
}

/* UFOの上下ゆらぎアニメーション。傾き角度はページ側の修飾クラスで
   --deco-ufo-tilt を上書きする（例: is-hero { --deco-ufo-tilt: -16.84deg; }） */
.deco-ufo {
  --deco-ufo-tilt: 0deg;
  overflow: hidden;
  line-height: 0;
  animation: deco-ufo-bob 3.5s ease-in-out infinite;

  img {
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    max-width: none;
    margin: -1px;
    border: 0;
  }
}

@keyframes deco-ufo-bob {
  0%,
  100% {
    transform: rotate(var(--deco-ufo-tilt)) translateY(0);
  }

  50% {
    transform: rotate(var(--deco-ufo-tilt)) translateY(-20px);
  }
}

/* =========================
   配置（トップページ以外の下層ページ共通）
   トップページのみ別デザイン（.planet-loop 等）のため対象外。
   .deco-wrapper の中に置くこと（位置の原点はページ最上部）。
========================= */

/* .deco-wrapper の実際の幅に合わせて追従させるため、絶対px値ではなく
   100cqi基準の比率で配置する。100cqiはコンテナのcontent-box幅（padding除く）
   なので、基準値はpadding分を引いたPC=1100px（1132-32）/SP=335px（375-40）を
   分母にする。topはページ最上部からの値をそのまま使う（.deco-wrapperの
   原点がページ最上部と一致するため、ページ側のpadding-topを差し引く必要がない） */
.deco-planet.is-corner-left {
  top: calc(100cqi * 109 / 1100);
  left: calc(100cqi * -113 / 1100);
  width: calc(100cqi * 154 / 1100);
  height: calc(100cqi * 154 / 1100);

  /* SPはプロジェクト詳細ページ上部の惑星3つのうち1つとして再利用 */
  @media (max-width: 768px) {
    display: block;
    top: calc(100cqi * 94 / 335);
    left: calc(100cqi * 309 / 335);
    width: calc(100cqi * 74 / 335);
    height: calc(100cqi * 74 / 335);
  }
}

.deco-planet.is-corner-right {
  top: calc(100cqi * 114 / 1100);
  left: calc(100cqi * 1084 / 1100);
  width: calc(100cqi * 152 / 1100);
  height: calc(100cqi * 152 / 1100);
}

.deco-planet.is-yellow-left {
  top: calc(100cqi * -41 / 1100);
  left: calc(100cqi * -45 / 1100);
  width: calc(100cqi * 175 / 1100);
  height: calc(100cqi * 175 / 1100);

  @media (max-width: 768px) {
    display: block;
    top: calc(100cqi * 33 / 335);
    left: calc(100cqi * -29 / 335);
    width: calc(100cqi * 128 / 335);
    height: calc(100cqi * 128 / 335);
  }
}

.deco-planet.is-yellow-right {
  top: calc(100cqi * -10 / 1100);
  left: calc(100cqi * 871 / 1100);
  width: calc(100cqi * 86 / 1100);
  height: calc(100cqi * 86 / 1100);
}

.deco-planet.is-blue {
  top: calc(100cqi * 240 / 1100);
  left: calc(100cqi * 910 / 1100);
  width: calc(100cqi * 230 / 1100);
  height: calc(100cqi * 230 / 1100);

  @media (max-width: 768px) {
    display: block;
    top: calc(100cqi * 220 / 335);
    left: calc(100cqi * 271 / 335);
    width: calc(100cqi * 110 / 335);
    height: calc(100cqi * 110 / 335);
  }
}

.deco-ufo.is-hero {
  top: calc(100cqi * 134 / 1100);
  left: calc(100cqi * 624 / 1100);
  width: calc(100cqi * 219 / 1100);
  height: calc(100cqi * 219 / 1100);
  --deco-ufo-tilt: 16.84deg;
}