/*------------------------------------------------------------------------------
ABOUT
mobile.css / style.css の共通パーツとトークンを前提に、ABOUT固有のレイアウトと演出だけを定義する。

「境界を越える」構成：中央に光る金の境界線（世界と世界の継ぎ目）が左右に開き、その向こうの景色が現れる。
- STORY: 下層ヘッダーの下で光る境界線が開き、夢の世界が現れる。読んでいる段落を灯し、
         三つ目の段落で翳りの世界へ塗り替わり、読み終えると境界線へ閉じて次へ続く
- FEATURE: 特徴ごとに、せり上がりながら境界線から景色が開き、本文がその上を流れる
- GUIDE: 最初に読む本編（EPISODE）を、境界線から開く大きな入口にする

演出はスクロール量に合わせて進むだけで、自動で再生される待ち時間はない。
動かすのは transform と opacity だけ（js/about.js が書き込む）。

レイアウトの切り替え条件（about.php の画像の sizes と揃えている）
- 縦長構図（初期値）
- 横長構図: (min-width: 769px) and (orientation: landscape), (min-width: 1200px)
------------------------------------------------------------------------------*/

.about {
  --about-gutter: max(6vw, 20px);
  --about-text: clamp(15px, var(--lv-font-size-md), 18px);
  --about-story-text: clamp(16px, 4.3vw, 18px);
  --about-ease: var(--lv-ease-out);
  /* 景色の高さ（ブラウザのバーが隠れたときの高さ）と、文字を置く安全な高さ */
  --about-stage-h: 100vh;
  --about-safe-h: 100vh;
  /* STORY の装飾線の位置（本文の左端からの距離）と幅、本文の字下げ */
  --about-seam-x: 7px;
  --about-seam-w: 12px;
  --about-indent: 34px;
  position: relative;
  padding-bottom: clamp(120px, 20vh, 220px);
  /* sticky を妨げない clip で、装飾のはみ出しによる横スクロールを防ぐ */
  overflow-x: clip;
  color: var(--lv-color-white);
}
@supports (height: 100svh) {
  .about {
    --about-stage-h: 100lvh;
    --about-safe-h: 100svh;
  }
}

/* 日本語の文節で折り返す（対応ブラウザのみ） */
.about .text--lower {
  word-break: auto-phrase;
}

/* テーマ共通の *:focus { outline: unset } に代わるフォーカス表示 */
.about a:focus-visible {
  border-radius: var(--lv-radius-soft);
  box-shadow: 0 0 0 2px var(--lv-color-accent-gold);
}

/*------------------------------------------------------------------------------
見出し（中央揃えの扉）：共通の .subtitle--lower・.title--lower を中央に置く
------------------------------------------------------------------------------*/
.about-title {
  position: relative;
  z-index: 1;
  padding: 0 var(--about-gutter);
  text-align: center;
}
.about-title__label.subtitle--lower {
  justify-content: center;
  margin-bottom: var(--lv-space-md);
}
.about-title__label.subtitle--lower::before,
.about-title__label.subtitle--lower::after {
  flex: 0 0 auto;
  width: clamp(36px, 11vw, 150px);
  max-width: none;
}
.about-title__label.subtitle--lower::before {
  content: "";
  height: 1px;
  background: linear-gradient(
    270deg,
    var(--lv-color-accent-gold-soft),
    transparent
  );
}
.about-title__heading.title--lower {
  font-size: clamp(30px, 8.6vw, 44px);
  line-height: 1.4;
  letter-spacing: 0.12em;
}
.about-title__lead {
  max-width: 36em;
  margin: var(--lv-space-lg) auto 0;
  color: var(--lv-color-text-soft);
  font-size: var(--about-text);
  line-height: var(--lv-line-relaxed);
}

/*------------------------------------------------------------------------------
景色の舞台と、境界の裂け目
舞台は画面に貼り付き（sticky）、本文はその上を流れる
------------------------------------------------------------------------------*/
/* 上下の縁は地のテクスチャへ溶かす（せり上がる間・去る間に景色の端が直線で見えないように） */
.about-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: var(--about-stage-h);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}
/* 本文は舞台の上に重ねる（負の余白は舞台ではなく本文に付ける。
   舞台に付けると、その分だけ貼り付く範囲が延び、次の区間まで景色が残るため） */
