/* ============================================================================
   Durane's Landscaping — Web Motion Package  ·  durane-motion.css
   Drop-in CSS for the site. Pairs with durane-motion.js.
   - Animates transform & opacity only (60fps, no layout thrash)
   - Honors prefers-reduced-motion (content stays fully visible & usable)
   - Square system, forest accent — matches the brand
   The brand tokens below are namespaced (--dl-*). If your theme already
   defines forest/sage, you can delete the :root block and remap.
   ========================================================================== */
:root{
  --dl-forest:#044710;
  --dl-darkgreen:#0D2618;
  --dl-ink:#232722;
  --dl-sage:#5F6F65;
  --dl-sage-tint:#EEF0EC;
  --dl-warm:#FAF8F2;
  /* shared organic easings */
  --dl-ease:cubic-bezier(.22,.61,.36,1);   /* calm ease-out */
  --dl-settle:cubic-bezier(.34,1.36,.64,1); /* gentle spring (the signature) */
}

/* --- 01/02/03 Reveal — rise + fade in on scroll/load ---------------------- */
.dl-reveal{transition:opacity .7s var(--dl-ease),transform .7s var(--dl-ease);transition-delay:var(--dl-delay,0ms)}
.dl-ready .dl-reveal{opacity:0;transform:translateY(18px)}
.dl-ready .dl-reveal.dl-in{opacity:1;transform:none}

/* --- The plot-mark settle (signature spring) ------------------------------ */
.dl-mark-a{transition:transform .7s var(--dl-settle),opacity .5s ease;transition-delay:var(--dl-delay,0ms)}
.dl-ready .dl-mark-a{opacity:0;transform:scale(.35) rotate(-14deg)}
.dl-ready .dl-mark-a.dl-in{opacity:1;transform:none}

/* --- The keyline draw ----------------------------------------------------- */
.dl-keyline-a{transform-origin:left;transition:transform .8s var(--dl-ease);transition-delay:var(--dl-delay,0ms)}
.dl-ready .dl-keyline-a{transform:scaleX(0)}
.dl-ready .dl-keyline-a.dl-in{transform:scaleX(1)}

/* --- 05 Button — forest fills from the bottom on hover -------------------- */
.dl-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--dl-forest);background:transparent;color:var(--dl-forest);font:700 12px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:13px 22px;cursor:pointer}
.dl-btn>span{position:relative;z-index:1;transition:color .4s ease}
.dl-btn::before{content:"";position:absolute;inset:0;background:var(--dl-forest);transform:translateY(101%);transition:transform .5s var(--dl-ease);z-index:0}
.dl-btn:hover::before,.dl-btn:focus-visible::before{transform:translateY(0)}
.dl-btn:hover>span,.dl-btn:focus-visible>span{color:#fff}
.dl-btn-solid{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--dl-forest);background:var(--dl-forest);color:#fff;font:700 12px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:13px 22px;cursor:pointer;transition:transform .35s var(--dl-ease),box-shadow .35s ease}
.dl-btn-solid:hover,.dl-btn-solid:focus-visible{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(4,71,16,.7)}

/* --- 06 Link — underline grows from the left ------------------------------ */
.dl-link{position:relative;color:var(--dl-ink);text-decoration:none}
.dl-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--dl-forest);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--dl-ease)}
.dl-link:hover::after,.dl-link:focus-visible::after{transform:scaleX(1)}

/* --- 04 Card — lift + keyline draw on hover ------------------------------- */
.dl-card{background:#fff;border:1px solid rgba(95,111,101,.28);padding:22px 22px 24px;transition:transform .45s var(--dl-ease),box-shadow .45s ease}
.dl-card:hover{transform:translateY(-7px);box-shadow:0 22px 44px -22px rgba(13,38,24,.45)}
.dl-cardline{height:2px;background:var(--dl-forest);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--dl-ease)}
.dl-card:hover .dl-cardline{transform:scaleX(1)}

