/* =========================
  Scroll Animation (Common)
========================= */
.hidden-anime {
    opacity: 0;
    pointer-events: none;
    /* 触れないようにするなら */
}

/* ===== アニメ完了後 ===== */
.animated {
    opacity: 1;
    pointer-events: auto;
}

/* =========================
  Recommended: Basic (追加)
========================= */

/* 下からフェード（王道） */
.fadeUp {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; /* ← both */
  will-change: transform, opacity;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* その場でフェード（地味に一番使う） */
.fadeIn {
    animation: fadeIn 0.6s ease-out forwards;
    will-change: opacity;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 右から（左右で使い分けしやすい） */
.fadeRight {
    animation: fadeRight 0.7s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ズームイン（画像やアイコン向け・やりすぎない） */
.zoomIn {
    animation: zoomIn 0.6s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ちょい拡大しながら（カード/見出し向け） */
.scaleUp {
    animation: scaleUp 0.7s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* =========================
  Existing (あなたの分) - そのまま移植
========================= */

.flipLeftTop {
    animation-name: flipLeftTopAnime;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes flipLeftTopAnime {
    from {
        transform: translate(-20px, 80px) rotate(-15deg);
        opacity: 0;
    }

    to {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

.fadeLeft {
    animation: fadeLeft 0.7s ease-out forwards;
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.blur {
    animation: blurIn 0.8s ease-out forwards;
}

@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(8px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

.rotateY {
    animation-name: rotateYAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes rotateYAnime {
    from {
        opacity: 0;
        transform: rotateY(-180deg) translateX(-800px);
    }

    to {
        opacity: 1;
        transform: rotateY(0) translateX(0);
    }
}

.faderotate {
    animation: fadeRotate 0.8s ease-out forwards;
}

@keyframes fadeRotate {
    from {
        opacity: 0;
        transform: rotate(-8deg) scale(0.95);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* =========================
   FV専用：しっかり動くヒーロー版
========================= */
.fadeUpHero {
    animation: fadeUpHero 1.1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: transform, opacity;

    backface-visibility: hidden;
    transform: translateZ(0);
}

@keyframes fadeUpHero {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.96) translateZ(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-12px) scale(1.01) translateZ(0);
    }

    75% {
        transform: translateY(4px) scale(0.998) translateZ(0);
    }

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

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

    .fadeUp,
    .fadeIn,
    .fadeLeft,
    .fadeRight,
    .blur,
    .rotateY,
    .faderotate,
    .flipLeftTop,
    .zoomIn,
    .scaleUp,
    .fadeUpHero {
        animation: none !important;
    }

    .hidden-anime {
        opacity: 1 !important;
    }
}

/* =========================
  Delay utilities（同梱）
========================= */
.delay-time01 {
    animation-delay: 0.3s;
}

.delay-time02 {
    animation-delay: 0.8s;
}

.delay-time03 {
    animation-delay: 1.3s;
}

.delay-time04s2 {
    animation-delay: 1.8s;
}

.delay-time04 {
    animation-delay: 3.8s;
}

.delay-time05 {
    animation-delay: 5s;
}

.delay-time06 {
    animation-delay: 6.5s;
}