.about-stage + * {
  margin-top: calc(var(--about-stage-h) * -1);
}
.about-rift,
.about-rift__view,
.about-rift__inner,
.about-rift__zoom,
.about-rift__scrim {
  position: absolute;
  inset: 0;
}
/* 裂け目の幅は外枠の scaleX、中身は同じ倍率で戻して絵を歪ませない（どちらも JS が書き込む）。
   書き込まれる前は閉じた状態（JS が無い場合は inc/setup/enqueue.php の noscript 用スタイルで開く） */
.about-rift__view {
  overflow: hidden;
  transform: scaleX(0.004);
}
.about-rift__inner {
  transform: scaleX(250);
}
.about-rift__zoom picture {
  display: block;
  height: 100%;
}
.about-rift__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--position, 50% 50%);
}

/* 裂け目の縁：開くにつれて左右へ離れていく二本の金の線 */
.about-rift__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.about-rift__edge::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--lv-color-accent-gold) 16%,
    #f3dcae 50%,
    var(--lv-color-accent-gold) 84%,
    transparent
  );
  box-shadow:
    0 0 14px 1px rgba(var(--lv-gold-rgb), 0.7),
    0 0 46px 6px rgba(var(--lv-gold-rgb), 0.22);
}
/* 閉じているときの光る境界線 */
.about-rift__core {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--lv-color-accent-gold) 22%,
    #f7e6c2 50%,
    var(--lv-color-accent-gold) 78%,
    transparent
  );
  box-shadow:
    0 0 16px 2px rgba(var(--lv-gold-rgb), 0.75),
    0 0 70px 14px rgba(var(--lv-gold-rgb), 0.2);
  transform-origin: 50% 50%;
}
/* 境界線の向こうから漏れる光 */
.about-rift__core::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: clamp(160px, 24vw, 320px);
  background: radial-gradient(
    closest-side,
    rgba(var(--lv-gold-rgb), 0.16),
    rgba(var(--lv-gold-rgb), 0.05) 55%,
    rgba(var(--lv-gold-rgb), 0)
  );
  transform: translateX(-50%);
}
.about-rift__core::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background-color: var(--lv-color-accent-gold);
  box-shadow: 0 0 14px 3px rgba(var(--lv-gold-rgb), 0.8);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 閉じた境界線から立ちのぼる光の粒（STORY の入口だけ。開くと消え、JS が .is-open で止める） */
.about-rift__motes {
  position: absolute;
  top: 16%;
  bottom: 22%;
  left: 50%;
  width: clamp(120px, 20vw, 260px);
  transform: translateX(-50%);
}
.about-rift__motes i {
  position: absolute;
  bottom: 0;
  left: var(--x, 50%);
  width: 3px;
  height: 3px;
  border-radius: var(--lv-radius-circle);
  background-color: #f3dcae;
  box-shadow: 0 0 6px 1px rgba(243, 220, 174, 0.75);
  opacity: 0;
}
.about-rift__motes i:nth-child(1) { --x: 46%; --d: 7.2s; --t: 0s; --drift: -14px; }
.about-rift__motes i:nth-child(2) { --x: 53%; --d: 8.6s; --t: -2.1s; --drift: 18px; }
.about-rift__motes i:nth-child(3) { --x: 38%; --d: 9.4s; --t: -4.4s; --drift: -22px; }
.about-rift__motes i:nth-child(4) { --x: 61%; --d: 7.8s; --t: -1.2s; --drift: 12px; }
.about-rift__motes i:nth-child(5) { --x: 49%; --d: 10.2s; --t: -6.3s; --drift: 26px; }
.about-rift__motes i:nth-child(6) { --x: 31%; --d: 8.9s; --t: -3.5s; --drift: -10px; }
.about-rift__motes i:nth-child(7) { --x: 68%; --d: 9.8s; --t: -7.6s; --drift: -18px; }
.about-rift__motes i:nth-child(8) { --x: 55%; --d: 7.5s; --t: -5.1s; --drift: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .about.is-ready .about-rift__motes i {
    animation: about-mote var(--d) linear var(--t) infinite;
  }
  .about.is-ready .about-rift.is-open .about-rift__motes i,
  .about.is-ready .about-rift.is-asleep .about-rift__motes i {
    animation-play-state: paused;
  }
}
@keyframes about-mote {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  18% {
    opacity: 0.9;
  }
  72% {
    opacity: 0.45;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), -32vh, 0);
  }
}

