/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE STYLES — MessageBhejo
   Design tokens + animations. Business values live in config/landing.yml.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --lp-green: #25D366;        /* WhatsApp green — CTAs & highlights only */
  --lp-green-deep: #128C7E;
  --lp-teal: #075E54;         /* dark bands */
  --lp-ink: #0B1410;          /* near-black */
  --lp-surface: #F7FAF8;      /* light band alternate */
  --lp-shadow-green: 0 10px 30px -8px rgba(37, 211, 102, 0.45);
  --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Typography ── */
.lp-body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.lp-display {
  font-family: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.03em;
}

/* ── Primary CTA button ── */
.lp-btn-primary {
  background: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green-deep) 100%);
  box-shadow: var(--lp-shadow-green);
  transition: transform 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease), filter 0.2s ease;
}

.lp-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 36px -8px rgba(37, 211, 102, 0.55);
}

.lp-btn-primary:active {
  transform: translateY(0);
}

/* ── Hero background: light with soft green glows + dot grid ── */
.lp-hero-bg {
  background:
    radial-gradient(600px 400px at 85% 12%, rgba(37, 211, 102, 0.10), transparent 65%),
    radial-gradient(500px 380px at 8% 85%, rgba(7, 94, 84, 0.08), transparent 65%),
    #ffffff;
}

.lp-dot-grid {
  background-image: radial-gradient(rgba(11, 20, 16, 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%);
}

/* ── Navbar scroll effect (light glass) ── */
.navbar-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(11, 20, 16, 0.06);
  box-shadow: 0 4px 24px rgba(11, 20, 16, 0.06);
}

/* ── Phone mockup ── */
.lp-phone-float {
  animation: lp-float 7s ease-in-out infinite;
}

@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Chat bubbles: hidden until the chat-mockup controller staggers them in.
   Without JS they stay visible (the hiding class is added by the controller). */
.lp-chat-msg-hidden {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
}

.lp-chat-msg-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.4s var(--lp-ease), transform 0.4s var(--lp-ease);
}

/* Typing indicator dots */
.lp-typing-dot {
  animation: lp-typing 1.2s ease-in-out infinite;
}

.lp-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.lp-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes lp-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Subtle pulse for "online" dots / live badges */
.lp-pulse-dot {
  animation: lp-pulse 2s ease-in-out infinite;
}

@keyframes lp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Floating widget launcher ping ── */
.lp-widget-ping {
  animation: lp-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes lp-ping {
  0% { transform: scale(1); opacity: 0.6; }
  75%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ── Trust marquee ── */
.lp-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.lp-marquee-track {
  display: flex;
  width: max-content;
  gap: 0.75rem;
  animation: lp-marquee 32s linear infinite;
}

.lp-marquee:hover .lp-marquee-track {
  animation-play-state: paused;
}

@keyframes lp-marquee {
  to { transform: translateX(-50%); }
}

/* ── Scroll reveal animations ── */
[data-landing-target="fadeUp"] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--lp-ease), transform 0.8s var(--lp-ease);
}

[data-landing-target="fadeUp"].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-landing-target="fadeIn"] {
  opacity: 0;
  transition: opacity 0.8s var(--lp-ease);
}

[data-landing-target="fadeIn"].revealed {
  opacity: 1;
}

[data-landing-target="scaleIn"] {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-landing-target="scaleIn"].revealed {
  opacity: 1;
  transform: scale(1);
}

/* ── Legacy classes still used by not-yet-redesigned sections ── */
.hero-gradient {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 20%, #047857 40%, #0d9488 60%, #065f46 80%, #064e3b 100%);
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.active-tab {
  background: var(--lp-ink);
  color: white;
  box-shadow: 0 6px 20px rgba(11, 20, 16, 0.25);
}

.active-tab svg {
  color: var(--lp-green);
}

.inactive-tab {
  background: #f3f4f6;
  color: #6b7280;
}

.inactive-tab:hover {
  background: #e5e7eb;
  color: #374151;
}

.feature-panel-enter {
  animation: panel-enter 0.5s var(--lp-ease) forwards;
}

@keyframes panel-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Accessibility: visible focus + reduced motion ── */
.lp-body a:focus-visible,
.lp-body button:focus-visible,
.lp-body input:focus-visible {
  outline: 2px solid var(--lp-green-deep);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .lp-phone-float,
  .lp-typing-dot,
  .lp-pulse-dot,
  .lp-widget-ping,
  .hero-gradient {
    animation: none;
  }

  .lp-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .lp-marquee-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lp-marquee-dup {
    display: none;
  }

  [data-landing-target="fadeUp"],
  [data-landing-target="fadeIn"],
  [data-landing-target="scaleIn"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lp-chat-msg-hidden {
    opacity: 1;
    transform: none;
  }
}

/* ── Responsive refinements ── */
@media (max-width: 768px) {
  [data-landing-target="fadeUp"] {
    transform: translateY(20px);
  }
}

/* ── Custom selection color ── */
::selection {
  background: rgba(37, 211, 102, 0.3);
  color: inherit;
}

/* ── Demo modal (open animation) ── */
.demo-modal-overlay {
  animation: demoOverlayIn 0.2s ease;
}
.demo-modal-dialog {
  animation: demoDialogIn 0.24s var(--lp-ease);
}
@keyframes demoOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes demoDialogIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-modal-overlay, .demo-modal-dialog { animation: none; }
}