/* About Valdir（2026-11-06）。共通の見た目は valdir-base.css。
   考え方：冒頭は雲を抜けてValdirの世界へ降りていく映像。そのあと、トップの世界観の図を左に留めて、読み進めるごとに光る輪を替え、共有世界・クリエイター・Project Museの関係を見せる。
   世界の絵はロゴ入りなので、文字はロゴに重ねず下に置く。演出OFF（.is-calm）では映像を流さず、図の光も替えない。 */

:root { --gem: var(--gold); }
:lang(ja) :is(.opening__lead, .step__title, .about-explore__title, .tile small) { word-break: auto-phrase; }

/* ---------------------------------------------------------------- 冒頭 */
.opening { position: relative; isolation: isolate; height: min(100svh, 56.25vw); min-height: 560px; overflow: clip; background: var(--ink); }
.opening__media { position: absolute; inset: 0; z-index: -1; }
.opening__poster, .opening__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s var(--ease); }
/* 映像を流すときは、映像の最後と同じ絵を先に見せない。流せないときだけ絵を出す */
.js .opening__poster { opacity: 0; }
.opening__media.is-still .opening__poster, .is-calm .opening__poster { opacity: 1; }
.opening__video { opacity: 0; }
.opening__media.is-playing .opening__video { opacity: 1; }
.opening__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--ink) 0, rgb(6 7 12 / .86) 12%, rgb(6 7 12 / .36) 24%, rgb(6 7 12 / 0) 36%), linear-gradient(to bottom, rgb(6 7 12 / .72) 0, rgb(6 7 12 / 0) 18%); }
.opening__text { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(20px, 4vh, 44px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 48px; animation: opening-in 1.2s var(--ease) .25s both; }
@keyframes opening-in { from { opacity: 0; translate: 0 16px; } }
.opening .crumbs { margin-bottom: 12px; text-shadow: 0 1px 8px rgb(0 0 0 / .8); }
.opening__title { margin: 0; display: flex; flex-wrap: wrap; gap: 0 .7em; font: 800 clamp(30px, 3.4vw, 54px)/1.3 var(--font-ja); letter-spacing: .05em; text-shadow: 0 3px 24px rgb(0 0 0 / .8); }
:lang(en) .opening__title { font: 600 clamp(36px, 4vw, 64px)/1.1 var(--font-en); letter-spacing: 0; gap: 0 .35em; }
.opening__lead { margin: 0 0 .5em; font: 500 clamp(14px, 1.15vw, 17px)/1.8 var(--font-ja); color: var(--text); text-shadow: 0 1px 12px rgb(0 0 0 / .9); }

/* ---------------------------------------------------------------- この世界の成り立ち */
.about-layers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); padding-block: clamp(48px, 8vh, 96px); background: radial-gradient(44% 40% at 26% 30%, rgb(217 181 108 / .08), transparent 72%), var(--ink); }
.about-layers__figure { position: sticky; top: calc(var(--header-h) + 3vh); align-self: start; height: calc(100svh - var(--header-h) - 6vh); display: grid; place-items: center; }
.layers { width: min(100%, calc(100svh - var(--header-h) - 10vh), 640px); margin: 0; }
.layers svg { display: block; width: 100%; height: auto; overflow: visible; }
.layers__outer, .layers__inner, .layers__core { transition: opacity .8s var(--ease); }
.layers__ring { fill: none; stroke: rgb(236 228 210 / .18); stroke-width: 1; }
.layers__ring--dash { stroke-dasharray: 2 7; }
.layers__ring--core { stroke: rgb(217 181 108 / .42); }
.layers__outer circle:not(.layers__ring) { fill: rgb(236 228 210 / .7); animation: layers-twinkle 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes layers-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.layers__label { font: 700 10px var(--font-ui); letter-spacing: .42em; fill: var(--gold); }
.layers__halo { fill: rgb(6 7 12 / .6); stroke-width: 1.5; }
.layers__frame { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 1; }
.layers__inner text { font: 700 13px var(--font-en); letter-spacing: .3em; fill: var(--text); }
.layers__inner [data-gem="sapphire"] .layers__halo { stroke: var(--sapphire); filter: drop-shadow(0 0 10px var(--sapphire)); }
.layers__inner [data-gem="crimson"] .layers__halo { stroke: var(--crimson); filter: drop-shadow(0 0 10px var(--crimson)); }
.layers__inner [data-gem="verdant"] .layers__halo { stroke: var(--verdant); filter: drop-shadow(0 0 10px var(--verdant)); }
/* 読んでいる段の輪を光らせ、ほかは沈める（valdir-about.js が data-on を入れる） */
html:not(.is-calm) .layers[data-on="1"] :is(.layers__outer, .layers__inner),
html:not(.is-calm) .layers[data-on="2"] .layers__inner { opacity: .14; }
html:not(.is-calm) .layers[data-on="2"] .layers__core, html:not(.is-calm) .layers[data-on="3"] .layers__core { opacity: .5; }
html:not(.is-calm) .layers[data-on="3"] .layers__outer { opacity: .28; }

.about-layers__steps { display: grid; }
.step { display: grid; align-content: center; justify-items: start; min-height: 74svh; padding-block: 28px; transition: opacity .6s ease; }
.step .kicker { margin-bottom: 18px; }
.step__title { margin: 0 0 18px; font: 700 clamp(26px, 2.9vw, 44px)/1.45 var(--font-ja); letter-spacing: .04em; }
:lang(en) .step__title { font: 600 clamp(32px, 3.4vw, 52px)/1.15 var(--font-en); letter-spacing: 0; }
.step .body-text { max-width: 32em; }
.step__cast { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 8px 0 0; padding: 0; list-style: none; }
.step__cast a { display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; text-decoration: none; font: 600 22px/1 var(--font-en); color: var(--text-2); transition: color .3s; }
.step__cast img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c), 0 0 22px -4px var(--c); }
.step__cast a:hover { color: var(--text); }
/* NFTのカードを扇のように重ねる */
.step__cards { display: flex; margin: 10px 0 22px 12px; }
.step__cards img { width: clamp(118px, 11.5vw, 176px); height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; box-shadow: 0 26px 50px -24px rgb(0 0 0 / .9), 0 0 0 1px rgb(246 226 176 / .4); transition: transform .7s var(--ease); }
.step__cards img + img { margin-left: -9%; }
.step__cards img:nth-child(1) { transform: rotate(-7deg) translateY(10px); }
.step__cards img:nth-child(2) { position: relative; z-index: 1; }
.step__cards img:nth-child(3) { transform: rotate(7deg) translateY(10px); }
.step__cards:hover img:nth-child(1) { transform: rotate(-11deg) translate(-12px, 12px); }
.step__cards:hover img:nth-child(3) { transform: rotate(11deg) translate(12px, 12px); }

