/* ===== Connex — motion & polish ===== */
html{scroll-behavior:smooth;}
body{background:transparent !important;}

/* smooth transitions baseline */
a,button{transition:color .2s ease,background-color .2s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,opacity .2s ease,filter .25s ease;}

/* ---------- living gradient field ---------- */
body::before,body::after{content:"";position:fixed;z-index:-2;pointer-events:none;}
body::before{
  inset:-25%;
  background:
    radial-gradient(42% 46% at 14% 88%, rgba(236,161,132,.85) 0%, transparent 60%),
    radial-gradient(46% 50% at 92% 64%, rgba(185,221,245,.85) 0%, transparent 62%),
    radial-gradient(40% 44% at 50% 16%, rgba(251,246,242,.95) 0%, transparent 64%),
    linear-gradient(130deg,#f1ddd1 0%,#f3ebf0 48%,#d6eafb 100%);
}
body::after{
  inset:-30%;mix-blend-mode:soft-light;opacity:.75;filter:blur(28px);
  background:
    radial-gradient(30% 34% at 30% 30%, #f6ab8c 0%, transparent 60%),
    radial-gradient(34% 38% at 74% 76%, #9ec9f2 0%, transparent 62%);
}

/* ---------- flowing brand surfaces ---------- */
.bg-brand{background-size:180% 180%;}

/* CTA buttons: lift + sheen */
a.bg-brand{position:relative;overflow:hidden;}
a.bg-brand:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 30px -10px rgba(224,122,95,.6);filter:saturate(1.06);}
a.bg-brand:active{transform:translateY(0) scale(.99);}
a.bg-brand::after{content:"";position:absolute;top:0;left:-160%;width:65%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);}

/* nav links: gradient underline grow */
header a[href]:not([class*="bg-brand"]){position:relative;}
header a[href]:not([class*="bg-brand"])::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;
  background:linear-gradient(90deg,#ec8a6f,#8db6ea);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1);}
header a[href]:not([class*="bg-brand"]):hover::after{transform:scaleX(1);}
header a[href]:not([class*="bg-brand"]):hover{color:var(--color-ink);}

/* logo gentle spin-tilt on hover */
header a[href="/"] svg{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
header a[href="/"]:hover svg{transform:rotate(-8deg) scale(1.08);}

/* list rows: nudge + frosted hover */
[class*="divide-y"]>*{transition:background-color .22s ease,transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;}
[class*="divide-y"]>*:hover{transform:translateX(4px);box-shadow:-8px 0 0 -6px var(--color-accent);}

/* bordered cards: soft shadow + hover lift */
[class*="rounded-lg"][class*="border-line"]{transition:box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 10px 30px -22px rgba(53,42,77,.5);}
[class*="rounded-lg"][class*="border-line"]:hover{box-shadow:0 18px 44px -24px rgba(53,42,77,.55);}

/* soft-accent chips pulse-in */
.bg-accent-soft{transition:transform .2s ease;}

/* search / inputs focus glow */
input:focus,input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(216,106,79,.22);}

/* cursor glow */
#cx-glow{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s ease;mix-blend-mode:soft-light;
  background:radial-gradient(circle,rgba(255,196,160,.55) 0%,rgba(150,196,240,.25) 40%,transparent 70%);
  will-change:transform;}

/* scroll reveal (only when motion allowed + IO present) */
html.cx-anim :is(section:not(:has([class*="divide-y"])), [class*="divide-y"]>*){
  opacity:0;transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;}
html.cx-anim :is(section:not(:has([class*="divide-y"])), [class*="divide-y"]>*).cx-in{opacity:1;transform:none;}
html.cx-safe :is(section:not(:has([class*="divide-y"])), [class*="divide-y"]>*){opacity:1 !important;transform:none !important;}

/* top bars entrance */
@keyframes cxDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes cxSheen{0%,55%{left:-160%}100%{left:160%}}
@keyframes cxBrandFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes cxDrift{0%{transform:translate3d(-2%,-1%,0) scale(1.03) rotate(0deg)}100%{transform:translate3d(2%,2%,0) scale(1.09) rotate(3deg)}}
@keyframes cxFloat{0%{transform:translate3d(3%,2%,0) scale(1.05)}100%{transform:translate3d(-3%,-2%,0) scale(1.13)}}

@media (prefers-reduced-motion: no-preference){
  body::before{animation:cxDrift 32s ease-in-out infinite alternate;}
  body::after{animation:cxFloat 40s ease-in-out infinite alternate;}
  .bg-brand{animation:cxBrandFlow 9s ease infinite;}
  a.bg-brand::after{animation:cxSheen 5s ease-in-out 1.2s infinite;}
  body>.bg-brand:first-child{animation:cxDown .5s both;}
  header{animation:cxDown .6s .06s both;}
}