/* 9カットの固定背景、上映開始pin、シーン固有scrimと環境光を担当する。
 * sections.cssの内容部品より後、端末差分のresponsive.cssより前に読む。 */

main {
  position: relative;
  z-index: 1;
}

.hero {
  background: transparent;
}

.scene-stage {
  background: var(--black);
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  /* 固定背景の表示面をビューポートへ一致させるため必要。 */
  height: 100svh;
  width: 100%;
  z-index: 0;
}

.scene-layer,
.scene-picture,
.scene-picture img,
.scene-ambient {
  inset: 0;
  position: absolute;
}

.scene-layer {
  opacity: 0;
  overflow: hidden;
  transform-origin: 50% 50%;
  transition: opacity 1.05s ease;
}

.scene-picture {
  display: block;
  overflow: hidden;
  /* pictureを固定背景の表示面へ一致させるため必要。 */
  height: 100%;
  width: 100%;
}

.scene-picture img {
  object-fit: cover;
  transform: scale(1.15);
  transform-origin: 50% 50%;
  /* 画像の内在サイズを固定背景枠へ合わせるため必要。 */
  height: 100%;
  width: 100%;
}

/* SCENE 01: 女性とスクリーンを同時に残す中央基準。 */
.scene-layer--01 img {
  object-position: 50% 50%;
}

/* SCENE 02: 映写光とスクリーンを残す中央基準。 */
.scene-layer--02 img {
  object-position: 50% 48%;
}

/* SCENE 03: 女性を左寄りに残し、右側を本文領域にする。 */
.scene-layer--03 img {
  object-position: 43% 48%;
}

/* SCENE 04: 映写室の人物・映写機・小窓を中央に残す。 */
.scene-layer--04 img {
  object-position: 48% 52%;
}

/* SCENE 05: 二席と試写スクリーンを中央に残す。 */
.scene-layer--05 img {
  object-position: 50% 50%;
}

/* SCENE 06 = foyer画像(ロビー): 窓とラウンジ席を上寄りに残す。 */
.scene-layer--06 img {
  object-position: 50% 44%;
}

/* SCENE 07: 二つの入口の対称性を中央に残す。 */
.scene-layer--07 img {
  object-position: 50% 52%;
}

/* SCENE 08 = release画像(開いた扉): 扉の境界を中央に残す。 */
.scene-layer--08 img {
  object-position: 51% 49%;
}

/* SCENE 09: 歩き出す人物と水面を中央に残す。 */
.scene-layer--09 img {
  object-position: 50% 52%;
}

.scene-layer::after {
  content: "";
  inset: 0;
  position: absolute;
}

.scene-layer--01::after {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.48), rgba(7, 8, 11, 0.04) 72%), linear-gradient(0deg, rgba(7, 8, 11, 0.7), transparent 56%);
}

.scene-layer--02::after {
  background: linear-gradient(0deg, rgba(7, 8, 11, 0.7), rgba(7, 8, 11, 0.16) 48%, rgba(7, 8, 11, 0.6));
}

.scene-layer--03::after {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.16), rgba(7, 8, 11, 0.64) 78%), linear-gradient(0deg, rgba(7, 8, 11, 0.64), transparent 55%);
}

.scene-layer--04::after {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.42), rgba(7, 8, 11, 0.12) 56%, rgba(7, 8, 11, 0.54)), linear-gradient(0deg, rgba(7, 8, 11, 0.72), transparent 52%);
}

.scene-layer--05::after {
  background: linear-gradient(0deg, rgba(7, 8, 11, 0.72), rgba(7, 8, 11, 0.08) 48%, rgba(7, 8, 11, 0.54));
}

.scene-layer--06::after {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.54), rgba(7, 8, 11, 0.06) 52%, rgba(7, 8, 11, 0.36)), linear-gradient(0deg, rgba(7, 8, 11, 0.68), transparent 58%);
}

.scene-layer--07::after {
  background: linear-gradient(0deg, rgba(7, 8, 11, 0.78), rgba(7, 8, 11, 0.08) 50%, rgba(7, 8, 11, 0.62));
}

.scene-layer--08::after {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.48), rgba(7, 8, 11, 0.14) 58%, rgba(7, 8, 11, 0.48)), linear-gradient(0deg, rgba(7, 8, 11, 0.72), transparent 58%);
}

.scene-layer--09::after {
  background: linear-gradient(0deg, rgba(7, 8, 11, 0.66), rgba(7, 8, 11, 0.04) 58%, rgba(7, 8, 11, 0.3));
}

