/* JL Brake Service motion system
   Lightweight, progressive, and disabled for visitors who prefer reduced motion. */
:root {
  --jl-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --jl-motion-fast: 240ms;
  --jl-motion-base: 700ms;
  --jl-motion-gold: #f3cf16;
}

/* Content is visible by default. The animation runs only after JavaScript
   confirms an element has entered the viewport, so limited in-app browsers
   can never leave article content hidden. */
[data-jl-motion].is-jl-visible {
  animation: jl-reveal-up var(--jl-motion-base) var(--jl-motion-ease) both;
  animation-delay: var(--jl-motion-delay, 0ms);
}

[data-jl-motion="left"].is-jl-visible {
  animation-name: jl-reveal-left;
}

[data-jl-motion="right"].is-jl-visible {
  animation-name: jl-reveal-right;
}

[data-jl-motion="scale"].is-jl-visible {
  animation-name: jl-reveal-scale;
}

@keyframes jl-reveal-up {
  from { opacity: 0; filter: saturate(0.88); transform: translate3d(0, 26px, 0) scale(0.988); }
  to { opacity: 1; filter: none; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes jl-reveal-left {
  from { opacity: 0; filter: saturate(0.88); transform: translate3d(-30px, 0, 0); }
  to { opacity: 1; filter: none; transform: translate3d(0, 0, 0); }
}

@keyframes jl-reveal-right {
  from { opacity: 0; filter: saturate(0.88); transform: translate3d(30px, 0, 0); }
  to { opacity: 1; filter: none; transform: translate3d(0, 0, 0); }
}

@keyframes jl-reveal-scale {
  from { opacity: 0; filter: saturate(0.88); transform: translate3d(0, 12px, 0) scale(0.96); }
  to { opacity: 1; filter: none; transform: translate3d(0, 0, 0) scale(1); }
}

.jl-motion-card {
  transform-origin: 50% 70%;
}

.jl-motion-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform var(--jl-motion-fast) var(--jl-motion-ease),
    border-color var(--jl-motion-fast) ease,
    box-shadow var(--jl-motion-fast) ease,
    filter var(--jl-motion-fast) ease !important;
}

.jl-motion-button::after {
  position: absolute;
  inset: -60% auto -60% -45%;
  z-index: -1;
  width: 34%;
  content: "";
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 28%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.06) 72%,
    transparent 100%
  );
  pointer-events: none;
  transform: skewX(-20deg);
  transition: left 620ms var(--jl-motion-ease);
}

.jl-motion-button:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 90ms !important;
}

@media (hover: hover) and (pointer: fine) {
  .jl-motion-card:hover {
    z-index: 1;
    transform: translate3d(0, -6px, 0) scale(1.008);
    border-color: color-mix(in srgb, var(--jl-motion-gold) 65%, transparent) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(243, 207, 22, 0.16),
      0 0 30px rgba(243, 207, 22, 0.08);
    transition:
      transform 280ms var(--jl-motion-ease),
      border-color 280ms ease,
      box-shadow 280ms ease;
  }

  .jl-motion-button:hover {
    transform: translateY(-2px) scale(1.012);
    filter: brightness(1.06);
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.3),
      0 0 22px rgba(243, 207, 22, 0.16);
  }

  .jl-motion-button:hover::after {
    left: 122%;
  }
}

@media (max-width: 700px) {
  [data-jl-motion].is-jl-visible {
    animation-duration: 580ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-jl-motion].is-jl-visible {
    animation: none !important;
  }

  .jl-motion-card,
  .jl-motion-button,
  .jl-motion-button::after {
    transform: none !important;
    transition: none !important;
  }
}