/* ============================================================
   TeamStack.ai — External Stylesheet
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* Prevent any element from causing page-level horizontal scroll */
body {
  overflow-x: hidden;
} 

/* Landing, hero → about: #problem (slate-50) → #solutions (white) → #results
   (brand-50) → #testimonials (slate-100) → #about (brand-500) */

/* ---- Gradient text ---- */
.text-gradient {
  background: linear-gradient(135deg, #29B7B7 0%, #6ecbcb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; 
}

/* ---- Hero background + glows ---- */
.hero-section {
  background: linear-gradient(135deg, #0a1628 0%, #0d2626 50%, #0a1f2e 100%);
  position: relative; 
  overflow: hidden;
}

.hero-glow-1 {
  position: absolute;
  top: -15%;
  right: -10%;
  width: 55%;
  height: 65%;
  background: radial-gradient(ellipse, rgba(41, 183, 183, 0.18) 0%, transparent 70%);
  animation: glow-pulse 7s ease-in-out infinite;
  pointer-events: none;
}

.hero-glow-2 {
  position: absolute;
  bottom: -10%;
  left: 0%;
  width: 40%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(41, 183, 183, 0.10) 0%, transparent 70%);
  animation: glow-pulse 9s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes glow-pulse {
  0%,  100% { opacity: 0.5; transform: scale(1); }
  50%        { opacity: 1;   transform: scale(1.12); }
}

/* ---- Hero “AI / intelligence” — soft aurora + data-grid (kept very subtle) ---- */
.hero-ai-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Slow-moving teal / cyan mist, blurred — suggests depth & “active” system */
.hero-ai-fx-aurora {
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(ellipse 45% 38% at 18% 28%, rgba(41, 183, 183, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 42% 40% at 78% 72%, rgba(110, 203, 203, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 30% 28% at 50% 50%, rgba(41, 183, 183, 0.08) 0%, transparent 60%);
  filter: blur(50px);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: hero-ai-aurora-drift 32s ease-in-out infinite;
}

/* Very light tech grid, pans slowly (data / model vibe without noise) */
.hero-ai-fx-mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(110, 203, 203, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 203, 203, 0.045) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 35%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 35%, black 0%, transparent 72%);
  opacity: 0.5;
  animation: hero-ai-mesh-pan 60s linear infinite;
}

@keyframes hero-ai-aurora-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  30% {
    transform: translate(2.5%, 1.5%) scale(1.04);
  }
  60% {
    transform: translate(-1.2%, 2.2%) scale(0.98);
  }
}

@keyframes hero-ai-mesh-pan {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 52px 28px, -24px 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ai-fx-aurora,
  .hero-ai-fx-mesh {
    animation: none !important;
  }
  .hero-ai-fx-aurora {
    transform: none;
    opacity: 0.35;
  }
  .hero-ai-fx-mesh {
    background-position: 0 0, 0 0;
    opacity: 0.3;
  }
}

/* ============================================================
   SCROLL-REVEAL — bidirectional (in on enter, out on leave)
   Base (hidden) state. .is-visible added/removed by JS.
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.82, 0.25, 1), transform 0.65s cubic-bezier(0.2, 0.82, 0.25, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.82, 0.25, 1), transform 0.65s cubic-bezier(0.2, 0.82, 0.25, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.82, 0.25, 1), transform 0.65s cubic-bezier(0.2, 0.82, 0.25, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Stagger entrance delays ---- */
/* Applied only when entering (.is-visible present); removed on exit */
.is-visible.sd-1 { transition-delay: 0.10s; }
.is-visible.sd-2 { transition-delay: 0.20s; }
.is-visible.sd-3 { transition-delay: 0.30s; }
.is-visible.sd-4 { transition-delay: 0.40s; }
.is-visible.sd-5 { transition-delay: 0.50s; }

/* Exit (no delay — disappear promptly on scroll-back) */
.reveal:not(.is-visible),
.reveal-left:not(.is-visible),
.reveal-right:not(.is-visible) {
  transition-delay: 0s;
}

/* ---- Problem section lead: smooth horizontal unfold (clip-path), not character-by-character ---- */
#problem-lead .problem-lead-inner {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.85s cubic-bezier(0.22, 0.9, 0.35, 1);
  will-change: clip-path;
}
#problem-lead.problem-lead--in-view .problem-lead-inner--1 {
  clip-path: inset(0 0 0 0);
}
#problem-lead.problem-lead--in-view .problem-lead-inner--2 {
  clip-path: inset(0 0 0 0);
  /* Second line after a short breath; still overlaps slightly with the end of line 1 */
  transition-delay: 1.05s;
}
@media (prefers-reduced-motion: reduce) {
  #problem-lead .problem-lead-inner {
    clip-path: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* ---- Nav link animated underline ---- */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: #29B7B7;
  transition: width 0.28s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ---- Card hover lift ---- */
.card-lift {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}

.card-lift:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 44px -20px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(41, 183, 183, 0.08);
}


/* ---- Alpine.js cloak ---- */
[x-cloak] {
  display: none !important;
}

