/* ═══════════════════════════════════════════════════════════
   XtrazCon — Premium Animation System  (inner pages only)
   animations.css
   DO NOT load on index.html
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES — TIMING TOKENS
───────────────────────────────────────── */
:root {
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   0.35s;
  --dur-med:    0.6s;
  --dur-slow:   0.9s;
  --dur-xslow:  1.2s;
}

/* ─────────────────────────────────────────
   2. KEYFRAME LIBRARY
───────────────────────────────────────── */

/* Core entrance */
@keyframes xz-fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes xz-fadeDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes xz-fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes xz-fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes xz-scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes xz-blurIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

/* Hero word reveal — clip path */
@keyframes xz-revealUp {
  from { clip-path: inset(100% 0 0 0); transform: translateY(100%); opacity: 0; }
  to   { clip-path: inset(0% 0 0 0);   transform: translateY(0);    opacity: 1; }
}

/* Shimmer sweep on hover */
@keyframes xz-shimmer {
  0%   { transform: translateX(-100%) skewX(-14deg); }
  100% { transform: translateX(260%)  skewX(-14deg); }
}

/* Divider line grow */
@keyframes xz-lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Number count pulse */
@keyframes xz-numPop {
  0%   { opacity: 0; transform: translateY(16px) scale(0.85); }
  70%  { transform: translateY(-4px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gradient aurora drift — hero backgrounds */
@keyframes xz-auroraShift {
  0%   { background-position: 0% 50%;   opacity: 0.65; }
  50%  { background-position: 100% 50%; opacity: 0.9; }
  100% { background-position: 0% 50%;   opacity: 0.65; }
}

/* Floating glow orb */
@keyframes xz-orb1 {
  0%, 100% { transform: translate(0, 0)   scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.08); }
  66%       { transform: translate(-20px, 15px) scale(0.95); }
}
@keyframes xz-orb2 {
  0%, 100% { transform: translate(0, 0)  scale(1); }
  40%       { transform: translate(-25px, 20px) scale(1.06); }
  70%       { transform: translate(15px, -10px) scale(0.97); }
}

/* Process timeline dot pulse */
@keyframes xz-dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,252,0); }
  50%       { box-shadow: 0 0 0 8px rgba(124,92,252,0.18); }
}

/* Stats band count-up shimmer */
@keyframes xz-statShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Neon border trace (buttons, cards on hover) */
@keyframes xz-borderTrace {
  0%   { box-shadow: 0 0 0 1px rgba(124,92,252,0); }
  50%  { box-shadow: 0 0 18px 2px rgba(124,92,252,0.35); }
  100% { box-shadow: 0 0 0 1px rgba(124,92,252,0.15); }
}

