/* Custom styles (Tailwind is loaded via CDN in index.html) */

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "palt";
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
}

/* LINE icon SVG for reuse */
.line-icon {
  width: 20px;
  height: 20px;
}

/* CTA pulse - subtle */
@keyframes softPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(6, 199, 85, 0.25);
  }
  50% {
    box-shadow: 0 4px 20px rgba(6, 199, 85, 0.4);
  }
}

.cta-pulse {
  animation: softPulse 3s ease-in-out infinite;
}

/* Sticky bottom fade in */
.bottom-bar {
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.bottom-bar.show {
  transform: translateY(0);
}

/* FAQ accordion */
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-body {
  max-height: 300px;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* Fade in on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Frog gentle float */
@keyframes floatFrog {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.illus-float {
  animation: floatFrog 3s ease-in-out infinite;
}

/* スマホ用ハンバーガーメニュー（背景は全幅・半透明で最前面） */
.mobile-menu {
  width: 100vw;
  height: 100dvh;
  height: 100vh;
  left: 0;
  top: 0;
}
.mobile-menu.mobile-menu-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-backdrop {
  width: 100%;
  height: 100%;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }

  .cta-pulse {
    animation: none;
  }

  .illus-float {
    animation: none;
  }
}