/* ============================================
   親力アッププログラム LP - Animations
   ============================================ */

/* ===========================================
   Scroll Animations
   =========================================== */

/* フェードイン＆スライドアップ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* フェードイン */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* スケールイン */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* パルス（CTAボタン用） */
@keyframes pulse {

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

    50% {
        transform: scale(1.02);
    }
}

/* フローティング（デコレーション用） */
@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ===========================================
   Animation Classes
   =========================================== */

/* 初期状態（JSで制御） */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
}

.scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ===========================================
   Staggered Animations (チェックリスト用)
   =========================================== */
.checklist__item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.checklist__item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.checklist__item:nth-child(1) {
    transition-delay: 0.1s;
}

.checklist__item:nth-child(2) {
    transition-delay: 0.2s;
}

.checklist__item:nth-child(3) {
    transition-delay: 0.3s;
}

.checklist__item:nth-child(4) {
    transition-delay: 0.4s;
}

/* ===========================================
   Program Week Cards Stagger
   =========================================== */
.program__week {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.program__week.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.program__week:nth-child(1) {
    transition-delay: 0s;
}

.program__week:nth-child(2) {
    transition-delay: 0.15s;
}

.program__week:nth-child(3) {
    transition-delay: 0.3s;
}

.program__week:nth-child(4) {
    transition-delay: 0.45s;
}

/* ===========================================
   CTA Button Animation
   =========================================== */
.cta-button {
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: left 0.5s ease;
}

.cta-button:hover::before {
    left: 100%;
}

/* パルスアニメーション（CTAセクションのボタン） */
.cta .cta-button--large {
    animation: pulse 2s ease-in-out infinite;
}

.cta .cta-button--large:hover {
    animation: none;
}

/* ===========================================
   Hover Effects
   =========================================== */

/* カードホバー */
.hero__card,
.empathy__card,
.insight__conclusion,
.profile__card,
.closing__final,
.program__week {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero__card:hover,
.empathy__card:hover,
.insight__conclusion:hover,
.profile__card:hover,
.closing__final:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(43, 64, 102, 0.12);
}

.program__week:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 25px rgba(43, 64, 102, 0.1);
}

/* 画像ホバー */
.insight__image,
.closing__image {
    transition: transform 0.3s ease;
}

.insight__image:hover,
.closing__image:hover {
    transform: scale(1.02);
}

/* プロフィール写真ホバー */
.profile__image {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile__image:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(43, 64, 102, 0.15);
}

/* ===========================================
   Checkbox Animation
   =========================================== */
.checklist__checkbox {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.checklist__item:hover .checklist__checkbox {
    background-color: rgba(245, 169, 98, 0.1);
    border-color: var(--sunset-orange);
}

.checklist__checkbox::after {
    transition: opacity 0.3s ease;
}

.checklist__item:hover .checklist__checkbox::after {
    opacity: 1;
}

/* ===========================================
   Reduced Motion
   =========================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-in-up,
    .fade-in,
    .scale-in,
    .checklist__item,
    .program__week {
        opacity: 1;
        transform: none;
    }
}

/* ===========================================
   Loading State
   =========================================== */
.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* ===========================================
   Wave Animation (Hero)
   =========================================== */
@keyframes wave {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-5%);
    }
}

.hero__wave-bottom {
    animation: wave 8s ease-in-out infinite;
}

/* ===========================================
   Age Cards Stagger Animation
   =========================================== */
.age-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.age-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.age-card:nth-child(1) { transition-delay: 0s; }
.age-card:nth-child(2) { transition-delay: 0.1s; }
.age-card:nth-child(3) { transition-delay: 0.2s; }
.age-card:nth-child(4) { transition-delay: 0.3s; }

/* ===========================================
   Testimonial Cards Animation
   =========================================== */
.testimonial-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.testimonial-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.testimonial-card:nth-child(1) { transition-delay: 0s; }
.testimonial-card:nth-child(2) { transition-delay: 0.15s; }

/* ===========================================
   Why Free Reason Cards Animation
   =========================================== */
.why-free__reason {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.why-free__reason.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.why-free__reason:nth-child(1) { transition-delay: 0s; }
.why-free__reason:nth-child(2) { transition-delay: 0.15s; }
.why-free__reason:nth-child(3) { transition-delay: 0.3s; }

/* ===========================================
   Video Play Button Pulse
   =========================================== */
@keyframes playPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), 0 0 0 15px rgba(255, 255, 255, 0.1);
    }
}

.video-placeholder__play-btn {
    animation: playPulse 2s ease-in-out infinite;
}

.video-placeholder__play-btn:hover {
    animation: none;
}

/* ===========================================
   Curriculum Accordion Animation
   =========================================== */
.curriculum-week__days {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================
   Future Cards Animation (理想の未来)
   =========================================== */
.future-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.future-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.future-card:nth-child(1) { transition-delay: 0s; }
.future-card:nth-child(2) { transition-delay: 0.15s; }
.future-card:nth-child(3) { transition-delay: 0.3s; }
.future-card:nth-child(4) { transition-delay: 0.45s; }

/* Future Card Hover */
.future-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease-out;
}

.future-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(43, 64, 102, 0.12);
}

/* ===========================================
   Mindset Cards Animation (親の在り方)
   =========================================== */
.mindset-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mindset-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mindset-card:nth-child(1) { transition-delay: 0s; }
.mindset-card:nth-child(3) { transition-delay: 0.2s; }

/* Mindset Points Animation */
.mindset-point {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.mindset-point.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.mindset-point:nth-child(1) { transition-delay: 0s; }
.mindset-point:nth-child(2) { transition-delay: 0.15s; }
.mindset-point:nth-child(3) { transition-delay: 0.3s; }