@charset "utf-8";

/*-------------------------------------------------
   Breakpoints
   - Mobile portrait           : (default)
   - Mobile landscape          : ～h500px
   - Tablet portrait           : w768px～
   - Tablet landscape & Desktop: w1024px～
-------------------------------------------------*/


/* --- 変数はcommon.cssで一括管理 --- */


/**************************************************
   Keyframes
**************************************************/
/* --- Scroll bar --- */
@keyframes scroll-bar {
    0%    { transform: scaleX(0); transform-origin: left; }         /* 左端を固定して右へ伸ばす */
    50%   { transform: scaleX(1); transform-origin: left; }
    50.1% { transform: scaleX(1); transform-origin: right; }        /* 右端を固定して左へ縮ませる */
    100%  { transform: scaleX(0); transform-origin: right; }
}


/**************************************************
   Loading
**************************************************/
.l-loading {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr-text);
    z-index: var(--z-loading);
    opacity: 1;
    visibility: visible;
}

/* --- ローディング中（初回） --- */
body.is-loading .l-loading {
    opacity: 1;
    visibility: visible;
}

/* --- 2回目以降またはローディング終了時 */
body:not(.is-loading) .l-loading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 1.2s ease,
        visibility 1.2s;
}

/* --- Counter --- */
.l-loading__counter {
    display: flex;
    align-items: baseline;
    font-family: var(--fnt-countup);
    font-variation-settings: 'wght' 400, 'slnt' -10;
    font-size: 2.4rem;
    color: var(--clr-bg-card);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;     /* 数字の幅を等幅（固定幅）にする */
    opacity: 0;
    filter: blur(15px);
    transform: scale(1.1);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.l-loading__num {
    inline-size: 2.5em;         /* 3桁の数字が入る幅を確保 */
    text-align: end;            /* 右寄せにして、%との距離を常に一定にする */
}

/* --- ローディング中 --- */
.l-loading__counter.is-active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* --- ローディング終了時 */
body:not(.is-loading) .l-loading__counter {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s;
}


/**************************************************
   Work info
**************************************************/
.p-work-info {
    position: fixed;
    inset-block-start: 12.5dvh;
    inline-size: 100%;
    block-size: 40px;
    display: flex;
    justify-content: center;
    padding-inline: var(--spc-l);
    overflow: hidden;               /* 前後のテキストを隠す */
    z-index: var(--z-front-content);
}

.p-work-info__list {
    inline-size: 100%;
    transform: translateY(calc(var(--current) * -40px));        /* JSから受け取る--currentで全体移動 */
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.30, 1);
}

.p-work-info__item {
    block-size: 40px;
}

.p-work-info__link {
    display: flex;
    align-items: center;
    gap: var(--spc-s);
}

/* --- 子要素：基本の待機状態（0以外）ｰｰｰ */
.p-work-info__tag,
.p-work-info__title {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-work-info__tag {
    color: var(--clr-primary);
}

.p-work-info__title {
    font-size: 1.4rem;
    font-weight: 400;
}

.p-work-info__title::after {
    content: ">";
    padding-inline-start: var(--spc-s);
}

/* --- 上側待機（diff < 0) --- */
.p-work-info__item[data-index-diff^="-"] .p-work-info__tag,
.p-work-info__item[data-index-diff^="-"] .p-work-info__title {
    opacity: 0;
    transform: translateY(-10px);
}

/* --- 中央表示（diff = 0） --- */
.p-work-info__item[data-index-diff="0"] .p-work-info__tag,
.p-work-info__item[data-index-diff="0"] .p-work-info__title {
    opacity: 1;
    transform: translateY(0);
}

/* --- 子要素の時間差表示（diff = 0） --- */
.p-work-info__item[data-index-diff="0"] .p-work-info__tag { transition-delay: 0.3s; }
.p-work-info__item[data-index-diff="0"] .p-work-info__title { transition-delay: 0.45s; }

/* --- 下側待機（diff > 0) --- */
.p-work-info__item:not([data-index-diff="0"]):not([data-index-diff^="-"]) .p-work-info__tag,
.p-work-info__item:not([data-index-diff="0"]):not([data-index-diff^="-"]) .p-work-info__title {
    opacity: 0;
    transform: translateY(10px);
}

/* --- Hero/Contact（非表示） --- */
.p-work-info__item--hidden {
    opacity: 0;
    visibility: hidden;
}


/**************************************************
   Work visual list
**************************************************/
.p-work-visual__list {
    inline-size: 100%;
    block-size: 100dvh;
    display: flex;
    align-items: center;
    overflow-x: auto;                   /* 横スクロールを有効 */
    overflow-y: clip;                   /* 縦スクロールを無効 */
    overscroll-behavior-x: contain;     /* スクロールが端で止まるように */
    scroll-snap-type: x mandatory;      /* 横方向にスナップ */
    -ms-overflow-style: none;           /* スクロールバーを非表示（IE / 旧Edge用） */
    scrollbar-width: none;              /* スクロールバーを非表示（Firefox用） */
    scroll-behavior: smooth;            /* 滑らかにスクロール */
    padding-inline: 25%;                /* 左右に余白を設けて、前後の画像を少し画面に入れ込む */
    gap: 15%;                           /* 前後の画像との隙間 */
    -webkit-overflow-scrolling: touch;      /* 指での操作を滑らかにする */
}

.p-work-visual__list::-webkit-scrollbar {
    display: none;                      /* スクロールバーを非表示（Chrome / Safari / 新Edge用） */
}

.p-work-visual__item {
    flex: 0 0 100%;                     /* 画像を拡大縮小させずに常に幅100%にする */
    scroll-snap-align: center;          /* 画面中央にスナップ */
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-work-visual__link {
    transform: scale(0.8);
    opacity: 0.4;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Active --- */
.is-active .p-work-visual__link {
    transform: scale(1.0);
    opacity: 1;
}

/* --- First slide（Hero） --- */
.p-work-visual__item--hero {
    margin-inline-end: 20vw;            /* 制作物のスライドが画面内に入らないようにする */
    pointer-events: none;
}

.p-work-visual__name {
    display: block;
    margin-block-end: var(--spc-m);
    font-family: var(--fnt-accent);
    font-weight: 700;
    font-size: 4.0rem;
    line-height: 1;
    letter-spacing: 0.3em;
    text-align: justify;
    text-transform: uppercase;
}

.p-work-visual__job {
    display: block;
    padding-block: var(--spc-s);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    color: var(--clr-primary);
    text-align: justify;
}

.p-work-visual__name,
.p-work-visual__job {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(5px);
    will-change: opacity, transform, filter;        /* パフォーマンス向上 */
}

/* --- Ready --- */
body.is-ready .p-work-visual__name {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.30, 1);
}

body.is-ready .p-work-visual__job {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.30, 1) 0.6s;
}

/* --- Last slide（Contact） --- */
.p-work-visual__item--contact {
    margin-inline-start: 20vw;          /* 制作物のスライドが画面内に入らないようにする */
    pointer-events: none;
}

.p-work-visual__contact-body {
    padding-inline: var(--spc-m);
    padding-block: var(--spc-l);
    text-align: center;
}

.p-work-visual__contact-text {
    margin-block-end: var(--spc-m);
}


/**************************************************
   Indicator (SP only)
**************************************************/
.p-indicator {
    position: fixed;
    inset-block-end: var(--spc-l);
    inline-size: 100vw;
    display: flex;
    justify-content: center;
    gap: var(--spc-s);
    padding-block: var(--spc-xs);
}

.p-indicator__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background-color: var(--clr-primary);
    transition: all 0.3s ease;
}

