/* =========================================================
   bareframe/stage.css
   役割：front状態の「舞台（stage）」。
         背景は画像＋薄い光/グリッド（意味未満）を重ねる。
   方針：演出のための“隙間”は持たせない（stage↔gridは直結）。
   ========================================================= */

.stage{
  width: 100%;
  min-height: clamp(180px, 34vh, 520px);

  /* stage ↔ grid は直結（演出用の余白は持たせない） */
  /* margin-bottom: calc(var(--gap) * 2); */
  /* margin-bottom: 5px; */

  border-bottom: 1px solid var(--line-2);

  position: relative;
  overflow: hidden;

  /* 背景画像（実ファイル名に合わせて変更） */
  background-image: url("../images/stage-back.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 背景は“置く”：装飾ではなく空間の定義（意味未満の薄層）
   ※ ::before は「床」：コンテンツの下、背景画像の上に敷く */
.stage::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--stage-bg), var(--stage-grid);
  /* stage-bg + stage-grid(横/縦) = 3レイヤー分を明示 */
  background-size: auto, var(--stage-grid-size), var(--stage-grid-size);
  background-position: center, center, center;

  opacity: 0.9;
  pointer-events: none;
}

/* 前景フィルタ：場を締める（右落ち）＋下端を暗くしてgridに接着
   ※ ::after は「空気」：コンテンツの上に薄くかぶせる */
.stage::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    /* 下端：gridに馴染ませる接着フェード */
    linear-gradient(to bottom,
      rgba(0,0,0,0) 70%,
      rgba(0,0,0,.55) 100%),
    /* 右側：場を締める */
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.22) 65%,
      rgba(0,0,0,.35) 100%);
}

/* ---- responsive: hide stage on mobile ---- */
@media (max-width: 1023px){
  .stage{
    display: none;
  }
}