/* =========================================================
   トップページ専用スタイル
   ========================================================= */

:root {
  --bg-aspect: 1.3; /* 背景画像の幅÷高さ */
}


/* スクロール禁止 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}



.cover-text{
    background-color: rgba(255, 255, 255, 0.0);  
}

.footer-credit{
    background: transparent;
}

/* on the white wall for humberger */
.site-title {
    display:none;
}

/* メイン領域 */
.index-main {
    position: relative;
    height: 100vh;
    width: 100%;
  /* 背景画像 */
    background-image: url('../20260226_wallpaper.jpg');
    background-size: auto 100%; /* 高さを100%に固定、幅は自動調整 */
    background-repeat: no-repeat;
    background-position: center top; /* 横方向の切り出しは中央、縦は上端基準 */
    background-color: #ffffff;
}



/* モバイル用 */
@media (max-width: 600px) {
  .index-main {
    background-image: url('../20260226_wallpaper_s.jpg'); /* 小さい画像 */
  }
}



/* 作品表示ステージ */
.index-stage {
    position: relative;
  height: 100vh;
  width: calc(100vh * var(--bg-aspect)); /* 背景画像の幅に合わせる */
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden; /* はみ出し部分を切る */
}


.index-stage img {
  position: absolute;
  width: auto;
  max-width: none;
  border-radius: 2px;
}

/* 表示されるサムネイル */
.index-work{
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  
  /* 初期状態 */
  opacity: 1;
  /*transform: translate(-50%, -50%) translateY(var(--ty)) scale(var(--s));*/

  /* アニメーションのための準備 */
  transition:
    opacity 1.8s ease,
    transform 1.8s ease,
    filter 1.8s ease;
}

/* もしくは明示的に */
.index-work-inner {
    height: 21vh;
    width: auto;
    display: block;
    opacity: 1;    
    --ty: 0px;
    --s: 1.03;
    transform: translateY(var(--ty)) scale(var(--s));

    border-radius: 2px;
    box-shadow:
    -3px 4px 3px rgba(0, 0, 0, 0.12);
}


/* 壁に掛かった状態 */
.index-work-inner.visible {
  animation: hangOnWall 0.45s steps(2, end) forwards;
}


/* 消えるとき専用 \le FADE_TIME とする*/
.index-work-inner.fadeout {
    animation: fadeOut 1.0s ease forwards;
}

/* 壁に染み込むイメージ */
@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0px) brightness(1);
  }
  30% {
    opacity: 0.9;
    transform: scale(0.97) translateY(2px);
    filter: blur(2px) brightness(1.05);
  }
  60% {
    opacity: 0.5;
    transform: scale(0.92) translateY(4px);
    filter: blur(6px) brightness(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.85) translateY(8px);
    filter: blur(12px) brightness(1.4);
  }
}



@keyframes hangOnWall {
  0% {
    opacity: 0;
    --ty: 0px;
    --s: 1.03;
  }
  60% {
    opacity: 1;
    --ty: -1px;
    --s: 1.01;
  }
  100% {
    opacity: 1;
    --ty: 1px;
    --s: 1.0;
  }
}