/* Tech tag stagger pop */
@keyframes xz-tagPop {
  from { opacity: 0; transform: scale(0.7) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Subtle parallax float */
@keyframes xz-floatSlow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* Card entrance from below */
@keyframes xz-cardRise {
  0%   { opacity: 0; transform: translateY(50px) scale(0.97); filter: blur(3px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Eyebrow badge slide in */
@keyframes xz-eyebrowSlide {
  from { opacity: 0; transform: translateX(-16px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Scan line sweep (image overlays) */
@keyframes xz-scanLine {
  0%   { top: -2px; opacity: 0.8; }
  100% { top: 102%; opacity: 0;   }
}

/* Rotating gradient ring */
@keyframes xz-ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────
   3. PAGE HERO — ANIMATED ENTRANCE
   Applies to .page-hero sections on all
   inner pages.
───────────────────────────────────────── */

/* Animated aurora in hero bg */
.page-hero-bg {
  animation: xz-auroraShift 12s ease-in-out infinite;
  background-size: 300% 300% !important;
}

/* Grid pattern subtle pulse */
.page-hero-grid {
  animation: xz-floatSlow 18s ease-in-out infinite;
}

/* Breadcrumb */
.page-hero .breadcrumb {
  opacity: 0;
  animation: xz-fadeDown var(--dur-med) var(--ease-out-expo) 0.1s forwards;
}

/* Eyebrow pill */
.page-hero-eyebrow {
  opacity: 0;
  animation: xz-eyebrowSlide var(--dur-med) var(--ease-out-expo) 0.22s forwards;
}

/* H1 — line by line clip reveal */
.page-hero-h1 {
  opacity: 0;
  animation: xz-blurIn var(--dur-slow) var(--ease-out-expo) 0.32s forwards;
}

/* Sub paragraph */
.page-hero-sub {
  opacity: 0;
  animation: xz-fadeUp var(--dur-med) var(--ease-out-expo) 0.52s forwards;
}

/* CTA buttons */
.page-hero-btns {
  opacity: 0;
  animation: xz-fadeUp var(--dur-med) var(--ease-out-expo) 0.66s forwards;
}

/* ─────────────────────────────────────────
   4. SECTION HEADERS  (.sec-header)
───────────────────────────────────────── */

/* Divider bar — grows from left on scroll */
.sec-divider {
  transform-origin: left;
}
.sec-divider.xz-visible {
  animation: xz-lineGrow 0.55s var(--ease-out-expo) forwards;
}

/* Eyebrow inside section headers */
.sec-eyebrow {
  position: relative;
  display: inline-block;
}

/* ─────────────────────────────────────────
   5. SCROLL-TRIGGERED UTILITY CLASSES
   Applied by JS via IntersectionObserver.
   Use these directly in HTML or via JS.
───────────────────────────────────────── */

/* Variants for stagger system */
.xz-up,
.xz-left,
.xz-right,
.xz-scale,
.xz-blur {
  will-change: opacity, transform;
}

.xz-up    { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-out-expo); }
.xz-left  { opacity: 0; transform: translateX(-40px); transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-out-expo); }
.xz-right { opacity: 0; transform: translateX(40px);  transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-out-expo); }
.xz-scale { opacity: 0; transform: scale(0.9);        transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-spring); }
.xz-blur  { opacity: 0; filter: blur(10px); transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo), filter var(--dur-slow) var(--ease-out-expo); }

.xz-up.xz-visible,
.xz-left.xz-visible,
.xz-right.xz-visible  { opacity: 1; transform: translate(0); }
.xz-scale.xz-visible  { opacity: 1; transform: scale(1); }
.xz-blur.xz-visible   { opacity: 1; filter: blur(0); transform: translateY(0); }

/* Stagger delays (applied by JS or inline) */
.xz-d1  { transition-delay: 0.08s !important; }
.xz-d2  { transition-delay: 0.16s !important; }
.xz-d3  { transition-delay: 0.24s !important; }
.xz-d4  { transition-delay: 0.32s !important; }
.xz-d5  { transition-delay: 0.40s !important; }
.xz-d6  { transition-delay: 0.48s !important; }
.xz-d7  { transition-delay: 0.56s !important; }
.xz-d8  { transition-delay: 0.64s !important; }

/* ─────────────────────────────────────────
   6. CARD HOVER EFFECTS
   Applied to: .culture-card, .sol-overview-card,
   .industry-card-full, .job-card, .contact-info-block,
   .about-stat-item, .value-card, .case-card
───────────────────────────────────────── */

/* Base shimmer overlay for all shimmer-cards */
.xz-card {
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.38s ease,
    transform    0.42s var(--ease-spring),
    box-shadow   0.38s ease;
}
.xz-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(124,92,252,0.07), rgba(79,139,255,0.04), transparent);
  opacity: 0;
  transition: opacity 0.38s;
  pointer-events: none;
  z-index: 0;
}
.xz-card::after {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
  transform: skewX(-14deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.xz-card:hover {
  border-color: rgba(124,92,252, 0.5) !important;
  transform: translateY(-7px) scale(1.012);
  box-shadow:
    0 24px 56px rgba(124,92,252, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.35);
}
.xz-card:hover::before { opacity: 1; }
.xz-card:hover::after  { animation: xz-shimmer 0.75s ease forwards; opacity: 1; }

/* Glow orb inside cards (add <div class="xz-orb"></div> as first child) */
.xz-orb {
  position: absolute; top: -50px; right: -50px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,252,0.28), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}
.xz-card:hover .xz-orb { opacity: 1; }

/* ─────────────────────────────────────────
   7. ABOUT PAGE — SPECIFIC ENHANCEMENTS
───────────────────────────────────────── */

/* Intro image: reveal from left */
.about-intro-img {
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo) !important;
}
.about-intro-img.xz-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Intro image floating animation once visible */
.about-intro-img img {
  transition: transform 0.65s var(--ease-spring);
}
.about-intro-img:hover img { transform: scale(1.03) translateY(-4px); }

/* Badge inside image */
.about-intro-img-badge {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.3s;
}
.about-intro-img:hover .about-intro-img-badge {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(124,92,252,0.2);
}

/* Stat numbers — animated count shimmer */
.stat-num {
  background: linear-gradient(90deg, #a78bff, #7bb8ff, #a78bff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: xz-statShimmer 4s linear infinite;
}

/* Leadership cards */
.leadership-card,
.leader-card {
  transition:
    border-color 0.35s ease,
    transform    0.42s var(--ease-spring),
    box-shadow   0.35s ease;
}
.leadership-card:hover,
.leader-card:hover {
  border-color: rgba(124,92,252,0.4) !important;
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(124,92,252,0.15), 0 6px 18px rgba(0,0,0,0.3);
}

/* Values grid cards */
.value-card {
  transition:
    border-color 0.35s ease,
    transform    0.42s var(--ease-spring),
    box-shadow   0.35s ease,
    background   0.35s ease;
}
.value-card:hover {
  border-color: rgba(124,92,252,0.42) !important;
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(124,92,252,0.14);
  background: rgba(124,92,252,0.05) !important;
}
.value-card .culture-icon,
.value-card [class*="icon"] {
  transition: transform 0.42s var(--ease-spring);
}
.value-card:hover .culture-icon,
.value-card:hover [class*="icon"] { transform: scale(1.18) rotate(6deg); }

/* ─────────────────────────────────────────
   8. SOLUTIONS PAGE — SPECIFIC
───────────────────────────────────────── */

/* Overview navigation cards */
.sol-overview-card {
  transition:
    border-color 0.35s ease,
    transform    0.42s var(--ease-spring),
    box-shadow   0.35s ease !important;
}
.sol-overview-card:hover {
  border-color: rgba(124,92,252,0.5) !important;
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 16px 42px rgba(124,92,252,0.15) !important;
}
.sol-overview-card .sol-overview-icon {
  transition: transform 0.42s var(--ease-spring) !important;
}
.sol-overview-card:hover .sol-overview-icon { transform: scale(1.2) rotate(7deg) !important; }

/* Detail images — zoom + scan */
.sol-detail-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--r2);
  transition: transform 0.6s var(--ease-out-expo);
}
.sol-detail-block:hover .sol-detail-img { transform: scale(1.02) translateY(-4px); }

