/* ============================================
   sakura.css — スライド01 桜アニメーション専用
   index.htmlのみで読み込む
   ============================================ */

/* ==== スライド01 レイヤー構造 ==== */
.sakura-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

/* --- 枯れ木（下層・常時表示） --- */
.sakura-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
}

/* --- 満開（上層・フェードイン） --- */
.sakura-bloom {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    opacity: 0;
    transition: none;
}
.sakura-bloom.animating {
    opacity: 1;
    transition: opacity 6000ms ease-in;
}

/* --- 花びらSVGレイヤー --- */
.sakura-petals {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* --- 花びら個片（付着・舞い散り共通） --- */
.sakura-petal {
    position: absolute;
    opacity: 0;
    animation: none;
}
.sakura-petal.falling {
    animation: petalDrift ease-out forwards;
}

/* --- 舞い散りアニメーション（木の範囲内でふわっと） --- */
@keyframes petalDrift {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    12% {
        opacity: 0.88;
    }
    60% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(12vh) translateX(20px) rotate(280deg) scale(0.7);
        opacity: 0;
    }
}