@charset "utf-8";
/*------------------------  animation.css  ------------------------*/


.fade1 { opacity: 0; transition: 1.2s 0.8s ease; }
.fade1.is-done { opacity: 1; }
.fade2 { opacity: 0; transition: 4.2s 2.2s ease; }
.fade2.is-done { opacity: 1; }

.gratan-img {
    object-fit: cover;
    
    /* シャドウをつけて立体感をプラス */
    /* box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15); */

    /* 初期形状 */
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    
    /* とろ〜りアニメーション */
    animation: tororiImage 7s ease-in-out infinite alternate;
}
@keyframes tororiImage {
    0% {
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    transform: scale(1) rotate(0deg);
    }
    50% {
    border-radius: 40% 60% 60% 40% / 60% 40% 50% 60%;
    transform: scale(1.1) rotate(2deg);
    }
    100% {
    border-radius: 50% 50% 40% 60% / 40% 60% 60% 40%;
    transform: scale(1) rotate(-1deg);
    }
}


/* wave */
.wave-area { width: 100%; height: 225px; position: absolute; bottom: 0; z-index: 20; overflow:hidden; }
.wave-area svg { max-width: unset; transform-origin: left center; }
.wave-area svg path { animation:wave linear 40s infinite }
@keyframes wave {
	from {
		transform:translate(0);
	}
	to {
		transform:translate(-9000px);
	}
}
@media screen and (max-width: 800px) {
 .wave-area { height: 160px; }
}

/* ソース面の位置。落下と着地で共通 */
.main-block .main-block-inner {
    --sauce-dive: 230px;
}

/* えびの基本スタイル。--start は開始位置（%）、--w は幅（px） */
.shrimp {
    position: absolute;
    top: calc(var(--start, 0) * 1%);
    width: calc(var(--w, 94) * 1px);
    opacity: 0;
    pointer-events: none;
    animation: fallAndDive var(--duration, 12s) linear var(--delay, 0s) infinite both;
    z-index: 5;
}
.shrimp.onion {
    width: calc(var(--w, 24) * 1px);
    z-index: 5;
    animation: simpleFall var(--duration, 12s) linear var(--delay, 0s) infinite both;
}
.shrimp.macaroni {
    width: calc(var(--w, 42) * 1px);
    z-index: 5;
    animation: simpleFall var(--duration, 12s) linear var(--delay, 0s) infinite both;
}
.shrimp img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.15));
}

/* クリームソースの飛沫コンテナ（共通） */
.splash-particles {
    position: absolute;
    bottom: 160px; /* ソースの表面付近 */
    width: calc(var(--w, 0) * 1px);
    height: 0;
    transform: translateX(var(--shift, 0%));
    pointer-events: none;
    z-index: 6;
}
.splash-particles.is-dive {
    --ease: linear;
}
.splash-particles:not(.is-dive):not(.is-ready) {
    visibility: hidden;
}
.splash-particles:not(.is-dive) .particle-1 { animation-name: splashPop1; }
.splash-particles:not(.is-dive) .particle-2 { animation-name: splashPop2; }
.splash-particles:not(.is-dive) .particle-3 { animation-name: splashPop3; }

