/* NEWS 3Dカードフリップ用スタイル */

/* 3D効果の基本設定 */
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

/* カード内部のトランジション */
.card-inner {
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

/* ホバー時の回転 */
.card-3d:hover .card-inner {
  transform: rotateY(180deg);
}

/* カードの浮き上がり */
.card-3d {
  transition: transform 0.3s ease;
}

.card-3d:hover {
  transform: translateY(-8px);
}

/* フローティングアニメーション */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) scale(1.05);
  }
  50% {
    transform: translateY(-10px) scale(1.1);
  }
}

.card-3d:nth-child(1) {
  animation: float 3s ease-in-out infinite;
}

.card-3d:nth-child(2) {
  animation: float 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

.card-3d:nth-child(3) {
  animation: float 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .card-3d {
    height: auto;
    min-height: 120px;
  }
  
  .card-front, .card-back {
    padding: 1rem;
  }
}