/* ==========================================================================
   JOMONÖW — Teaser Site
   ---
   ロゴ(オープニングのホバーLottie)がレンガ(縦)パターンで並ぶ。
   タイル: W444 × H391.1299px / レンガ縦オフセット 2/5 / ロゴ W296px(タイル中央)
   SP(≤481px)は全て 1/2 (タイル222×195.565 / ロゴ148)。
   支点はロード毎に JS がランダムシフト。各ロゴはホバーで Lottie 再生。
   右端: JOMONÖW.COM | Almost Here… (Goudy 21pt・縦)
   ========================================================================== */

:root {
  --wine: #5c0b2e;
  --gold: #e1b41f;
  --tile-w: 444px;
  --tile-h: 391.1299px;
  --logo-w: 296px;
  --brick-offset: 0.4;   /* レンガ(縦) 2/5 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background-color: var(--wine);
}

html, body {
  height: 100%;
}

body {
  background-color: var(--wine);
  overflow: hidden;              /* パターンは1画面固定・スクロールなし */
  font-family: "Goudy Bookletter 1911", serif;
}

/* --------------------------------------------------------------------------
   ロゴパターン
   -------------------------------------------------------------------------- */
.teaser-pattern {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.teaser-logo {
  position: absolute;
  width: var(--logo-w);
  aspect-ratio: 148 / 130.38;    /* logo.svg viewBox 比 */
  cursor: pointer;
}

.teaser-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Lottie: キャンバス1000pxのうち有効図像は740px。
   SVGロゴと同寸に見せるため、コンテナは logo-w × 1000/740 の正方形をセル中央に配置
   (オープニング/フッターの既存実装と同じ補正)。 */
.teaser-logo .teaser-logo__lottie {
  position: absolute;
  width: calc(var(--logo-w) * 1000 / 740);
  height: calc(var(--logo-w) * 1000 / 740);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Lottie 再生中は静的 SVG を隠す */
.teaser-logo.is-playing img { visibility: hidden; }

/* --------------------------------------------------------------------------
   右端縦テキスト: JOMONÖW.COM | Almost Here…
   Goudy 21pt / 金 / 縦組み (英字は時計回り90度)
   -------------------------------------------------------------------------- */
.teaser-caption {
  position: fixed;
  top: 50%;
  right: max(calc(18px + env(safe-area-inset-right)), 18px);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Goudy Bookletter 1911", serif;
  font-size: 21px;
  letter-spacing: -0.03em;       /* --ls-display (Goudy用) */
  color: var(--gold);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   SP (≤481px): 全寸法 1/2
   -------------------------------------------------------------------------- */
@media (max-width: 481px) {
  :root {
    --tile-w: 222px;
    --tile-h: 195.565px;
    --logo-w: 148px;
  }
  .teaser-caption {
    font-size: 18px;             /* mock SP比率準拠 (21の約0.86。1/2だと小さすぎるため可読を優先) */
    right: max(calc(14px + env(safe-area-inset-right)), 14px);
  }
}