/*
Theme Name: UNISEC GeneratePress Child
Theme URI: https://unisec.jp/
Template: generatepress
Author: UNISEC
Description: Child theme for the UNISEC GeneratePress migration.
Version: 0.1.0
Text Domain: unisec-gp-child
*/

/* =========================================================
   トップページ：タイプライター + 写真ヒーロー
   ========================================================= */

body.is-unisec-primary-home .unisec-typewriter-hero {
    /*
    写真サイズ：1920 x 964
    964 / 1920 * 100 = 50.21vw
  */
    --hero-height: 50.21vw;

    /*
    タイプライター文字の位置。
    もっと上げるなら 36%、下げるなら 40% くらい。
  */
    --typewriter-top: 45%;

    /*
    写真上タイトルの位置。
    ご指定の top: clamp(45px, 5vw, 180px); を使用。
  */
    --hero-copy-left: clamp(28px, 3vw, 56px);
    --hero-copy-top: clamp(45px, 5vw, 180px);

    /*
    タイプライター完了後に表示する中央コピーの位置。
    数字を大きくすると下、小さくすると上に動きます。
  */
    --hero-tagline-top: 65%;
    --hero-finish-hold: 1.2s;

    position: relative;
    width: 100vw;
    height: var(--hero-height);
    min-height: 0;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow: hidden;
    background: #fff;
    isolation: isolate;
}

/* 背景写真：タイプライター表示中も完了後も同じ写真を使う */
body.is-unisec-primary-home .unisec-typewriter-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}

/* =========================================================
   タイプライター文字
   写真の上に最初から表示し、完了後にフェードアウト
   ========================================================= */

body.is-unisec-primary-home .unisec-typewriter-block {
    position: absolute;
    z-index: 3;

    left: 50%;
    top: var(--typewriter-top);
    width: min(88vw, 980px);

    margin: 0;
    transform: translate(-50%, -50%);

    color: #fff !important;
    text-align: center;
    font-weight: 700;
    font-size: clamp(18px, 2.1vw, 34px);
    line-height: 1.55;

    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.45);

    opacity: 1;
    visibility: visible;

    transition:
        opacity 900ms ease,
        transform 900ms ease,
        visibility 0s linear 0s;
}

body.is-unisec-primary-home .unisec-typewriter-block * {
    color: inherit !important;
}

body.is-unisec-primary-home .unisec-typewriter-block > :last-child {
    margin-bottom: 0;
}

/* タイプライター終了後：タイプライター文字を消す */
body.is-unisec-primary-home
    .unisec-typewriter-hero.is-typewriter-finished
    .unisec-typewriter-block {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(-50% - 10px));

    transition:
        opacity 900ms ease var(--hero-finish-hold),
        transform 900ms ease var(--hero-finish-hold),
        visibility 0s linear calc(var(--hero-finish-hold) + 900ms);
}

/* =========================================================
   写真上タイトル：University Space Engineering Consortium / UNISEC
   最初は非表示、タイプライター終了後に表示
   ========================================================= */

body.is-unisec-primary-home .unisec-hero-copy {
    position: absolute;
    z-index: 4;

    left: var(--hero-copy-left);
    top: var(--hero-copy-top);

    color: #fff;
    pointer-events: none;
    white-space: nowrap;
    text-align: left !important;

    font-family:
        "Times New Roman", Times, "Yu Mincho", "YuMincho", "游明朝",
        "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho",
        "ＭＳ Ｐ明朝", serif;

    font-weight: 700;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.28);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition:
        opacity 1000ms ease,
        transform 1000ms ease,
        visibility 0s linear 1000ms;
}

body.is-unisec-primary-home .unisec-hero-copy * {
    text-align: left !important;
}

/* 上段：University Space Engineering Consortium */
body.is-unisec-primary-home .unisec-hero-copy__sub {
    display: block;
    margin: 0 0 clamp(10px, 1.25vw, 22px);
    padding: 0;

    font-family: inherit;
    font-size: clamp(24px, 3vw, 52px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.055em;
}

/* 下段：UNISEC */
body.is-unisec-primary-home .unisec-hero-copy__main {
    display: block;
    margin: 0;
    padding: 0;

    font-family: inherit;
    font-size: clamp(72px, 9.4vw, 168px);
    line-height: 0.75;
    font-weight: 700;
    letter-spacing: -0.06em;
}

/* タイプライター終了後：写真上タイトルを表示 */
body.is-unisec-primary-home
    .unisec-typewriter-hero.is-typewriter-finished
    .unisec-hero-copy {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition:
        opacity 1000ms ease calc(var(--hero-finish-hold) + 250ms),
        transform 1000ms ease calc(var(--hero-finish-hold) + 250ms),
        visibility 0s linear var(--hero-finish-hold);
}

/* =========================================================
   写真上キャッチコピー：宇宙を、見る人から、作る人へ
   最初は非表示、タイプライター終了後に中央下へ表示
   ========================================================= */

body.is-unisec-primary-home .unisec-hero-tagline {
    position: absolute;
    z-index: 4;

    left: 50%;
    top: var(--hero-tagline-top);
    width: min(90vw, 960px);

    display: block;
    margin: 0;
    padding: 0;

    color: #fff !important;
    pointer-events: none;
    text-align: center !important;

    font-family: inherit;
    font-weight: 800;
    font-size: clamp(22px, 2.7vw, 46px);
    line-height: 1.35;
    letter-spacing: 0.04em;

    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.45);

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(-50% + 10px));

    transition:
        opacity 1000ms ease,
        transform 1000ms ease,
        visibility 0s linear 1000ms;
}

body.is-unisec-primary-home .unisec-hero-tagline * {
    color: inherit !important;
    text-align: inherit !important;
}

body.is-unisec-primary-home .unisec-hero-tagline > :last-child {
    margin-bottom: 0;
}

/* タイプライター終了後：中央コピーを表示 */
body.is-unisec-primary-home
    .unisec-typewriter-hero.is-typewriter-finished
    .unisec-hero-tagline {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);

    /*
    タイプライター文字がフェードアウトした後に出すため 900ms 遅らせています。
    unisec-hero-copy と完全に同じタイミングにしたい場合は 900ms を 250ms に変更してください。
  */
    transition:
        opacity 1000ms ease calc(var(--hero-finish-hold) + 900ms),
        transform 1000ms ease calc(var(--hero-finish-hold) + 900ms),
        visibility 0s linear var(--hero-finish-hold);
}

/* =========================================================
   モバイル調整
   ========================================================= */

@media (max-width: 768px) {
    body.is-unisec-primary-home .unisec-typewriter-hero {
        --typewriter-top: 50%;
        --hero-copy-left: clamp(16px, 5vw, 28px);
        --hero-copy-top: clamp(28px, 7vw, 54px);
        --hero-tagline-top: 66%;
    }

    body.is-unisec-primary-home .unisec-typewriter-block {
        width: min(90vw, 680px);
        font-size: clamp(15px, 4vw, 20px);
        line-height: 1.5;
    }

    body.is-unisec-primary-home .unisec-hero-copy__sub {
        font-size: clamp(15px, 4.4vw, 24px);
        margin-bottom: 0.35em;
    }

    body.is-unisec-primary-home .unisec-hero-copy__main {
        font-size: clamp(48px, 14.5vw, 88px);
    }

    body.is-unisec-primary-home .unisec-hero-tagline {
        width: min(88vw, 680px);
        font-size: clamp(18px, 5vw, 28px);
        line-height: 1.35;
        letter-spacing: 0.02em;
    }
}