/* Neon Glow Image */
.image-neon-glow {
    filter: drop-shadow(0 0 7px #00ffff) drop-shadow(0 0 15px #00ffff); /* 中間くらいのぼかし */
    transition: filter 0.3s ease-in-out;
}

.image-neon-glow:hover {
    filter: drop-shadow(0 0 15px #00ffff) drop-shadow(0 0 30px #00ffff); /* ホバー時も中間くらいのぼかし */
}

/* Neon Blink Animation */
@keyframes neon-blink {
    0%, 100% {
        text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; /* ぼかしを弱める */
        opacity: 1;
    }
    50% {
        text-shadow: none;
        opacity: 0.8; /* 透明度の変化を小さくする */
    }
}

.neon-blink {
    animation: neon-blink 2s infinite alternate;
}

.neon-cta {
  display: inline-block;
  padding: 1rem 2rem;
  color: #fff;
  border: 0.4rem solid #fff;
  border-radius: 1rem;
  text-transform: uppercase;
  text-shadow: -0.2rem -0.2rem 1rem #08f;
  box-shadow: 0 0 1rem #08f;
  transition: box-shadow 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}

.neon-cta:hover {
  text-shadow:
      -0.2rem -0.2rem 1rem #fff,
      0.2rem 0.2rem 1rem #fff,
      0 0 2rem #654ea3,
      0 0 4rem #654ea3,
      0 0 6rem #654ea3,
      0 0 8rem #654ea3,
      0 0 10rem #654ea3;
  
  box-shadow:
      0 0 .5rem #fff,
      inset 0 0 .5rem #fff,
      0 0 2rem #08f,
      inset 0 0 2rem #08f,
      0 0 4rem #08f,
      inset 0 0 4rem #08f;        
}

/* .neon-cta::-moz-selection {
  background-color: #08f;
  color: #654ea3;
}

.neon-cta::selection {
  background-color: #08f;
  color: #654ea3;
}

.neon-cta:focus {
  outline: none;
} */

.neon-how {
  display: inline-block;
  padding: 1rem 2rem;
  color: #fff;
  border: 0.4rem solid #fff;
  border-radius: 1rem;
  text-transform: uppercase;
  animation: flicker 1.5s infinite alternate; 
}

.neon-how::-moz-selection {
  background-color: #08f;
  color: #654ea3;
}

.neon-how::selection {
  background-color: #08f;
  color: #654ea3;
}

.neon-how:focus {
  outline: none;
}

/* Animate neon flicker */
@keyframes flicker {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 2rem #654ea3,
            0 0 4rem #654ea3,
            0 0 6rem #654ea3,
            0 0 8rem #654ea3,
            0 0 10rem #654ea3;
        
        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem #08f,
            inset 0 0 2rem #08f,
            0 0 4rem #08f,
            inset 0 0 4rem #08f;        
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}

/* Float Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px); /* 10px上に移動 */
    }
    100% {
        transform: translateY(0px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite; /* 3秒かけてゆっくりと上下に揺れる */
}

/* Rocket Shake Animation */
@keyframes rocket-shake {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }
    25% {
        transform: translateY(-5px) rotate(5deg);
    }
    75% {
        transform: translateY(5px) rotate(-5deg);
    }
}

.rocket-shake-animation {
    animation: rocket-shake 3s ease-in-out infinite alternate;
}

.mobile-shake-animation {
    animation: rocket-shake 6s ease-in-out infinite alternate;
}

.neon-price {
  display: inline-block;
  padding: 1rem 2rem;
  color: #ffffff;
  text-transform: uppercase;
  animation: price_flicker 5s infinite alternate; 
}

@keyframes price_flicker {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 2rem #08f,
            0 0 4rem #08f,
            0 0 6rem #08f,
            0 0 8rem #08f,
            0 0 10rem #08f;  
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}

.hamburger-line-gradient {
    background: linear-gradient(to right, #00ffff, #9d92f1);
}

/* Custom gradient hover for title cta button */
.title-cta-gradient {
  background-image: linear-gradient(45deg, #00ffff, #00aaff);
  color: #1e326d;
  border-color: #00aaff;
}
.title-cta-gradient:hover {
  background-image: linear-gradient(45deg, #00ffff, #0182c2);
  color: white;
  border-color: #00aaff;
}

/* Mobile Menu */
#mobile-menu {
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    opacity: 0;
    visibility: hidden;
}

#mobile-menu.open {
    opacity: 0.95;
    visibility: visible;
}

/* Hamburger Icon Animation */
#mobile-menu-button span:nth-child(1) {
    transform: translateY(-0.375rem);
}

#mobile-menu-button span:nth-child(3) {
    transform: translateY(0.375rem);
}

#mobile-menu-button.open span:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

#mobile-menu-button.open span:nth-child(2) {
    transform: scaleX(0);
}

#mobile-menu-button.open span:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}

/* Overlay for mobile menu */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

#mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}