/* Build 54 — real React/Motion experience layer
   Visible but disciplined: premium SaaS motion without sacrificing readability or performance. */
:root{
  --v54-cyan:#39dcff;
  --v54-blue:#168cff;
  --v54-violet:#7c72ff;
}

.alza-scroll-progress-v54{
  position:fixed;z-index:10000;top:0;left:0;right:0;height:3px;pointer-events:none;
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--v54-cyan),var(--v54-blue) 56%,var(--v54-violet));
  box-shadow:0 0 18px rgba(57,220,255,.72),0 0 36px rgba(22,140,255,.32);
}
.experience-grid-v54{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.075;
  background-image:linear-gradient(rgba(104,194,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(104,194,255,.24) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%);
}
.experience-ambient-v54{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.experience-orb-v54{position:absolute;border-radius:999px;filter:blur(34px);will-change:transform,opacity}
.experience-orb-one-v54{width:440px;height:440px;right:-130px;top:12vh;background:radial-gradient(circle,rgba(32,174,255,.36),rgba(31,106,255,.13) 48%,transparent 72%)}
.experience-orb-two-v54{width:380px;height:380px;left:-140px;top:55vh;background:radial-gradient(circle,rgba(90,75,255,.28),rgba(21,184,255,.09) 52%,transparent 73%)}
/* Keep the ambient layer behind the actual site without placing it behind the body canvas. */
.site-header,#main,.site-footer{position:relative;z-index:1}
.site-header{z-index:900}
.whatsapp-chat{position:fixed;z-index:950}


/* stronger hero presence */
.hero-copy h1 span,.page-hero h1 strong{
  background-size:220% 100%!important;
  animation:v54-gradient-flow 7s ease-in-out infinite;
}
@keyframes v54-gradient-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-copy .eyebrow,.page-hero .kicker{position:relative;overflow:hidden}
.hero-copy .eyebrow::after,.page-hero .kicker::after{
  content:"";position:absolute;inset:-50% auto -50% -40%;width:32%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:v54-label-sweep 6.5s ease-in-out infinite;
}
@keyframes v54-label-sweep{0%,68%{left:-45%;opacity:0}73%{opacity:1}88%{left:120%;opacity:.8}100%{left:120%;opacity:0}}

/* true interactive spotlight / tilt */
.motion-surface-v54{
  transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform 220ms cubic-bezier(.22,1,.36,1),border-color 220ms ease,box-shadow 220ms ease;
}
.motion-surface-v54::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;
  opacity:1!important;
  background:radial-gradient(480px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(69,208,255,.15),rgba(35,120,255,.055) 30%,transparent 58%)!important;
  transition:opacity .22s ease!important;
}
@media(hover:hover) and (pointer:fine){
  .motion-surface-v54:hover{border-color:rgba(82,205,255,.50)!important;box-shadow:0 25px 70px rgba(0,8,28,.36),0 0 0 1px rgba(62,184,255,.09) inset,0 0 42px rgba(26,142,255,.08)!important}
}

/* primary CTA: animated border + sheen + magnetic offset */
.btn:not(.btn-ghost):not(.btn-secondary){
  position:relative;overflow:hidden;isolation:isolate;
  transform:translate(var(--mag-x,0px),var(--mag-y,0px));
  transition:transform 150ms ease,box-shadow 220ms ease,filter 220ms ease!important;
}
.btn:not(.btn-ghost):not(.btn-secondary)::before{
  content:"";position:absolute;inset:-2px;z-index:-2;border-radius:inherit;
  background:conic-gradient(from 180deg at 50% 50%,#2de0ff,#168cff,#7c72ff,#2de0ff);
  animation:v54-border-spin 7s linear infinite;opacity:.8;
}
.btn:not(.btn-ghost):not(.btn-secondary)::after{
  content:"";position:absolute;top:-80%;bottom:-80%;left:-32%;width:24%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);
  animation:v54-button-sheen 4.8s ease-in-out infinite;
}
@keyframes v54-border-spin{to{transform:rotate(360deg)}}
@keyframes v54-button-sheen{0%,62%{left:-35%;opacity:0}68%{opacity:1}82%{left:125%;opacity:.75}100%{left:125%;opacity:0}}
@media(hover:hover) and (pointer:fine){.btn:not(.btn-ghost):not(.btn-secondary):hover{filter:brightness(1.09);box-shadow:0 16px 42px rgba(4,137,255,.30),0 0 24px rgba(63,220,255,.12)!important}}

/* visible premium section separators */
.section::before{
  content:"";position:absolute;left:50%;top:0;width:min(1180px,86vw);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(53,190,255,.15) 24%,rgba(73,169,255,.26) 50%,rgba(53,190,255,.15) 76%,transparent);
}
.section:nth-of-type(3n)::after{
  content:"";position:absolute;right:-120px;top:22%;width:340px;height:340px;border-radius:50%;pointer-events:none;filter:blur(38px);opacity:.08;
  background:radial-gradient(circle,#209dff,transparent 68%);
}

/* better active workload tabs */
.app-tab{position:relative;overflow:hidden}
.app-tab[aria-selected="true"]::after,.app-tab.active::after{
  content:"";position:absolute;left:12%;right:12%;bottom:3px;height:2px;border-radius:999px;background:#72e7ff;box-shadow:0 0 14px rgba(84,219,255,.75);
}

/* CTA glass gets an intentional light bloom */
.cta-band{overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-90px;top:-130px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(44,178,255,.19),transparent 70%);pointer-events:none}

