/* anchored sections clear the fixed nav on hash-jump */
section[id]{scroll-margin-top:88px;}

/* Axis Services Group — award-tier effect layer (on-brand greyscale)
   Adapted from award-website-builder technique layer, re-themed to Axis brand.
   Custom CSS only — does not require the Tailwind rebuild. */

/* ---- Hairline frame overlay (print-margin feel, architectural) ---- */
.ax-frame {
  position: fixed;
  inset: 14px;
  border: 1px solid rgba(10, 10, 10, 0.10);
  z-index: 45;
  pointer-events: none;
  mix-blend-mode: multiply;
}
@media (max-width: 640px) { .ax-frame { inset: 8px; } }

/* ---- Reveal on scroll (gated behind .js so no-JS users still see content) ---- */
.js .reveal,
.js .line-draw { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
.js .reveal { transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.js .line-draw { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
.line-draw.in { transform: scaleX(1); }

/* ---- Subtle image parallax (full-bleed hero / band images) ---- */
.ax-px { transform: scale(1.12); will-change: transform; }

/* ---- Char reveal (the mission manifesto, slow + elegant) ---- */
.ax-chars .ax-word { display: inline-block; white-space: nowrap; }
.js .ax-chars .ax-char { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.ax-chars.in .ax-char { opacity: 1; transform: none; }

/* ---- Atmosphere: depth on dark sections (lighting, not fog) ---- */
.ax-atmos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ax-atmos__blob {
  position: absolute; border-radius: 50%; filter: blur(80px);
  background: radial-gradient(circle, rgba(180,180,182,0.10) 0%, rgba(180,180,182,0) 70%);
  animation: ax-drift 26s ease-in-out infinite alternate;
}
.ax-atmos__blob--a { width: 46vw; height: 46vw; top: -12%; left: -6%; }
.ax-atmos__blob--b { width: 40vw; height: 40vw; bottom: -14%; right: -8%; animation-delay: -13s; }
@keyframes ax-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(3%, 4%, 0); }
}
/* keep dark-section content above the atmosphere */
section.relative > .max-w-\[1500px\] { position: relative; z-index: 1; }

/* ---- Reduced motion: everything calm + visible ---- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .line-draw, .js .ax-chars .ax-char { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ax-px { transform: none !important; }
  .ax-atmos__blob { animation: none !important; }
}

/* builder logo carousel (used on Maintenance) */
.marquee{overflow:hidden;}
.marquee-track{display:flex;align-items:center;gap:4.5rem;width:max-content;animation:ax-scroll 32s linear infinite;}
.marquee-track.marquee-slow{animation-duration:60s;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes ax-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;gap:2.5rem;}}