/* フロントページメインビジュアル専用のCSSファイル */


/* メインビジュアル専用の設定変数 */
:root {

    /* ------------------------------------
       画像幅
       ------------------------------------ */
    --img-width: 94%;

    /* ------------------------------------
       メインビジュアルの高さ
       画面幅に応じて60vh〜80vhの範囲で可変
       ------------------------------------ */
    --hero-height: clamp(60vh, 70vw, 80vh);

    /* ------------------------------------
       斜めの切り抜き基準値

       ※重要
       ここは%ではなくpxで指定する。

       %で指定すると画面幅に応じて斜め線の
       位置・角度が変化し、画像とテキストの
       境界がズレるため。

       現在の基準値：184px
       ------------------------------------ */
    --hero-cut: 184px;

    /* ------------------------------------
       画像のclip-path

       左上を--hero-cut分だけ右へ移動させ、
       画像左上から右下方向へ斜めに切り抜く。
       ------------------------------------ */
    --img-clip: polygon(
        var(--hero-cut) 0,
        100% 0,
        100% 100%,
        0 100%
    );

    /* ------------------------------------
       テキスト(h1)のclip-path

       1025px未満ではCSSで境界を調整。
       1025px以上ではJavaScriptによって
       画像位置と同期させる。
       ------------------------------------ */
    --text-clip: polygon(
        calc(var(--hero-cut) + 6%) 0,
        100% 0,
        100% 100%,
        6% 100%
    );
}


/* ----------------------------------------
   メインビジュアル大枠

   画像とテキストを同じGrid上に重ねる。
   ---------------------------------------- */
.mainVisual {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    /* position: relative; */

    /* 固定ヘッダー分だけ下へ配置 */
    margin: var(--header-height) 0 0 !important;

    /* ヘッダーを除いたメインビジュアルの高さ */
    height: calc(var(--hero-height) - var(--header-height));

    /*
     * ヘッダーのロゴ・コンテンツ幅に合わせるための
     * 左側の内余白。
     *
     * 1313px以上では最大幅1280pxに収まるため削除。
     */
    padding-left: 16px !important;
    /* あしらいがメインビジュアル外へはみ出さないようにする */
    overflow: hidden;
}


/* ----------------------------------------
   ヒーローテキストのコンテナ

   画像の上にテキストを重ねるため、
   画像と同じGridセルに配置する。
   ---------------------------------------- */
.heroTextBox {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    /* 最大幅 */
    max-width: 1280px;
    height: calc(var(--hero-height) - var(--header-height));
    margin: 0 auto;

    /*
     * 画像(.mainImg)より前面に表示。
     * .mainImgがz-index:0なので1で十分。
     */
    z-index: 1;

    color: #333;
    box-sizing: border-box;
}


/* ----------------------------------------
   ヒーロー見出し
   HTML上では以下の3行固定。

   Atsuhiro
   Kitayama
   Portfolio Site
   ---------------------------------------- */
