/* ============================================================
   launch.css — トップの起動演出（見本）。
   起動ログのあとに開く作品のウィンドウと、代表作品カードへしまう動き。
   動かすのは js/launch.js。
   ============================================================ */

.hero { position: relative; }

/* ヒーローの右の空いている場所。コンテナの右端をこえて、画面の端近くまで使う */
.launch-stage {
  position: absolute;
  top: 170px;
  left: 60%;
  right: calc((100% - 100vw) / 2 + 24px);
  max-width: 600px;
  aspect-ratio: 555 / 470;
  z-index: 15; /* 本文より手前、promptbar（19）より奥 */
}

.lw-slot { position: absolute; }
/* ウィンドウの大きさ＝映像（16:9）＋タイトルバー */
.lw-slot::before { content: ""; display: block; padding-top: calc(56.25% + 32px); }
.lw-slot.s-wiki { left: 36%; top: 0; width: 64%; }
.lw-slot.s-flip { left: 0; top: 34%; width: 76%; }
.lw-slot.s-git { left: 54%; top: 63%; width: 46%; }
.lw-slot.s-git::before { padding-top: 69.44%; } /* 画面写真 1479×1027。タイトルバーは写真に写っている */

.lw {
  --tb: 32px;
  --fold: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
}
.lw.is-closed,
.lw.is-docked { visibility: hidden; }

.lw-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(8px - 6px * var(--fold));
  background: #000;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, calc(0.5 * (1 - var(--fold)))),
    0 0 0 1px rgba(255, 255, 255, calc(0.1 * (1 - var(--fold))));
}

.lw-bar {
  flex: 0 0 var(--tb);
  height: var(--tb);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  overflow: hidden;
  background: var(--chrome-bg);
  color: var(--chrome-text);
  font: 12px "Segoe UI", var(--prose), system-ui, sans-serif;
  opacity: calc(1 - var(--fold));
}
.lw-bar img { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.lw-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-caps { display: flex; flex-shrink: 0; color: var(--chrome-icon); }
.lw-caps span { display: grid; place-items: center; width: 40px; height: 32px; }
.lw-caps svg { width: 10px; height: 10px; }

.lw-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.lw-view video,
.lw-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lw-view img.top { object-position: center top; }

/* 代表作品カード：ウィンドウが着くまでは中身を空けておく */
.tframe-imgwrap video {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04) brightness(0.96);
}
.tframe-imgwrap img.top { object-position: center top; }
.featured-item.is-awaiting .tframe-imgwrap > img,
.featured-item.is-awaiting .tframe-imgwrap > picture > img,
.featured-item.is-awaiting .tframe-imgwrap > video { visibility: hidden; }

/* 手触りを実装する：落ちてくる間はつかめない */
.hero h1 .accent.is-dropping { transition: none; pointer-events: none; }

/* 横幅が足りないときは、ヒーローの下に並べる */
@media (max-width: 1099px) {
  .launch-stage {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 640px;
    margin: -30px 0 64px;
  }
}

/* スマホでは一枚だけ */
@media (max-width: 699px) {
  .launch-stage { aspect-ratio: auto; }
  .lw-slot.s-wiki,
  .lw-slot.s-git { display: none; }
  .lw-slot.s-flip { position: relative; left: 0; top: 0; width: 100%; }
}