/* Metric values — living shimmer */
.metric-val {
  background: linear-gradient(90deg, #a78bff, #4f8bff, #e040fb, #a78bff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: xz-statShimmer 5s linear infinite;
}

/* Tech tags — stagger pop on parent visible */
.tech-tag {
  opacity: 0;
  transform: scale(0.75) translateY(6px);
  animation: xz-tagPop 0.4s var(--ease-spring) forwards;
}
/* JS will add animation-delay per tag */

.sol-metric {
  transition: transform 0.35s var(--ease-spring);
}
.sol-metric:hover { transform: translateY(-4px) scale(1.05); }

/* Sol detail block — image scan line on hover */
.sol-detail-block {
  position: relative;
}

/* ─────────────────────────────────────────
   9. PROCESS PAGE — TIMELINE ANIMATIONS
───────────────────────────────────────── */

/* Vertical line draw on scroll */
.process-timeline::before {
  animation: none;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s var(--ease-out-quart);
}
.process-timeline.xz-timeline-active::before {
  transform: scaleY(1);
}

/* Step node dot pulse */
.pt-center {
  transition: box-shadow 0.4s ease;
}
.pt-step.xz-visible .pt-center {
  animation: xz-dotPulse 2.5s ease-in-out infinite;
}

/* Step content slides in from alternating sides */
.pt-step.left .pt-content {
  opacity: 0; transform: translateX(-30px);
  transition: opacity var(--dur-med) var(--ease-out-expo),
              transform var(--dur-med) var(--ease-out-expo);
}
.pt-step.right .pt-content {
  opacity: 0; transform: translateX(30px);
  transition: opacity var(--dur-med) var(--ease-out-expo),
              transform var(--dur-med) var(--ease-out-expo);
}
.pt-step.xz-visible .pt-content { opacity: 1; transform: translateX(0); }

/* Step number animate */
.pt-step-num {
  transition: color 0.3s, text-shadow 0.3s;
}
.pt-step.xz-visible .pt-step-num {
  color: var(--accent);
  text-shadow: 0 0 16px rgba(124,92,252,0.5);
}

/* ─────────────────────────────────────────
   10. CAREERS PAGE
───────────────────────────────────────── */

.culture-card {
  transition:
    border-color 0.35s ease,
    transform    0.42s var(--ease-spring),
    box-shadow   0.35s ease,
    background   0.3s ease;
}
.culture-card:hover {
  border-color: rgba(124,92,252,0.42) !important;
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(124,92,252,0.14);
  background: rgba(124,92,252,0.04) !important;
}
.culture-card .culture-icon {
  transition: transform 0.42s var(--ease-spring);
}
.culture-card:hover .culture-icon { transform: scale(1.18) rotate(5deg); }

.job-card {
  transition:
    border-color 0.32s ease,
    background   0.32s ease,
    transform    0.38s var(--ease-spring),
    box-shadow   0.32s ease;
}
.job-card:hover {
  border-color: rgba(124,92,252,0.45) !important;
  background: rgba(124,92,252,0.04) !important;
  transform: translateX(6px);
  box-shadow: 0 8px 32px rgba(124,92,252,0.12);
}

/* Job card arrow indicator */
.job-card .btn-secondary {
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}
.job-card:hover .btn-secondary { transform: translateX(4px); }

/* ─────────────────────────────────────────
   11. CASE STUDIES PAGE
───────────────────────────────────────── */

.case-card,
[class*="case-study"] {
  transition:
    border-color 0.35s ease,
    transform    0.42s var(--ease-spring),
    box-shadow   0.35s ease;
}
.case-card:hover,
[class*="case-study"]:hover {
  border-color: rgba(124,92,252,0.45) !important;
  transform: translateY(-7px);
  box-shadow: 0 22px 52px rgba(124,92,252,0.17);
}

/* Case study images */
.case-card img,
[class*="case-img"] {
  transition: transform 0.6s var(--ease-out-expo), filter 0.4s;
}
.case-card:hover img,
[class*="case-study"]:hover [class*="case-img"] {
  transform: scale(1.06);
  filter: brightness(1.07) saturate(1.1);
}

/* ─────────────────────────────────────────
   12. CONTACT PAGE
───────────────────────────────────────── */

.contact-form-card {
  transition: box-shadow 0.4s ease, border-color 0.4s;
}
.contact-form-card:focus-within {
  border-color: rgba(124,92,252,0.35);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.08), 0 24px 56px rgba(0,0,0,0.3);
}

