/* =========================================================================
   KS Industrial Solutions — animated logos
     header : horizontal white-on-navy lockup  (#logo)
     footer : stacked bevel lockup             (img swapped from ksis_logo_v)
   Each: reveal on view + a light gleam masked to the exact logo shape,
   with the static SVG as the fallback. Mask vars injected via functions.php.
   ========================================================================= */

/* ---- Shared wrapper + reveal ---- */
.ksis-anim {
  position: relative;
  display: inline-block;
  line-height: 0;
  opacity: 0;
}
.ksis-anim.ksis-in {
  animation: ksisReveal 0.72s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ksis-anim-img {
  display: block;
  width: auto;
  max-width: none;
}

/* ---- Flash guard: hide the raster logo until the SVG is swapped in ----
   The original PNG lockups render at a different size/aspect than the SVG
   (header ~50x280 raster vs 48x225 SVG), so showing the raster first caused a
   "big logo, then a smaller reloaded one" pop. When JS is on (Salient's `js`
   class is set render-blocking before first paint), keep the raster hidden
   until animated-logo.js swaps in the SVG and tags it .ksis-anim-img — the SVG
   then fades in at its final size. `visibility` (not `display`) reserves the
   box so the header/footer never reflow. JS-off stays `no-js` → raster shows. */
.js #logo img:not(.ksis-anim-img),
.js img[src*="ksis_logo_v"]:not(.ksis-anim-img) {
  visibility: hidden;
}

/* ---- Shared gleam layer (masked to the logo silhouette) ---- */
.ksis-gleam {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ksis-gleam::before {
  content: "";
  position: absolute;
  top: -25%;
  left: 0;
  width: 42%;
  height: 150%;
  transform: translateX(-240%) skewX(-16deg);
  opacity: 0;
}
.ksis-anim.ksis-in .ksis-gleam::before {
  animation: ksisSweep 3.4s cubic-bezier(0.4, 0, 0.3, 1) 1.4s infinite;
}

@keyframes ksisReveal {
  0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
  100% { opacity: 1; transform: none; }
}
@keyframes ksisSweep {
  0%   { transform: translateX(-240%) skewX(-16deg); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(330%)  skewX(-16deg); opacity: 0; }
}

/* =========================================================================
   HEADER — horizontal logo on the navy header
   White logo, so the gleam is a bright core flanked by faint navy tint
   (matching the header) so the shimmer reads across the white lettering
   while the logo stays crisp white at rest.
   ========================================================================= */
#header-outer #top #logo .ksis-anim-img {
  height: 64px !important;
}
#header-outer.small-nav #top #logo .ksis-anim-img {
  height: 52px !important;
  transition: height 0.3s ease;
}
@media only screen and (max-width: 999px) {
  #header-outer #top #logo .ksis-anim-img,
  #header-outer.small-nav #top #logo .ksis-anim-img {
    height: 48px !important;
  }
}
#logo .ksis-gleam {
  -webkit-mask: var(--ksis-mask-horiz) center / contain no-repeat;
          mask: var(--ksis-mask-horiz) center / contain no-repeat;
}
#logo .ksis-gleam::before {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(3, 43, 78, 0.35) 44%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(3, 43, 78, 0.35) 56%,
    transparent 70%
  );
}

/* =========================================================================
   FOOTER — stacked bevel logo on the light footer
   Dark logo on light ground, so a plain bright-white gleam reads directly.
   ========================================================================= */
.ksis-footer-logo .ksis-anim-img {
  height: 160px !important;
}
@media only screen and (max-width: 690px) {
  .ksis-footer-logo .ksis-anim-img {
    height: 128px !important;
  }
}
.ksis-footer-logo .ksis-gleam {
  -webkit-mask: var(--ksis-mask-stacked) center / contain no-repeat;
          mask: var(--ksis-mask-stacked) center / contain no-repeat;
}
.ksis-footer-logo .ksis-gleam::before {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0) 74%,
    transparent 100%
  );
}

/* ---- Accessibility: reduced-motion → static logo, no reveal, no gleam ---- */
@media (prefers-reduced-motion: reduce) {
  .ksis-anim,
  .ksis-anim.ksis-in {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .ksis-anim.ksis-in .ksis-gleam::before {
    animation: none !important;
    opacity: 0 !important;
  }
}