/*
Theme Name: エルベスト LP
Theme URI: https://smoothly.jp/
Author: Smoothly
Description: エルベスト - LINE運用自動ツール LP Theme
Version: 2.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: line-ai-marketing
*/

/* ═══════════════════════════════════════════
   LINE AI Marketing LP - Custom Styles
   ═══════════════════════════════════════════ */

/* ─── Hero Carousel (fade mode) ─── */
.hero-carousel {
  position: relative;
}
.hero-carousel-slide {
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.hero-carousel-slide.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.3s;
}
.hero-dot.active {
  background: #0EA89E;
  width: 28px;
  border-radius: 5px;
}

/* ─── Keyframes ─── */
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,40px)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,-30px)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-50px)} }
@keyframes slideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes float1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes float3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ─── FV Hero Shapes ─── */
@keyframes shapeFloat1 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(30px,-20px) rotate(90deg); }
  50% { transform: translate(-10px,-40px) rotate(180deg); }
  75% { transform: translate(-30px,10px) rotate(270deg); }
}
@keyframes shapeFloat2 {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  33% { transform: translate(-40px,30px) rotate(120deg) scale(1.1); }
  66% { transform: translate(20px,-20px) rotate(240deg) scale(0.9); }
}
@keyframes shapeFloat3 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(50px,30px) rotate(180deg); }
}
@keyframes shapeFloat4 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-30px,-30px) scale(1.2); }
}
@keyframes shapeFloat5 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  33% { transform: translate(20px,40px) rotate(60deg); }
  66% { transform: translate(-20px,10px) rotate(-60deg); }
}

@keyframes textReveal {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0% 0 0); opacity: 1; }
}

@keyframes chipGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(14,168,158,0); }
  50% { box-shadow: 0 0 20px 2px rgba(14,168,158,0.15); }
}

