/* 冒頭の文字はフェードイン後も表示し、ボタンの30%の重なりを維持する。 */
.home {
    --reveal-distance: -72px;
    --reveal-rise: 24px;
    --intro-enter: 18px;
}

.home .hero {
    overflow: hidden;
}

.home .hero__inner {
    padding-top: calc(var(--site-header-height) + 24px);
}

.home .hero__copy {
    display: grid;
    justify-items: center;
    width: 100%;
    animation: ect-hero-intro 1.1s ease both;
    pointer-events: none;
}

.home .hero__copy h1 span {
    display: inline-block;
}

.home .hero__copy .hero__description {
    display: grid;
    gap: 8px;
    line-height: 1.9;
}

.home .hero__copy h1,
.home .hero__copy p {
    text-align: center;
}

.home .hero__photo {
    transform-origin: center;
    animation: ect-hero-photo 8s cubic-bezier(.2, .65, .3, 1) both;
}

.home .hero__copy.is-intro-complete {
    animation: none;
    opacity: 1;
    transform: none;
}

/* 写真の準備・タブ表示を待ってから再生し、背景タブでは進行させない。 */
.home .hero.is-intro-pending .hero__copy {
    animation: none;
    opacity: 0;
    transform: none;
}

.home .hero.is-intro-pending .hero__photo {
    animation: none;
}

.home .hero.is-intro-paused .hero__copy,
.home .hero.is-intro-paused .hero__photo {
    animation-play-state: paused;
}

@keyframes ect-hero-intro {
    from { opacity: 0; transform: translateY(var(--intro-enter)); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ect-hero-photo {
    from { transform: scale(1.045); }
    to { transform: scale(1); }
}

/* 属性はJSの初期化成功時だけ付ける。JS無効時も本文・検索・リンクを表示する。 */
.home [data-reveal] {
    opacity: 0;
}

.home [data-reveal].is-revealed {
    opacity: 1;
}

.home [data-reveal].is-revealing {
    animation: ect-reveal-slide 1.15s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms) both;
}

.home [data-reveal="rise"].is-revealing {
    animation-name: ect-reveal-rise;
}

@keyframes ect-reveal-slide {
    from { opacity: 0; transform: translateX(var(--reveal-distance)); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes ect-reveal-rise {
    from { opacity: 0; transform: translateY(var(--reveal-rise)); }
    to { opacity: 1; transform: translateY(0); }
}

/* キーボードで移動した先は、登場演出を待たずにすぐ表示する。 */
.home [data-reveal]:focus-within {
    opacity: 1;
    transform: none;
    animation: none;
}

.home .feature-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .2) 50%, transparent 80%);
    transform: translateX(-130%);
    transition: transform .8s ease;
    pointer-events: none;
}

.home .feature-card img,
.home .property-card__image img {
    transition: transform .8s cubic-bezier(.2, .65, .3, 1);
}

.home .feature-card span {
    transition: transform .3s ease;
}

.home .home-search__buttons a,
.home .button {
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.home .post-list__item h3 a {
    background: linear-gradient(var(--color-gold), var(--color-gold)) left bottom / 0 1px no-repeat;
    transition: background-size .35s ease;
}

.home .post-list__item h3 a:focus-visible {
    background-size: 100% 1px;
}

/* タッチ端末にhover状態を残さず、マウス操作時だけ光と浮き上がりを付ける。 */
@media (hover: hover) and (pointer: fine) {
    .home .feature-card:hover::before { transform: translateX(130%); }
    .home .feature-card:hover img { transform: scale(1.075); }
    .home .feature-card:hover span { transform: translateY(-3px); }
    .home .home-search__buttons a:hover,
    .home .button:hover { transform: translateY(-3px); }
    .home .post-list__item h3 a:hover { background-size: 100% 1px; }
}

/* 動きを減らす設定では移動を小さくし、フェードは残す。大きなズーム・ホバー移動は止める。 */
@media (prefers-reduced-motion: reduce) {
    .home {
        --reveal-distance: -20px;
        --reveal-rise: 6px;
        --intro-enter: 0px;
    }
    .home .hero__photo { animation: none; }
    .home .feature-card::before { display: none; }
    .home .feature-card span,
    .home .feature-card img,
    .home .property-card__image img,
    .home .home-search__buttons a,
    .home .button,
    .home .post-list__item h3 a { transition: none; }
    .home .feature-card:hover span,
    .home .feature-card:hover img,
    .home .property-card__image:hover img,
    .home .home-search__buttons a:hover,
    .home .button:hover { transform: none; }
}

@media print {
    .home .hero__copy,
    .home .hero__copy.is-intro-complete,
    .home .hero.is-intro-pending .hero__copy,
    .home [data-reveal],
    .home [data-reveal].is-revealing { opacity: 1; transform: none; animation: none; transition: none; }
    .home .hero__photo { animation: none; }
}