/* ========================================
   レイヤー表示アニメーション
======================================== */

/* 動画レイヤー：下から浮き上がり */
@keyframes videoLayerIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* オーバーレイレイヤー：下から浮き上がり（遅延） */
@keyframes overlayLayerIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* テキスト表示：フェードイン + スライドアップ */
@keyframes textItemIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   Swipeテキストアニメーション
======================================== */

@keyframes fadeInOutFast {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

/* ページ1下部Swipeテキスト点滅 */
.video-swiper-slide:first-of-type.active .swipe-text {
  opacity: 0.5;
  animation: fadeInOutFast 2.5s ease-in-out infinite;
}

/* ========================================
   スワイプヒント表示
======================================== */

@keyframes swipeHintPulse {
  0%, 100% {
    opacity: 0.5;
    transform: translateX(0);
  }
  50% {
    opacity: 0.9;
    transform: translateX(5px);
  }
}

/* 横スワイプヒント（ケースページ用） */
.video-swiper-slide.case-slide.active .swipe-hint-horizontal {
  animation: swipeHintPulse 2s ease-in-out infinite;
}

/* ========================================
   ケース切り替えアニメーション
======================================== */

@keyframes caseSlideInLeft {
  from {
    left: 100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes caseSlidePrevLeft {
  from {
    left: 0;
    opacity: 1;
  }
  to {
    left: -100%;
    opacity: 0;
  }
}

.case-slider-item.active {
  animation: caseSlideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.case-slider-item.prev {
  animation: caseSlidePrevLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ========================================
   ドットアニメーション
======================================== */

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.video-pagination-dot.active,
.case-dot.active {
  animation: dotPulse 2s ease-in-out;
}

@keyframes dotScaleUp {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.video-pagination-dot:hover,
.case-dot:hover {
  animation: dotScaleUp 0.3s ease-out forwards;
}

/* ========================================
   ボタンホバーアニメーション
======================================== */

@keyframes buttonShine {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}

.mobile-cta-button::before {
  animation: buttonShine 0.5s ease;
}

.mobile-cta-button:hover::before {
  left: 100%;
}

@keyframes buttonLift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2px);
  }
}

.mobile-cta-button:hover {
  animation: buttonLift 0.3s ease-out forwards;
}

/* ========================================
   ページ遷移アニメーション
======================================== */

@keyframes slideEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.video-swiper-slide.active {
  animation: slideEnter 0.3s ease-out forwards;
}

.mobile-cta-section.active {
  animation: slideEnter 0.3s ease-out forwards;
}

/* ========================================
   CTA背景アニメーション（オプション）
======================================== */

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ========================================
   CTAページテキストアニメーション
======================================== */

/* CTAメインヘッドライン表示 */
.mobile-cta-content h2 {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.6s ease-out 0.3s both;
}

/* CTAボックス表示 */
.mobile-cta-box {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.6s ease-out 0.6s both;
}

/* CTAボタン表示 */
.mobile-cta-button {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.6s ease-out 0.9s both;
}

/* グラデーション背景のアニメーション（テスト環境用） */
.video-swiper-slide {
  background-size: 200% 200%;
  /* アニメーション不要時はコメントアウト */
  /* animation: gradientShift 15s ease infinite; */
}

/* ========================================
   パララックス効果（高度なアニメーション）
======================================== */

@keyframes parallaxMove {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-20px);
  }
}

/* スクロール時のパララックス効果 */
.video-layer {
  animation: parallaxMove 20s ease-in-out infinite;
}

/* ========================================
   フロートボタンアニメーション
======================================== */

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

.float-button {
  animation: floatButtonBounce 3s ease-in-out infinite;
}

@keyframes floatButtonHover {
  from {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.4);
  }
  to {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.6);
  }
}

.float-button:hover {
  animation: floatButtonHover 0.3s ease-out forwards;
}

/* ========================================
   読み込みアニメーション
======================================== */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* テキストアイテム段階表示 */
.text-item:nth-child(1) {
  animation: slideUp 0.6s ease-out 0.25s both;
}

.text-item:nth-child(2) {
  animation: slideUp 0.6s ease-out 0.3s both;
}

.text-item:nth-child(3) {
  animation: slideUp 0.6s ease-out 0.35s both;
}

.text-item:nth-child(4) {
  animation: slideUp 0.6s ease-out 0.4s both;
}

.text-item:nth-child(5) {
  animation: slideUp 0.6s ease-out 0.45s both;
}

/* ========================================
   レスポンシブアニメーション調整
======================================== */

@media (max-width: 600px) {
  @keyframes slideUpMobile {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .text-item:nth-child(1) {
    animation: slideUpMobile 0.5s ease-out 0.2s both;
  }

  .text-item:nth-child(2) {
    animation: slideUpMobile 0.5s ease-out 0.25s both;
  }

  .text-item:nth-child(3) {
    animation: slideUpMobile 0.5s ease-out 0.3s both;
  }
}

/* ========================================
   パフォーマンス最適化
======================================== */

@media (prefers-reduced-motion: no-preference) {
  .video-layer,
  .overlay-layer,
  .text-item,
  .case-slider-item,
  .mobile-cta-button,
  .float-button {
    will-change: transform;
  }
}

/* ========================================
   アクセシビリティ：モーション削減
======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* アニメーション完全無効化 */
  .video-layer,
  .overlay-layer {
    animation: none !important;
    transform: none !important;
  }

  .text-item {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .swipe-text,
  .swipe-hint-horizontal {
    animation: none !important;
    opacity: 0.5 !important;
  }

  .case-slider-item {
    animation: none !important;
  }

  .mobile-cta-button:hover {
    transform: none !important;
    animation: none !important;
  }

  .float-button {
    animation: none !important;
    transform: none !important;
  }

  .video-pagination-dot:hover,
  .case-dot:hover {
    animation: none !important;
    transform: none !important;
  }
}



/* ========================================
   ダークモード対応
======================================== */

@media (prefers-color-scheme: dark) {
  @keyframes fadeInOutDark {
    0%, 100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.9;
    }
  }

  .swipe-text {
    animation: fadeInOutDark 2.5s ease-in-out infinite;
  }
}