html[data-scene="01"] .scene-layer--01,
html[data-scene="02"] .scene-layer--02,
html[data-scene="03"] .scene-layer--03,
html[data-scene="04"] .scene-layer--04,
html[data-scene="05"] .scene-layer--05,
html[data-scene="06"] .scene-layer--06,
html[data-scene="07"] .scene-layer--07,
html[data-scene="08"] .scene-layer--08,
html[data-scene="09"] .scene-layer--09,
html[data-screening-active="true"] .scene-layer--02 {
  opacity: 1;
}

html[data-screening-active="true"] .scene-layer--01 {
  opacity: 0;
}

.scene-section:not(.hero):not(.final-cta) {
  color: var(--ivory);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6.5rem, 12vw, 11rem);
  position: relative;
}

.scene-section:not(.hero):not(.final-cta)::before {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.scene-section:not(.hero):not(.final-cta) > * {
  position: relative;
  z-index: 1;
}

.scene-02-section::before {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.84), rgba(7, 8, 11, 0.5) 48%, rgba(7, 8, 11, 0.76));
}

.scene-03-section::before {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.74), rgba(7, 8, 11, 0.24) 52%, rgba(7, 8, 11, 0.76));
}

.scene-04-section::before {
  background: linear-gradient(115deg, rgba(7, 8, 11, 0.8), rgba(17, 19, 25, 0.44) 58%, rgba(7, 8, 11, 0.82));
}

.scene-05-section::before {
  background: linear-gradient(0deg, rgba(7, 8, 11, 0.84), rgba(17, 19, 25, 0.32) 54%, rgba(7, 8, 11, 0.7));
}

.scene-06-section::before {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.78), rgba(7, 8, 11, 0.28) 56%, rgba(17, 19, 25, 0.76));
}

.scene-07-section::before {
  background: linear-gradient(0deg, rgba(7, 8, 11, 0.88), rgba(7, 8, 11, 0.4) 52%, rgba(7, 8, 11, 0.84));
}

.scene-08-section::before {
  background: linear-gradient(100deg, rgba(7, 8, 11, 0.82), rgba(17, 19, 25, 0.36) 55%, rgba(7, 8, 11, 0.78));
}

.scene-section:not(.hero):not(.final-cta) .section-heading {
  background: rgba(7, 8, 11, 0.68);
  border-left: 1px solid var(--gold);
  padding: clamp(1.4rem, 3vw, 2.5rem);
}

.scene-03-section .section-heading,
.scene-06-section .section-heading,
.scene-08-section .section-heading {
  background: rgba(17, 19, 25, 0.64);
}

.scene-04-section .section-heading,
.scene-07-section .section-heading {
  background: rgba(7, 8, 11, 0.78);
}

.js .scene-marker span {
  opacity: 0;
  transform: translate3d(0, 0.7rem, 0) scaleX(1.1);
  transform-origin: 0 50%;
  transition: opacity 0.72s ease, transform 0.82s var(--ease);
}

.scene-marker::after {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease);
}

.scene-marker.is-stamped span {
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleX(1);
}

.scene-marker.is-stamped span + span {
  transition-delay: 0.08s;
}

.scene-marker.is-stamped::after {
  transform: scaleX(1);
  transition-delay: 0.12s;
}

[data-heading-split] {
  overflow: hidden;
}

[data-heading-split] .sekaikan-heading-char {
  display: inline-block;
}

/* 素のテキスト見出しを自然な折り返し位置で行ごとに固定するための包み。
 * nowrapで、分割中にフォントサイズが変わっても再折返しを禁止する。 */
[data-heading-split] .sekaikan-heading-line {
  display: block;
  white-space: nowrap;
}

.screening-transition {
  isolation: isolate;
  position: relative;
  z-index: 2;
}

.screening-pin {
  overflow: hidden;
  position: relative;
  /* pin上映の1画面表示枠としてビューポート高へ固定する。 */
  height: 100svh;
}

.screening-beam,
.screening-outline,
.screening-matte {
  position: absolute;
}

.screening-beam {
  background: url("media/hero-projection-rays.webp") center / cover no-repeat;
  inset: 0;
  opacity: 0;
  transform: scaleX(0.08) scaleY(0.38);
  transform-origin: 50% 100%;
}

.screening-outline {
  border: 1px solid rgba(205, 170, 104, 0.82);
  inset: 12%;
  opacity: 0.82;
  transform: scale(0.22);
}