@keyframes ctaShine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ─── Hero Rich Animations ─── */
@keyframes heroPop {
  0% { transform: scale(0.8) translateY(20px); opacity: 0; }
  60% { transform: scale(1.04) translateY(-3px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes heroGlow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(14,168,158,0)); }
  50% { filter: drop-shadow(0 0 12px rgba(14,168,158,0.4)); }
}
@keyframes heroBannerGlow {
  0%,100% { box-shadow: 0 4px 15px rgba(14,168,158,0.25); }
  50% { box-shadow: 0 4px 30px rgba(14,168,158,0.5), 0 0 60px rgba(14,168,158,0.15); }
}
@keyframes heroSubFade {
  0% { opacity: 0; transform: translateY(15px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-text-pop {
  animation: heroPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-text-pop:nth-child(1) { animation-delay: 0.3s; }
.hero-text-pop:nth-child(2) { animation-delay: 0.6s; }
.hero-text-pop:nth-child(3) { animation-delay: 0.9s; }

.hero-text-glow {
  animation: heroGlow 3s ease-in-out 1.5s infinite;
}

.hero-banner-glow {
  animation: heroBannerGlow 3s ease-in-out infinite;
}

.hero-sub-fade {
  animation: heroSubFade 1.2s ease-out 1.2s both;
}

/* ─── Step Flow Animations ─── */
@keyframes stepPop {
  0% { opacity: 0; transform: scale(0.5) translateY(30px); }
  60% { transform: scale(1.1) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes stepArrowSlide {
  0% { opacity: 0; transform: translateX(-15px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes stepIconBounce {
  0%,100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-12px) scale(1.1); }
  60% { transform: translateY(-4px) scale(1.02); }
}
@keyframes stepNumberPulse {
  0%,100% { transform: scale(1); box-shadow: 0 4px 12px rgba(14,168,158,0.3); }
  50% { transform: scale(1.15); box-shadow: 0 6px 20px rgba(14,168,158,0.5); }
}
@keyframes stepConnectorDash {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}
@keyframes stepCardHoverGlow {
  0%,100% { box-shadow: 0 4px 20px rgba(14,168,158,0.08); }
  50% { box-shadow: 0 8px 40px rgba(14,168,158,0.18); }
}
.step-pop { animation: stepPop 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }
.step-pop-1 { animation-delay: 0.1s; }
.step-pop-2 { animation-delay: 0.3s; }
.step-pop-3 { animation-delay: 0.5s; }
.step-pop-4 { animation-delay: 0.7s; }
.step-pop-5 { animation-delay: 0.9s; }
.step-icon-bounce { animation: stepIconBounce 3s ease-in-out infinite; }
.step-icon-bounce-2 { animation: stepIconBounce 3s ease-in-out 0.4s infinite; }
.step-icon-bounce-3 { animation: stepIconBounce 3s ease-in-out 0.8s infinite; }
.step-icon-bounce-4 { animation: stepIconBounce 3s ease-in-out 1.2s infinite; }
.step-icon-bounce-5 { animation: stepIconBounce 3s ease-in-out 1.6s infinite; }
.step-number-pulse { animation: stepNumberPulse 2.5s ease-in-out infinite; }
.step-card-glow { animation: stepCardHoverGlow 4s ease-in-out infinite; }
.step-card-glow-2 { animation: stepCardHoverGlow 4s ease-in-out 0.8s infinite; }
.step-card-glow-3 { animation: stepCardHoverGlow 4s ease-in-out 1.6s infinite; }
.step-card-glow-4 { animation: stepCardHoverGlow 4s ease-in-out 2.4s infinite; }
.step-card-glow-5 { animation: stepCardHoverGlow 4s ease-in-out 3.2s infinite; }
.step-arrow-slide { animation: stepArrowSlide 0.6s ease-out both; }
.step-arrow-slide-1 { animation-delay: 0.2s; }
.step-arrow-slide-2 { animation-delay: 0.4s; }
.step-arrow-slide-3 { animation-delay: 0.6s; }
.step-arrow-slide-4 { animation-delay: 0.8s; }

/* ─── Solution Card Animations ─── */
@keyframes solutionIconFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(3deg); }
  75% { transform: translateY(4px) rotate(-2deg); }
}
@keyframes solutionPulseRing {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}
@keyframes solutionSparkle {
  0%,100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}
@keyframes solutionCardShine {
  0% { left: -80%; }
  100% { left: 130%; }
}
@keyframes solutionGlow {
  0%,100% { box-shadow: 0 0 20px rgba(14,168,158,0.15), 0 8px 32px rgba(14,168,158,0.1); }
  50% { box-shadow: 0 0 40px rgba(14,168,158,0.3), 0 12px 48px rgba(14,168,158,0.2); }
}
.solution-float-1 { animation: solutionIconFloat 4s ease-in-out infinite; }
.solution-float-2 { animation: solutionIconFloat 4s ease-in-out 0.5s infinite; }
.solution-float-3 { animation: solutionIconFloat 4s ease-in-out 1s infinite; }
.solution-float-4 { animation: solutionIconFloat 4s ease-in-out 1.5s infinite; }
.solution-card-glow { animation: solutionGlow 3s ease-in-out infinite; }
.solution-card-glow-2 { animation: solutionGlow 3s ease-in-out 0.75s infinite; }
.solution-card-glow-3 { animation: solutionGlow 3s ease-in-out 1.5s infinite; }
.solution-card-glow-4 { animation: solutionGlow 3s ease-in-out 2.25s infinite; }
.solution-card::after {
  content: '';
  position: absolute;
  top: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: solutionCardShine 4s ease-in-out infinite;
}
.solution-card:nth-child(2)::after { animation-delay: 1s; }
.solution-card:nth-child(3)::after { animation-delay: 2s; }
.solution-card:nth-child(4)::after { animation-delay: 3s; }
.solution-pulse-ring {
  position: absolute; inset: -4px; border-radius: 1rem;
  border: 2px solid rgba(14,168,158,0.3);
  animation: solutionPulseRing 2.5s ease-out infinite;
}

@keyframes badgeGlow {
  0%,100% { filter: drop-shadow(0 0 15px rgba(255,215,0,0.3)); }
  50% { filter: drop-shadow(0 0 30px rgba(255,215,0,0.6)); }
}
.badge-glow { animation: badgeGlow 2.5s ease-in-out infinite; }

@keyframes scrollBounce {
  0%,100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.5; }
}

@keyframes blink {
  0%,50% { opacity: 1; }
  51%,100% { opacity: 0; }
}

.hero-shape {
  position: absolute;
  border: 2px solid rgba(14,168,158,0.2);
}
.hero-shape-1 {
  width: 100px; height: 100px;
  top: 12%; left: 6%;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: rgba(14,168,158,0.08);
  animation: shapeFloat1 18s ease-in-out infinite;
}
.hero-shape-2 {
  width: 70px; height: 70px;
  top: 20%; right: 10%;
  border-radius: 50%;
  background: rgba(14,168,158,0.06);
  animation: shapeFloat2 14s ease-in-out infinite;
}
.hero-shape-3 {
  width: 120px; height: 120px;
  bottom: 18%; left: 12%;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: rgba(14,168,158,0.06);
  animation: shapeFloat3 20s ease-in-out infinite;
}
.hero-shape-4 {
  width: 50px; height: 50px;
  top: 55%; right: 6%;
  border-radius: 50%;
  background: rgba(14,168,158,0.08);
  animation: shapeFloat4 12s ease-in-out infinite;
}
.hero-shape-5 {
  width: 65px; height: 65px;
  bottom: 25%; right: 22%;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: rgba(14,168,158,0.07);
  animation: shapeFloat5 16s ease-in-out infinite;
}
.hero-shape-6 {
  width: 45px; height: 45px;
  top: 40%; left: 25%;
  border-radius: 50%;
  background: rgba(249,168,184,0.1);
  border-color: rgba(249,168,184,0.2);
  animation: shapeFloat2 22s ease-in-out infinite;
}
.hero-shape-7 {
  width: 35px; height: 35px;
  bottom: 40%; right: 35%;
  border-radius: 8px;
  background: rgba(14,168,158,0.06);
  animation: shapeFloat1 15s ease-in-out infinite reverse;
}

/* Animated rings */
@keyframes ringExpand {
  0% { transform: scale(0.8); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 0.1; }
  100% { transform: scale(0.8); opacity: 0.4; }
}
@keyframes ringExpand2 {
  0% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.3); opacity: 0.08; }
  100% { transform: scale(1); opacity: 0.3; }
}
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(14,168,158,0.15);
  background: transparent;
}
.hero-ring-1 {
  width: 200px; height: 200px;
  top: 8%; right: 18%;
  animation: ringExpand 8s ease-in-out infinite;
}
.hero-ring-2 {
  width: 150px; height: 150px;
  bottom: 15%; left: 5%;
  border-color: rgba(14,168,158,0.12);
  animation: ringExpand2 10s ease-in-out infinite;
}

/* ─── Animation Classes ─── */
.animate-slide-up { animation: slideUp 1s ease-out both; }
.animate-slide-up-1 { animation: slideUp 1s ease-out 0.2s both; }
.animate-slide-up-2 { animation: slideUp 1s ease-out 0.4s both; }
.animate-slide-up-3 { animation: slideUp 1s ease-out 0.5s both; }
.animate-slide-up-4 { animation: slideUp 1s ease-out 0.6s both; }
.animate-slide-up-5 { animation: slideUp 1.2s ease-out 1s both; }
.animate-gradient { animation: gradientShift 4s ease infinite; background-size: 200% 100%; }
.animate-float-1 { animation: float1 3s ease-in-out infinite; }
.animate-float-2 { animation: float2 3.5s ease-in-out infinite; }
.animate-float-3 { animation: float3 4s ease-in-out infinite; }
.animate-blink { animation: blink 1s step-end infinite; }

/* FV text gradient */
.text-gradient-teal {
  background: linear-gradient(135deg, #0EA89E 0%, #0B8A82 40%, #0EA89E 60%, #4DD2CB 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* FV text reveal */
.hero-text-reveal {
  animation: textReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s both;
}
.hero-text-reveal-delay {
  animation-delay: 0.7s;
}

/* Chip glow */
.hero-chip-glow {
  animation: chipGlow 3s ease-in-out infinite, slideUp 1s ease-out both;
}

/* CTA shine effect */
.cta-shine {
  position: relative;
  overflow: hidden;
}
.cta-shine::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.25) 45%,
    rgba(255,255,255,0.25) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: ctaShine 3s ease-in-out infinite;
}

/* Scroll bounce */
.scroll-bounce { animation: scrollBounce 2s ease-in-out infinite; }

/* ─── Phone Mockup ─── */
@keyframes phoneFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes floatingCard1 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes floatingCard2 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.phone-float { animation: phoneFloat 5s ease-in-out infinite; }
.floating-card-1 { animation: floatingCard1 4s ease-in-out infinite; }
.floating-card-2 { animation: floatingCard2 4.5s ease-in-out 0.5s infinite; }

.chat-msg { opacity: 0; animation: chatFadeIn 0.6s ease-out forwards; }
.chat-msg-1 { animation-delay: 0.8s; }
.chat-msg-2 { animation-delay: 1.4s; }
.chat-msg-3 { animation-delay: 2.0s; }
.chat-msg-4 { animation-delay: 2.6s; }
.chat-msg-5 { animation-delay: 3.2s; }

/* ─── Pain Points Section ─── */
@keyframes painDotFloat {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.3; }
  50% { transform: translateY(-15px) scale(1.3); opacity: 0.6; }
}
@keyframes painIconPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.pain-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0EA89E;
  opacity: 0.2;
  animation: painDotFloat 4s ease-in-out infinite;
}
.pain-icon-pulse {
  animation: painIconPulse 3s ease-in-out infinite;
}
.pain-card {
  position: relative;
}
.pain-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  opacity: 0;
  background: linear-gradient(135deg, rgba(14,168,158,0.05), transparent);
  transition: opacity 0.5s;
}
.pain-card:hover::before {
  opacity: 1;
}

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── FAQ Accordion ─── */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
.faq-answer.open {
  max-height: 400px;
  opacity: 1;
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Campaign badge glow */
.campaign-glow {
  animation: campaignGlow 2.5s ease-in-out infinite;
}
@keyframes campaignGlow {
  0%, 100% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15); }
  50% { box-shadow: 0 4px 25px rgba(245, 158, 11, 0.3); }
}