/* グリッドの設定 */
:root {
  --grid-size: 30; /* 30x30の均等グリッドをベース */
  --tile-count: 900; /* タイル総数 */
  --animation-duration: 4s; 
  
  /* ページ背景と透明度の設定 */
  --bg-color: #f0f8ff; /* ページ背景色 */
  --gap-size: 1px; /* タイル間の隙間 */
  --active-opacity: 0.5; /* 活性化時の透明度 (50%) */
  --inactive-opacity: 0.1; /* 非活性時の透明度 (10%) */
}

body{
  background-color: var(--bg-color); 
}

/* 全画面表示のグリッドコンテナ */
.mosaic-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 120vh;
  transform: translateY(-20vh);
  display: grid;
  /* 30x30の均等なグリッドセルを作成 */
  grid-template-columns: repeat(var(--grid-size), 1fr);
  grid-template-rows: repeat(var(--grid-size), 1fr);
  grid-gap: var(--gap-size); /* モザイク感を出すための隙間 */
}

/* ★ 画像を中央に配置し、モザイクの上に重ねるためのスタイル
  ↑fixedの上に来るものだから普通にコーディングしてOK absoluteもtransformも必要なし */
.psp_container {
  position: relative;
  max-width: 1032px;
  margin: auto;
  padding: 84px 16px 116px;
  text-align: center;
  z-index: 10;
}


/* タイルの基本設定とアニメーション適用 */
.tile {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: transparent; 
  
  /* アニメーション遅延をJSから受け取る */
  animation-delay: var(--random-delay); 
  
  animation-name: tile-pulse;
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* ランダムなグリッド結合のためのクラス定義 */
.col-span-2 {
  grid-column: span 2;
}
.row-span-2 {
  grid-row: span 2;
}
.span-4 {
  grid-column: span 2;
  grid-row: span 2;
}
.span-9 {
  grid-column: span 3;
  grid-row: span 3;
}


/* ランダムなサイズのモザイクを描画する疑似要素 */
.tile::before {
  content: '';
  display: block;
  background-color: var(--base-color); 
  aspect-ratio: 1 / 1;
  border-radius: 1px; 
  
  /* 初期状態 */
  opacity: var(--inactive-opacity); 
  transform: scale(0.8);
}

/* JSで適用するランダムな内側サイズクラス */
.size-small::before {
  width: 50%; 
}
.size-medium::before {
  width: 70%;
}
.size-large::before {
  width: 90%;
}

/* アニメーションの定義 */
@keyframes tile-pulse {
  0% {
    opacity: var(--inactive-opacity);
    transform: scale(0.8);
    background-color: var(--base-color);
  }
  50% {
    opacity: var(--active-opacity); 
    transform: scale(1.0);
    background-color: var(--base-color);
  }
  100% {
    opacity: var(--inactive-opacity);
    transform: scale(0.8);
    background-color: var(--base-color);
  }
}




@media screen and (max-width:800px){
  .psp_container {padding: 32px 16px calc(17.5vw + 120px);}
}