.screening-matte {
  background: var(--black);
  left: 0;
  /* 上下の遮蔽板を画面半分へ揃えるため必要。 */
  height: 50.5%;
  width: 100%;
  z-index: 2;
}

.screening-matte--top {
  border-bottom: 1px solid rgba(205, 170, 104, 0.25);
  top: 0;
}

.screening-matte--bottom {
  border-top: 1px solid rgba(205, 170, 104, 0.25);
  bottom: 0;
}

.screening-status {
  bottom: 2rem;
  color: rgba(244, 239, 230, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.64rem;
  left: 50%;
  letter-spacing: 0.22em;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 3;
}

.screening-status span {
  color: var(--gold);
  margin-right: 0.75rem;
}

/* JS無効時はpinを作らず、上映後の完成フレームを通常フローで見せる。 */
html:not(.js) .screening-pin {
  height: auto;
  padding-block: 7rem;
}

html:not(.js) .screening-beam {
  opacity: 0.34;
  transform: scaleX(1) scaleY(1);
}

html:not(.js) .screening-outline {
  opacity: 0.72;
  transform: scale(0.72);
}

html:not(.js) .screening-matte--top {
  transform: translateY(-82%);
}

html:not(.js) .screening-matte--bottom {
  transform: translateY(82%);
}

.scene-ambient {
  overflow: hidden;
}

.projection-beam {
  animation: projection-breathe 7.2s ease-in-out infinite paused;
  background: url("media/hero-projection-rays.webp") center / cover no-repeat;
  inset: -4%;
  opacity: 0.2;
  position: absolute;
  transform: translate3d(-0.5%, 0, 0) scale(1.04);
}

.projection-dust {
  --dust-drift-x: 0.8rem;
  --dust-drift-y: -2.8rem;
  --dust-size: 5px;
  animation: projection-dust-float 8.8s ease-in-out infinite paused;
  background: radial-gradient(circle, rgba(255, 250, 228, 0.96), rgba(205, 170, 104, 0.34) 42%, transparent 72%);
  border-radius: 50%;
  opacity: 0.2;
  position: absolute;
  /* 映写光の塵は小さな装飾粒として固定寸法が必要。 */
  height: var(--dust-size);
  width: var(--dust-size);
}

.projection-dust:nth-child(2) { left: 18%; top: 24%; animation-delay: -1.1s; }
.projection-dust:nth-child(3) { left: 27%; top: 42%; animation-delay: -5.2s; --dust-size: 7px; }
.projection-dust:nth-child(4) { left: 35%; top: 31%; animation-delay: -2.7s; --dust-drift-x: -0.6rem; }
.projection-dust:nth-child(5) { left: 43%; top: 56%; animation-delay: -7.4s; --dust-size: 4px; }
.projection-dust:nth-child(6) { left: 51%; top: 36%; animation-delay: -4.3s; --dust-drift-x: 1.2rem; }
.projection-dust:nth-child(7) { left: 59%; top: 62%; animation-delay: -8.2s; --dust-size: 8px; }
.projection-dust:nth-child(8) { left: 66%; top: 29%; animation-delay: -3.5s; --dust-drift-x: -0.8rem; }
.projection-dust:nth-child(9) { left: 73%; top: 49%; animation-delay: -6.1s; --dust-size: 4px; }
.projection-dust:nth-child(10) { left: 81%; top: 34%; animation-delay: -2.2s; }
.projection-dust:nth-child(11) { left: 31%; top: 69%; animation-delay: -7.8s; --dust-size: 6px; }
.projection-dust:nth-child(12) { left: 55%; top: 76%; animation-delay: -4.9s; --dust-drift-x: -1rem; }
.projection-dust:nth-child(13) { left: 78%; top: 67%; animation-delay: -9.4s; --dust-size: 7px; }

.audience-wash {
  animation: audience-wash-breathe 6.4s ease-in-out infinite paused;
  background: rgba(244, 239, 230, 0.12);
  inset: 0;
  opacity: 0.12;
  position: absolute;
  transform: translate3d(-4%, 0, 0) scaleX(0.64);
  transform-origin: 0 50%;
}

.desk-flicker {
  animation: desk-light-flicker 5.8s steps(1, end) infinite paused;
  background: radial-gradient(circle, rgba(255, 230, 174, 0.5), rgba(205, 170, 104, 0.12) 45%, transparent 72%);
  border-radius: 50%;
  left: 58%;
  opacity: 0.34;
  position: absolute;
  top: 48%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  /* 机上灯だけを照らす局所光として正円寸法を固定する。 */
  height: 11rem;
  width: 11rem;
}

.dawn-petal {
  --petal-x: 14vw;
  --petal-y: 10vh;
  animation: dawn-petal-drift 11s ease-in-out infinite paused;
  background: rgba(244, 239, 230, 0.86);
  border-radius: 80% 20% 70% 30%;
  left: 14%;
  opacity: 0.42;
  position: absolute;
  top: 20%;
  transform: rotate(20deg);
  /* 花びらは小さな装飾片として固定寸法が必要。 */
  height: 18px;
  width: 8px;
}

.dawn-petal:nth-child(2) { left: 29%; top: 54%; animation-delay: -7.3s; --petal-x: 18vw; --petal-y: -8vh; }
.dawn-petal:nth-child(3) { left: 47%; top: 26%; animation-delay: -3.8s; --petal-x: 11vw; --petal-y: 16vh; }
.dawn-petal:nth-child(4) { left: 63%; top: 66%; animation-delay: -9.2s; --petal-x: 16vw; --petal-y: -12vh; }
.dawn-petal:nth-child(5) { left: 76%; top: 34%; animation-delay: -5.6s; --petal-x: 9vw; --petal-y: 14vh; }
.dawn-petal:nth-child(6) { left: 87%; top: 58%; animation-delay: -1.9s; --petal-x: -10vw; --petal-y: -9vh; }

.scene-ambient.is-live .projection-beam,
.scene-ambient.is-live .projection-dust,
.scene-ambient.is-live .audience-wash,
.scene-ambient.is-live .desk-flicker,
.scene-ambient.is-live .dawn-petal {
  animation-play-state: running;
}

@keyframes projection-breathe {
  0%, 100% { opacity: 0.14; transform: translate3d(-0.6%, 0, 0) scale(1.035); }
  52% { opacity: 0.32; transform: translate3d(0.7%, -0.4%, 0) scale(1.06); }
}

@keyframes projection-dust-float {
  0%, 100% { opacity: 0.06; transform: translate3d(0, 0, 0) scale(0.74); }
  42% { opacity: 0.46; }
  76% { opacity: 0.14; transform: translate3d(var(--dust-drift-x), var(--dust-drift-y), 0) scale(1.12); }
}

@keyframes audience-wash-breathe {
  0%, 100% { opacity: 0.08; transform: translate3d(-5%, 0, 0) scaleX(0.62); }
  50% { opacity: 0.2; transform: translate3d(2%, 0, 0) scaleX(0.82); }
}

@keyframes desk-light-flicker {
  0%, 6%, 13%, 22%, 28%, 100% { opacity: 0.36; transform: translate3d(-50%, -50%, 0) scale(1); }
  7%, 12%, 23%, 27% { opacity: 0.16; transform: translate3d(-50%, -50%, 0) scale(0.94); }
  48% { opacity: 0.42; transform: translate3d(-50%, -50%, 0) scale(1.04); }
}

@keyframes dawn-petal-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(12deg); }
  18% { opacity: 0.56; }
  78% { opacity: 0.34; }
  100% { opacity: 0; transform: translate3d(var(--petal-x), var(--petal-y), 0) rotate(176deg); }
}

.scene-rail {
  right: clamp(0.6rem, 1.8vw, 1.5rem);
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
}

.scene-rail button {
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(244, 239, 230, 0.24);
  color: rgba(244, 239, 230, 0.48);
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  padding: 0.42rem 0.55rem;
  text-align: right;
  transition: border-color 0.28s ease, color 0.28s ease, transform 0.28s var(--ease);
}

.scene-rail button span {
  font-family: "Noto Sans JP Sekaikan", sans-serif;
  font-size: 0.44rem;
  margin-right: 0.35rem;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.scene-rail button[aria-current="true"] {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateX(-0.2rem);
}

.scene-rail button[aria-current="true"] span {
  opacity: 1;
}

.light-field {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.light-particle {
  background: radial-gradient(circle, rgba(255, 251, 229, 0.98), rgba(205, 170, 104, 0.54) 34%, transparent 72%);
  border-radius: 50%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.4);
  /* クリックで灯す光粒は装飾粒として固定寸法が必要。 */
  height: 22px;
  width: 22px;
}

.final-cta .final-scrim {
  z-index: 1;
}

.final-cta .final-inner {
  position: relative;
  z-index: 3;
}