/* Input fields */
.contact-form input,
.contact-form textarea,
.contact-form select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: rgba(124,92,252,0.5) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.1);
  background: rgba(124,92,252,0.04) !important;
  outline: none;
}

.contact-info-block {
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.42s var(--ease-spring);
}
.contact-info-block:hover {
  border-color: rgba(124,92,252,0.3);
  box-shadow: 0 16px 42px rgba(124,92,252,0.1);
  transform: translateY(-4px);
}

/* Office cards */
.office-card,
[class*="offices-"] > div {
  transition: border-color 0.35s, transform 0.4s var(--ease-spring), box-shadow 0.35s;
}
.office-card:hover,
[class*="offices-"] > div:hover {
  border-color: rgba(124,92,252,0.38) !important;
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(124,92,252,0.12);
}

/* ─────────────────────────────────────────
   13. BUTTON ENHANCEMENTS
   All .btn-primary and .btn-secondary on
   inner pages get upgraded hover states.
───────────────────────────────────────── */

.btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    transform    0.32s var(--ease-spring),
    box-shadow   0.32s ease,
    opacity      0.22s ease !important;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: translateX(-100%) skewX(-14deg);
  transition: none;
}
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(124,92,252,0.4), 0 4px 12px rgba(124,92,252,0.2) !important;
}
.btn-primary:hover::after { animation: xz-shimmer 0.65s ease forwards; }
.btn-primary:active { transform: translateY(-1px) !important; }

