/* ============================================================
   LIQUID CODE STUDIOS — STANDARD STAPLES (all tiers, always)
   Built from Sammy's snippet. Classes and behaviour kept as-is:
     .progress-wrap / .show      circle r=21, dasharray 132
     .whatsapp-float / .show     lifts above the ring on scroll
     .lcs-badge + .lcs-logo      fixed bottom-left
     .scrollcue                  hero scroll prompt
   Their vars mapped to this project's palette:
     --line -> --hair   --cream -> --bone   --accent stays --accent
   ============================================================ */

:root{
  --line:var(--hair,rgba(255,255,255,.12));
  --cream:var(--bone,#ECE7DF);
  --lcs-blue:#3b82f6;
  --lcs-ease:cubic-bezier(.2,.7,.25,1);
}

/* ---------- hero scroll prompt ----------
   Mouse + dot, matching the .scroll-mouse / .scroll-dot structure
   from sammywambugu.com. Swap the numbers when the real CSS lands.
   ---------------------------------------------------------------- */
.scrollcue{
  position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--mono,inherit);font-size:11px;letter-spacing:.18em;
  color:var(--steel,#7E8D97);
  opacity:0;transition:opacity .8s var(--lcs-ease) .95s,color .3s var(--lcs-ease);
}
.hero.is-in .scrollcue{opacity:1;}
.scrollcue:hover{color:var(--cream);}

.scroll-mouse{
  position:relative;
  width:26px;height:42px;
  border:1.5px solid var(--line);
  border-radius:14px;
  transition:border-color .3s var(--lcs-ease);
}
.scrollcue:hover .scroll-mouse{border-color:var(--cream);}

.scroll-dot{
  position:absolute;left:50%;top:8px;
  width:3px;height:7px;border-radius:100px;
  background:var(--accent);
  transform:translateX(-50%);
  animation:scrollDot 1.9s var(--lcs-ease) infinite;
}
@keyframes scrollDot{
  0%   {opacity:0; transform:translate(-50%,0);}
  25%  {opacity:1;}
  75%  {opacity:1;}
  100% {opacity:0; transform:translate(-50%,17px);}
}
.scrollcue.is-gone{opacity:0!important;pointer-events:none;}

/* ---------- BACK TO TOP progress ring ---------- */
.progress-wrap{
  position:fixed; right:28px; bottom:28px; z-index:150;
  width:46px; height:46px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(20,20,18,.85); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s, transform .3s, visibility .3s, border-color .3s;
}
.progress-wrap.show{opacity:1; visibility:visible; transform:translateY(0);}
.progress-wrap:hover{border-color:rgba(255,255,255,.32);}
.progress-wrap svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
.progress-wrap .track{fill:none; stroke:var(--line); stroke-width:2;}
.progress-wrap .progress{
  fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:132; stroke-dashoffset:132;
  transition:stroke-dashoffset .1s linear;
}
.progress-wrap i{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--cream); pointer-events:none;
}

/* ---------- FLOATING WHATSAPP ---------- */
.whatsapp-float{
  position:fixed; bottom:20px; right:28px;
  background-color:#25d366; color:#ffffff;
  width:50px; height:50px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  font-size:26px; box-shadow:0 4px 15px rgba(0,0,0,.25);
  z-index:9999; transition:all .3s ease;
}
.whatsapp-float.show{bottom:92px;}
.whatsapp-float:hover{background-color:#128c7e; transform:translateY(-5px);}

/* ---------- LCS SIGNATURE BADGE ---------- */
.lcs-badge{
  position:fixed; left:20px; bottom:20px; z-index:150;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono,inherit); font-size:11px; color:#C7C2B8;
  background:rgba(20,20,18,.85); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12); border-radius:100px;
  padding:6px 14px 6px 6px;
  cursor:pointer; transition:box-shadow .3s, border-color .3s, transform .3s;
}
.lcs-badge:hover{
  box-shadow:0 0 26px rgba(59,130,246,.4);
  border-color:rgba(59,130,246,.5);
  transform:translateY(-2px);
}
.lcs-logo{
  width:22px; height:22px; border-radius:50%; background:var(--lcs-blue);
  color:#ffffff; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; letter-spacing:0; flex:none;
}

@media (max-width:640px){
  .lcs-badge span{display:none;}
  .lcs-badge{padding:6px;}
  .whatsapp-float{right:20px;}
  .progress-wrap{right:20px; bottom:20px;}
  .whatsapp-float.show{bottom:84px;}
}
@media (prefers-reduced-motion:reduce){
  .scrollcue__rail::after{animation:none;}
  .scrollcue{opacity:1!important;}
}