/* ==========================================================================
   Logitech Consultants — scroll motion layer.
   Styles that GSAP animate: word masks, progress rail, parallax hints.
   Every rule is inert without JavaScript or with reduced motion enabled.
   ========================================================================== */

/* Word mask used by the hero headline reveal. */
.lc-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Give descenders room inside the mask so they are not clipped mid-tween. */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.lc-word-inner {
  display: inline-block;
  will-change: transform;
}

/* Scroll progress rail, pinned to the top of the viewport. */
.lc-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 2147483000;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #f3ffc9 0%, #e7b9a0 60%, #ee4a34 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lc-motion .lc-scroll-progress {
  opacity: 1;
}

/* Parallax targets need their own compositing layer to stay smooth. */
.lc-motion [data-lc-parallax] {
  will-change: transform;
}

/* Headline wipes are driven by clip-path; keep the box stable. */
.lc-motion .lc-wipe {
  will-change: clip-path;
}

/* Section transformation: the capability cards tilt in 3D as the section
   passes. Perspective lives on the track so each card reads as a plane. */
.lc-motion .lc-cards {
  perspective: 1200px;
}

.lc-motion .lc-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* A soft brand glow behind transformed picture panels. */
.lc-motion .lc-glow-panel {
  position: relative;
}

.lc-motion .lc-glow-panel::after {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: inherit;
  background: radial-gradient(circle at 70% 30%, rgba(238, 74, 52, 0.22), rgba(238, 74, 52, 0) 62%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .lc-scroll-progress {
    display: none;
  }

  .lc-word,
  .lc-word-inner {
    display: inline;
    overflow: visible;
  }

  .lc-motion .lc-card {
    transform: none !important;
  }
}