/* ==========================================================
   アニメーション定義
========================================================== */

/* ---- 紙芝居（全デバイス共通） ---- */
@keyframes kamiOutNext {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to   { transform: translateX(-20%) scale(0.97); opacity: 0; }
}
@keyframes kamiInNext {
  from { transform: translateX(100%) scale(1); opacity: 0.98; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes kamiOutPrev {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to   { transform: translateX(20%) scale(0.97); opacity: 0; }
}
@keyframes kamiInPrev {
  from { transform: translateX(-100%) scale(1); opacity: 0.98; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}

/* ---- ページフリップ（デスクトップ 3D） ---- */
@keyframes flipOutRight {
  0% {
    transform: rotateY(0deg) translateZ(0);
    transform-origin: left center;
    filter: brightness(1);
    opacity: 1;
  }
  40% {
    transform: rotateY(-22deg) translateZ(8px);
    transform-origin: left center;
    filter: brightness(0.95);
    opacity: 1;
  }
  100% {
    transform: rotateY(-88deg) translateZ(0);
    transform-origin: left center;
    filter: brightness(0.75);
    opacity: 0.86;
  }
}
@keyframes flipInRight {
  0% {
    transform: rotateY(84deg) translateZ(0);
    transform-origin: left center;
    filter: brightness(0.78);
    opacity: 0.88;
  }
  55% {
    transform: rotateY(16deg) translateZ(8px);
    transform-origin: left center;
    filter: brightness(0.95);
    opacity: 1;
  }
  100% {
    transform: rotateY(0deg) translateZ(0);
    transform-origin: left center;
    filter: brightness(1);
    opacity: 1;
  }
}
@keyframes flipOutLeft {
  0% {
    transform: rotateY(0deg) translateZ(0);
    transform-origin: right center;
    filter: brightness(1);
    opacity: 1;
  }
  40% {
    transform: rotateY(22deg) translateZ(8px);
    transform-origin: right center;
    filter: brightness(0.95);
    opacity: 1;
  }
  100% {
    transform: rotateY(88deg) translateZ(0);
    transform-origin: right center;
    filter: brightness(0.75);
    opacity: 0.86;
  }
}
@keyframes flipInLeft {
  0% {
    transform: rotateY(-84deg) translateZ(0);
    transform-origin: right center;
    filter: brightness(0.78);
    opacity: 0.88;
  }
  55% {
    transform: rotateY(-16deg) translateZ(8px);
    transform-origin: right center;
    filter: brightness(0.95);
    opacity: 1;
  }
  100% {
    transform: rotateY(0deg) translateZ(0);
    transform-origin: right center;
    filter: brightness(1);
    opacity: 1;
  }
}

@keyframes pageShadowOut {
  0% { opacity: 0; }
  40% { opacity: 0.25; }
  100% { opacity: 0.38; }
}

@keyframes pageShadowIn {
  0% { opacity: 0.36; }
  100% { opacity: 0; }
}

/* ---- スライド（モバイル） ---- */
@keyframes slideOutL {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes slideInR {
  from { transform: translateX(100%);  opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideOutR {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(100%);  opacity: 0; }
}
@keyframes slideInL {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* クラス割り当て */
.flip-out-r  { animation: flipOutRight 0.42s cubic-bezier(0.32,0.02,0.2,1) forwards; }
.flip-in-r   { animation: flipInRight  0.42s cubic-bezier(0.18,0.7,0.2,1) forwards; }
.flip-out-l  { animation: flipOutLeft  0.42s cubic-bezier(0.32,0.02,0.2,1) forwards; }
.flip-in-l   { animation: flipInLeft   0.42s cubic-bezier(0.18,0.7,0.2,1) forwards; }

.flip-out-r::after,
.flip-out-l::after {
  animation: pageShadowOut 0.42s ease forwards;
}

.flip-in-r::after,
.flip-in-l::after {
  animation: pageShadowIn 0.42s ease forwards;
}

.slide-out-l { animation: slideOutL 0.30s cubic-bezier(0.4,0,0.2,1) forwards; }
.slide-in-r  { animation: slideInR  0.30s cubic-bezier(0.4,0,0.2,1) forwards; }
.slide-out-r { animation: slideOutR 0.30s cubic-bezier(0.4,0,0.2,1) forwards; }
.slide-in-l  { animation: slideInL  0.30s cubic-bezier(0.4,0,0.2,1) forwards; }

.kami-out-next { animation: kamiOutNext 0.36s cubic-bezier(0.35,0.05,0.2,1) forwards; }
.kami-in-next  { animation: kamiInNext  0.36s cubic-bezier(0.2,0.75,0.2,1) forwards; }
.kami-out-prev { animation: kamiOutPrev 0.36s cubic-bezier(0.35,0.05,0.2,1) forwards; }
.kami-in-prev  { animation: kamiInPrev  0.36s cubic-bezier(0.2,0.75,0.2,1) forwards; }

/* ---- トースト ---- */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-5px) scale(0.96); }
}

/* ---- ローディング ---- */
@keyframes loadFill {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

/* ---- ズームパルス ---- */
@keyframes zoomPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}