@charset "UTF-8";

/* ==========================================================================
   bg
   ========================================================================== */

body {
    background-color: var(--color-bg-tertiary);
}

/* 2. 動くノイズの層（オーバーレイ）を作る */
body::before {
    content: "";
    position: fixed;
    /* 画面に固定 */
    top: -100px;
    /* 動かした時に端が見えないよう、画面より大きく作る */
    left: -100px;
    width: calc(100% + 200px);
    height: calc(100% + 200px);
    z-index: 0;
    /* 常に一番手前に配置 */
    pointer-events: none;
    /* 重要：下のボタンやリンクをクリックできるようにする */

    /* 用意した1枚のノイズ画像を敷き詰める */
    background-image: url('../../images/common/noise.webp');
    background-repeat: repeat;

    /* 濃さの調整（0.03〜0.08くらいが最もプロっぽく見えます） */
    opacity: 0.16;

    /* アニメーションの指定 */
    animation: noise-jump 2s steps(2) infinite;
}

/* 3. ノイズをガクガク動かすアニメーション */
@keyframes noise-jump {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, -10px);
    }
}

/* ==========================================================================
   Recommend Book 一覧（ドラッググリッド。研究室短歌集ページと同じ操作感）
   ========================================================================== */
:root {
    --book-card-width: 18em;
    --book-card-height: calc(var(--book-card-width) * 1.414);
    --book-gap-x: 5em;
    --book-gap-y: 3em;
    --book-grid-padding-top: 34vh;
    /* 【調整ポイント】1段目の本より上の余白。棚線の位置もこの値から自動で計算されるので、ここだけ変えればよい */
    --book-grid-padding-bottom: 8vh;
    /* 【調整ポイント】最後の段の本より下の余白 */
    --book-shelf-gap-above: 1em;
    /* 【調整ポイント】本の下端から棚線までの余白（0なら本にぴったり接する） */
}

/* ==========================================================================
   Projects / drag-guide-overlay（研究室短歌集ページ assets/css/extra/tanka.css と同じもの）
   ========================================================================== */

/* オーバーレイ全体 */
.p-drag-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    /* 背景を少し暗くして注視させる */
    backdrop-filter: blur(4px);
    /* 背後をぼかすと今っぽくなります */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 中央の案内ボックス */
