/* ComputersBank visual effects: home hero + site footer.
   Loaded after styles.css. Plain CSS, no JavaScript, works with the site's Content-Security-Policy. */

/* ---------- shared ---------- */
.hx-grad{background:linear-gradient(90deg,#38bdf8,#2dd4bf);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hx-btn{background:linear-gradient(135deg,#0369a1,#0284c7);box-shadow:0 8px 24px -8px rgba(2,132,199,.7);transition:transform .2s,box-shadow .2s,filter .2s}
.hx-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(14,165,233,.85);filter:brightness(1.08)}
.hx-badge{background:rgba(30,41,59,.6);border:1px solid rgba(148,163,184,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- hero (floating mesh) ---------- */
.hx-hero{background:linear-gradient(135deg,#0a1120 0%,#0f172a 45%,#0c2340 100%)}
.hx-hero .hx-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;animation:hx-float 16s ease-in-out infinite alternate}
.hx-hero .hx-b1{width:min(520px,70vw);height:min(520px,70vw);right:-6%;top:-18%;background:#0284c7}
.hx-hero .hx-b2{width:min(420px,60vw);height:min(420px,60vw);left:-8%;bottom:-25%;background:#0d9488;animation-duration:20s;animation-delay:-6s}
.hx-hero .hx-b3{width:min(300px,50vw);height:min(300px,50vw);left:38%;top:30%;background:#4f46e5;opacity:.28;animation-duration:24s;animation-delay:-11s}
.hx-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#0ea5e9,#2dd4bf,transparent);opacity:.8}
/* inner pages: same look, calm (no drifting) */
.hx-hero.hx-calm .hx-blob{animation:none}
.hx-hero.hx-calm .hx-b1{opacity:.45}
.hx-hero.hx-calm .hx-b2{opacity:.4}
@keyframes hx-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-40px,30px,0) scale(1.12)}}

.hx-tile{display:block;padding:16px;border-radius:14px;background:rgba(30,41,59,.55);border:1px solid rgba(148,163,184,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
.hx-tile:hover,.hx-tile:focus-visible{transform:translateY(-4px);border-color:rgba(56,189,248,.65);background:rgba(30,41,59,.8);box-shadow:0 16px 34px -14px rgba(14,165,233,.55)}
.hx-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:#fff;margin-bottom:10px;background:linear-gradient(135deg,#0284c7,#0d9488);box-shadow:0 6px 14px -6px rgba(13,148,136,.8)}
.hx-ico svg{width:20px;height:20px}
.hx-t{display:block;font-size:14px;font-weight:600;color:#fff}
.hx-s{display:block;font-size:12px;color:#94a3b8;margin-top:2px}
@keyframes hx-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hx-tiles .hx-tile{animation:hx-rise .6s cubic-bezier(.2,.7,.2,1) both}
.hx-tiles .hx-tile:nth-child(1){animation-delay:.05s}
.hx-tiles .hx-tile:nth-child(2){animation-delay:.12s}
.hx-tiles .hx-tile:nth-child(3){animation-delay:.19s}
.hx-tiles .hx-tile:nth-child(4){animation-delay:.26s}
.hx-tiles .hx-tile:nth-child(5){animation-delay:.33s}
.hx-tiles .hx-tile:nth-child(6){animation-delay:.40s}

/* ---------- footer (same mesh look, static) ---------- */
.hx-footer{position:relative;overflow:hidden;background:linear-gradient(135deg,#060b16 0%,#0a1120 50%,#0a1c33 100%);border-style:solid;border-width:2px 0 0;border-color:transparent;border-image:linear-gradient(90deg,transparent,#0ea5e9,#2dd4bf,transparent) 1}
.hx-footer::before,.hx-footer::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.hx-footer::before{width:min(480px,70vw);height:min(480px,70vw);right:-8%;top:-35%;background:#0284c7;opacity:.26}
.hx-footer::after{width:min(420px,60vw);height:min(420px,60vw);left:-8%;bottom:-45%;background:#0d9488;opacity:.2}
.hx-footer>*{position:relative;z-index:1}
.hx-footer nav>p::after{content:"";display:block;width:28px;height:2px;margin-top:8px;border-radius:2px;background:linear-gradient(90deg,#0ea5e9,#2dd4bf)}
.hx-footer nav li a{display:inline-block;transition:transform .2s,color .2s}
.hx-footer nav li a:hover,.hx-footer nav li a:focus-visible{transform:translateX(3px)}
.hx-foot-bottom{border-color:rgba(148,163,184,.2)}

/* ---------- logo light sweep (header + footer) ---------- */
/* A copy of the logo shape, filled with a moving highlight band, is laid exactly over the logo. */
.hx-logo{position:relative;display:flex;width:fit-content}
.hx-logo::after{content:"";position:absolute;inset:0;pointer-events:none;background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center;-webkit-mask-size:100% 100%;mask-size:100% 100%;animation:hx-sweep 6s ease-in-out infinite}
.hx-logo-c::after{background-image:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.78) 50%,transparent 62%);-webkit-mask-image:url(logo-horizontal-color.svg);mask-image:url(logo-horizontal-color.svg)}
.hx-logo-r::after{background-image:linear-gradient(110deg,transparent 38%,rgba(125,211,252,.85) 50%,transparent 62%);-webkit-mask-image:url(logo-horizontal-reversed.svg);mask-image:url(logo-horizontal-reversed.svg);animation-delay:-3s}
@keyframes hx-sweep{0%,55%{background-position:100% 0}100%{background-position:0 0}}

@media (prefers-reduced-motion:reduce){
  .hx-tiles .hx-tile,.hx-hero .hx-blob,.hx-hero .animate-pulse,.hx-logo::after{animation:none!important}
  .hx-tile,.hx-btn,.hx-footer nav li a{transition:none}
  .hx-tile:hover,.hx-btn:hover,.hx-footer nav li a:hover{transform:none}
}