/* ===== バズイチ LP - Custom Styles ===== */

/* Base */
body {
  font-family: 'Noto Sans JP', sans-serif;
  overflow-x: hidden;
}

/* Container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .container { padding-left: 2rem; padding-right: 2rem; max-width: 1280px; }
}

/* ===== ANIMATIONS ===== */

/* Fade in up (scroll reveal) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-fadeInUp.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
.animate-scaleIn {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-scaleIn.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Floating animation for SNS images */
@keyframes float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(3deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(5px) rotate(-3deg); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-3deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(4px) rotate(3deg); }
}
@keyframes float3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(4deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(6px) rotate(-4deg); }
}
.animate-float1 { animation: float1 5s ease-in-out infinite; }
.animate-float2 { animation: float2 6.5s ease-in-out infinite; }
.animate-float3 { animation: float3 5.5s ease-in-out infinite; }

/* Initial hidden state for floating images */
.float-img {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.float-img.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Scroll indicator bounce */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(12px); opacity: 1; }
}
.animate-scroll-bounce {
  animation: scroll-bounce 2s ease-in-out infinite;
}

/* Shimmer sweep for CTA buttons */
.shimmer-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep-anim 3s ease-in-out infinite;
  border-radius: inherit;
}
@keyframes shimmer-sweep-anim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* CTA glow pulse */
@keyframes cta-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.3), 0 0 60px rgba(255, 45, 123, 0.15);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.5), 0 0 80px rgba(255, 45, 123, 0.3), 0 0 120px rgba(255, 107, 53, 0.1);
  }
}
.hero-cta-btn {
  animation: cta-glow-pulse 2.5s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-cta-btn:hover {
  box-shadow: 0 0 50px rgba(255, 107, 53, 0.6), 0 0 100px rgba(255, 45, 123, 0.3) !important;
  transform: scale(1.05);
}

/* Card hover */
.card-hover {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.faq-answer.is-open {
  opacity: 1;
}
.faq-icon {
  transition: transform 0.2s ease;
}
.faq-icon.is-open {
  transform: rotate(45deg);
}

/* Result card hover */
.result-card {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.result-card:hover {
  transform: scale(1.03) translateY(-5px);
}

/* Testimonial card hover */
.testimonial-card {
  transition: transform 0.4s ease, box-shadow 0.5s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

/* Mobile hero section: fill viewport height */
@media (max-width: 767px) {
  .hero-section-mobile-fill {
    min-height: calc(100svh - 80px);
  }
}

/* Header slide in */
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.animate-slideDown {
  animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mobile menu */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-menu.is-open {
  max-height: 400px;
}

/* Stagger delay helpers */
.stagger-delay-1 { transition-delay: 0.1s; }
.stagger-delay-2 { transition-delay: 0.2s; }
.stagger-delay-3 { transition-delay: 0.3s; }
.stagger-delay-4 { transition-delay: 0.4s; }
.stagger-delay-5 { transition-delay: 0.5s; }

/* Counter number style */
.stat-number {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  background: linear-gradient(135deg, #ff6b35, #ff2d7b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}