/* ==========================================================================
   theater.css — 「蒼夜シアター」下層ページ共通(style.css の後に読み込む)
   カーテン遷移 / カスタムカーソル / ライトボックス / 下層ページ共通シェル
   ========================================================================== */

/* ---------- ページ遷移カーテン ---------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-black);
  display: grid;
  place-items: center;
  transform: translateY(101%);
  pointer-events: none;
}

.curtain__label {
  font-size: 12px;
  letter-spacing: .42em;
  color: var(--c-text-dim);
  opacity: 0;
  transform: translateY(12px);
}

/* 退場: 幕が下から上がってくる */
.curtain-leave .curtain {
  transform: translateY(0);
  transition: transform .58s cubic-bezier(.76, 0, .24, 1);
}
.curtain-leave .curtain .curtain__label {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease .18s, transform .3s ease .18s;
}

/* 入場: 幕が掛かった状態から上へ抜ける */
.curtain-enter .curtain { transform: translateY(0); }
.curtain-enter-active .curtain {
  transform: translateY(-101%);
  transition: transform .7s cubic-bezier(.76, 0, .24, 1) .15s;
}

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
}

/* ---------- カスタムカーソル ---------- */

.cursor {
  position: fixed;
  top: -4px;
  left: -4px;
  z-index: 300;
  width: 8px;
  height: 8px;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  transform: scale(1);
  transition: transform .25s ease;
}

.cursor__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--c-black);
  opacity: 0;
  transition: opacity .2s ease .05s;
}

.cursor.is-view::before { transform: scale(8); }
.cursor.is-view .cursor__label { opacity: 1; }
.cursor.is-down::before { transform: scale(.6); }
.cursor.is-view.is-down::before { transform: scale(7); }

[data-cursor="view"] { cursor: none; }

/* ---------- ライトボックス ---------- */

html.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, .94);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

html.lb-open .lb {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}

.lb__stage {
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.lb__img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  max-height: calc(100svh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}

html.lb-open .lb__img {
  animation: lb-in .45s cubic-bezier(.22, 1, .36, 1);
}

@keyframes lb-in {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: scale(1); }
}

.lb__caption {
  font-size: 12.5px;
  color: var(--c-text-dim);
  letter-spacing: .06em;
  text-align: center;
}

.lb__count {
  position: absolute;
  top: 20px;
  left: clamp(16px, 4vw, 56px);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}

.lb__btn:hover { border-color: var(--c-ice); color: var(--c-ice); }

.lb__glyph {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-1px);
}

.lb__close { top: 16px; right: clamp(16px, 4vw, 56px); }
.lb__prev  { left: clamp(8px, 2vw, 32px);  top: 50%; translate: 0 -50%; }
.lb__next  { right: clamp(8px, 2vw, 32px); top: 50%; translate: 0 -50%; }
.lb__close .lb__glyph { font-size: 14px; }

@media (max-width: 768px) {
  .lb__prev { left: 8px; }
  .lb__next { right: 8px; }
  .lb__btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html.lb-open .lb__img { animation: none; }
  .lb { transition: none; }
}

/* ---------- 下層ページ共通シェル ---------- */

/* ヒーローを持たない下層ページのヘッダーは常に夜黒の地を持つ */
.site-header.is-page {
  position: sticky;
  top: 0;
  background: rgba(14, 17, 19, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}

/* 現在地のナビ項目: 氷青の現在地ドット */
.site-nav a[aria-current="page"] .en { color: var(--c-ice); }
.site-nav a[aria-current="page"] { position: relative; }

/* ページヘッダ(各下層ページ冒頭の章タイトル帯) */
.page-head {
  padding-block: calc(var(--space-7) + 56px) var(--space-5);
  border-bottom: 1px solid var(--c-line);
}

.page-head__no {
  font-size: 11px;
  letter-spacing: .42em;
  color: var(--c-text-faint);
  margin-bottom: var(--space-2);
}

.page-head__title {
  display: grid;
  gap: .15em;
  font-weight: 400;
  line-height: 1.05;
}

.page-head__title .en {
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: .08em;
}

.page-head__title small {
  font-size: clamp(.85rem, 1.6vw, 1rem);
  color: var(--c-text-dim);
  letter-spacing: .12em;
}

.page-head__lead {
  margin-top: var(--space-3);
  max-width: 44em;
  font-size: 15px;
  color: var(--c-text-dim);
}

/* パンくず(任意) */
.crumbs {
  display: flex;
  gap: .9em;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--c-text-faint);
  margin-bottom: var(--space-3);
}
.crumbs a:hover { color: var(--c-ice); }
.crumbs li + li::before { content: "/"; margin-right: .9em; color: var(--c-line); }

/* 前後記事ナビ(single系の末尾) */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-top: var(--space-6);
}

.post-nav a {
  padding: var(--space-4) var(--space-3);
  display: grid;
  gap: .4em;
  transition: background .3s ease;
}

.post-nav a:hover { background: rgba(255, 255, 255, .03); }
.post-nav a + a { border-left: 1px solid var(--c-line); text-align: right; }

