/* design-forge preset: calm — animations
   深呼吸のテンポ。速い動きを置かない・驚かせない */

@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
/* 波のようにゆるやかに漂う（縦だけでなく横にも僅かに揺れる） */
@keyframes float{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(4px,-8px) rotate(.6deg)}
  66%{transform:translate(-3px,-4px) rotate(-.5deg)}
}
/* 深呼吸（吸って・止めて・吐く） */
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  45%{transform:scale(1.025);opacity:.92}
  60%{transform:scale(1.025);opacity:.92}
}

/* スクロール出現(JSで .is-visible 付与) — ゆっくり立ちのぼる */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1.4s cubic-bezier(.22,.6,.3,1),transform 1.4s cubic-bezier(.22,.6,.3,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal:nth-child(2){transition-delay:.25s}
.reveal:nth-child(3){transition-delay:.5s}

/* ホバー — 持ち上げすぎない */
.hover-lift{transition:transform var(--speed) ease,box-shadow var(--speed) ease}
.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}

/* calm固有:葉が水面を漂うようなゆらぎ */
.float-deco{animation:float 11s ease-in-out infinite}

/* calm固有:呼吸(breathing)。CTAなどに8秒周期のゆったりした鼓動 */
@keyframes breathe{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.02)}
  55%{transform:scale(1.02)}
}
.breathe{animation:breathe 8s ease-in-out infinite}

/* calm固有:blobがかたちを変えながら漂う(hero装飾用) */
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(0deg);border-radius:58% 42% 55% 45% / 52% 48% 42% 58%}
  50%{transform:translate(14px,-18px) rotate(3deg);border-radius:45% 55% 48% 52% / 58% 42% 55% 45%}
}
.drift-deco{animation:drift 16s ease-in-out infinite}