/* --- 08 Accordion — smooth expand (grid-rows, no height jank) ------------- */
.dl-acc+.dl-acc{border-top:1px solid rgba(95,111,101,.3)}
.dl-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:transparent;border:0;cursor:pointer;padding:16px 2px;text-align:left;font:400 15px/1.3 "Iowan Old Style",Palatino,Georgia,serif;color:var(--dl-darkgreen)}
.dl-acc-chev{flex:none;width:8px;height:8px;border-right:2px solid var(--dl-forest);border-bottom:2px solid var(--dl-forest);transform:rotate(-45deg);transition:transform .4s var(--dl-ease)}
.dl-acc.dl-open .dl-acc-chev{transform:rotate(45deg)}
.dl-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--dl-ease)}
.dl-acc.dl-open .dl-acc-panel{grid-template-rows:1fr}
.dl-acc-panel>div{overflow:hidden}

/* --- 09 Sticky header — condense on scroll -------------------------------- */
.dl-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;background:#fff;padding:20px 22px;border-bottom:1px solid rgba(95,111,101,.25);transition:padding .35s ease,box-shadow .35s ease}
.dl-bar.dl-stuck{padding-top:11px;padding-bottom:11px;box-shadow:0 8px 22px -14px rgba(13,38,24,.55)}
.dl-wm{transition:transform .35s ease;transform-origin:left center}
.dl-bar.dl-stuck .dl-wm{transform:scale(.84)}

/* --- 10 Image curtain — forest panel wipes away + slow Ken Burns ---------- */
.dl-frame{position:relative;overflow:hidden}
.dl-photo{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 6s ease-out}
.dl-curtain{position:absolute;inset:0;background:var(--dl-forest);transform-origin:right;transition:transform .95s cubic-bezier(.76,0,.24,1)}
.dl-ready .dl-photo{transform:scale(1.14)}
.dl-ready .dl-frame.dl-in .dl-photo{transform:scale(1)}
.dl-ready .dl-curtain{transform:scaleX(1)}
.dl-ready .dl-frame.dl-in .dl-curtain{transform:scaleX(0)}

/* --- 11 Patio lay-in — pavers drop & settle on a diagonal ----------------- */
.dl-patio{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;background:rgba(95,111,101,.22);padding:4px}
.dl-paver{height:30px;transition:transform .55s var(--dl-settle),opacity .45s ease;transition-delay:var(--dl-delay,0ms)}
.dl-ready .dl-paver{opacity:0;transform:translateY(-20px) scale(.94)}
.dl-ready .dl-patio.dl-in .dl-paver{opacity:1;transform:none}

/* --- 12 Grass cut — tall grass mowed left-to-right ------------------------ */
.dl-grass{position:relative;display:flex;align-items:flex-end;gap:3px;height:118px;border-bottom:2px solid rgba(95,111,101,.5)}
.dl-blade{flex:1 1 0;transform-origin:bottom;background:var(--dl-forest);transition:transform .6s cubic-bezier(.45,.05,.3,1);transition-delay:var(--dl-delay,0ms)}
.dl-grass.dl-in .dl-blade{transform:scaleY(.32)}

/* --- Focus visibility (keep it on-brand) --------------------------------- */
.dl-btn:focus-visible,.dl-btn-solid:focus-visible,.dl-link:focus-visible,.dl-acc-head:focus-visible{outline:2px solid var(--dl-forest);outline-offset:3px}

/* --- Replay reset helper (used by buttons in the demo) -------------------- */
.dl-noanim,.dl-noanim *{transition:none !important;animation:none !important}

/* --- Reduced motion: everything visible, no movement --------------------- */
@media (prefers-reduced-motion: reduce){
  .dl-reveal,.dl-mark-a,.dl-keyline-a,.dl-paver,.dl-blade,.dl-photo,.dl-curtain,
  .dl-btn::before,.dl-btn-solid,.dl-link::after,.dl-card,.dl-cardline,.dl-acc-chev,
  .dl-acc-panel,.dl-bar,.dl-wm{transition-duration:.001ms !important}
  .dl-ready .dl-reveal,.dl-ready .dl-mark-a,.dl-ready .dl-paver{opacity:1 !important;transform:none !important}
  .dl-ready .dl-keyline-a{transform:scaleX(1) !important}
  .dl-ready .dl-curtain{transform:scaleX(0) !important}
  .dl-ready .dl-photo{transform:none !important}
}