/* polish.css inlined */
/* ════════════════════════════════════════════════════════════════════════
   CHIPPEX · POLISH LAYER
   Shared art-direction enhancements for the lighter pages (hub, guard,
   portfolio cases). Purely additive: the reveal hidden-state is applied by
   polish.js, so with JS disabled all content stays visible.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- Reveal on scroll (hidden state added by JS via .cx-reveal) ---- */
.cx-reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; }
.cx-reveal.cx-in{ opacity:1; transform:none; }
.cx-d1{ transition-delay:.06s } .cx-d2{ transition-delay:.12s } .cx-d3{ transition-delay:.18s }
.cx-d4{ transition-delay:.24s } .cx-d5{ transition-delay:.30s } .cx-d6{ transition-delay:.36s }

/* ---- Page entrance ---- */
@keyframes cxFadeIn{ from{ opacity:0 } to{ opacity:1 } }
.cx-anim main{ animation:cxFadeIn .7s ease both; }

/* ---- Typography finesse ---- */
h1,h2{ text-wrap:balance; }
p,li{ text-wrap:pretty; }

/* ---- Premium gold scrollbar (matches Lab) ---- */
.cx-anim ::-webkit-scrollbar{ width:10px; height:10px; }
.cx-anim ::-webkit-scrollbar-track{ background:rgba(0,0,0,.18); }
.cx-anim ::-webkit-scrollbar-thumb{ background:rgba(183,146,86,.45); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
.cx-anim ::-webkit-scrollbar-thumb:hover{ background:rgba(183,146,86,.7); background-clip:padding-box; }

/* ---- Focus-visible: tasteful gold ring ---- */
.cx-anim a:focus-visible,
.cx-anim button:focus-visible,
.cx-anim input:focus-visible,
.cx-anim textarea:focus-visible,
.cx-anim select:focus-visible{
  outline:2px solid rgba(216,185,126,.7);
  outline-offset:3px;
  border-radius:6px;
}

/* ---- Button: magnetic-ready + shine sweep ---- */
.cx-anim .btn{ position:relative; overflow:hidden; will-change:transform; }
.cx-anim .btn::after{
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .7s cubic-bezier(.22,1,.36,1); pointer-events:none;
}
.cx-anim .btn:hover::after{ transform:translateX(130%); }

/* ---- Cards: lift + gold border + cursor-follow glow ---- */
.cx-anim .card,
.cx-anim .tier,
.cx-anim .route-card,
.cx-anim .constellation a,
.cx-anim .tst-card,
.cx-anim .feature,
.cx-anim .metric{
  position:relative;
  transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .5s, box-shadow .5s, background .5s;
}
.cx-tilt{ transform:translateY(-4px); }
.cx-glow::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(216,185,126,.16), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
.cx-glow:hover::before{ opacity:1; }
.cx-anim .card > *,
.cx-anim .tier > *,
.cx-anim .route-card > *,
.cx-anim .constellation a > *,
.cx-anim .feature > *{ position:relative; z-index:1; }

/* ---- Link underline grow (nav + footer) ---- */
.cx-anim .nav a,
.cx-anim .ghead-nav a,
.cx-anim .footer-card a,
.cx-anim .foot a{ position:relative; }
.cx-anim .ghead-nav a::after,
.cx-anim .footer-card a::after,
.cx-anim .foot a::after{
  content:''; position:absolute; left:0; bottom:-3px; height:1px; width:0;
  background:currentColor; opacity:.7; transition:width .4s cubic-bezier(.22,1,.36,1);
}
.cx-anim .nav a::after{ content:none; }
.cx-anim .ghead-nav a:hover::after,
.cx-anim .footer-card a:hover::after,
.cx-anim .foot a:hover::after{ width:100%; }

/* ---- Eyebrow line draw on reveal ---- */
.cx-anim .eyebrow::before{ transition:width .8s cubic-bezier(.22,1,.36,1) .1s; }

/* ---- Animated arrows inside buttons/links ---- */
.cx-anim .btn,
.cx-anim .route-card,
.cx-anim .constellation a{ }
.cx-anim .btn svg,
.cx-anim a.btn span + span{ transition:transform .35s cubic-bezier(.22,1,.36,1); }

/* ---- Reduced motion: respect user preference ---- */
@media (prefers-reduced-motion: reduce){
  .cx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .cx-anim main{ animation:none; }
  .cx-anim .btn::after{ display:none; }
}