/* アニメーション用スタイル */

/* ダイヤの細長さ—1.0 で正方形、値↑ほどタテ長 */
:root { --stretchY: 1.0; }    /* 例 1.6〜2.0 あたりで調整 */

@keyframes float-red {
  0%   { transform: translate(0,0)            scaleY(var(--stretchY)) rotate(45deg)  scale(1);   }
  25%  { transform: translate(30px,-20px)     scaleY(var(--stretchY)) rotate(90deg)  scale(1.2); }
  50%  { transform: translate(10px,40px)      scaleY(var(--stretchY)) rotate(135deg) scale(0.8); }
  75%  { transform: translate(-20px,20px)     scaleY(var(--stretchY)) rotate(180deg) scale(1.1); }
  100% { transform: translate(0,0)            scaleY(var(--stretchY)) rotate(225deg) scale(1);   }
}

@keyframes float-blue {
  0%   { transform: translate(0,0)            scaleY(var(--stretchY)) rotate(45deg)  scale(1);   }
  25%  { transform: translate(-30px,20px)     scaleY(var(--stretchY)) rotate(135deg) scale(1.3); }
  50%  { transform: translate(20px,-30px)     scaleY(var(--stretchY)) rotate(225deg) scale(0.7); }
  75%  { transform: translate(40px,10px)      scaleY(var(--stretchY)) rotate(315deg) scale(1.2); }
  100% { transform: translate(0,0)            scaleY(var(--stretchY)) rotate(405deg) scale(1);   }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

/* 上からフェードイン */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-down {
  animation: fadeInDown 0.6s ease forwards;
}

/* 左からフェードイン */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-left {
  animation: fadeInLeft 0.6s ease forwards;
}

/* 右からフェードイン */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-right {
  animation: fadeInRight 0.6s ease forwards;
}

/* ズームイン */
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoomIn 0.6s ease forwards;
}

/* ローディングスピナー */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* パルス効果 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 2s ease infinite;
}

/* シェイクアニメーション */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.8s ease;
}

/* ホバーエフェクト */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ボタンのホバーアニメーション */
.btn-hover-effect {
  position: relative;
  overflow: hidden;
}

.btn-hover-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.3s ease;
}

.btn-hover-effect:hover::after {
  left: 100%;
}

.diamonds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    perspective: 1000px;
}

.diamond {
    position: absolute;
    border: 1px solid transparent;
    transform-style: preserve-3d;
    backface-visibility: visible;
}

.diamond.red {
    border-color: #f55;
}

.diamond.blue {
    border-color: #55f;
}

/* 宇宙ライクなアニメーション */
.space-page-background {
  margin: 0;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.universe-container {
  width: 500px;
  height: 500px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.star {
  width: 50px;
  height: 50px;
  background-color: #cccccc;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #aaa,
              0 0 15px #bbb,
              0 0 20px #ccc;
  z-index: 10;
}
.orbits-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#orbit1-visual, #orbit2-visual {
  fill: none;
  stroke-linecap: round;
}
#orbit1-visual {
  stroke: rgba(100, 100, 120, 0.25);
  stroke-width: 1.5;
}
#orbit2-visual {
  stroke: rgba(120, 120, 140, 0.35);
  stroke-width: 2;
}
.planet {
  animation-name: orbit-animation;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.planet1 {
  offset-path: url(#orbit1-path-for-motion);
  animation-duration: 12s;
  fill: #203F90;
  r: 5;
}
.planet2 {
  offset-path: url(#orbit2-path-for-motion);
  animation-duration: 18s;
  animation-delay: -6s;
  fill: #4B75D6;
  r: 3.5;
}
@keyframes orbit-animation {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}