/*
Theme Name: DataAlign Platform
Theme URI: https://dataalign.ai
Author: DataAlign.ai
Author URI: https://dataalign.ai
Description: Tailwind CSS powered landing theme for DataAlign platform and its extensions (WooCommerce, Magento, etc.).
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dataalign-platform
*/

/* Smooth interactions and motion safety */
html { scroll-behavior: smooth; }
a, button { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}
/*
Theme Name: DataAlign Platform
*/

/* Modern accents and motion helpers */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text {
  background: linear-gradient(90deg, #4f46e5, #22d3ee, #34d399, #4f46e5);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 14s ease infinite;
}

/* Animated gradient background for CTA buttons, matching gradient-text palette */
.gradient-button {
  background: linear-gradient(90deg, #4f46e5, #22d3ee, #34d399, #4f46e5) !important;
  background-size: 300% 300%;
  color: #fff;
  animation: gradientFlow 14s ease infinite;
}
.gradient-button:hover { filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
}

.card-sheen { position: relative; overflow: hidden; }
.card-sheen::after {
  content: "";
  position: absolute; inset: -20%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-60%) rotate(10deg);
  transition: transform 700ms ease;
  pointer-events: none;
}
.card-sheen:hover::after { transform: translateX(60%) rotate(10deg); }

/* Minor utility for touch-friendly hit targets */
.tap-target { min-height: 44px; }

/* Face badge styles */
.face-frame {
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgb(30 41 59 / 1);
  box-shadow: 0 10px 25px rgba(0,0,0,.45);
}
.face-fallback { display: grid; place-items: center; background: #0b1220; }
.animate-slow-rotate { animation: slowRotate 18s linear infinite; }
@keyframes slowRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Subtle bob for bot images */
@keyframes botBob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
.bot-bob { animation: botBob 5.2s ease-in-out infinite; }

/* Tilt + sheen for bot */
.bot-tilt { transition: transform 260ms ease, box-shadow 260ms ease; transform-style: preserve-3d; }
.bot-tilt:hover { transform: rotateX(5deg) rotateY(-5deg) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.bot-sheen { content: ""; position: absolute; inset: -35%; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%); transform: translateX(-60%) rotate(10deg); transition: transform 650ms ease; pointer-events: none; }
.bot-tilt:hover .bot-sheen { transform: translateX(60%) rotate(10deg); }

/* Soft halo pulse */
@keyframes haloPulse {
  0% { transform: scale(1); opacity: .25; }
  50% { transform: scale(1.08); opacity: .45; }
  100% { transform: scale(1); opacity: .25; }
}
.bot-halo { position: absolute; inset: -8px; border-radius: 24px; background:
  radial-gradient(circle at 30% 20%, rgba(99,102,241,.25), transparent 60%),
  radial-gradient(circle at 70% 80%, rgba(34,197,94,.2), transparent 60%),
  radial-gradient(circle at 50% 50%, rgba(14,165,233,.22), transparent 65%);
  filter: blur(12px);
  animation: haloPulse 4.8s ease-in-out infinite;
}

.avatar-3d { perspective: 700px; }
.avatar-img { transform-style: preserve-3d; will-change: transform; transform-origin: center; backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .bot-tilt:hover { transform: none; }
  .bot-sheen { display: none; }
  .bot-halo { animation: none; opacity: .3; }
}

/* Contact FAB animations */
@keyframes fabBob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
@keyframes fabRing {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes dotPulse {
  0% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
  100% { opacity: .35; transform: translateY(0); }
}
.fab-bob { animation: fabBob 4.8s ease-in-out infinite; }
.fab-ring { animation: fabRing 2.8s ease-out infinite; }
.fab-delay { animation-delay: 1.4s; }
.dot { animation: dotPulse 1.2s ease-in-out infinite; }
.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: .2s; }
.dot-3 { animation-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .fab-bob, .fab-ring, .dot { animation: none; }
}
/* Prevent Alpine x-cloak flash */
[x-cloak] { display: none !important; }

/* Header logo/text glow (brand-based) */
.header-glow { position: relative; }
.header-glow .logo-mark {
  filter: drop-shadow(0 0 10px rgba(79,70,229,.35)) drop-shadow(0 0 18px rgba(14,165,233,.25));
}
.header-glow .brand-title {
  text-shadow: 0 0 10px rgba(79,70,229,.45), 0 0 18px rgba(14,165,233,.35);
}
.header-glow:hover .logo-mark {
  filter: drop-shadow(0 0 12px rgba(79,70,229,.5)) drop-shadow(0 0 22px rgba(14,165,233,.35));
}
.header-glow:hover .brand-title {
  text-shadow: 0 0 12px rgba(79,70,229,.6), 0 0 22px rgba(14,165,233,.4);
}
@media (prefers-reduced-motion: reduce) {
  .header-glow .logo-mark { filter: drop-shadow(0 0 8px rgba(79,70,229,.3)); }
}

/* Sections: improve mobile perf with content-visibility */
@supports (content-visibility: auto) {
  .section-lazy { content-visibility: auto; contain-intrinsic-size: 600px 800px; }
}

/* Anchor scroll offset for sticky header */
section[id] { scroll-margin-top: 110px; }

/* Subtle breathing animation for primary CTA on mobile */
@keyframes ctaBreathe {
  0% { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(79,70,229,0.35); }
  50% { transform: translateY(-1px) scale(1.01); box-shadow: 0 8px 24px rgba(79,70,229,0.25); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(79,70,229,0.35); }
}
.cta-breathe { animation: ctaBreathe 3.2s ease-in-out infinite; }
@media (min-width: 640px) { .cta-breathe { animation: none; } }