/* 重なっているもう一つの景色：外枠を右へ、中身を同じだけ左へ動かすと、絵は動かずに境界線だけが横へ進む */
.about-rift__other {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translate3d(50%, 0, 0);
}
.about-rift__other-inner {
  position: absolute;
  inset: 0;
  transform: translate3d(-50%, 0, 0);
}
.about-rift__other::before,
.about-rift__other::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
}
.about-rift__other::before {
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--lv-color-accent-gold) 22%,
    var(--lv-color-accent-gold) 78%,
    transparent
  );
  box-shadow: 0 0 14px rgba(var(--lv-gold-rgb), 0.7);
}
.about-rift__other::after {
  top: 50%;
  width: 9px;
  height: 9px;
  background-color: var(--lv-color-accent-gold);
  box-shadow: 0 0 12px rgba(var(--lv-gold-rgb), 0.9);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* 同じ土地のもう一つの世界（FEATURE 01）：同じ地図を冷たい色で重ねる */
.about-rift--overlap .about-rift__other .about-rift__image {
  filter: hue-rotate(185deg) saturate(0.55) brightness(1.3) contrast(1.05);
}

.about.is-enhanced .about-rift__view,
.about.is-enhanced .about-rift__inner,
.about.is-enhanced .about-rift__zoom,
.about.is-enhanced .about-rift__edge,
.about.is-enhanced .about-rift__core,
.about.is-enhanced .about-rift__other,
.about.is-enhanced .about-rift__other-inner,
.about.is-enhanced .about-rift__scrim {
  will-change: transform, opacity;
}

/*------------------------------------------------------------------------------
STORY
------------------------------------------------------------------------------*/
.about-story {
  position: relative;
}
/* 縦長構図（スマートフォンなど）では、切り替わる前も後も景色の右寄りを見せる
   （行列の先の塔と、切り替わったあとの月が入る位置。右端に合わせると月が外れる）。横長構図では中央 */
.about-rift--story .about-rift__image {
  --position: 80% 50%;
}
/* 景色を沈めて文字を読みやすくする（中央ほど暗く、上下は地のテクスチャへ溶かす） */
.about-rift--story .about-rift__scrim {
  background:
    linear-gradient(
      180deg,
      rgba(var(--lv-navy-rgb), 0.85) 0%,
      rgba(var(--lv-navy-rgb), 0) 22%,
      rgba(var(--lv-navy-rgb), 0) 72%,
      rgba(var(--lv-navy-rgb), 0.9) 100%
    ),
    radial-gradient(
      ellipse 62% 70% at 50% 54%,
      rgba(var(--lv-navy-rgb), 0.72),
      rgba(var(--lv-navy-rgb), 0.38) 70%,
      rgba(var(--lv-navy-rgb), 0.3)
    );
}
.about-story__content {
  position: relative;
  z-index: 1;
}
/* 境界線が開き、扉の見出しが現れるまでの区間（何度も見る人の妨げにならないよう、1画面ほどに抑える） */
.about-story__prelude {
  height: calc(var(--about-stage-h) * 1.15);
}
.about-title--story {
  position: sticky;
  top: calc(var(--about-safe-h) * 0.5 - 2.4em);
}
/* 扉の見出しは境界線が開いてから現れるため、読み込み直後（JS が状態を描く前）から隠しておく
   （先に表示されると、一瞬映り込んでから消えてしまう）。
   JS が動かなかった場合は、少し待ってから表示する（JS が無効な場合は inc/setup/enqueue.php の noscript 用スタイルで表示） */
@media (prefers-reduced-motion: no-preference) {
  .about-title--story {
    opacity: 0;
  }
  .about:not(.is-enhanced) .about-title--story {
    animation: about-fallback-in 0.8s ease 2.5s both;
  }
}
@keyframes about-fallback-in {
  to {
    opacity: 1;
  }
}
.about-title--story .about-title__heading.title--lower {
  color: var(--lv-color-white);
  text-shadow: 0 0 24px rgba(var(--lv-navy-rgb), 0.9);
}
.about-story__body {
  /* 装飾線の両端の飾り（img/line.webp の上下 250px を、線の幅に合わせて縮めた高さ） */
  --about-finial: calc(var(--about-seam-w) * 250 / 70);
  position: relative;
  isolation: isolate;
  width: min(100% - 2 * var(--about-gutter), calc(33em + var(--about-indent)));
  margin: 0 auto;
  padding-left: var(--about-indent);
  padding-bottom: var(--about-finial);
  font-size: var(--about-story-text);
  line-height: 2.1;
  text-shadow: 0 0 18px rgba(var(--lv-navy-rgb), 0.85);
}
.about-story__coda {
  height: calc(var(--about-stage-h) * 0.55);
}

/* 装飾線：共通の装飾線（img/line.webp）を、両端の飾りの形を保ったまま本文の長さに伸ばす。
   読み進めた分だけ、上から金色に灯る（js/about.js が外枠と中身を逆向きに動かして見せる範囲を広げる） */
.about-story__seam {
  position: absolute;
  top: calc(1.05em - var(--about-finial));
  bottom: 0;
  left: calc(var(--about-seam-x) - var(--about-seam-w) / 2 + 0.5px);
  width: var(--about-seam-w);
  pointer-events: none;
}
.about-story__seam::before,
.about-story__seam-lit {
  content: "";
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: var(--about-finial) 0;
  border-image: url(../img/line.webp) 250 0 fill / var(--about-finial) 0 stretch;
}
.about-story__seam::before {
  opacity: 0.35;
}
/* 灯った部分の光が切れないよう、見せる範囲の枠は左右に広げておく */
.about-story__seam-fill {
  position: absolute;
  top: 0;
  right: -12px;
  bottom: 0;
  left: -12px;
  overflow: hidden;
}
.about-story__seam-lit {
  inset: 0 12px;
  filter: drop-shadow(0 0 5px rgba(var(--lv-gold-rgb), 0.55));
}

/* 読んでいる段落の後ろに灯る明かり（js/about.js が段落の中心へ動かす） */
.about-story__glow {
  position: absolute;
  top: 0;
  left: -18%;
  z-index: -1;
  width: 136%;
  height: 16em;
  margin-top: -8em;
  background: radial-gradient(
    closest-side,
    rgba(var(--lv-gold-rgb), 0.22),
    rgba(var(--lv-gold-rgb), 0.09) 52%,
    rgba(var(--lv-gold-rgb), 0) 100%
  );
  opacity: 0;
  pointer-events: none;
}

.about-story__beat {
  position: relative;
  margin: 0;
}
.about-story__beat + .about-story__beat {
  margin-top: 2.4em;
}
/* 段落の目印（装飾線上の菱形） */
.about-story__beat::after {
  content: "";
  position: absolute;
  top: 1.05em;
  left: calc(var(--about-seam-x) - var(--about-indent) + 0.5px);
  width: 9px;
  height: 9px;
  border: 1px solid var(--lv-color-accent-gold);
  background-color: var(--lv-color-navy);
  transform: translate(-50%, -50%) rotate(45deg);
}

/*------------------------------------------------------------------------------
区切りの線：閉じた境界線を次の見出しまでつなぐ
------------------------------------------------------------------------------*/
.about-connector {
  position: relative;
  height: clamp(100px, 18vh, 200px);
  pointer-events: none;
}
.about-connector__line {
  position: absolute;
  top: 0;
  bottom: 16px;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(
    180deg,
    var(--lv-color-accent-gold),
    var(--lv-color-accent-gold-soft)
  );
  box-shadow: 0 0 10px rgba(var(--lv-gold-rgb), 0.45);
  transform-origin: top;
}
.about-connector::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 7px;
  height: 7px;
  background-color: var(--lv-color-accent-gold);
  transform: translateX(-50%) rotate(45deg);
}

