/* ---- JL Services animated logo variants ---- */
.jl-logo{display:inline-block;background:#0e3a2b;border-radius:18px;padding:6%;
  width:100%;max-width:520px;position:relative;overflow:hidden}
.jl-logo-svg{width:100%;height:auto;display:block}

/* Option A — Draw & Shine: strokes draw themselves, then a gold shimmer sweeps */
.logo-draw .lg-s{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  animation:lgdraw 1.6s ease forwards}
.logo-draw #lg-plate .lg-s{animation-delay:.15s}
.logo-draw #lg-napkin .lg-s,.logo-draw #lg-fork .lg-s{animation-delay:.5s}
.logo-draw #lg-knife .lg-s,.logo-draw #lg-spoon .lg-s{animation-delay:.7s}
.logo-draw #lg-smallplate .lg-s,.logo-draw #lg-glass .lg-s{animation-delay:.9s}
.logo-draw #lg-banner .lg-s{animation-delay:1.15s}
.logo-draw #lg-text{opacity:0;animation:lgfade .9s ease 1.5s forwards}
@keyframes lgdraw{to{stroke-dashoffset:0}}
@keyframes lgfade{to{opacity:1}}
.logo-draw::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(233,185,73,.35) 50%,transparent 60%);
  transform:translateX(-120%);animation:lgshine 1.4s ease 2.2s forwards}
.logo-draw:hover::after{animation:lgshine 1.2s ease forwards}
@keyframes lgshine{to{transform:translateX(120%)}}

/* Option B — Table is Set: pieces fly/orbit in and settle like setting the table */
.logo-set .lg-part{transform-box:fill-box;transform-origin:center;
  animation:lgsettle .9s cubic-bezier(.2,1.4,.4,1) both}
.logo-set #lg-ring{animation:lgring 1.1s ease both}
.logo-set #lg-plate{animation-delay:.15s}
.logo-set #lg-napkin{animation-delay:.35s}
.logo-set #lg-fork{animation-delay:.45s}
.logo-set #lg-knife{animation-delay:.55s}
.logo-set #lg-spoon{animation-delay:.65s}
.logo-set #lg-smallplate{animation-delay:.78s}
.logo-set #lg-glass{animation-delay:.9s}
.logo-set #lg-text{opacity:0;animation:lgfade .8s ease 1.15s forwards}
@keyframes lgsettle{from{opacity:0;transform:translateY(-60px) rotate(-30deg) scale(.5)}
  to{opacity:1;transform:none}}
@keyframes lgring{from{opacity:0;transform:scale(.6);transform-origin:center;transform-box:fill-box}
  to{opacity:1;transform:none}}
.logo-set:hover #lg-glass,.logo-set:hover #lg-smallplate{animation:lgclink .6s ease}
@keyframes lgclink{30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}

/* Option C — 3D Dive: parallax tilt toward the cursor, glare, click dives through the plate */
.logo-tilt{transition:transform .12s ease-out;transform-style:preserve-3d;cursor:pointer}
.logo-tilt .glare{position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(233,185,73,.28),transparent 55%)}
.logo-tilt:hover .glare{opacity:1}
.logo-tilt.diving{transition:transform 1.1s cubic-bezier(.6,0,.9,.4),opacity 1.1s ease;
  transform:scale(9)!important;opacity:0}

@media (prefers-reduced-motion: reduce){
  .logo-draw .lg-s,.logo-set .lg-part,.logo-set #lg-ring{animation:none;stroke-dashoffset:0}
  .logo-draw #lg-text,.logo-set #lg-text{opacity:1;animation:none}
  .logo-draw::after{display:none}
}