/* Custom styles for AtlasAI */
/* Local font faces */
@font-face {
  font-family: 'Atlas';
  src: url('fonts/1ZFS7N918ojhhd0nQWdj3jz4w.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/8yoV9pUxquX7VD7ZXlNYKQmkmk.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/d3tHnaQIAeqiE5hGcRw4mmgWYU.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/DXD0Q7LSl7HEvDzucnyLnGBHM.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/n9CXKI3tsmCPeC6MCT9NziShSuQ.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/vQyevYAyHtARFwPqUzQGpnDs.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/vQyevYAyHtARFwPqUzQGpnDs.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* End font faces */

/* Use Atlas for all headings and titles */
h1, h2, h3, h4, h5, h6,
.hero-title {
  font-family: 'Atlas', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Keep the action button pinned to the bottom of each service card */
.service-card {
  height: 100%;
}

.service-card .card-footer {
  margin-top: auto;
}

/* Optional: improve list bullet alignment on small screens */
.service-card ul li span.text-brand {
  line-height: 1;
}

.hero-slide > .grid {
  padding-bottom: 0px !important;
}

/* Hero animations */
.hero-left .hero-pill,
.hero-left .hero-title,
.hero-left .hero-desc,
.hero-left .hero-cta,
.hero-left .hero-stats,
.hero-right .hero-card,
.hero-right .hero-card-head,
.hero-right .hero-metrics {
  will-change: transform, opacity;
}

.hero-left .hero-pill,
.hero-left .hero-title,
.hero-left .hero-desc,
.hero-left .hero-cta,
.hero-left .hero-stats {
  opacity: 0;
  transform: translateY(14px);
}

.hero-right .hero-card {
  opacity: 0;
  transform: translateY(16px);
}

.hero-right .hero-card-head,
.hero-right .hero-metrics {
  opacity: 0;
  transform: translateY(10px);
}

/* In-view state toggled from JS */
.hero-animate .hero-left .hero-pill { transition: opacity .35s ease-out .05s, transform .35s ease-out .05s; opacity: 1; transform: none; }
.hero-animate .hero-left .hero-title { transition: opacity .45s ease-out .12s, transform .45s ease-out .12s; opacity: 1; transform: none; }
.hero-animate .hero-left .hero-desc { transition: opacity .45s ease-out .18s, transform .45s ease-out .18s; opacity: 1; transform: none; }
.hero-animate .hero-left .hero-cta { transition: opacity .45s ease-out .26s, transform .45s ease-out .26s; opacity: 1; transform: none; }
.hero-animate .hero-left .hero-stats { transition: opacity .45s ease-out .34s, transform .45s ease-out .34s; opacity: 1; transform: none; }

.hero-animate .hero-right .hero-card { transition: opacity .5s ease-out .18s, transform .5s ease-out .18s; opacity: 1; transform: none; }
.hero-animate .hero-right .hero-card-head { transition: opacity .4s ease-out .32s, transform .4s ease-out .32s; opacity: 1; transform: none; }
.hero-animate .hero-right .hero-metrics { transition: opacity .4s ease-out .42s, transform .4s ease-out .42s; opacity: 1; transform: none; }

.hero-stat-card { opacity: 0; transform: translateY(10px); }
.hero-animate .hero-stat-card { transition: opacity .4s ease-out .38s, transform .4s ease-out .38s; opacity: 1; transform: none; }


/* Grid hero background (from background-animation.html, adapted) */
.hero-grid {
  position: relative;
  overflow: hidden;
}

/* Apply subtle translucent background to hero sections on non-home pages */
.hero-grid {
  background: #ffffff0a;
}

/* Keep the home page hero unchanged */
#hero.hero-grid {
  background: transparent;
}

.hero-grid .grid-container {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-grid .grid-lines {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(400px) rotateX(60deg);
  animation: gridFlow 30s linear infinite;
}

@keyframes gridFlow {
  0% { transform: perspective(400px) rotateX(60deg) translateY(0); }
  100% { transform: perspective(400px) rotateX(60deg) translateY(60px); }
}

.hero-grid .accent-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: scan 8s ease-in-out infinite;
  pointer-events: none;
}

.hero-grid .accent-line.a1 { width: 300px; top: 20%; left: -300px; animation-delay: 0s; }
.hero-grid .accent-line.a2 { width: 400px; top: 50%; right: -400px; animation: scan-reverse 10s ease-in-out infinite; animation-delay: 2s; }
.hero-grid .accent-line.a3 { width: 250px; top: 80%; left: -250px; animation-delay: 4s; }

@keyframes scan {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100%)); }
}

@keyframes scan-reverse {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(calc(-100vw - 100%)); }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-grid .grid-lines { animation: none; }
  .hero-grid .accent-line { animation: none; }
}

/* Contact wizard tweaks */
.peer:checked + span { color: #fff; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  #stepProgressFill { transition: none; }
}

/* Highlight selected option cards in the contact wizard */
#contactWizardForm label:has(> input[type="radio"]:checked),
#contactWizardForm label:has(> input[type="checkbox"]:checked) {
  border-color: #06b6d4;
  background-color: rgba(6, 182, 212, 0.08);
}

/* Keyboard focus outline for accessibility */
#contactWizardForm label:has(> input[type="radio"]:focus-visible),
#contactWizardForm label:has(> input[type="checkbox"]:focus-visible) {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
  outline: none;
}

/* Color icons when option is selected */
#contactWizardForm input[type="radio"]:checked + div > i,
#contactWizardForm input[type="radio"]:checked + div > svg,
#contactWizardForm input[type="checkbox"]:checked + div > i,
#contactWizardForm input[type="checkbox"]:checked + div > svg {
  color: #06b6d4;
  stroke: #06b6d4;
}

/* Optional: thin separator under the callout header */
.contact-callout-sep { height: 6px; border-radius: 999px; background: #0f172a; opacity: .9; }

/* Use Atlas for all headings and titles */
h1, h2, h3, h4, h5, h6,
.hero-title {
  font-family: 'Atlas', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}