/* --- Active --- */
.p-indicator__dot.is-active {
    background-color: var(--clr-active);
    transform: scale(1.5);
}


/**************************************************
   Scroll bar (PC only)
**************************************************/
.p-scroll {
    display: none;
}


/**************************************************
   Media queries
**************************************************/
/* --- Tablet portrait --- */
@media screen and (min-width: 768px) and (orientation: portrait) {
    
    .p-work-info {
        inset-block-start: 50vh;
        transform: translateY(calc(-50% - 25vh));
        padding-inline: 15%;
    }

    .p-work-visual__list {
        padding-inline: 15%;                /* 左右に余白を設けて、前後の画像を少し画面に入れ込む */
        gap: 5%;                            /* 前後の画像との隙間 */
        -webkit-overflow-scrolling: touch;      /* 指での操作を滑らかにする */
    }
}


/* --- Tablet landscape & Desktop --- */
@media screen and (min-width: 1024px) {

    .p-work-info {
        inset-block-start: var(--spc-l);
        padding-inline: 25%;
    }

    .p-work-info__link {
        gap: var(--spc-m);
    }

    .p-work-info__link:hover {
        text-decoration: underline;
        text-underline-offset: 0.5em;
        text-decoration-thickness: 0.5px;
        text-decoration-color: var(--clr-primary);
    }

    .p-work-info__title {
        font-size: 2.0rem;
    }

    .p-work-visual__name {
        font-size: 5.6rem;
    }

    .p-work-visual__job {
        font-size: 1.95rem;
    }

    .p-indicator {
        display: none;
    }

    .p-scroll {
        display: block;
        position: fixed;
        inset-inline-start: 50%;
        inset-block-end: var(--spc-m);
        transform: translateX(-50%);
        inline-size: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }

    .p-scroll__text {
        display: flex;
        justify-content: center;
        padding-inline: var(--spc-m);
        font-size: 1.2rem;
        letter-spacing: 0.4em;
        background-color: var(--clr-bg-page);
    }

    .p-scroll__text::after {
        content: "";
        position: absolute;
        inset-block-end: 50%;
        inline-size: 100%;
        block-size: 0.5px;
        background-color: var(--clr-text);
        z-index: var(--z-back-content);
        animation: scroll-bar 1.2s infinite ease-out;
    }

    .p-work-visual__contact-text {
        margin-block-end: var(--spc-l);
    }
}


/* --- Mobile landscape --- */
@media screen and (max-height: 500px) and (orientation: landscape) {

    .p-work-info {
        inset-inline-start: 25vw;
        inset-block-start: var(--spc-m);
    }

    .p-work-visual__img {
        block-size: 60vh;
    }

    .p-work-visual__item--contact .l-section__title {
        margin-block-end: var(--spc-l);
    }

    .p-indicator {
        inset-block-end: var(--spc-m);
    }
}