/* === LP Hero Animation === */
.sec-lp-hero--anim .lp-hero-anim-catch {
    opacity: 0;
    animation: heroFadeIn 0.5s ease 0.3s forwards;
}

.sec-lp-hero--anim .lp-hero-anim-logo {
    opacity: 0;
    transform: translateY(16px);
    animation: heroFadeUp 0.6s ease 0.5s forwards;
}

.sec-lp-hero--anim .lp-hero-anim-desc {
    opacity: 0;
    animation: heroFadeIn 0.5s ease 0.7s forwards;
}

.sec-lp-hero--anim .lp-hero-anim-btn {
    opacity: 0;
    transform: translateY(16px);
    animation: heroFadeUp 0.5s ease 0.9s forwards;
}

.sec-lp-hero--anim .lp-hero-anim-left {
    opacity: 0;
    transform: translateX(30px);
    animation: heroSlideIn 0.7s ease 0.4s forwards;
}

.sec-lp-hero--anim .lp-hero-anim-right {
    opacity: 0;
    transform: translateX(30px);
    animation: heroSlideIn 0.7s ease 0.6s forwards;
}

@keyframes heroSlideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sec-lp-hero--anim .lp-hero-anim-catch,
    .sec-lp-hero--anim .lp-hero-anim-logo,
    .sec-lp-hero--anim .lp-hero-anim-desc,
    .sec-lp-hero--anim .lp-hero-anim-btn,
    .sec-lp-hero--anim .lp-hero-anim-right,
    .sec-lp-hero--anim .lp-hero-anim-left {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* === Top Hero Animation === */
.sec-top-hero--anim .top-hero-anim-heading {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.6s ease 0.5s forwards;
}

.sec-top-hero--anim .top-hero-anim-card-1:not(.anim-done),
.sec-top-hero--anim .top-hero-anim-card-2:not(.anim-done) {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.5s ease forwards;
}

.sec-top-hero--anim .top-hero-anim-card-1:not(.anim-done) {
    animation-delay: 0.8s;
}

.sec-top-hero--anim .top-hero-anim-card-2:not(.anim-done) {
    animation-delay: 0.95s;
}

.sec-top-hero--anim .top-hero-anim-card-1.anim-done,
.sec-top-hero--anim .top-hero-anim-card-2.anim-done {
    opacity: 1;
}

.sec-top-hero--anim .top-hero-anim-stripe {
    clip-path: inset(0 100% 0 0);
    animation: heroStripeDraw 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0s forwards;
}

@media (prefers-reduced-motion: reduce) {

    .sec-top-hero--anim .top-hero-anim-heading,
    .sec-top-hero--anim .top-hero-anim-card-1,
    .sec-top-hero--anim .top-hero-anim-card-2,
    .sec-top-hero--anim .top-hero-anim-stripe {
        opacity: 1;
        transform: none;
        clip-path: none;
        animation: none;
    }
}

/* === Hero Animation === */
/* 1. ストライプ（0s〜1.2s） */
.hero--anim .hero-anim-stripe {
    clip-path: inset(0 100% 0 0);
    animation: heroStripeDraw 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0s forwards;
}

/* 2. ロゴ（0.5s〜） */
.hero--anim .hero-anim-logo {
    opacity: 0;
    animation: heroFadeIn 0.5s ease 0.5s forwards;
}

/* 3. コピー（0.5s〜） */
.hero--anim .hero-anim-heading {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.6s ease 0.5s forwards;
}

/* 4. ボタン（0.8s〜） */
.hero--anim .hero-anim-actions {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.6s ease 0.8s forwards;
}

/* 5. 画像（1.0s〜） */
.hero--anim .hero-anim-image {
    opacity: 0;
    transform: translateX(40px);
    animation: heroSlideIn 0.7s ease 1.0s forwards;
}

@keyframes heroStripeDraw {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes heroFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes heroFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero--anim .hero-anim-stripe,
    .hero--anim .hero-anim-logo,
    .hero--anim .hero-anim-heading,
    .hero--anim .hero-anim-actions,
    .hero--anim .hero-anim-image {
        opacity: 1;
        transform: none;
        clip-path: none;
        animation: none;
    }
}

/* === Scroll Animation === */
.anim-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-fade-up.anim-visible {
    opacity: 1;
    transform: translateY(0);
}

.anim-stagger-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.anim-stagger-item.anim-visible {
    opacity: 1;
    transform: translateY(0);
}


/* アニメーション無効化（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {

    .anim-fade-up,
    .anim-stagger-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}