/* SOLA's motion layer. Content is always visible without the optional script. */
.hero-line { display: block; overflow: clip; padding: .08em .06em .13em 0; margin: -.08em -.06em -.13em 0; }
.hero-line > span { display: block; transform-origin: 0 100%; }
.photo-window { overflow: hidden; border-radius: 2px; }
.private-search-image { overflow: hidden; }
.hero-outgoing { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center 53%; pointer-events: none; }
.scroll-progress { position: fixed; z-index: 40; inset: 0 0 auto; height: 2px; background: var(--olive); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.motion-enabled .card-image { transition: transform .5s cubic-bezier(.2,.75,.25,1), box-shadow .5s; transform-origin: center; }
.motion-enabled .card-image.is-tilted { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px); box-shadow: 0 22px 32px -20px #303b2f50; }
.motion-enabled .card-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 30%), #fff3, transparent 65%); opacity: 0; transition: opacity .4s; }
.motion-enabled .card-image.is-tilted::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .text-link svg, .button svg, .hero-property-arrow svg, .card-title > svg, .journal-arrow svg { transition: transform .4s cubic-bezier(.2,.75,.25,1); }
  .text-link:hover svg, .button:hover svg, .hero-property:hover svg, .card-title:hover > svg, .journal-image:hover .journal-arrow svg { transform: translate(3px, -3px); }
  .hero-property-arrow { transition: transform .5s, background .5s; }
  .hero-property:hover .hero-property-arrow { transform: rotate(45deg); background: #ffffff1f; }
  .hero-property:hover .hero-property-arrow svg { transform: rotate(-45deg); }
  .service .service-index { transition: transform .45s, color .45s; }
  .service:hover .service-index { transform: translateY(-5px) rotate(-7deg); color: var(--ink); }
  .hero-controls button, .testimonial-controls button { transition: background .25s, transform .3s; }
  .hero-controls button:hover, .testimonial-controls button:hover { transform: scale(1.12); }
  .hero-controls button:active, .testimonial-controls button:active { transform: scale(.92); }
}
@media (max-width: 680px) { .hero-outgoing { object-position: 37% center; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .motion-enabled .card-image { transform: none !important; }
  .motion-enabled .card-image::after { display: none; }
}