/*------------------------------------------------------------------------------
FEATURE
------------------------------------------------------------------------------*/
.about-feature__list {
  margin-top: clamp(64px, 12vh, 140px);
}
.about-feature__item {
  position: relative;
}
/* 景色を本文の側から沈める（本文が重なるほど JS が濃くする） */
.about-rift--feature .about-rift__scrim {
  background:
    linear-gradient(
      180deg,
      rgba(var(--lv-navy-rgb), 0.75) 0%,
      rgba(var(--lv-navy-rgb), 0) 20%,
      rgba(var(--lv-navy-rgb), 0) 64%,
      rgba(var(--lv-navy-rgb), 0.92) 100%
    ),
    rgba(var(--lv-navy-rgb), 0.4);
  opacity: 0.25;
}
/* 本文は景色が開ききる頃に画面の下から入ってくる（上の余白は景色が開く区間） */
.about-feature__copy {
  position: relative;
  z-index: 1;
  padding: calc(var(--about-stage-h) * 0.9) var(--about-gutter)
    calc(var(--about-stage-h) * 0.5);
  text-shadow: 0 0 18px rgba(var(--lv-navy-rgb), 0.9);
}
/* 番号（一覧の順番を見せる装飾） */
.about-feature__number {
  display: block;
  color: transparent;
  font-size: clamp(64px, 20vw, 96px);
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1px var(--lv-color-accent-gold);
  text-shadow: none;
}
.about-feature__title.title--ornament {
  width: auto;
  min-width: 0;
  margin: var(--lv-space-md) 0 var(--lv-space-lg);
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: left;
}
.about-feature__title.title--ornament::before {
  background: linear-gradient(
    90deg,
    var(--lv-color-accent-gold-soft),
    transparent 86%
  );
}
.about-feature__title.title--ornament::after {
  left: 0;
}
.about-feature__text {
  max-width: 32em;
  color: var(--lv-color-text-soft);
  font-size: var(--about-text);
  line-height: var(--lv-line-relaxed);
}
.about-feature__text p {
  margin: 0;
}
.about-feature__text p + p {
  margin-top: 1em;
}