.p-drag-guide-overlay__inner {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 三角形のアニメーション土台 */
.p-drag-guide-overlay__triangle {
    position: absolute;
    background: var(--color-White);
    height: calc(tan(60deg) * 20px / 2);
    width: 20px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    translate: -50% -50%;
}

.p-drag-guide-overlay__triangle:nth-child(1) {
    top: -60px;
    left: 50%;
    rotate: 0deg;
}

/* 2. 右 */
.p-drag-guide-overlay__triangle:nth-child(2) {
    top: 50%;
    left: calc(100% + 40px);
    rotate: 90deg;
}

/* 3. 下 */
.p-drag-guide-overlay__triangle:nth-child(3) {
    top: calc(100% + 60px);
    left: 50%;
    rotate: 180deg;
}

/* 4. 左 */
.p-drag-guide-overlay__triangle:nth-child(4) {
    top: 50%;
    left: -40px;
    rotate: 270deg;
}

/* テキスト部分 */
.p-drag-guide-overlay__text {
    font-family: var(--En-font);
    font-size: var(--font-size-Text-M);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
    color: var(--color-White);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.p-drag-guide-overlay__bg {
    position: absolute;
    z-index: -10;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    width: 16em;
    height: 16em;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
}

.p-drag-guide-overlay__bg:nth-child(1 of .p-drag-guide-overlay__bg) {
    animation: onboardingAnimation01 4.2s forwards;
}

.p-drag-guide-overlay__bg:nth-child(2 of .p-drag-guide-overlay__bg) {
    animation: onboardingAnimation02 4.2s forwards;
}

@keyframes onboardingAnimation01 {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    35% {
        opacity: 1;
        transform: scale(1);
        animation-timing-function: ease-in-out;
    }

    45% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 0;
        transform: scale(0);
    }

    85% {
        opacity: 1;
        transform: scale(1);
        animation-timing-function: ease-in-out;
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes onboardingAnimation02 {
    5% {
        opacity: 0;
        transform: scale(0);
    }

    40% {
        opacity: 1;
        transform: scale(1);
        animation-timing-function: ease-in-out;
    }

    45% {
        opacity: 0;
        transform: scale(1);
    }

    55% {
        opacity: 0;
        transform: scale(0);
    }

    90% {
        opacity: 1;
        transform: scale(1);
        animation-timing-function: ease-in-out;
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@media screen and (max-width: 1080px) {
    .p-drag-guide-overlay__text {
        font-size: var(--font-size-Text-L);
    }
}

@media screen and (max-width:767px) {
    .p-drag-guide-overlay__text {
        font-size: var(--font-size-Text-M);
    }
}

/* ページ全体のスクロールを完全に止める（ビューアーが画面全体を覆うため） */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* のぞき窓（ビューアー）。画面全体を覆い、中の板（ステージ）をドラッグで動かす */
.p-book-archive__body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    cursor: grab;
}

.p-book-archive__body:active {
    cursor: grabbing;
}

/* ステージ（ドラッグで動く板）。中身に合わせて自動でグリッドが広がる。
   タイトルの分だけ上の余白（padding-top）を広くとっている */
.p-book-archive__grid {
    position: absolute;
    display: grid;
    grid-template-rows: repeat(3, var(--book-card-height));
    grid-auto-flow: column;
    grid-auto-columns: var(--book-card-width);
    gap: var(--book-gap-y) var(--book-gap-x);
    padding: var(--book-grid-padding-top) 10vw var(--book-grid-padding-bottom);
    width: max-content;
    height: max-content;
    will-change: transform;
}

/* タイトル・説明文。本と同じ板（ステージ）の上に乗っているので、ドラッグすると本と一緒に動く。
   グリッドの行には参加させず、1列目の本一覧の真上に絶対配置する */
.p-book-archive__header {
    position: absolute;
    z-index: 1;
    top: 3vh;
    left: 10vw;
    width: calc(var(--book-card-width) * 3 + var(--book-gap-x));
}

.p-book-archive__card {
    position: relative;
    z-index: 1;
    width: var(--book-card-width);
    user-select: none;
}

/* 本棚のように、本の下に一本の棚板のラインを引く（カードごとに途切れず、段ごとに1本の連続した線にする）。
   線の位置は --book-grid-padding-top を基準に自動で計算されるため、
   グリッドのpadding-topとずれる心配なく、上の変数を変えるだけで上下の余白を調整できる */
.p-book-archive__grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4em;
    /* 【調整ポイント】線の左右の余白 */
    right: 4em;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom,
            transparent 0,
            transparent calc(var(--book-card-height) + var(--book-shelf-gap-above)),
            var(--color-Primary) calc(var(--book-card-height) + var(--book-shelf-gap-above)),
            var(--color-Primary) calc(var(--book-card-height) + var(--book-shelf-gap-above) + 2px),
            transparent calc(var(--book-card-height) + var(--book-shelf-gap-above) + 2px),
            transparent calc(var(--book-card-height) + var(--book-gap-y)));
    background-position-y: var(--book-grid-padding-top);
}

/* 1:1.414の箱の中央にタイトルと著者を表示する */
.p-book-archive__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5em;
    width: 100%;
    height: 100%;
    padding: 1.5em;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    font: inherit;
    color: var(--color-White);
}

/* 3色からランダムに1色（表示側でクラスを付与）。本の表紙画像を敷く */
.p-book-archive__button--green {
    background-color: var(--color-NUMATA-Green);
    background-image: url('../../images/common/recommend-book-green.webp');
    background-size: cover;
    background-position: center;
}

.p-book-archive__button--orange {
    background-color: var(--color-NUMATA-Orange);
    background-image: url('../../images/common/recommend-book-orange.webp');
    background-size: cover;
    background-position: center;
}

.p-book-archive__button--lightblue {
    background-color: var(--color-NUMATA-LightBlue);
    background-image: url('../../images/common/recommend-book-blue.webp');
    background-size: cover;
    background-position: center;
}

.p-book-archive__title-text {
    font-weight: 700;
    font-size: var(--font-size-Text-R);
    line-height: 1.4;
    /* 長いタイトルは2行で...省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-book-archive__author {
    max-width: 100%;
    font-size: var(--font-size-Text-S);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    :root {
        --book-card-width: 11em;
        --book-gap-x: 2em;
        --book-gap-y: 2em;
        /* スマホは見出し+リード文の高さがかさみ、1段目の本に隠れやすいため余白を広めに取る */
        --book-grid-padding-top: 34vh;
        --book-grid-padding-bottom: 6vh;
    }

    .p-book-archive__grid {
        grid-template-rows: repeat(2, var(--book-card-height));
        padding: var(--book-grid-padding-top) 25px var(--book-grid-padding-bottom);
    }

    .p-book-archive__header {
        top: 2.5vh;
        left: 25px;
        width: calc(var(--book-card-width) * 2 + var(--book-gap-x));
    }

    /* 見出し・リード文の行間を少し詰めて、1段目の本と重なりにくくする */
    .p-book-archive__lead {
        line-height: 1.5;
    }

    .p-book-archive__grid::before {
        left: 1.5em;
        right: 1.5em;
    }
}