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

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }
.reveal.delay-5 { transition-delay: 0.40s; }
.reveal.delay-6 { transition-delay: 0.48s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal-left.in { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal-right.in { opacity: 1; transform: translateX(0); }

.reveal-zoom {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal-zoom.in { opacity: 1; transform: scale(1); }

/* Staggered children */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.stagger.in > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.05s; }
.stagger.in > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.12s; }
.stagger.in > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.19s; }
.stagger.in > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.26s; }
.stagger.in > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.33s; }
.stagger.in > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.40s; }
.stagger.in > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.47s; }
.stagger.in > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 0.54s; }
.stagger.in > *:nth-child(9)  { opacity: 1; transform: none; transition-delay: 0.61s; }
.stagger.in > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.68s; }

/* Hero entrance — runs immediately on load */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero .hero-eyebrow { animation: heroFadeUp 0.9s cubic-bezier(.2,.7,.2,1) 0.1s both; }
.hero .hero-headline { animation: heroFadeUp 1s cubic-bezier(.2,.7,.2,1) 0.2s both; }
.hero .hero-body { animation: heroFadeUp 1s cubic-bezier(.2,.7,.2,1) 0.35s both; }
.hero .hero-tags { animation: heroFadeUp 0.9s cubic-bezier(.2,.7,.2,1) 0.5s both; }
.hero .hero-cta-row { animation: heroFadeUp 0.9s cubic-bezier(.2,.7,.2,1) 0.65s both; }
.hero .hero-hashes { animation: heroFadeIn 1.2s ease 0.9s both; }
.hero .logo-img { animation: heroFadeIn 1.4s ease 0s both; }
.hero .portrait-img { animation: heroFadeIn 1.6s ease 0.2s both; }
.hero .portrait-dot { animation: heroFadeIn 1s ease 1.2s both, dotPulse 2.8s ease-in-out 1.5s infinite; }

/* Pulsing dot */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,255,0,0.7); transform: scale(1); }
  50% { box-shadow: 0 0 0 14px rgba(214,255,0,0); transform: scale(1.15); }
}

/* Metallic logo — subtle floating motion */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.hero .logo-img img {
  animation: logoFloat 6s ease-in-out 1.4s infinite;
}

/* Ambient grid drift on hero bg */
@keyframes gridDrift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 40px 40px, 40px 40px; }
}
.hero {
  animation: gridDrift 30s linear infinite;
}

/* Scanline sheen across pill */
@keyframes pillSheen {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.pill {
  position: relative;
  overflow: hidden;
}
.pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(0,0,0,0.18) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: pillSheen 4s ease-in-out 1.5s infinite;
  pointer-events: none;
}

/* CTA button — pulse glow + arrow nudge */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,255,0,0.55), 0 8px 24px rgba(214,255,0,0.25); }
  50%      { box-shadow: 0 0 0 14px rgba(214,255,0,0), 0 8px 24px rgba(214,255,0,0.35); }
}
.btn-cta {
  animation: ctaGlow 3s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1), background 0.3s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
  animation-play-state: paused;
}
.btn-cta .arrow {
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.btn-cta:hover .arrow {
  transform: translateX(6px);
}

/* Tag hover lift */
.tag {
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s ease;
}
.tag:hover {
  transform: translateY(-2px) rotate(-1deg);
}

/* Card hover — feature cards, problem cards, compare cards */
.feature-card,
.problem-card,
.compare-col,
.price-card,
.diff-card,
.why-card {
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease, border-color 0.3s ease;
  will-change: transform;
}
.feature-card:hover,
.problem-card:hover,
.compare-col:hover,
.price-card:hover,
.diff-card:hover,
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}

/* FAQ — accordion smoother, arrow rotate */
.faq-item summary,
.faq-item .faq-q {
  transition: background 0.3s ease;
}
.faq-item .faq-arrow,
.faq-item summary::-webkit-details-marker { 
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.faq-item[open] .faq-arrow {
  transform: rotate(45deg);
}

/* Section header underline draw-in */
.section-eyebrow {
  position: relative;
  display: inline-block;
}
.section-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width 1.2s cubic-bezier(.2,.7,.2,1) 0.2s;
}
.reveal.in .section-eyebrow::after,
.section-eyebrow.in::after {
  width: 100%;
}

/* Scroll-tied parallax for portrait */
.portrait-img {
  transition: transform 0.1s linear;
}

/* Marquee for hashes (slow drift) */
@keyframes hashDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-12px); }
}
.hero-hashes {
  animation: hashDrift 8s ease-in-out infinite alternate;
}

/* AI FRONT DESK background text — slow horizontal scroll */
@keyframes frontDeskDrift {
  0%   { transform: translateX(0); opacity: 0.18; }
  50%  { opacity: 0.28; }
  100% { transform: translateX(-30px); opacity: 0.18; }
}

/* Number/keyword highlight pulse */
@keyframes numberPulse {
  0%, 100% { color: inherit; }
  50% { color: var(--lime, #d6ff00); }
}

/* Nav scrolled state */
.nav {
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
.nav.scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.25);
}

/* Reduce motion: 完全停止ではなく、最終状態を見せる程度に緩和 */
@media (prefers-reduced-motion: reduce) {
  /* 装飾的な無限ループのみ抑制（タイムライン・カードスタック等） */
  .pill::after,
  .hero-hashes,
  .btn-cta,
  .portrait-dot,
  .hero .logo-img img,
  .hero {
    animation-iteration-count: 1 !important;
  }
}