/* ============================================================
   LLS GROUP - MOTION / INTERACTION LAYER
   A refinement pass over the approved static build. It changes no
   geometry, order, crop, type or CTA: every animated element ends
   at exactly the position styles-lls.css already gives it.

   Hidden states are scoped under html.lls-motion, which is set by a
   head script only when JS runs - so without JS the page renders
   fully visible rather than blank.
   ============================================================ */
:root{
  --t-hover:180ms;                       /* hover / focus states     */
  --t-reveal:560ms;                      /* content reveals          */
  --t-media:780ms;                       /* editorial image / video  */
  --e-out:cubic-bezier(.22,.61,.36,1);   /* ease-out, no overshoot   */
}

/* ---------- reveal primitive ---------- */
.lls-motion [data-rv]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity var(--t-reveal) var(--e-out),
             transform var(--t-reveal) var(--e-out);
  transition-delay:var(--rv-d,0ms);
  will-change:opacity,transform;
}
.lls-motion [data-rv].is-in{opacity:1;transform:none}
.lls-motion [data-rv].is-in{will-change:auto}

/* media blocks travel a shorter distance over a longer beat */
.lls-motion [data-rv="media"]{
  transform:translate3d(0,16px,0);
  transition-duration:var(--t-media);
}

/* ---------- hero opening sequence ---------- */
.lls-motion .l-hero-media video,
.lls-motion .l-hero-media img{
  transform:scale(1.035);
  transition:transform 900ms var(--e-out);
}
.lls-motion .l-hero.is-ready .l-hero-media video,
.lls-motion .l-hero.is-ready .l-hero-media img{transform:scale(1)}

/* ---------- quote now: controlled hover / focus ---------- */
.l-cta{transition:background var(--t-hover) var(--e-out)}
.l-cta svg{transition:transform var(--t-hover) var(--e-out)}
.l-cta:hover svg,.l-cta:focus-visible svg{transform:translateX(3px)}
.l-ghost{transition:opacity var(--t-hover) var(--e-out)}
.l-ghost svg{transition:transform var(--t-hover) var(--e-out)}
.l-ghost:hover svg,.l-ghost:focus-visible svg{transform:translateX(3px)}
.l-bar-quote{transition:background var(--t-hover) var(--e-out)}
.l-bar-quote:hover{background:#556218}
.l-tel,.l-wa{transition:opacity var(--t-hover) var(--e-out)}
.l-tel:hover,.l-wa:hover{opacity:.78}
.l-nav a{transition:color var(--t-hover) var(--e-out)}

/* ---------- photography: desktop hover, slow ease ---------- */
@media (hover:hover) and (min-width:901px){
  .l-quote-figs figure{overflow:hidden}
  .l-quote-figs img{
    transition:transform 420ms var(--e-out)}
  .l-quote-figs figure:hover img{transform:scale(1.02)}
}

/* ---------- before / after: tags settle after the panels ---------- */
.lls-motion .l-ba-tag{
  opacity:0;transform:translate3d(0,-6px,0);
  transition:opacity var(--t-reveal) var(--e-out),
             transform var(--t-reveal) var(--e-out);
  transition-delay:340ms;
}
.lls-motion .l-ba-stage.is-in .l-ba-tag{opacity:1;transform:none}

/* ---------- map: the supplied graphic settles once ---------- */
.lls-motion .l-map-fig img{opacity:0;transform:translate3d(0,10px,0);
  transition:opacity 640ms var(--e-out),transform 640ms var(--e-out)}
.lls-motion .l-map-fig.is-in img{opacity:1;transform:none}

/* ---------- jack: play control only, nothing round it ---------- */
.l-jack-play svg{transition:transform var(--t-hover) var(--e-out),
                            opacity var(--t-hover) var(--e-out)}
@media (hover:hover){
  .l-jack-fig:hover .l-jack-play svg{transform:scale(1.04)}
}

/* ---------- mobile action bar: arrives once, then holds ---------- */
@media (max-width:900px){
  .lls-motion .l-bar{
    transform:translate3d(0,110%,0);
    transition:transform 520ms var(--e-out);
  }
  .lls-motion .l-bar.is-in{transform:none}
  /* stands down while the page's own CTA section is on screen */
  .lls-motion .l-bar.is-in.is-cta-suppressed{transform:translate3d(0,110%,0)}
}

/* ============================================================
   REDUCED MOTION - everything resolves to its final state
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .lls-motion [data-rv],
  .lls-motion [data-rv].is-in,
  .lls-motion .l-ba-tag,
  .lls-motion .l-map-fig img{
    opacity:1!important;transform:none!important;transition:none!important}
  .lls-motion .l-hero-media video,
  .lls-motion .l-hero-media img{transform:none!important;transition:none!important}
  .lls-motion .l-bar{transform:none!important;transition:none!important}
  .l-cta,.l-cta svg,.l-ghost,.l-ghost svg,.l-tel,.l-wa,.l-nav a,
  .l-quote-figs img,.l-jack-play svg{
    transition:none!important}
    .l-quote-figs figure:hover img{transform:none!important}
  [data-px]{transform:none!important}
}