/*------------------------------------------------------------------------------
GUIDE
------------------------------------------------------------------------------*/
.about-guide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  margin: 0 0.4em;
  color: var(--lv-color-accent-gold);
  background-color: var(--lv-color-surface-overlay);
  border-radius: var(--lv-radius-circle);
  line-height: 1;
  vertical-align: middle;
}
.about-guide__icon svg {
  width: 0.8em;
  height: 0.8em;
}
.about-guide__list {
  display: grid;
  row-gap: 14px;
  margin: clamp(56px, 10vh, 110px) var(--about-gutter) 0;
}

/* 入口：画像の上に名前を置いたリンク（枠は共通の .panel--outline） */
.about-gate {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  overflow: hidden;
  color: var(--lv-color-white);
  isolation: isolate;
  transition:
    border-color var(--lv-transition-base),
    box-shadow var(--lv-transition-base);
}
.about-guide__item--primary .about-gate {
  align-items: center;
  justify-content: center;
  min-height: calc(var(--about-safe-h) * 0.78);
  text-align: center;
}
.about-guide__item--secondary .about-gate {
  aspect-ratio: 16 / 11;
}
.about-gate__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.about-gate__media picture {
  display: block;
  height: 100%;
}
.about-gate__image,
.about-rift--gate .about-rift__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--position, 50% 50%);
  filter: saturate(0.82) brightness(0.84);
  transition:
    transform 1.4s var(--about-ease),
    filter var(--lv-transition-slow);
}
/* 文字が重なる下側を地の色に沈める */
.about-guide__item--secondary .about-gate__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(var(--lv-navy-rgb), 0.95) 0%,
    rgba(var(--lv-navy-rgb), 0.74) 34%,
    rgba(var(--lv-navy-rgb), 0.14) 70%,
    rgba(var(--lv-navy-rgb), 0.32) 100%
  );
}
.about-rift--gate .about-rift__scrim {
  background:
    radial-gradient(
      ellipse 58% 52% at 50% 56%,
      rgba(var(--lv-navy-rgb), 0.7),
      rgba(var(--lv-navy-rgb), 0.2) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--lv-navy-rgb), 0.35),
      rgba(var(--lv-navy-rgb), 0) 30%,
      rgba(var(--lv-navy-rgb), 0) 70%,
      rgba(var(--lv-navy-rgb), 0.55)
    );
}
.about-gate__body {
  position: relative;
  width: 100%;
  padding: 26px 22px 18px;
}
.about-guide__item--primary .about-gate__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 22px;
  text-shadow: 0 0 20px rgba(var(--lv-navy-rgb), 0.9);
}
.about-gate__title {
  margin: 0;
  font-size: clamp(22px, 6.6vw, 26px);
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: 0.22em;
}
.about-guide__item--primary .about-gate__title {
  padding-left: 0.3em;
  font-size: clamp(38px, 11.6vw, 52px);
  letter-spacing: 0.3em;
}
.about-gate__subtitle {
  margin: 10px 0 0;
  color: var(--lv-color-accent-gold);
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
.about-guide__item--primary .about-gate__subtitle {
  margin-top: 18px;
  font-size: clamp(18px, 5vw, 22px);
}
.about-gate__text {
  max-width: 26em;
  margin: 8px 0 0;
  color: var(--lv-color-text-soft);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.about-gate__link.button {
  margin-top: 10px;
  color: var(--lv-color-accent-gold);
  font-size: 14px;
  mix-blend-mode: normal;
}
.about-gate__link.button::after {
  width: 2.4em;
  height: 2.4em;
  flex-basis: 2.4em;
}
.about-guide__item--primary .about-gate__link.button {
  margin-top: 22px;
}

/* 入口が灯る：マウスでは重ねたとき、タッチ操作の端末では画面の中ほどに来たとき（js/about.js が .is-lit を付ける） */
.about-gate:hover,
.about-gate:focus-visible,
.about-gate.is-lit {
  box-shadow:
    0 0 0 1px var(--lv-color-accent-gold),
    0 18px 40px rgba(0, 0, 0, 0.45);
}
.about-gate:hover .about-gate__image,
.about-gate:focus-visible .about-gate__image,
.about-gate.is-lit .about-gate__image,
.about-gate:hover .about-rift__image,
.about-gate:focus-visible .about-rift__image,
.about-gate.is-lit .about-rift__image {
  filter: saturate(1) brightness(1);
  transform: scale(1.05);
}
.about-gate:hover .about-gate__link.button,
.about-gate:focus-visible .about-gate__link.button,
.about-gate.is-lit .about-gate__link.button {
  color: var(--lv-color-white);
}
.about-gate:hover .about-gate__link.button::after,
.about-gate:focus-visible .about-gate__link.button::after,
.about-gate.is-lit .about-gate__link.button::after {
  transform: translateX(0.35em);
}

/*------------------------------------------------------------------------------
演出の状態（JS が .is-enhanced を付けたときだけ）
.is-ready は最初の状態を描いたあとに付く（読み込み直後に動きが走らないように）
------------------------------------------------------------------------------*/

/* STORY：まだ読んでいない段落は沈め、読んでいる段落を灯す */
/* 沈めた段落も、本文の文字として読める濃さ（コントラスト比 4.5:1 以上）にとどめる */
.about.is-enhanced .about-story__beat {
  opacity: 0.64;
}
.about.is-enhanced .about-story__beat.is-passed {
  opacity: 0.7;
}
.about.is-enhanced .about-story__beat.is-current {
  opacity: 1;
}
.about-story__beat.is-passed::after,
.about-story__beat.is-current::after {
  background-color: var(--lv-color-accent-gold);
}
.about-story__beat.is-current::after {
  box-shadow: 0 0 14px 2px rgba(var(--lv-gold-rgb), 0.55);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.25);
}
.about.is-enhanced .about-story__seam-fill {
  transform: translate3d(0, -100%, 0);
  will-change: transform;
}
.about.is-enhanced .about-story__seam-lit {
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}
.about-story__glow.is-visible {
  opacity: 1;
}
.about.is-enhanced .about-title--story {
  will-change: transform, opacity;
}
.about.is-ready .about-story__beat {
  transition: opacity 0.9s ease;
}
.about.is-ready .about-story__beat::after {
  transition:
    background-color 0.6s ease,
    box-shadow 0.6s ease,
    transform 0.6s var(--about-ease);
}
.about.is-ready .about-story__glow {
  transition:
    transform 1.2s var(--about-ease),
    opacity 1s ease;
}
/* まだ灯っていない段落のハイライトは塗らず、灯った瞬間に一度だけ塗りを走らせる
   （塗る量そのものは main.js がスクロールに合わせて更新する） */
@media (prefers-reduced-motion: no-preference) {
  .about.is-enhanced
    .about-story__beat:not(.is-current):not(.is-passed)
    .text__bg--scroll {
    --text-bg-scroll-progress: 0% !important;
  }
  .about.is-ready .about-story__beat.is-current .text__bg--scroll,
  .about.is-ready .about-story__beat.is-passed .text__bg--scroll {
    animation: about-highlight 0.9s var(--about-ease) backwards;
  }
}
@keyframes about-highlight {
  from {
    color: var(--text-bg-scroll-color);
    background-size: 0% 100%;
  }
}

/* 区切りの線：スクロールに合わせて引かれ、引き終えると菱形が灯る */
.about.is-enhanced .about-connector__line {
  transform: scaleY(0);
  will-change: transform;
}
.about.is-enhanced .about-connector::after {
  opacity: 0;
  transform: translateX(-50%) rotate(45deg) scale(0.3);
}
.about.is-enhanced .about-connector.is-drawn::after {
  opacity: 1;
  transform: translateX(-50%) rotate(45deg);
}
.about.is-ready .about-connector::after {
  transition:
    opacity 0.5s ease,
    transform 0.6s var(--about-ease);
}

/* FEATURE の本文：景色が開いてから、番号・見出し・本文の順に浮かぶ */
.about.is-enhanced .about-feature__copy > *,
.about.is-enhanced [data-about-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}
.about.is-enhanced .about-feature__copy.is-revealed > *,
.about.is-enhanced [data-about-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
.about.is-ready .about-feature__copy > *,
.about.is-ready [data-about-reveal] {
  transition:
    opacity 1s ease,
    transform 1.3s var(--about-ease);
}
.about.is-ready .about-feature__copy > :nth-child(2) {
  transition-delay: 0.12s;
}
.about.is-ready .about-feature__copy > :nth-child(3) {
  transition-delay: 0.24s;
}
.about.is-ready [data-about-reveal] {
  transition-delay: calc(var(--i, 0) * 0.12s);
}

/* 閉じた境界線は、スクロールを待つ間かすかに明滅する（読み込み直後、下層ヘッダーの下で光る） */
@media (prefers-reduced-motion: no-preference) {
  .about.is-ready .about-rift--story .about-rift__core::after {
    animation: about-breathe 2.8s ease-in-out infinite;
  }
  .about.is-ready .about-rift--story.is-open .about-rift__core::after,
  .about.is-ready .about-rift--story.is-asleep .about-rift__core::after {
    animation-play-state: paused;
  }
}
@keyframes about-breathe {
  50% {
    opacity: 0.45;
  }
}

/*------------------------------------------------------------------------------
横長構図
------------------------------------------------------------------------------*/
@media (min-width: 769px) and (orientation: landscape), (min-width: 1200px) {
  .about {
    --about-gutter: 6vw;
    --about-text: clamp(15px, 1.12vw, 19px);
    --about-indent: 46px;
    --about-seam-x: 9px;
    --about-seam-w: 16px;
  }

  .about-title__heading.title--lower {
    font-size: clamp(40px, 3.6vw, 64px);
  }
  .about-title--story .about-title__heading.title--lower {
    font-size: clamp(46px, 4.4vw, 80px);
  }

  .about-rift--story .about-rift__image {
    --position: 50% 50%;
  }
  .about-story__body {
    --about-story-text: clamp(17px, 1.3vw, 23px);
  }
  .about-story__beat + .about-story__beat {
    margin-top: clamp(56px, 11vh, 128px);
  }

  .about-connector {
    height: clamp(130px, 24vh, 260px);
  }

  /* 本文は景色の片側に置き、その側から景色を沈める（偶数番目は左右を入れ替える） */
  .about-rift--feature .about-rift__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(var(--lv-navy-rgb), 0.7) 0%,
        rgba(var(--lv-navy-rgb), 0) 18%,
        rgba(var(--lv-navy-rgb), 0) 80%,
        rgba(var(--lv-navy-rgb), 0.85) 100%
      ),
      linear-gradient(
        var(--about-scrim-angle, 270deg),
        rgba(var(--lv-navy-rgb), 0.94) 0%,
        rgba(var(--lv-navy-rgb), 0.82) 38%,
        rgba(var(--lv-navy-rgb), 0.1) 70%,
        rgba(var(--lv-navy-rgb), 0) 100%
      );
  }
  .about-feature__item--start {
    --about-scrim-angle: 90deg;
  }
  .about-feature__copy {
    width: 50%;
    margin-left: auto;
    padding: calc(var(--about-stage-h) * 0.9) var(--about-gutter)
      calc(var(--about-stage-h) * 0.42) 4%;
  }
  .about-feature__item--start .about-feature__copy {
    margin-right: auto;
    margin-left: 0;
    padding-right: 4%;
    padding-left: var(--about-gutter);
  }
  .about-feature__number {
    font-size: clamp(96px, 9vw, 168px);
  }
  .about-feature__title.title--ornament {
    font-size: clamp(26px, 2.3vw, 42px);
  }

  .about-guide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 28px);
  }
  .about-guide__item--primary {
    grid-column: 1 / -1;
  }
  .about-guide__item--primary .about-gate {
    min-height: clamp(520px, 80vh, 880px);
  }
  .about-guide__item--secondary .about-gate {
    aspect-ratio: auto;
    min-height: clamp(320px, 46vh, 520px);
  }
  .about-gate__body {
    padding: clamp(24px, 2.4vw, 44px) clamp(24px, 2.6vw, 48px)
      clamp(18px, 1.8vw, 32px);
  }
  .about-gate__title {
    font-size: clamp(26px, 2.2vw, 40px);
  }
  .about-guide__item--primary .about-gate__title {
    font-size: clamp(56px, 6.4vw, 120px);
  }
  .about-gate__subtitle {
    font-size: clamp(16px, 1.3vw, 22px);
  }
  .about-guide__item--primary .about-gate__subtitle {
    font-size: clamp(20px, 1.8vw, 32px);
  }
  .about-gate__text,
  .about-gate__link.button {
    font-size: clamp(14px, 1vw, 17px);
  }
}