/* ---------------------------------------------------------------- 結び */
.about-explore { padding-block: clamp(72px, 11vh, 130px); border-top: 1px solid var(--line); background: radial-gradient(50% 70% at 50% 100%, rgb(217 181 108 / .08), transparent 70%), var(--ink); }
.about-explore__title { margin: 0; font: 700 clamp(26px, 2.9vw, 44px)/1.45 var(--font-ja); letter-spacing: .04em; }
:lang(en) .about-explore__title { font: 600 clamp(32px, 3.4vw, 52px)/1.15 var(--font-en); letter-spacing: 0; }
.about-explore__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 4.4vh, 48px); }
.tile { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; aspect-ratio: 4 / 3; padding: 20px 22px; overflow: hidden; border-radius: 18px; background: var(--night-2); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .5s; }
.tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: scale 1.2s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(6 7 12 / .9) 0, rgb(6 7 12 / .35) 42%, rgb(6 7 12 / 0) 70%); }
.tile__text { display: grid; gap: 4px; min-width: 0; }
.tile b { font: 700 clamp(19px, 1.7vw, 26px)/1.3 var(--font-ja); }
:lang(en) .tile b { font: 600 clamp(24px, 2.1vw, 32px)/1.15 var(--font-en); }
.tile small { font: 500 13px/1.5 var(--font-ui); color: var(--text-2); }
.tile svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--gold-hi); stroke-width: 1.6; transition: transform .45s var(--ease); }
.tile:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 65%, transparent), 0 30px 70px -36px color-mix(in srgb, var(--gold) 55%, transparent); }
.tile:hover .tile__img { scale: 1.05; }
.tile:hover svg { transform: translateX(4px); }
.about-explore__more { margin-top: 22px; }

/* ---------------------------------------------------------------- 演出OFF */
.is-calm .opening__video { display: none; }
.is-calm .tile__img, .is-calm .tile:hover .tile__img { scale: 1; transition: none; }
.is-calm .step__cards img { transition: none; }

/* ---------------------------------------------------------------- 画面幅 */
@media (max-width: 1080px) {
  .about-layers { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .about-layers__figure { position: static; height: auto; }
  .layers { width: min(100%, 460px); }
  .step { min-height: 0; padding-block: 36px; }
}
@media (max-width: 760px) {
  /* 映像は上に置き、文字はその下へ（映像の中のロゴに重ねない） */
  .opening { height: auto; min-height: 0; padding-top: var(--header-h); }
  .opening__media { position: relative; z-index: 0; aspect-ratio: 16 / 9; }
  .opening__media::after { background: linear-gradient(to top, var(--ink) 0, rgb(6 7 12 / 0) 24%); }
  .opening__text { position: static; padding: 14px 20px 8px; }
  .opening__title { font-size: clamp(26px, 7.4vw, 34px); }
  :lang(en) .opening__title { font-size: clamp(34px, 9.6vw, 44px); }
  .about-layers { padding-block: 24px 40px; }
  .step { padding-block: 28px; }
  .step__cards img { width: min(32vw, 132px); }
  .tile { aspect-ratio: 16 / 10; }
}