/* Progressive enhancement only: no content depends on a motion class to appear. */

/* Retire the old perpetual image zoom. Never resize or crop a photograph here. */
.job-hero .hero-image img {
  animation: none;
}

.lp-motion-progress {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  height: 2px;
  background: var(--lp-motion-accent, #b59b83);
  transform-origin: left center;
  pointer-events: none;
  user-select: none;
}

/* Individual translation preserves the figure's existing layout and transform.
   Scroll travel is capped at 5px; the finite arrival adds at most another 3px. */
.lp-motion-photo {
  translate: 0 var(--lp-photo-offset, 0px);
}

.lp-motion-line {
  position: relative;
}

/* A short accent sits on the existing rule; the original rule stays intact. */
.lp-motion-line::after {
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: clamp(28px, 5vw, 64px);
  height: 1px;
  background: currentColor;
  content: "";
  transform-origin: left center;
  pointer-events: none;
}

.lp-motion-line.lp-motion-arrived::after {
  animation: lp-motion-line-settle 680ms cubic-bezier(.22, .61, .36, 1) 1;
}

@keyframes lp-motion-line-settle {
  from { transform: scaleX(.55); }
  to { transform: scaleX(1); }
}

/* Optional .lp-motion-link is available for additional text links on salon LPs.
   Existing button backgrounds and the original permanent link borders are kept. */
.lp-motion-link,
.job-hero .text-link,
.job-details .map-link,
.environment .environment-copy > a,
.job-cta .instagram-link,
.job-footer > a:last-child,
body.salon-page .salon-meta a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 18% 1px;
  transition: background-size 360ms cubic-bezier(.22, .61, .36, 1);
  text-underline-offset: .25em;
}

.lp-motion-link:is(:hover, :focus-visible),
.job-hero .text-link:is(:hover, :focus-visible),
.job-details .map-link:is(:hover, :focus-visible),
.environment .environment-copy > a:is(:hover, :focus-visible),
.job-cta .instagram-link:is(:hover, :focus-visible),
.job-footer > a:last-child:is(:hover, :focus-visible),
body.salon-page .salon-meta a:is(:hover, :focus-visible) {
  background-size: 100% 1px;
}

.lp-motion-link b,
.job-hero .text-link b,
.job-details .map-link b,
.environment .environment-copy > a b,
.job-cta .instagram-link b {
  display: inline-block;
  transition: transform 360ms cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .lp-motion-link:hover b,
  .job-hero .text-link:hover b,
  .job-details .map-link:hover b,
  .environment .environment-copy > a:hover b,
  .job-cta .instagram-link:hover b {
    transform: translateX(3px);
  }
}

.lp-motion-page :is(a, button, input, select, textarea, summary):focus-visible,
.lp-motion-link:focus-visible,
.job-header a:focus-visible,
.job-hero a:focus-visible,
.job-details a:focus-visible,
.job-cta a:focus-visible,
.job-footer a:focus-visible,
.environment a:focus-visible,
body.salon-page :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  /* Scope the blanket reset to opted-in LPs, including author-supplied motion.
     Native media-query rules take effect immediately, even before the JS event. */
  .lp-motion-page,
  .lp-motion-page *,
  .lp-motion-page *::before,
  .lp-motion-page *::after,
  body.salon-page,
  body.salon-page *,
  body.salon-page *::before,
  body.salon-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .lp-motion-photo {
    translate: none !important;
  }

  .lp-motion-progress {
    transform: none !important;
  }

  .lp-motion-link b,
  .job-header nav a::after,
  .job-hero .text-link b,
  .job-details .map-link b,
  .environment .environment-copy > a b,
  .job-cta .instagram-link b,
  .job-hero .button:is(:hover, :focus-visible),
  .job-details .details-apply:is(:hover, :focus-visible),
  .job-cta .button:is(:hover, :focus-visible) {
    transform: none !important;
    transition: none !important;
  }

  .lp-motion-line.lp-motion-arrived::after {
    animation: none !important;
  }
}

@media print {
  .lp-motion-progress {
    position: absolute;
    transform: none;
  }

  .lp-motion-photo {
    translate: none;
  }
}