/* Light, consistent motion for Select Lawnscapes.
   One easing curve, short fade-ups, gentle hover lifts. Everything is switched off for
   visitors who ask for reduced motion. Scroll-reveal classes are only added by
   site-motion.js, so content stays visible if JS doesn't run. */
:root{--sl-ease:cubic-bezier(.22,.61,.36,1);--sl-green:#6f9107;--sl-green-dark:#3f5108;--sl-lift:0 18px 36px -18px rgba(63,81,8,.35)}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* Hero entrance: the first section of each page rises in on load, item by item.
     Starts at .01 opacity (not 0) so the browser still counts it as painted for page-speed scores. */
  @keyframes sl-rise{from{opacity:.01;translate:0 22px}to{opacity:1;translate:none}}
  @keyframes sl-card-in{from{opacity:.01;translate:0 28px;scale:.985}to{opacity:1;translate:none;scale:1}}
  .e-parent:has(h1) .elementor-widget:not(.elementor-absolute):not(.elementor-invisible):not(.animated){animation:sl-rise .9s var(--sl-ease) var(--sl-d,0s) both}
  .e-parent:has(h1) .elementor-widget:nth-child(2){--sl-d:.08s}
  .e-parent:has(h1) .elementor-widget:nth-child(3){--sl-d:.16s}
  .e-parent:has(h1) .elementor-widget:nth-child(4){--sl-d:.24s}
  .e-parent:has(h1) .elementor-widget:nth-child(n+5){--sl-d:.32s}
  .e-parent:has(h1) .e-con:not(:has(h1)):has(form){animation:sl-card-in 1s var(--sl-ease) .2s both}
  .e-parent:has(h1) .e-con:not(:has(h1)):has(form) .elementor-widget{animation:none!important}

  /* Scroll reveal (added by JS for content below the fold) */
  .sl-reveal{opacity:0;translate:0 18px;transition:opacity .8s var(--sl-ease),translate .8s var(--sl-ease),scale .8s var(--sl-ease);transition-delay:var(--sl-delay,0ms)}
  .sl-reveal.sl-photo{translate:none;scale:.97}
  .sl-reveal.sl-fade{translate:none}
  .sl-reveal.sl-in{opacity:1;translate:none;scale:1}

  /* Buttons: gentle lift (buttons that already use an Elementor hover animation keep theirs) */
  .elementor-button:not([class*="elementor-animation-"]){transition:translate .3s var(--sl-ease),box-shadow .3s var(--sl-ease),background .5s ease,color .25s ease}
  .elementor-button:not([class*="elementor-animation-"]):hover{translate:0 -2px;box-shadow:0 10px 22px -10px rgba(63,81,8,.55)}
  .elementor-button[class*="elementor-animation-"]{transition-timing-function:var(--sl-ease)}
  .elementor-button .elementor-button-icon svg{transition:translate .3s var(--sl-ease)}
  .elementor-button:hover .elementor-button-icon svg{translate:3px 0}

  /* Service and feature cards in grids: lift with a soft green-tinted shadow */
  .sl-card{transition:translate .45s var(--sl-ease),box-shadow .45s var(--sl-ease)}
  .sl-card:hover{translate:0 -6px;box-shadow:var(--sl-lift)}

  /* Project photos: slow, subtle zoom inside their frame */
  .sl-zoom{overflow:hidden;border-radius:var(--sl-radius,0)}
  .sl-zoom img{transition:scale 1.1s var(--sl-ease),filter .6s var(--sl-ease)}
  .sl-zoom:hover img,.sl-card:hover .sl-zoom img{scale:1.05;filter:saturate(1.08)}

  /* Icon boxes and process steps: icon floats up slightly on hover */
  .elementor-widget-icon-box .elementor-icon,.elementor-widget-icon-box .elementor-icon-box-icon img,.elementor-widget-icon-box .elementor-icon-box-icon svg{transition:translate .4s var(--sl-ease)}
  .elementor-widget-icon-box:hover .elementor-icon,.elementor-widget-icon-box:hover .elementor-icon-box-icon img,.elementor-widget-icon-box:hover .elementor-icon-box-icon svg{translate:0 -4px}

  /* Links in text, lists and menus: smooth color change */
  .elementor-icon-list-item a,.elementor-widget-text-editor a,.elementor-nav-menu a{transition:color .25s ease,opacity .25s ease}
}

@media (prefers-reduced-motion:reduce){
  .sl-reveal{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
}