/* ================================================================
   Agnos — Components
   再利用可能な部品: Brand / Buttons / Links / Reveal
================================================================ */

/* ---- Brand (Logo) ----
   Agnos-RGB.svg はキャンバス全体（viewBox 0 0 595.28 841.89）、
   グリフは中段（y 388.66..462.05）に配置されている。
   CSS で窓を作って中身をクリップ表示する。
   --h カスタムプロパティでグリフ実高を指定（nav・フッター共通: 20px）。
*/
.brand{display:inline-flex;align-items:center;gap:14px}
.brand .logo{
  --h: 20px;
  display:block;
  width: calc(var(--h) * 419.9 / 73.39);
  height: var(--h);
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}
.brand .logo img{
  position:absolute;
  display:block;
  width:  calc(var(--h) * 595.28 / 73.39);
  height: calc(var(--h) * 841.89 / 73.39);
  left:   calc(var(--h) * -71.5 / 73.39);
  top:    calc(var(--h) * -388.66 / 73.39);
  max-width:none;
}
.brand-tag{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:11px;
  letter-spacing:.3em;
  color:currentColor;
  opacity:.55;
  text-transform:uppercase;
  line-height:1;
  padding-left:14px;
  border-left:1px solid currentColor;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:18px;padding:20px 36px;font-size:12px;letter-spacing:.24em;font-weight:400;
  border:1px solid var(--ink); color:var(--ink); background:transparent;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{background:var(--ink);color:#fff}
.btn .arrow{display:inline-block;width:24px;height:1px;background:currentColor;position:relative;transition:width .35s}
.btn:hover .arrow{width:32px}
.btn-fill{background:var(--ink);color:#fff}
.btn-fill:hover{background:transparent;color:var(--ink)}
.btn-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}
/* ティールアクセント版（ヘッダーCTAと統一・角丸6px）。VOICE導線等のサブCTAに */
.btn-voice{background:#63E1E5;color:#1f3a3b;border-color:#63E1E5;border-radius:6px}
.btn-voice:hover{background:#4fd0d4;border-color:#4fd0d4;color:#1f3a3b}

.link-arrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.22em;
  padding:8px 0;border-bottom:1px solid currentColor;
  transition:gap .35s,color .35s;
}
.link-arrow:hover{gap:24px}
.link-arrow .arrow{display:inline-block;width:28px;height:1px;background:currentColor}

/* ---- Reveal Animation ---- */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{opacity:1;transform:none}

/* ---- Placeholder (画像未投入時のフォールバック) ----
   design-source/assets/sub.css から移植。配下ページ Phase 4 でも再利用。
*/
.ph{
  background:var(--bg-sub); position:relative;
  display:flex; align-items:center; justify-content:center;
  color:var(--mute);
  font-family:var(--serif-en); font-style:italic;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
}
.ph::before{
  content:""; position:absolute; inset:14px;
  border:1px dashed var(--line);
}
.ph[data-label]::after{ content:attr(data-label); position:relative; z-index:1; }
.ph.tall   {aspect-ratio:3/4}
.ph.wide   {aspect-ratio:16/9}
.ph.sq     {aspect-ratio:1/1}
.ph.fb     {aspect-ratio:4/5}
.ph.cinema {aspect-ratio:21/9}

/* ---- Coming Soon（CPT未投稿セクション共通） ----
   開発用語・説明文は本番表示しない。エンブレム + 短い日本語1文（任意でサブ文）。
*/
.coming-soon{
  max-width:680px;margin:0 auto;text-align:center;
  padding:80px 24px;
  border:1px solid var(--line-soft);
  background:#fff;
}
.coming-soon-mark{
  font-family:var(--serif-en);font-size:11px;letter-spacing:.36em;
  color:var(--mute);text-transform:uppercase;
  margin-bottom:36px;
}
.coming-soon-text{
  font-family:var(--serif-jp);font-weight:400;
  font-size:clamp(18px,2vw,22px);line-height:2;
  color:var(--ink);letter-spacing:.06em;
  margin-bottom:28px;text-wrap:balance;
}
.coming-soon-text:last-child{margin-bottom:0}
.coming-soon-sub{
  font-size:12.5px;line-height:2;
  color:var(--ink-3);letter-spacing:.04em;
}

@media (max-width: 880px){
  .btn{padding:16px 28px}
}