/*
 * /about-us/ に子テーマ XION 3D の見せ方を持ち込む部分。
 *
 * 取り込んだのは3つ。
 *   1. ヒーロー   —— 画面いっぱいのグラデーション見出しと、カーソルに寄る人物写真
 *   2. 年表       —— スクロールで縮みながら重なるカード（元は Projects のカード）
 *   3. 理念の本文 —— スクロールに合わせて1文字ずつ濃くなる。四隅に写真を浮かせる
 *
 * 持ち込まなかったもの: 写真の帯（このページは作品一覧ではない）、Services（重複）、
 * 全画面メニューとライトボックス（親テーマ側が持っている）。
 *
 * 子テーマは body.x3-theme で親のトークン（--brand と --font-ja-display）ごと
 * 差し替えていたが、ここではそれをしない。金と明朝はそのまま生かし、
 * 持ち込むのは「巨大な見出し」「重なるカード」「1文字ずつ」の3つの動きだけにしている。
 */

/* 見出し専用。latin サブセットの 900 だけを自己ホストする（10KB）。
   本文と日本語には使わない —— 日本語グリフを持っていないため。 */
@font-face {
    font-family: "Kanit";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/kanit-900-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.about-x3 {
    --x3-display: "Kanit", var(--font-en);
    --x3-head-gradient: linear-gradient(180deg, #646973 0%, #bbccd7 100%);
    --x3-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --x3-edge: clamp(20px, 4vw, 40px);
    --x3-radius-card: clamp(28px, 4vw, 44px);
}

.about-x3__gradient {
    background: var(--x3-head-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ============ 1. ヒーロー ============ */
.about-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: 100svh;
    padding: clamp(72px, 9vw, 104px) var(--x3-edge) clamp(28px, 4vw, 40px);
    overflow-x: clip;
}

/*
 * 見出しは1行で左右いっぱい。Kanit Black のこの文字列はちょうど 7.62em 幅なので、
 * コンテナ幅の 13cqw でどの画面幅でも切れずに端まで届く。
 * コンテナクエリ単位の無い環境向けに vw の指定を先に置く。
 */
.about-hero__heading {
    overflow: hidden;
    container-type: inline-size;
}

.about-hero__heading h1 {
    width: 100%;
    margin: 0;
    font-family: var(--x3-display);
    font-size: 11.6vw;
    font-size: 13cqw;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.about-hero__bottom {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-start: auto;
}

.about-hero__lead {
    max-width: clamp(180px, 24vw, 320px);
    margin: 0;
    font-size: clamp(0.75rem, 1.4vw, 1.3rem);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

.about-hero__name {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-family: var(--font-ja-display);
    font-size: clamp(0.95rem, 1.6vw, 1.3rem);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.about-hero__name span {
    display: block;
    margin-top: 2px;
    color: var(--brand);
    font-family: var(--font-en);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
}

/*
 * カーソルに寄る人物写真。背景を抜いたカットアウトなので、角丸も下端のマスクも持たない
 * （どちらも四角い写真を背景へ溶かすための処理だった）。
 *
 * transform は JS が書くので、位置合わせには translate プロパティを使う。
 * 両方 transform に入れると JS の書き込みで打ち消し合う。
 */
.about-hero__portrait {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: clamp(300px, 42vw, 580px);
    translate: -50% -50%;
    isolation: isolate;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

/*
 * 黒いフードが背景とほぼ同じ明るさ（実測 #0c0c0f 対 #09090b、袖口は #040304 で背景より暗い）。
 * そのままだと輪郭が消えて袖が穴に見えるので、背後の面だけをわずかに持ち上げて逃がす。
 * 縁取りは当てない —— 1px でも線を入れるとシールに見える。
 */
.about-hero__portrait::before {
    content: "";
    position: absolute;
    inset: -14% -10% -8%;
    z-index: -1;
    background: radial-gradient(
        58% 54% at 50% 46%,
        rgba(219, 178, 120, 0.15),
        rgba(219, 178, 120, 0.055) 45%,
        transparent 72%
    );
    filter: blur(12px);
}

.about-hero__portrait img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============ 2. 理念（1文字ずつ濃くなる＋四隅の写真） ============ */
.about-creed {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 82svh;
    margin: clamp(48px, 7vw, 88px) 0;
    padding: clamp(64px, 8vw, 104px) var(--x3-edge);
    overflow: clip;
}

.about-creed__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-creed__inner h2 {
    margin: 0;
    font-family: var(--x3-display);
    font-size: clamp(2.4rem, 9vw, 108px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* JS が1文字ずつ opacity を書く。止まっている環境では最初から読める */
.about-creed__text {
    max-width: 560px;
    margin: clamp(32px, 5vw, 56px) 0 0;
    color: var(--text);
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    font-weight: 500;
    line-height: 1.95;
    text-wrap: pretty;
}

.about-creed__text span {
    transition: opacity 0.12s linear;
}

.about-creed__note {
    max-width: 560px;
    margin: clamp(24px, 3vw, 36px) 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    text-wrap: pretty;
}

/* 装飾。同じ写真は各ページで見出し付きで出るので、読み上げからは外してある */
.about-creed__corner {
    position: absolute;
    z-index: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.about-creed__corner img {
    display: block;
    width: 100%;
    height: auto;
}

.about-creed__corner--tl { top: 3%; left: clamp(4px, 2vw, 48px); width: clamp(88px, 15vw, 200px); rotate: -6deg; }
.about-creed__corner--tr { top: 3%; right: clamp(4px, 2vw, 48px); width: clamp(88px, 15vw, 200px); rotate: 5deg; }
.about-creed__corner--bl { bottom: 6%; left: clamp(6px, 4vw, 96px); width: clamp(76px, 13vw, 172px); rotate: 4deg; }
.about-creed__corner--br { bottom: 6%; right: clamp(6px, 4vw, 96px); width: clamp(80px, 14vw, 210px); rotate: -5deg; }

/* ============ 3. 年表（スクロールで重なるカード） ============ */
.about-story {
    position: relative;
    z-index: 3;
    margin: clamp(48px, 6vw, 80px) 0;
}

.about-story__head {
    margin: 0 0 clamp(28px, 4vw, 52px);
}

.about-story__head p {
    margin: 0 0 10px;
    color: var(--brand);
    font-family: var(--font-en);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
}

.about-story__head h2 {
    margin: 0;
    font-family: var(--x3-display);
    font-size: clamp(2.2rem, 7vw, 84px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* カード1枚につき1スロット。スロットの高さぶんスクロールするあいだに重なっていく */
.about-story__slot {
    min-height: 78vh;
}

.about-story__card {
    position: sticky;
    top: calc(clamp(64px, 8vw, 112px) + var(--offset, 0px));
    padding: clamp(20px, 3vw, 40px);
    background: #0e0e10;
    border: 1px solid var(--border);
    border-radius: var(--x3-radius-card);
    transform-origin: top center;
    will-change: transform;
}

.about-story__cardhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(12px, 2.4vw, 32px);
}

/* 年は輪郭だけ。いまの位置（2026）だけ中身が入る */
.about-story__year {
    color: transparent;
    font-family: var(--x3-display);
    font-size: clamp(2.6rem, 9vw, 128px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.03em;
    -webkit-text-stroke: 1px rgba(219, 178, 120, 0.5);
}

.about-story__card[data-now] .about-story__year {
    color: var(--brand);
    -webkit-text-stroke-color: var(--brand);
}

.about-story__title {
    flex: 1 1 220px;
    min-width: 0;
}

.about-story__label {
    display: block;
    color: var(--muted);
    font-family: var(--font-en);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}

.about-story__title h3 {
    margin: 6px 0 0;
    color: #fff;
    font-family: var(--font-ja-display);
    font-size: clamp(1.1rem, 2.4vw, 1.8rem);
    font-weight: 500;
    line-height: 1.25;
}

.about-story__body {
    max-width: 640px;
    margin: clamp(14px, 2vw, 22px) 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    text-wrap: pretty;
}

@media (max-width: 700px) {
    /* 親テーマの追従バー（.mobile-cta-bar 51px + セーフエリア）に
       ヒーロー下端のボタンが潜るので、その分を逃がす。 */
    .about-hero {
        padding-bottom: calc(51px + env(safe-area-inset-bottom) + var(--space-6));
    }

    .about-hero__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-5);
    }

    /* 重ねは広い画面の見せ方。狭い画面では素直に積む */
    .about-story__slot {
        min-height: auto;
        margin-bottom: 14px;
    }

    .about-story__card {
        position: static;
    }

    .about-creed {
        min-block-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-hero__portrait {
        transition: none;
    }

    .about-story__slot {
        min-height: auto;
        margin-bottom: 14px;
    }

    .about-story__card {
        position: static;
        transform: none !important;
    }

    .about-creed__text span {
        transition: none;
    }
}