h1.heroMainText {
    /*  h1をヒーロー領域いっぱいに広げる */
    width: 100%;
    height: 100%;

    margin: 0 !important;
    display: flex;
    align-items: center;
    font-size: clamp(2.92rem, 9.6vw, 6.4rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.108em;
    line-height: 1.4;

    /* 白文字レイヤー(.titleOverlay)の配置基準 */
    position: relative;
}


/* ----------------------------------------
   ベース文字と白文字の共通設定

   .titleBase  → 通常の黒文字
   .titleOverlayInner → 白文字

   同じ文字を2枚重ね、画像と重なる部分だけ
   .titleOverlayで白文字を表示する。

   黒文字と白文字のレイヤーを同じ位置・サイズに揃える
   ---------------------------------------- */
.titleBase,
.titleOverlayInner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 通常時の文字色 */
.titleBase {
    color: #333;
}

/* 画像上に表示する文字色 */
.titleOverlayInner {
    color: #fff;
}

/* ----------------------------------------
   白文字の表示範囲

   .titleOverlay自体を画像との境界に合わせて
   clip-pathで切り抜く。

   1025px未満：
   CSSの--text-clipを使用。

   1025px以上：
   JavaScriptで画像の実際の位置を取得し、
   clip-pathを動的に設定する。
   ---------------------------------------- */
.titleOverlay {
    position: absolute;
    inset: 0;

    clip-path: var(--text-clip);

    /* 白文字のレイヤーが操作を邪魔しないようにする */
    pointer-events: none;
}


/* ----------------------------------------
   メイン画像

   テキストと同じGridセルに配置して重ねる。

   右寄せにすることで、画面右側に画像を配置。
   ---------------------------------------- */
.mainImg {
    grid-column: 1;
    grid-row: 1;

    width: var(--img-width);
    height: calc(var(--hero-height) - var(--header-height));

    justify-self: end;

    position: relative;
    overflow: hidden;

    margin: 0 !important;

    /* テキストより背面に配置 */
    z-index: 0;

    /* 画像左上を斜めに切り抜く */
    clip-path: var(--img-clip);
}


/* ----------------------------------------
   メイン画像本体

   figureの高さに合わせて画像を表示し、
   object-fit: coverで領域いっぱいに
   トリミングする。
   ---------------------------------------- */
.mainVisual figure img {
    height: calc(var(--hero-height) - var(--header-height)) !important;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}


/* ========================================
   タブレット
   769px以上
======================================== */

@media (min-width: 768px) {

    :root {

        /* 画像を画面幅の84%まで広げる */
        --img-width: 84%;

        /*
         * テキストの斜め境界を調整。
         *
         * 769〜1024pxではJavaScriptを使用せず、
         * CSSのclip-pathを使用する。
         */
        --text-clip: polygon(
            calc(var(--hero-cut) + 16%) 0,
            100% 0,
            100% 100%,
            16% 100%
        );
    }
}


/* ========================================
   PC
   1025px以上
======================================== */

@media (min-width: 1025px) {

    :root {

        /* PCでは画像を画面幅の72%にする */
        --img-width: 72%;
        /* ------------------------------------
        斜めの切り抜き基準値

        ※重要
        ここは%ではなくpxで指定する。

        %で指定すると画面幅に応じて斜め線の
        位置・角度が変化し、画像とテキストの
        境界がズレるため。

        タブレットまでの基準値：184px
        ------------------------------------ */
        --hero-cut: 200px;

        /*
         * 1025px以上のclip-pathはJavaScriptで制御。
         *
         * mainImgの実際の位置を取得して、
         * titleOverlayの境界を画像に同期させる。
         *
         * 変更する場合はCSSではなく、
         * ヒーロー用JavaScriptを編集すること。
         */
    }
}


/* ========================================
   画面幅1313px以上
======================================== */

@media (min-width: 1313px) {

    /*
     * heroTextBoxの最大幅1280pxに対して、
     * メインビジュアル側の左余白16pxが
     * 不要になるため削除。
     */
    .mainVisual {
        padding-left: 0 !important;
    }
}



/* ========================================
   メインビジュアル 初回表示
======================================== */

.titleBase,
.titleOverlayInner {
    animation: heroTextIn .8s ease-out .1s both;
}

.mainImg {
    animation: heroImgIn .8s ease-out both;
}


/* テキスト */
@keyframes heroTextIn {
    from {
        opacity: 0;
        filter: blur(16px);
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0px);
    }
}


/* 画像 */
@keyframes heroImgIn {
    from {
        opacity: 0;
        filter: blur(16px);
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* ========================================
   メインビジュアル あしらい
======================================== */

/* ========================================
   ヒーローテキスト あしらい
======================================== */

/* テキスト側に配置するアクセントライン */
.heroTextBox::before {
    content: "";
    position: absolute;

    top: 0;
    left: var(--left-position);

    width: 1px;
    height: 100%;

    background: var(--color-border);

    transform: skewX(var(--line-angle));
    transform-origin: top;

    z-index: 2;
}

.heroTextBox::after {
    content: "";
    position: absolute;

    top:80px;
    left: 0;

    width: 1px;
    height: 100%;

    background: #333;

    transform: skewX(-45deg);
    transform-origin: top;

    z-index: 2;
}

/* .heroTextBox::after {
    content: "";
    position: absolute;

    top: 0;
    right: -15%;

    width: 1px;
    height: 100%;

    background: #fff;

    transform: skewX(var(--line-angle));
    transform-origin: top;

    z-index: 2;
} */

:root {
    --line-angle: -24deg;
    --left-position: 12%;
}

@media (min-width: 769px) {
    :root {
        --line-angle: -20deg;
        --left-position: 4%;
    }
}

@media (min-width: 1025px) {
    :root {
        --line-angle: -16deg;
        --left-position: 0%;
    }
}