/* =====================================================================
   lisas atelier ― #atelier 今のサイトの HERO（atelier/style.css）
   HERO担当。読み込む順：tokens.css → base.css → この style.css
   - アトリエの部屋の絵（切らずに全部・--ratio-hero）を、上の帯の下から画面いっぱいに1枚。
     額18個に写真が1枚ずつ入る動きは script.js。完成した絵（filled）がいつもいちばん下にある。
   - クラスの頭は atelier-。値は tokens.css の変数だけ。
     額の座標（986×1536。今のサイトと同じ座標）と額ごとの形（--w・--h・--s・--x・--y・--m）は、
     絵から測った寸法なので index.html に数字で書いてある（アイコンの中の寸法と同じ扱い）。
   - 決まりは design.md「HERO（#atelier）の方向」「16. 動き」、karte.md「今のサイトの HERO の入れ方」。
   ===================================================================== */

/* ---------- 1. HERO の箱（高さ＝絵の高さ） ---------- */
.atelier {
  position: relative;               /* 下へのしるしの置き場所 */
  background: var(--color-bg);      /* 絵のまわり（375×667 の左右・PC の左右）はページの地 */
}

/* 絵：幅いっぱい。ただし「画面の高さ − 上の帯 − のぞき」に入りきらないときは、高さに合わせて縮めて真ん中に。
   svh：iPhone の Safari でアドレスバーが出たり消えたりしても高さが変わらない（小さいほうの画面の高さ） */
.atelier-board {
  position: relative;
  width: min(100%, calc((100vh - var(--nav-h) - var(--hero-peek)) * var(--ratio-hero)));
  width: min(100%, calc((100svh - var(--nav-h) - var(--hero-peek)) * var(--ratio-hero)));
  aspect-ratio: var(--ratio-hero);
  margin-inline: auto;
  overflow: hidden;                 /* 額の重ね（986×1536 の座標）が外へはみ出さない */
}

/* 部屋の絵（完成した絵・額が空の土台）。箱と同じ縦横比なので contain で全部 */
.atelier-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* ---------- 2. 動き（土台＋額18枚）。script が「動かす」と決めたときだけ出す ---------- */
/* ふだんは出さない：土台と額の写真は読み込まれない（loading="lazy" で、出ていないため）。
   script が data-atelier-state="play" にしたら、完成した絵の上に土台と額を重ねる */
.atelier-play {
  position: absolute;
  inset: 0;
  display: none;
}
.atelier[data-atelier-state="play"] .atelier-play,
.atelier[data-atelier-state="done"] .atelier-play { display: block; }

/* 額の重ね：今のサイトと同じ 986×1536 の座標で置き、絵の幅に合わせて縮める（--atelier-k は script が入れる：絵の幅 ÷ 986） */
.atelier-frames {
  position: absolute;
  left: 0;
  top: 0;
  width: 986px;
  height: 1536px;
  transform-origin: 0 0;
  transform: scale(var(--atelier-k, 0));
  pointer-events: none;
}

/* 額1つ：写真の中の「見せる所」（--w×--h）を、額の形（少し傾いた四角）に合わせる（--m：絵から測った matrix3d）。
   入る前は下から上へ幕が上がる（clip-path の上の値 100%→0）・透明から（opacity 0→1）。動かすのは script */
.atelier-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  transform-origin: 0 0;
  transform: var(--m);
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  opacity: 0;
}
.atelier[data-atelier-state="done"] .atelier-frame {
  -webkit-clip-path: none;
  clip-path: none;
  opacity: 1;
}
/* 写真（正方形）：一辺 --s、左上を (--x, --y) にずらして、見せる所だけが額に入る。
   ほかの向きの写真に替えても、まず正方形に切る（cover）ので崩れない。写真に色・影・角を付けない */
.atelier-frame > img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  max-width: none;
  object-fit: cover;
}
/* 額の手前の小さな絵（M1 の額の前のペン立て）。額の写真の上に重ねる。場所は index.html */
.atelier-fore {
  position: absolute;
  max-width: none;
}

/* ---------- 3. 下へのしるし（#top へのふつうのリンク。絵の下の端の真ん中に浮いた丸いボタン） ---------- */
/* 動かさない（跳ねる・点滅する動きはつけない）。絵の上に重なるので、地は --color-surface・影 --shadow-2 */
.atelier-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  z-index: 1;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: 0 var(--space-4) 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-btn);
  text-decoration: none;
  white-space: nowrap;
}
.atelier-cue svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* ---------- 4. 動きを控えめにする設定：はじめから完成した絵だけ（script も matchMedia で見る） ---------- */
@media (prefers-reduced-motion: reduce) {
  .atelier[data-atelier-state="play"] .atelier-play,
  .atelier[data-atelier-state="done"] .atelier-play { display: none; }
}

/* ---------- 5. PC・タブレット（768px〜）：絵は高さに合わせて真ん中。左右は地の色、額に入った絵のように角と影 ---------- */
@media (min-width: 768px) {
  .atelier { padding-top: var(--space-4); }
  .atelier-board {
    width: min(100%, calc((100vh - var(--nav-h) - var(--hero-peek) - var(--space-4)) * var(--ratio-hero)));
    width: min(100%, calc((100svh - var(--nav-h) - var(--hero-peek) - var(--space-4)) * var(--ratio-hero)));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
  }
}