.post-nav__dir {
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.post-nav__title { font-size: 14.5px; color: var(--c-text-dim); }

@media (max-width: 600px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav a + a { border-left: 0; border-top: 1px solid var(--c-line); }
}

/* ==========================================================================
   2026-06-11 追加: トップ専用ローディング / ナビホバー(反転ボックス)
   ========================================================================== */

/* ---------- ナビ: マウスオーバーで右から白ボックスがスライドイン+文字反転 ---------- */

.site-nav a {
  position: relative;
  z-index: 0;
  padding: .34em .72em;
  overflow: hidden;
  border-bottom: 1px solid transparent;
}

.site-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-text);            /* 反転色のボックス */
  transform: translateX(102%);          /* 右に控える */
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--c-black);                /* 文字色反転 */
  border-color: transparent;
}

.site-nav a:hover::before,
.site-nav a:focus-visible::before { transform: translateX(0); }

.site-nav a:hover .en,
.site-nav a:focus-visible .en,
.site-nav a:hover small,
.site-nav a:focus-visible small { color: var(--c-black); }

/* 現在地(aria-current)は氷青のまま、ホバー時のみ反転を優先 */
.site-nav a[aria-current="page"]:hover .en { color: var(--c-black); }

@media (prefers-reduced-motion: reduce) {
  .site-nav a::before { transition: none; }
}

/* ---------- ローディング画面(トップのみ: index.html にマークアップがある時だけ作動) ---------- */

html.is-loading { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--c-black);
}

.loader__inner {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.loader__brand {
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--c-text);
  animation: loaderBreath 2.4s ease-in-out infinite;
}

.loader__brand b { font-weight: 600; }

.loader__tag {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--c-text-dim);
}

.loader__bar {
  width: min(300px, 62vw);
  height: 1px;
  margin-top: 10px;
  background: var(--c-line);
  overflow: hidden;
}

.loader__bar i {
  display: block;
  height: 100%;
  background: var(--c-ice);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.loader__count {
  font-size: 10px;
  letter-spacing: .34em;
  color: var(--c-text-faint);
  font-variant-numeric: tabular-nums;
}

@keyframes loaderBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* 幕が上がる */
html.is-loaded .loader {
  transform: translateY(-101%);
  transition: transform .85s cubic-bezier(.76, 0, .24, 1) .12s;
}

html.is-loaded .loader__inner {
  opacity: 0;
  transition: opacity .3s ease;
}

/* 幕下のヒーロー演出: 幕が上がってからタイトルが立ち上がる */
html.is-loading .hero-stage { opacity: 0; }

html.is-loaded .hero-stage {
  opacity: 1;
  transition: opacity 1.1s ease .55s;
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* ==========================================================================
   2026-06-11 LIG級アップグレード: fx基盤 / マーキー / 3連CTA / WebGL / VT
   ========================================================================== */

/* ---------- fx有効時(GSAP駆動): CSSリヴィールを無効化しGSAPに譲る ---------- */
html.fx .rv {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ---------- キネティックタイポ(1文字マスク) ---------- */
.kt-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kt-c { display: inline-block; will-change: transform; }

/* ---------- 3連CTA帯(全ページ・フッター手前) ---------- */
.cta3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-line);
}

.cta3__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: .5rem;
  min-height: clamp(240px, 30vw, 360px);
  padding: clamp(20px, 2.6vw, 40px);
  background: var(--c-black);
}

.cta3__panel + .cta3__panel { border-left: 1px solid var(--c-line); }

.cta3__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  transition: opacity .6s ease;
}

.cta3__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(7%) scale(1.08);
  filter: grayscale(.55);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s ease;
}

.cta3__panel:hover .cta3__bg { opacity: .62; }
.cta3__panel:hover .cta3__bg img { transform: translateY(0) scale(1.02); filter: grayscale(0); }

.cta3__en {
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  letter-spacing: .14em;
}

.cta3__jp { font-size: 12.5px; color: var(--c-text-dim); letter-spacing: .1em; }

.cta3__arrow {
  position: absolute;
  top: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  font-size: 20px;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s ease;
}

.cta3__panel:hover .cta3__arrow { transform: translateX(8px); color: var(--c-ice); }

.cta3__badge {
  position: absolute;
  top: clamp(18px, 2.4vw, 34px);
  left: clamp(20px, 2.6vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--c-ice);
}

.cta3__badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-ice);
  animation: ctaPulse 2s ease-in-out infinite;
}

@keyframes ctaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (max-width: 860px) {
  .cta3 { grid-template-columns: 1fr; }
  .cta3__panel + .cta3__panel { border-left: 0; border-top: 1px solid var(--c-line); }
  .cta3__panel { min-height: 180px; }
}

/* ---------- WebGLヒーロー ---------- */
canvas.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 2;            /* bgset(1)の上、scrim/タイトルの下 */
  pointer-events: none;
}

html.webgl-hero .hero-bgset img { opacity: 0 !important; }

/* ---------- ピン留め横リール(fx時デスクトップ) ---------- */
html.fx-reel-pin .reel__track {
  overflow: visible;
  scroll-snap-type: none;
}
html.fx-reel-pin .reel__nav { display: none; }

/* ---------- View Transitions(対応ブラウザのみ・カーテンの代替) ---------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out .4s cubic-bezier(.76, 0, .24, 1) both;
  }
  ::view-transition-new(root) {
    animation: vt-in .55s cubic-bezier(.22, 1, .36, 1) both;
  }
}

@keyframes vt-out { to { opacity: 0; transform: translateY(-2.2%); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(2.2%); } }