/* お知らせ「マスコットは『つなぼし』に決まりました！」だけで使う見た目（記事の assets: tsunaboshi で読み込む）
   サムネイルの中の置き場（.tsuna-hero-dock）・設定の箱（.tsuna-controls、表示しない）・本文の横のとまり場（.tsuna-spot）・
   飛んでいるつなぼし（.tsuna-flyer）・三面図（.tsuna-views）
   動かすのは article.js。動かせたら html に .tsuna-live、飛べたら .tsuna-fly が付く。どちらも付かなければ、ふつうの記事のまま */

.tsuna-host { position: relative; }
.tsuna-host .article__text h2 { clear: both; }

/* ---------- サムネイル ---------- */
.tsuna-hero { position: relative; }
.tsuna-hero-dock { position: absolute; aspect-ratio: 1; pointer-events: none; }
/* つなぼしを抜いた絵。サムネイルの上に重ね、動くつなぼしと同時に出す */
.tsuna-hero-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.tsuna-live .tsuna-hero-plate { opacity: 1; }

/* ---------- 設定の箱（サムネイルの絵・置き場などを article.js に渡すだけ。表示はしない） ----------
   表情のボタンと説明の文は出さない（委員長 2026-10-09「表示なくそう。機能はあっても、表示はしない感じで」）。
   つなぼしをさわると表情が変わる・マウスのほうを向く・本文の横へ飛ぶ、はそのまま */
.tsuna-controls { display: none; }

/* ---------- 本文の横のとまり場（飛べるときだけ場所をあける） ----------
   とまり場は、すぐ後ろの段落の横に浮かせる。段落が短くても、次の段落はとまり場の下から始める（段落の終わりで回り込みを止める） */
.tsuna-spot { display: none; }
.tsuna-fly .tsuna-spot {
  position: relative;
  display: block;
  clear: both;
  float: right;
  width: 150px;
  aspect-ratio: 1;
  margin: 4px -6px 8px 20px;
}
.tsuna-fly .tsuna-spot[data-side="left"] { float: left; margin: 4px 20px 8px -6px; }
.tsuna-spot + p { margin-top: 20px; }
.tsuna-fly .tsuna-spot + p { margin-top: 0; margin-bottom: 22px; }
.tsuna-fly .tsuna-spot + p::after { content: ""; display: block; clear: both; }
/* 足もとの影。つなぼしがいるとまり場にだけ出す（article.js が .is-here を付け外しする） */
.tsuna-fly .tsuna-spot::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 1%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 111, 183, 0.22), rgba(43, 111, 183, 0));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.tsuna-fly .tsuna-spot.is-here::after { opacity: 1; transform: none; }

/* ---------- 飛んでいるつなぼし ---------- */
.tsuna-flyer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  opacity: 0;
  transform-origin: 0 0;
  will-change: transform;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.45s var(--ease);
}
.tsuna-live .tsuna-flyer { opacity: 1; }

/* ---------- 三面図 ---------- */
.tsuna-views { clear: both; margin: 28px 0; }
.tsuna-views__frame { padding: 22px 16px 14px; border-radius: 14px; background: linear-gradient(180deg, #eef4fb 0%, #e0ebf8 100%); }
.tsuna-views img { display: block; width: 100%; height: auto; }
.tsuna-views figcaption { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--muted); text-align: center; }

@media (max-width: 640px) {
  .tsuna-fly .tsuna-spot { width: 104px; margin: 4px -4px 6px 12px; }
  .tsuna-fly .tsuna-spot[data-side="left"] { margin: 4px 12px 6px -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .tsuna-hero-plate, .tsuna-flyer { transition: none; }
}