/* ---- Section eyebrow label ---- */
.section-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #29B7B7;
  margin-bottom: 1rem;
}

/* ---- Mobile drawer ---- */
/* The drawer uses Tailwind's translate-x-0 / translate-x-full via Alpine :class.
   This rule ensures the transition is smooth even when Tailwind's JIT is the CDN. */
aside[aria-hidden="true"] {
  pointer-events: none;
}
aside[aria-hidden="false"] {
  pointer-events: auto;
}

/* ---- Hero typewriter (Block 1) — cursor + CTA + brand reveal ---- */
#hero-h1 .hero-h1-line {
  min-height: 1.15em;
}

#hero-ctas {
  transition: opacity 0.55s ease, transform 0.55s ease;
}

#hero-ctas.hero-ctas-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

#hero-h1 .hero-h1-brand.hero-h1-brand-prep {
  opacity: 0;
  transform: translateY(0.2em);
  transition: none;
}

#hero-h1 .hero-h1-brand.hero-h1-brand-in {
  opacity: 1;
  transition: opacity 0.55s ease, transform 0.5s ease;
  transform: translateY(0);
}

#hero-h1 .hero-h1-brand {
  display: inline-block;
}

.hero-type-cursor {
  display: inline-block;
  width: 0.12em;
  min-height: 0.85em;
  vertical-align: -0.08em;
  margin-left: 1px;
  border-left: 2px solid #6ecbcb;
  background: none;
  animation: hero-cursor-blink 0.95s step-end infinite;
  box-shadow: 0 0 10px rgba(110, 203, 203, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .hero-type-cursor {
    animation: none;
    border-left-color: #6ecbcb;
    opacity: 0.4;
  }
  #hero-ctas {
    transform: none !important;
  }
}

@keyframes hero-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

/* ============================================================
   Landing polish — subtle depth & motion (respects reduced motion)
   ============================================================ */

/* Primary brand CTAs: soft glow + lift on hover */
.btn-brand-cta {
  position: relative;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    background-color 0.2s ease;
  box-shadow: 0 4px 20px -6px rgba(41, 183, 183, 0.45);
}
.btn-brand-cta:hover {
  box-shadow:
    0 8px 32px -6px rgba(41, 183, 183, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transform: translateY(-2px) scale(1.01);
}
.btn-brand-cta:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 12px -4px rgba(41, 183, 183, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .btn-brand-cta,
  .btn-brand-cta:hover,
  .btn-brand-cta:active {
    transform: none;
    box-shadow: none;
  }
}

/* Hero: dashboard still inside glass card — slow zoom on hover (group) */
.hero-spotlight-media {
  overflow: hidden;
  border-radius: inherit;
}
.hero-spotlight-media img {
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.32, 1);
}
.group:hover .hero-spotlight-media img {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .hero-spotlight-media img,
  .group:hover .hero-spotlight-media img {
    transform: none;
  }
}

/* Solutions: product screenshots breathe slightly on card hover (cards already have .group) */
#solutions .group img {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
#solutions .group:hover img {
  transform: scale(1.025);
}
@media (prefers-reduced-motion: reduce) {
  #solutions .group img,
  #solutions .group:hover img {
    transform: none;
  }
}

/* Contact band: cool teal wash from top (depth without a new color block) */
#contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 65% at 50% 0%,
    rgba(41, 183, 183, 0.12) 0%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 0;
}
#contact > .max-w-4xl {
  position: relative;
  z-index: 1;
}

/* CTA “pill” badges: gentle lift + glow on hover */
#contact .flex-wrap .inline-flex.rounded-full {
  transition:
    border-color 0.3s ease,
    box-shadow 0.35s ease,
    transform 0.25s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #contact .flex-wrap .inline-flex.rounded-full:hover {
    border-color: rgba(110, 203, 203, 0.5);
    box-shadow: 0 8px 28px -10px rgba(41, 183, 183, 0.35);
    transform: translateY(-3px);
  }
}

/* Footer: hairline brand gradient (replaces flat top border) */
footer.site-footer {
  position: relative;
}
footer.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(41, 183, 183, 0.45) 20%,
    rgba(110, 203, 203, 0.3) 50%,
    rgba(41, 183, 183, 0.4) 80%,
    transparent
  );
  pointer-events: none;
}

/* Section labels: hairline glow on larger viewports (no inline-color override) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .section-label {
    transition: text-shadow 0.35s ease, color 0.3s ease;
  }
  .text-center .section-label:hover,
  #contact .section-label:hover {
    text-shadow: 0 0 24px rgba(41, 183, 183, 0.45);
  }
}

/* Hero secondary CTA: soft ring of light on hover (glass button) */
.hero-ghost-cta {
  transition:
    background-color 0.2s ease,
    border-color 0.25s ease,
    box-shadow 0.4s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-ghost-cta:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12),
      0 16px 40px -14px rgba(0, 0, 0, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ghost-cta:hover {
    transform: none;
    box-shadow: none;
  }
}