/* Wexo — shared polish + motion layer. Loaded last on every page, purely additive:
   scroll-reveal, refined micro-interactions, and typographic finish. Degrades safely
   (no JS = everything visible; reduced-motion = no animation). */

::selection{ background:rgba(255,255,255,.18); color:#fff; }
*{ -webkit-tap-highlight-color:transparent; }

/* quiet, thin scrollbar */
html{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); background-clip:content-box; }

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid rgba(255,255,255,.6); outline-offset:3px; border-radius:8px;
}

/* typographic finish: balanced headlines, tidy paragraphs */
h1, h2, .h2{ text-wrap:balance; }
.lead, .sub, p{ text-wrap:pretty; }

/* subtle top-edge highlight on content cards for depth */
.card, .tcard{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }

/* animated nav underline */
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1.5px; background:currentColor; opacity:.85; transition:right .3s cubic-bezier(.2,.7,.3,1); }
.nav-links a:hover::after{ right:0; }

/* micro-interactions */
.btn{ transition:transform .16s cubic-bezier(.2,.7,.3,1), background .2s, border-color .2s, box-shadow .25s, opacity .2s; }
.btn:active{ transform:scale(.985); }
.btn-primary:hover{ box-shadow:0 12px 36px rgba(255,255,255,.2); }
.three > .card, .tcard{ transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .25s, background .25s, box-shadow .3s; }
.three > .card:hover, .tcard:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 22px 60px rgba(0,0,0,.5); }

/* scroll reveal — active only when JS marks the page ready and motion is welcome */
@media (prefers-reduced-motion:no-preference){
  html.reveal-ready .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); will-change:opacity, transform; }
  html.reveal-ready .reveal.in{ opacity:1; transform:none; }
}