.btn-secondary {
  transition:
    border-color 0.3s ease,
    color        0.3s ease,
    transform    0.32s var(--ease-spring),
    box-shadow   0.3s ease,
    background   0.3s ease !important;
}
.btn-secondary:hover {
  border-color: rgba(124,92,252,0.6) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(124,92,252,0.18) !important;
  background: rgba(124,92,252,0.06) !important;
}

/* ─────────────────────────────────────────
   14. NAV LINK HOVER — UNDERLINE SLIDE
───────────────────────────────────────── */

.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 0.32s var(--ease-out-expo);
}
.nav-links a:hover::after { width: 100%; }

/* ─────────────────────────────────────────
   15. FOOTER LINK HOVER
───────────────────────────────────────── */

.footer-links a {
  position: relative;
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s var(--ease-spring) !important;
}
.footer-links a:hover {
  color: var(--text) !important;
  transform: translateX(5px);
}

.footer-social {
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s, background 0.3s !important;
}
.footer-social:hover {
  transform: translateY(-4px) scale(1.12) !important;
  box-shadow: 0 8px 20px rgba(124,92,252,0.3) !important;
  background: rgba(124,92,252,0.2) !important;
}

/* ─────────────────────────────────────────
   16. SECTION BACKGROUND PARALLAX LAYERS
   Adds floating ambient glows behind sections
───────────────────────────────────────── */

.inner-section,
.inner-section-alt {
  position: relative;
}

/* Floating orbs behind alternating sections */
.xz-bg-orb-left,
.xz-bg-orb-right {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
}
.xz-bg-orb-left {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(124,92,252,0.09), transparent 70%);
  left: -100px; top: 50%;
  transform: translateY(-50%);
  animation: xz-orb1 18s ease-in-out infinite;
}
.xz-bg-orb-right {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(79,139,255,0.08), transparent 70%);
  right: -80px; top: 30%;
  animation: xz-orb2 22s ease-in-out infinite;
}

/* Make sure content inside is above orbs */
.inner-section > .container,
.inner-section-alt > .container { position: relative; z-index: 1; }

/* ─────────────────────────────────────────
   17. CTA BAND — PULSING GLOW
───────────────────────────────────────── */

.cta-band {
  animation: xz-borderTrace 5s ease-in-out infinite;
}

/* ─────────────────────────────────────────
   18. STATS BAND
───────────────────────────────────────── */

