/* ============================================================
   AI-Native Research Team — Custom Styles
   ============================================================ */

/* CSS Custom Properties for non-Tailwind usage */
:root {
  --color-brand: #8C1515;
  --color-brand-dark: #6B1010;
  --color-brand-light: #A02020;
  --color-beige: #F5F5F0;
  --color-black-text: #2E2D29;
  --color-grey-text: #434343;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Copy button feedback */
.copy-btn.copied svg {
  color: #22c55e;
}

/* Fade-in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* line-clamp fallback */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Form focus glow */
input:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(140, 21, 21, 0.1);
}

/* Mobile menu animation */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#mobile-menu.open {
  max-height: 400px;
}

/* Hero — Rising question cloud bubbles */
.hero-bubble {
  position: absolute;
  bottom: -60px;
  opacity: 0;
  will-change: transform, opacity;
  animation: bubble-rise var(--bubble-duration, 14s) ease-out forwards;
}

.cloud-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cloud-svg path {
  fill: rgba(0, 0, 0, 0.03);
}

.cloud-text {
  position: relative;
  display: block;
  padding: 14px 28px;
  color: rgba(160, 165, 175, 0.55);
  white-space: nowrap;
}

@keyframes bubble-rise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  5% {
    opacity: 0.55;
  }

  75% {
    opacity: 0.55;
  }

  100% {
    transform: translateY(-115vh);
    opacity: 0;
  }
}

/* Hero — Staggered reveal for answer / description / CTA */
.hero-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: hero-reveal-in 0.8s ease forwards;
  animation-delay: 2s;
}

.hero-reveal-d1 {
  animation-delay: 2.8s;
}

.hero-reveal-d2 {
  animation-delay: 3.4s;
}

@keyframes hero-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-bubble {
    animation: none;
    opacity: 0.5;
  }

  .hero-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Language Toggle System */
html:not([lang="ja"]) [lang="ja"] {
  display: none !important;
}

html[lang="ja"] [lang="en"] {
  display: none !important;
}