/* Route/page content transitions remain GPU friendly. */
#main{will-change:opacity,transform}

@media(max-width:900px){
  .experience-orb-v54{filter:blur(44px);opacity:.55}
  .experience-orb-one-v54{width:280px;height:280px;right:-130px}
  .experience-orb-two-v54{width:250px;height:250px;left:-120px}
  .motion-surface-v54{transform:none!important}
  .btn:not(.btn-ghost):not(.btn-secondary){transform:none!important}
  .section:nth-of-type(3n)::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .alza-scroll-progress-v54,.experience-ambient-v54{display:none!important}
  .hero-copy h1 span,.page-hero h1 strong,.hero-copy .eyebrow::after,.page-hero .kicker::after,.btn::before,.btn::after{animation:none!important}
  .motion-surface-v54,.btn{transform:none!important;transition:none!important}
}

/* Build 68 — visible desktop Motion without changing desktop layout/backgrounds. */
@media (min-width:901px) {
  .experience-grid-v54 {
    opacity: .09;
  }
  .experience-ambient-v54 {
    display: block !important;
  }
  .experience-orb-one-v54 { opacity:.31; }
  .experience-orb-two-v54 { opacity:.24; }
  .motion-surface-v54::after {
    background: radial-gradient(520px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(76,215,255,.22),rgba(42,122,255,.075) 30%,transparent 61%)!important;
  }
  .motion-surface-v54:hover {
    border-color: rgba(88,210,255,.52)!important;
    box-shadow: 0 25px 70px rgba(0,8,28,.36),0 0 0 1px rgba(62,184,255,.11) inset,0 0 46px rgba(26,142,255,.11)!important;
  }
  /* Keep key UI animation visible on desktop even when Windows/Chrome reports
     reduced motion; mobile/tablet still honors the preference. */
  .alza-scroll-progress-v54 { display:block!important; }
  .hero-copy .eyebrow::after,.page-hero .kicker::after { animation:v54-label-sweep 6.5s ease-in-out infinite!important; }
  .btn:not(.btn-ghost):not(.btn-secondary)::before { animation:v54-border-spin 7s linear infinite!important; }
  .btn:not(.btn-ghost):not(.btn-secondary)::after { animation:v54-button-sheen 4.8s ease-in-out infinite!important; }
}