.stats-band-num {
  background: linear-gradient(90deg, #a78bff, #7bb8ff, #a78bff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: xz-statShimmer 5s linear infinite;
}

/* ─────────────────────────────────────────
   19. INDUSTRIES PAGE — CARD IMAGE
───────────────────────────────────────── */

.industry-card-img {
  transition: transform 0.6s var(--ease-out-expo), filter 0.4s !important;
}
.industry-card-full:hover .industry-card-img {
  transform: scale(1.07) !important;
  filter: brightness(1.08) saturate(1.1) !important;
}

/* ─────────────────────────────────────────
   20. SCROLL PROGRESS BAR
   Thin neon line at very top of page
───────────────────────────────────────── */

#xz-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--pink));
  z-index: 9998;
  transition: width 0.1s linear;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(124,92,252,0.6);
}

/* ─────────────────────────────────────────
   21. SECTION ANCHOR HIGHLIGHT FLASH
   When user clicks an internal # link
───────────────────────────────────────── */

@keyframes xz-anchorFlash {
  0%   { background: rgba(124,92,252,0.12); }
  100% { background: transparent; }
}
:target {
  animation: xz-anchorFlash 1.2s ease forwards;
}

/* ─────────────────────────────────────────
   22. MOBILE — REDUCED MOTION
───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  /* Slightly faster on mobile for snappier feel */
  :root {
    --dur-med:  0.45s;
    --dur-slow: 0.65s;
  }
  .xz-bg-orb-left,
  .xz-bg-orb-right { display: none; }

  /* Reduce translateY distance on mobile */
  .xz-up   { transform: translateY(24px); }
  .xz-left { transform: translateX(-24px); }
  .xz-right{ transform: translateX(24px); }
}

/* ─────────────────────────────────────────
   23. MOBILE — ENHANCED ANIMATION SUPPORT
   Ensures scroll animations fire correctly
   on small viewports and touch devices.
───────────────────────────────────────── */

@media (max-width: 768px) {
  /* Override stagger delays for faster reveal on mobile */
  .xz-d1 { transition-delay: 0.04s !important; }
  .xz-d2 { transition-delay: 0.08s !important; }
  .xz-d3 { transition-delay: 0.12s !important; }
  .xz-d4 { transition-delay: 0.16s !important; }
  .xz-d5 { transition-delay: 0.20s !important; }
  .xz-d6 { transition-delay: 0.24s !important; }
  .xz-d7 { transition-delay: 0.28s !important; }
  .xz-d8 { transition-delay: 0.32s !important; }

  /* Hero animations must run on mobile */
  .page-hero .breadcrumb,
  .page-hero-eyebrow,
  .page-hero-h1,
  .page-hero-sub,
  .page-hero-btns {
    animation-play-state: running !important;
  }

  /* Tech tag animation runs on mobile */
  .tech-tag,
  .tech-badge {
    animation: xz-tagPop 0.4s var(--ease-spring) forwards;
  }

  /* Ensure page-entry fade-in works on mobile */
  html {
    transition: opacity 0.35s ease;
  }

  /* Horizontal slide animations: keep distance smaller and ensure
     overflow doesn't clip the starting position */
  .xz-left  { transform: translateX(-20px) !important; }
  .xz-right { transform: translateX(20px)  !important; }
  .xz-left.xz-visible,
  .xz-right.xz-visible { transform: translateX(0) !important; }

  /* Process timeline steps animate on mobile */
  .pt-step {
    transition: opacity 0.4s ease, transform 0.4s ease !important;
  }

  /* Counter animation plays on mobile */
  .stat-num,
  .stats-band-num,
  .trust-val {
    animation-play-state: running !important;
  }
}

/* Touch devices — activate scan line on touch, not hover */
@media (hover: none) and (pointer: coarse) {
  .xz-img-wrap:active .xz-scan {
    animation: xz-scan-run 1.1s ease-out forwards;
  }
  /* Show card orb on touch */
  .xz-card:active .xz-orb { opacity: 1; }
}