/* Talliva AI — Landing page
   Small layer on top of Tailwind (CDN): scroll-reveal animations, floating
   hero decor, the testimonials carousel, the FAQ accordion, the WhatsApp
   conversation reveal, gradient scrims and reduced-motion fallbacks.
   Figma node: 2:587 (Talliva AI - Landing Page). */

:root {
  color-scheme: light;
  --ink: #0c111d;
  --brand: #25b95d;
  --brand-dark: #16a34a;
  --navy: #070d14;
}

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

body { overflow-x: hidden; }

/* ============================================================
   SCROLL REVEAL
   Elements tagged [data-reveal] start shifted + transparent and
   settle when .is-visible is added by the IntersectionObserver.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* stagger children of a [data-reveal-group] */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
              transform .6s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: .00s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .24s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: .32s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: .40s; }

/* ============================================================
   HEADER
   ============================================================ */
#siteHeader {
  /* transparent over the hero; picks up the #070d14 bar (Figma node 2:588)
     once the page scrolls */
  background-color: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}
#siteHeader.is-stuck {
  background-color: #070d14;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .35);
}
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after,
.nav-link.is-current::after { transform: scaleX(1); }

/* mobile menu — drops below the bar as an overlay, never inflates the header box */
#mobileMenu {
  transform-origin: top;
  animation: menu-drop .22s ease;
}
@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO
   ============================================================ */
/* soft dark vignette behind the hero art (Figma "Ellipse 4", #171d53) */
.hero-aurora {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(23, 29, 83, .85) 0%, rgba(23, 29, 83, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

/* floating sparkles — Figma node 293:8708 (outlined twinkle, stroke #E6F8ED) */
.sparkle {
  position: absolute;
  display: block;
  height: auto;
  color: #e6f8ed;
  pointer-events: none;
  overflow: visible;
  transform: rotate(var(--rot, 0deg));
  animation: sparkle-float 8s ease-in-out infinite;
}
@keyframes sparkle-float {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0) scale(1);      opacity: .5; }
  50%      { transform: rotate(var(--rot, 0deg)) translateY(-13px) scale(1.07); opacity: 1; }
}
/* placement is a % of the hero art column (≈ the dashboard box) */
.sparkle--a { width: 16%;  left: 43%; top: 103%; animation-duration: 9s; }
.sparkle--b { width: 10%;  left: 60%; top: -12%; animation-duration: 7s; }
.sparkle--c { width: 5.4%; left: 26%; top: -7%;  animation-duration: 6s; }
.sparkle--d { width: 9.2%; left: 33%; top: -33%; animation-duration: 12s; opacity: .65; }
.sparkle--e { width: 8.2%; left: 78%; top: 97%;  animation-duration: 8s; }

@keyframes twinkle {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1); }
}
.twinkle { animation: twinkle 3.5s ease-in-out infinite; }

/* hero art entrance */
.hero-art {
  opacity: 0;
  transform: translateY(40px) scale(.96);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1) .25s,
              transform 1s cubic-bezier(.22, 1, .36, 1) .25s;
}
.hero-art.is-visible { opacity: 1; transform: none; }

.hero-dash {
  transform: rotate(6deg);
  box-shadow: 0 40px 80px -20px rgba(3, 8, 24, .55);
}
/* chat mockup — rotation + soft shadow are baked into the asset (Figma 293:8626);
   here we only add a gentle bob and lift it off the dashboard */
.hero-chat {
  filter: drop-shadow(0 26px 40px rgba(3, 8, 24, .38));
  animation: hero-bob 6s ease-in-out infinite;
}
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ============================================================
   PILL / BUTTON MICRO-INTERACTIONS
   ============================================================ */
.btn-cta {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease;
}
.btn-cta:hover  { transform: translateY(-2px); filter: brightness(1.05); }
.btn-cta:active { transform: translateY(0); }

.btn-glow {
  position: relative;
  box-shadow: 0 10px 30px rgba(37, 185, 93, .35);
}
.btn-glow::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: var(--brand);
  filter: blur(22px);
  opacity: .45;
  z-index: -1;
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: .3; transform: scale(.96); }
  50%      { opacity: .6; transform: scale(1.04); }
}

/* ============================================================
   CARDS
   ============================================================ */
.lift {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(12, 17, 29, .18);
}

/* thin green link between the equal step cards (Figma "arrow-right"), gutter only */
.step-connector { position: relative; }
.step-connector::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2rem;          /* == lg:gap-8 gutter */
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(37, 185, 93, .25), var(--brand), rgba(37, 185, 93, .25));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .6s ease .4s;
  display: none;
}
.steps-grid.is-visible .step-connector::after { transform: scaleX(1); }
@media (min-width: 1024px) {
  .step-connector::after { display: block; }
}

.popular-ring {
  position: relative;
}
.popular-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(160deg, var(--brand), rgba(37, 185, 93, .15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================
   WHATSAPP CONVERSATION (See it in Action)
   ============================================================ */
.wa-thread { position: relative; }
.wa-thread::before {   /* subtle chat wallpaper tint */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(37, 185, 93, .06), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(37, 185, 93, .05), transparent 45%);
  pointer-events: none;
}
.wa-msg {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.wa-msg.is-in { opacity: 1; transform: none; }
.wa-bubble {
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}
.wa-bubble::after {   /* tail */
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}
.wa-in  .wa-bubble::after { left: -7px;  border-top-color: #fff;    border-right: 0; border-bottom: 0; }
.wa-out .wa-bubble::after { right: -7px; border-top-color: #dcf8c6; border-left: 0;  border-bottom: 0; }

.typing-dot { animation: typing 1.2s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================
   TESTIMONIALS CAROUSEL
   ============================================================ */
.carousel-track {
  display: flex;
  gap: 24px;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.t-card {
  flex: 0 0 auto;
  transition: opacity .5s ease, transform .5s ease, filter .5s ease;
}
.t-card[aria-hidden="true"] { opacity: .45; filter: saturate(.7); }
.carousel-dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: rgba(255, 255, 255, .25);
  transition: width .3s ease, background-color .3s ease;
}
.carousel-dot.is-active { width: 24px; background: var(--brand); }

.carousel-btn { transition: background-color .2s ease, transform .2s ease; }
.carousel-btn:hover { background: rgba(255, 255, 255, .16); transform: scale(1.06); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq-item .faq-body > div { overflow: hidden; }
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-item .faq-chevron { transition: transform .3s ease; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-item .faq-q { transition: color .2s ease; }
.faq-item.is-open .faq-q { color: var(--brand-dark); }

/* ============================================================
   IMAGE SCRIM (problem panel caption)
   ============================================================ */
.img-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78) 100%);
  border-radius: inherit;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-link { transition: color .18s ease, transform .18s ease; }
.footer-link:hover { color: #fff; transform: translateX(2px); }
.social-btn { transition: transform .2s ease, background-color .2s ease; }
.social-btn:hover { transform: translateY(-3px); background: var(--brand); color: #fff; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal],
  [data-reveal-group] > *,
  .hero-art,
  .wa-msg { opacity: 1 !important; transform: none !important; }
}