@charset "UTF-8";

/* ===================================================
   Song & Letter Bottle - アニメーション
   =================================================== */

/* メインボトルの穏やかな波の浮遊感 */
.main-bottle-wrapper {
  animation: floatBottle 6s ease-in-out infinite;
}

@keyframes floatBottle {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(2deg);
  }
  50% {
    transform: translateY(-3px) rotate(-1.5deg);
  }
  75% {
    transform: translateY(-10px) rotate(1.5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* ボトル内の光のきらめき */
.bottle-body::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 25%;
  height: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 10px;
  pointer-events: none;
  animation: glassGleam 4s ease-in-out infinite alternate;
}

@keyframes glassGleam {
  0% {
    opacity: 0.3;
    transform: translateY(0);
  }
  100% {
    opacity: 0.8;
    transform: translateY(6px);
  }
}

/* 手紙を流す際のアニメーション */
.cast-animation {
  animation: castAway 2.5s cubic-bezier(0.3, 0.1, 0.3, 1) forwards;
}

@keyframes castAway {
  0% {
    transform: scale(1) translateY(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: scale(0.9) translateY(40px) rotate(-15deg);
    opacity: 0.95;
  }
  60% {
    transform: scale(0.6) translateY(-60px) rotate(10deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(0.1) translateY(-140px) translateX(60px) rotate(25deg);
    opacity: 0;
  }
}

/* 手紙を拾う際のアニメーション（沖合から波打ち際へ打ち寄せられる） */
.pickup-animation {
  animation: washAshore 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes washAshore {
  0% {
    transform: scale(0.15) translateY(-120px) rotate(35deg);
    opacity: 0;
  }
  40% {
    transform: scale(0.6) translateY(-30px) rotate(-12deg);
    opacity: 0.8;
  }
  75% {
    transform: scale(1.05) translateY(12px) rotate(6deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0) rotate(0deg);
    opacity: 1;
  }
}

/* 羊皮紙がふわっと開く演出 */
.parchment-unroll {
  animation: parchmentOpen 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes parchmentOpen {
  0% {
    transform: scale(0.85) rotateX(15deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotateX(0deg);
    opacity: 1;
  }
}

/* 水紋（波の波紋）エフェクト */
.ripple {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200, 235, 255, 0.5);
  animation: rippleExpand 1.6s cubic-bezier(0, 0.2, 0.8, 1) forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.8;
  }
  100% {
    width: 240px;
    height: 240px;
    opacity: 0;
  }
}