/* =====================================================================
   WhiteCoder — site enhancement layer
   Additive polish ONLY. Loaded after style.css. Deliberately avoids
   touching opacity / transform on GSAP-controlled reveal elements
   (.scroll-soft, .project-card, .review-card, .text-reveal, etc.) so it
   never fights the existing animation orchestration.
   ===================================================================== */

/* ---- text selection ---- */
::selection{background:#0b0b0d;color:#fff}
::-moz-selection{background:#0b0b0d;color:#fff}

/* ---- premium thin scrollbar (desktop) ---- */
@media (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:rgba(11,11,13,.32) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{
    background:rgba(11,11,13,.26);border-radius:999px;
    border:3px solid transparent;background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{background:rgba(11,11,13,.42);background-clip:content-box}
}

/* ---- accessible focus rings (quality floor) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:6px;
}
.site-header a:focus-visible,
.idea-strip a:focus-visible{outline-color:#fff}

/* ---- smoother inline links / nav colour easing (no transform) ---- */
a{transition:color .35s cubic-bezier(.22,1,.36,1)}
.footer-grid nav a,
.footer-bottom a{position:relative;transition:opacity .35s cubic-bezier(.22,1,.36,1),color .35s cubic-bezier(.22,1,.36,1)}
.footer-grid nav a:hover,
.footer-bottom a:hover{opacity:.62}

/* ---- thicker, animated nav underline refinement ---- */
.main-nav a:after{height:1.5px;bottom:-7px}

/* ---- contact chips: gentle lift on hover (chips are not GSAP-reveal transformed at rest) ---- */
@media (pointer:fine){
  .chip{will-change:transform}
}

/* ---- media smoothing: avoid jagged scaling during parallax/zoom ---- */
.project-card__media img,
.service-card img,
.blog-card img,
.hero-image img,
.image-rounded img{
  image-rendering:auto;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* ---- card media hover micro-zoom (only where GSAP isn't already scaling at rest) ---- */
@media (pointer:fine){
  .service-card{overflow:hidden}
  .service-card img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
  .service-card:hover img{transform:scale(1.05)}
}

/* ---- pill / button hover sheen (background + shadow only, transform stays with GSAP) ---- */
.pill,.btn{position:relative;overflow:hidden;isolation:isolate}
.pill::after,.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.pill:hover::after,.btn:hover::after{transform:translateX(120%)}

/* ---- loader: silkier fade-out hand-off ---- */
.site-loader{transition:opacity .7s cubic-bezier(.22,1,.36,1),visibility .7s}

/* ---- whatsapp + client-hub: already animated; add focus polish ---- */
.whatsapp-float:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ---- respect reduced motion for the additions above ---- */
@media (prefers-reduced-motion:reduce){
  a,.service-card img,.pill::after,.btn::after,.site-loader{transition:none!important}
  .service-card:hover img{transform:none}
  .pill:hover::after,.btn:hover::after{transform:translateX(-120%)}
}