/*------------------------------------------------------------------------------
縦向きタブレット
テーマ共通の html { font-size: 0.65vw }（769px以上）で rem 指定の文字が小さくなりすぎるため、
縦長構図のまま文字と余白だけを大きくする
------------------------------------------------------------------------------*/
@media (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) {
  .about {
    --about-gutter: 8vw;
    --about-text: 17px;
    --about-story-text: 19px;
    --about-indent: 42px;
    --about-seam-x: 9px;
    --about-seam-w: 14px;
  }
  .about .subtitle--lower {
    font-size: 14px;
  }
  .about-title__heading.title--lower {
    font-size: 48px;
  }
  .about-feature__number {
    font-size: 120px;
  }
  .about-feature__title.title--ornament {
    font-size: 32px;
  }
  .about-feature__copy {
    width: min(100%, 640px);
  }
  .about-guide__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .about-guide__item--primary {
    grid-column: 1 / -1;
  }
  .about-guide__item--secondary .about-gate {
    aspect-ratio: 4 / 5;
  }
  .about-gate__title {
    font-size: 30px;
  }
  .about-guide__item--primary .about-gate__title {
    font-size: 72px;
  }
  .about-gate__subtitle {
    font-size: 19px;
  }
  .about-gate__text,
  .about-gate__link.button {
    font-size: 15px;
  }
}

