/*
 * フライヤーのレイアウト言語を移植した再利用コンポーネント
 * （移植元: prototypes/hero-demo/src/styles/components.css）。
 * - 額縁フレーム / DAY タブ / 藍金の二重罫線 / LIVE バッジ
 * ヒーロー・情報セクションの両方から共有する。
 */

/* ---------- 額縁フレーム ---------- */
/* 外周の焦茶額縁は概念画像に無く、mos が「謎の茶色い帯」と指摘したため撤去（#31-5） */
/* 旧「外周の焦茶額縁」(.wyyc-page-frame: position:fixed; inset:0; border) は
   ページ全周に上下左右の隙間を生む正体だったため #31 で display:none 化し、
   本イテレーションで要素・スタイル・トークンごと撤去した（再発防止）。 */

/* ---------- タブ型ラベル ---------- */
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 1.15em 0.45em 0.85em;
  background: var(--color-ai-flyer);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-tab);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px 999px 999px 2px;
}

/* 暗いヒーロー上に置くタブ。金のヘアラインで縁を起こし、額縁の金副線と呼応させる */
.tab--hero {
  background: var(--color-ai-flyer-deep);
  box-shadow: inset 0 0 0 1px rgb(226 187 104 / 0.55);
}

/* ---------- 藍×金の二重罫線 ---------- */
.double-rule {
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  margin: 0;
  background:
    linear-gradient(var(--color-ai-flyer) 0 0) left top / 100% 2px no-repeat,
    linear-gradient(var(--color-gold-flyer) 0 0) left bottom / 100% 1px no-repeat;
}

/* ---------- LIVE バッジ ---------- */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28em 0.65em;
  background: var(--color-accent-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 2px;
}

.badge-live::before {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: #fff;
  animation: badge-live-pulse 1.8s var(--ease-out-expo) infinite;
}

@keyframes badge-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge-live::before {
    animation: none;
  }
}

/* ---------- コンテナ ---------- */
.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* ---------- ボタン（藍×金の二重罫を核にした共通ボタン） ---------- */
.btn {
  --btn-fg: var(--color-kinari);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72em 1.4em;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: var(--btn-fg);
  transition: color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo);
}
.btn__arrow {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(3px);
}

/* 主ボタン: 金充填。地に金グラデが左から満ちる */
.btn--solid {
  --btn-fg: var(--color-sumi);
  background: transparent;
  border: 1.5px solid var(--color-gold);
  box-shadow: inset 0 0 0 1px var(--color-ai-bright);
  color: var(--color-gold-light);
}
.btn--solid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light));
  transform: translateX(-102%);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  color: var(--color-sumi);
  box-shadow: inset 0 0 0 1px var(--color-ai-bright), 0 0 24px rgb(216 177 96 / 0.32);
}
.btn--solid:hover::before,
.btn--solid:focus-visible::before {
  transform: translateX(0);
}

/* 副ボタン: 生成りの細枠ゴースト */
.btn--ghost {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--color-kinari);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

/* 白地の情報面で使うゴースト（藍の細枠。dark サーフェス用 .btn--ghost の反転版） */
.btn--ghost-dark {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-ai-flyer) 45%, transparent);
  color: var(--color-ai-flyer-deep);
}
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  border-color: var(--color-ai-flyer);
  color: var(--color-ai-flyer);
}

/*
 * 外部リンクの↗マーク。Unicode ↗（U+2197）は環境により emoji タイル化・豆腐化するため、
 * wyyc_icon('arrow-outward') が返すインラインSVG（currentColor塗り）で描く。
 * FB0716（mos: 小さすぎる指摘）: 0.66em → 1.2em へ拡大。
 */
.ext-mark {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.35em;
  vertical-align: -0.18em;
  color: currentColor;
  opacity: 0.85;
  flex: none;
}

/* 白地の情報面で使う金充填ボタン（TICKETS） */
.btn--gold {
  --btn-fg: var(--color-sumi);
  border-color: var(--color-gold-flyer);
  box-shadow: none;
  background: linear-gradient(120deg, var(--color-gold-dark), var(--color-gold-flyer));
  color: var(--color-sumi);
}
.btn--gold::before {
  background: linear-gradient(120deg, var(--color-gold-flyer), #f0d9a6);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  color: var(--color-sumi);
  box-shadow: 0 8px 24px rgb(18 53 112 / 0.18);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ---------- セクション見出し（英字大＋和文小の二層キッカー） ---------- */
.section-kicker {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.section-kicker__en {
  font-family: var(--font-display);
  font-size: var(--text-section-title-en);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  /* B-5: line-height:1 は狭幅で2行折返しになったとき行間が密着して見えた。1.08へ（単一行時の見た目はほぼ不変） */
  line-height: 1.08;
}
.section-kicker__ja {
  font-family: var(--font-jp-serif); /* 和文サブ見出しも明朝でトンマナ統一 */
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--color-kinari) 66%, transparent);
}
/* 白情報面での配色反転 */
.section-kicker--dark .section-kicker__en {
  color: var(--color-ai-flyer);
}
.section-kicker--dark .section-kicker__ja {
  color: color-mix(in srgb, var(--color-ai-flyer-deep) 60%, transparent);
}

/* ---------- テキストリンク（string風の下線＋矢印） ---------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  /* FB0712 総重量削減: JAテキスト（「競技ルール」等）を含むリンクなのでZen Kaku Gothic New
     500の実使用箇所になっていた。700へ寄せてウェイト数を400/700の2種へ絞る。 */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  position: relative;
}
.text-link__arrow {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.text-link:hover .text-link__arrow,
.text-link:focus-visible .text-link__arrow {
  transform: translateX(4px);
}
.text-link--dark {
  color: var(--color-ai-flyer);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn__arrow,
  .text-link__arrow {
    transition: none;
  }
}