/* いびつな形（有機的な形）の飛沫パーツ */
.particle {
    position: absolute;
    left: 50%;
    top: 0;
    background-color: #fff4e6;
    opacity: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 飛沫1：左斜め上へ */
.particle-1 {
    width: 18px;
    height: 14px;
    border-radius: 40% 60% 70% 30% / 50% 30% 70% 50%;
    animation: splashFly1 var(--duration, 7s) var(--ease, linear) var(--delay, 0s) infinite both;
}
/* 飛沫2：真上へ高く */
.particle-2 {
    width: 14px;
    height: 18px;
    border-radius: 60% 40% 30% 70% / 40% 60% 50% 50%;
    animation: splashFly2 var(--duration, 7s) var(--ease, linear) var(--delay, 0s) infinite both;
}
/* 飛沫3：右斜め上へ */
.particle-3 {
    width: 16px;
    height: 15px;
    border-radius: 50% 50% 60% 40% / 30% 70% 40% 60%;
    animation: splashFly3 var(--duration, 7s) var(--ease, linear) var(--delay, 0s) infinite both;
}
@media screen and (max-width: 800px) {
 .main-block .main-block-inner {
    --sauce-dive: 30px;
 }
 .shrimp { width: calc(var(--w, 94) * 0.6px); }
 .shrimp.onion { width: calc(var(--w, 24) * 0.6px); }
 .shrimp.macaroni { width: calc(var(--w, 42) * 0.6px); }
 .splash-particles { bottom: 110px; width: calc(var(--w, 0) * 0.6px); }
 .particle-1 { width: 10px; height: 8px; }
 .particle-2 { width: 8px; height: 10px; }
 .particle-3 { width: 8px; height: 7px; }
}

/* --- アニメーション定義 --- */
@keyframes fallAndDive {
    0% {
        top: -140px;
        transform: translateX(-50%) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    8% {
        top: 0px;
        opacity: 1;
    }
    70% {
        top: calc(100% - var(--sauce-dive, 230px));
        transform: translateX(-50%) rotate(12deg) scale(1);
        opacity: 1;
    }
    86% {
        top: calc(100% + 80px);
        transform: translateX(-50%) rotate(20deg) scale(1);
        opacity: 0;
    }
    100% {
        top: calc(100% + 120px);
        transform: translateX(-50%) rotate(20deg) scale(1);
        opacity: 0;
    }
}

/* タマネギ・マカロニ。--travel は画面外まで届く距離 */
@keyframes simpleFall {
    0% {
        top: calc(var(--start, 0) * 1%);
        transform: rotate(0deg);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    100% {
        top: calc(var(--start, 0) * 1% + var(--travel, 2000px));
        transform: rotate(360deg);
        opacity: 0;
    }
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}

/* 飛沫1のアニメーション。70% が食材の着地と揃う */
@keyframes splashFly1 {
    0%, 66% {
        transform: translate(-50%, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    70% {
        opacity: 1;
        transform: translate(calc(-50% - 45px), -60px) scale(1.2) rotate(45deg);
    }
    75% {
        opacity: 0.9;
        transform: translate(calc(-50% - 75px), -10px) scale(0.9) rotate(90deg);
    }
    80%, 100% {
        opacity: 0;
        transform: translate(calc(-50% - 90px), 25px) scale(0.4) rotate(120deg);
    }
}

/* 飛沫2のアニメーション */
@keyframes splashFly2 {
    0%, 66% {
        transform: translate(-50%, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -85px) scale(1.3) rotate(-30deg);
    }
    75% {
        opacity: 0.9;
        transform: translate(calc(-50% + 5px), -25px) scale(1) rotate(-60deg);
    }
    80%, 100% {
        opacity: 0;
        transform: translate(calc(-50% + 10px), 25px) scale(0.4) rotate(-90deg);
    }
}

/* タマネギ・マカロニのしぶき。開始位置が着地時刻になる */
@keyframes splashPop1 {
    0% {
        transform: translate(-50%, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
        transform: translate(calc(-50% - 45px), -60px) scale(1.2) rotate(45deg);
    }
    16% {
        opacity: 0.9;
        transform: translate(calc(-50% - 75px), -10px) scale(0.9) rotate(90deg);
    }
    24%, 100% {
        opacity: 0;
        transform: translate(calc(-50% - 90px), 25px) scale(0.4) rotate(120deg);
    }
}
@keyframes splashPop2 {
    0% {
        transform: translate(-50%, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
        transform: translate(-50%, -85px) scale(1.3) rotate(-30deg);
    }
    16% {
        opacity: 0.9;
        transform: translate(calc(-50% + 5px), -25px) scale(1) rotate(-60deg);
    }
    24%, 100% {
        opacity: 0;
        transform: translate(calc(-50% + 10px), 25px) scale(0.4) rotate(-90deg);
    }
}
@keyframes splashPop3 {
    0% {
        transform: translate(-50%, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
        transform: translate(calc(-50% + 50px), -55px) scale(1.2) rotate(20deg);
    }
    16% {
        opacity: 0.9;
        transform: translate(calc(-50% + 85px), -5px) scale(0.9) rotate(70deg);
    }
    24%, 100% {
        opacity: 0;
        transform: translate(calc(-50% + 105px), 25px) scale(0.3) rotate(100deg);
    }
}

/* 飛沫3のアニメーション */
@keyframes splashFly3 {
    0%, 66% {
        transform: translate(-50%, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    70% {
        opacity: 1;
        transform: translate(calc(-50% + 50px), -55px) scale(1.2) rotate(20deg);
    }
    75% {
        opacity: 0.9;
        transform: translate(calc(-50% + 85px), -5px) scale(0.9) rotate(70deg);
    }
    80%, 100% {
        opacity: 0;
        transform: translate(calc(-50% + 105px), 25px) scale(0.3) rotate(100deg);
    }
}