/*------------------------------------------------------------------------------
動きを減らす設定：景色は開いたまま、すべての段落を灯した状態で表示する
------------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .about-rift__view,
  .about-rift__inner,
  .about-rift__zoom {
    transform: none !important;
  }
  .about-rift__edge,
  .about-rift__core,
  .about-rift__motes,
  .about-story__glow {
    display: none;
  }
  .about.is-enhanced .about-story__beat,
  .about.is-enhanced .about-story__beat.is-passed {
    opacity: 1;
  }
  .about.is-enhanced .about-story__seam-fill,
  .about.is-enhanced .about-story__seam-lit,
  .about.is-enhanced .about-connector__line {
    transform: none;
  }
  .about.is-enhanced .about-connector::after {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg);
  }
  .about.is-enhanced .about-feature__copy > *,
  .about.is-enhanced [data-about-reveal] {
    opacity: 1;
    transform: none;
  }
  .about.is-ready .about-story__beat,
  .about.is-ready .about-feature__copy > *,
  .about.is-ready [data-about-reveal],
  .about-gate__image,
  .about-rift--gate .about-rift__image {
    transition: none;
  }
  .about-gate:hover .about-gate__image,
  .about-gate:focus-visible .about-gate__image,
  .about-gate.is-lit .about-gate__image,
  .about-gate:hover .about-rift__image,
  .about-gate:focus-visible .about-rift__image,
  .about-gate.is-lit .about-rift__image {
    transform: none;
  }
}