/* TechAge Systems - global custom CSS
   Tailwind handles the bulk via the Play CDN config in _Layout.cshtml.
   This file holds animations, gradient meshes and a couple of utilities
   that are awkward to express as Tailwind classes inline. */

html {
  scroll-behavior: smooth;
}

/* Hide Alpine x-cloak elements until Alpine has initialised (prevents FOUC). */
[x-cloak] { display: none !important; }

/* Stronger focus ring for keyboard navigation (accessibility). */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 6px;
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline-color: #3b82f6;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Animated brand gradient hero background ---------------------------- */
.hero-gradient {
  background: linear-gradient(120deg, #1e40af 0%, #3b82f6 35%, #8b5cf6 70%, #ec4899 100%);
  background-size: 200% 200%;
  animation: hero-shift 14s ease-in-out infinite;
}

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

/* Soft mesh of glowing blobs layered on top of the hero gradient. */
.hero-mesh::before,
.hero-mesh::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
}
.hero-mesh::before {
  width: 520px; height: 520px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, #60a5fa 0%, transparent 70%);
}
.hero-mesh::after {
  width: 600px; height: 600px;
  bottom: -220px; right: -160px;
  background: radial-gradient(circle, #ec4899 0%, transparent 70%);
}

/* Faint grid overlay */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 35%, transparent 75%);
}

/* --- Glassmorphism card -------------------------------------------------- */
.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.glass-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* --- Card hover lift ----------------------------------------------------- */
.lift {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(30, 64, 175, 0.18);
}

/* --- Gradient text ------------------------------------------------------- */
.text-gradient {
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Reveal on scroll (used by site.js IntersectionObserver) ------------ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"].is-visible { transition-delay: 80ms;  }
.reveal[data-delay="2"].is-visible { transition-delay: 160ms; }
.reveal[data-delay="3"].is-visible { transition-delay: 240ms; }
.reveal[data-delay="4"].is-visible { transition-delay: 320ms; }
.reveal[data-delay="5"].is-visible { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-gradient { animation: none; }
}

/* --- WhatsApp button pulse rings ---------------------------------------- */
.wa-pulse {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(37, 211, 102, 0.55);
  animation: wa-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.wa-pulse.delay { animation-delay: 0.9s; }

@keyframes wa-ring {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.9);  opacity: 0;   }
}

/* --- Dashboard mockup chrome -------------------------------------------- */
.mockup {
  border-radius: 14px;
  overflow: hidden;
  background: #0b1437;
  box-shadow:
    0 30px 60px -20px rgba(15, 23, 42, 0.45),
    0 12px 24px -8px rgba(30, 64, 175, 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}
.mockup-bar {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: linear-gradient(180deg, #1b2553 0%, #0f1a44 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mockup-bar span { width: 10px; height: 10px; border-radius: 9999px; }
.mockup-bar .r { background: #ef4444; }
.mockup-bar .y { background: #f59e0b; }
.mockup-bar .g { background: #22c55e; }

/* --- Trusted-by marquee -------------------------------------------------- */
.marquee {
  display: flex;
  gap: 56px;
  animation: marquee 35s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-mask {
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

/* --- Tiny chart sparkline used inside mockup ---------------------------- */
.sparkline path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 2.4s ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- Article body typography (replaces @tailwindcss/typography) -------- */
.prose-techage {
  color: #334155;          /* ink-700 */
  font-size: 1.0625rem;    /* 17px */
  line-height: 1.75;
}
.prose-techage p { margin: 0 0 1.25em; }
.prose-techage p:last-child { margin-bottom: 0; }
.prose-techage h2 {
  color: #0f172a;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.7em;
}
.prose-techage h3 {
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2em 0 0.6em;
}
.prose-techage h2:first-child,
.prose-techage h3:first-child { margin-top: 0; }
.prose-techage strong { color: #0f172a; font-weight: 600; }
.prose-techage em { font-style: italic; }
.prose-techage a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose-techage a:hover { color: #1e40af; }
.prose-techage ul,
.prose-techage ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.prose-techage ul li,
.prose-techage ol li { margin: 0.4em 0; }
.prose-techage ul li::marker { color: #94a3b8; }
.prose-techage ol li::marker { color: #475569; font-weight: 600; }
.prose-techage code {
  background: #f1f5f9;
  border-radius: 6px;
  padding: 0.15em 0.4em;
  font-size: 0.92em;
  color: #0f172a;
}
.prose-techage blockquote {
  border-left: 3px solid #3b82f6;
  padding-left: 1.25em;
  margin: 1.5em 0;
  color: #475569;
  font-style: italic;
}

/* line-clamp utility (used on blog excerpts) */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}