/* Light artistic touches (office + website): faint triangles, circles, squares and waves in the brand colours behind
   the pages, a soft shine on buttons. Very low opacity, no effect on reading, off in dark themes / reduced motion. */

/* ---------- office ---------- */
body:not([data-theme=night]):not([data-theme$='-dark']) .office .office-main{
  background-image:url(decor/triangles.svg),url(decor/circles.svg),url(decor/wave.svg);
  background-repeat:no-repeat;background-attachment:fixed,fixed,fixed;
  background-position:left -40px top 40px,right 260px bottom -30px,left bottom;
  background-size:520px auto,460px auto,100% 140px}
[dir=rtl] .office .office-main{background-position:left -40px top 40px,right 300px bottom -30px,left bottom}
.office .office-hero{position:relative;isolation:isolate}
.office .office-hero::before{content:'';position:absolute;inset:-14px -10px auto auto;width:420px;height:160px;z-index:-1;pointer-events:none;
  background:url(decor/hero.svg) no-repeat right top/contain;opacity:.9}
[dir=rtl] .office .office-hero::before{inset:-14px auto auto -10px;transform:scaleX(-1)}

/* cards: a faint corner shape on hover */
.office .office-dashboard-cards>a:not(#om-x){position:relative;overflow:hidden;isolation:isolate}
.office .office-dashboard-cards>a:not(#om-x)::after{content:'';position:absolute;inset-inline-end:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;
  background:currentColor;opacity:.035;z-index:-1;transition:transform .35s ease,opacity .35s ease;pointer-events:none}
.office .office-dashboard-cards>a:not(#om-x):hover::after{transform:scale(1.35);opacity:.06}

/* buttons: a soft shine sweeping across on hover (filled buttons only) */
.office :is(a,button).office-button:not(.secondary):not(.danger):not([data-layout-start]):not(#om-x){position:relative;overflow:hidden;isolation:isolate}
.office :is(a,button).office-button:not(.secondary):not(.danger):not([data-layout-start]):not(#om-x)::after{content:'';position:absolute;top:0;bottom:0;width:45%;
  inset-inline-start:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);pointer-events:none;z-index:1}
.office :is(a,button).office-button:not(.secondary):not(.danger):not([data-layout-start]):not(#om-x):hover::after{animation:decor-shine .75s ease forwards}
@keyframes decor-shine{to{inset-inline-start:120%}}

/* ---------- website ---------- */
.sm .sm-section-heading{position:relative;isolation:isolate}
.sm .sm-section-heading::before{content:'';position:absolute;inset-block-start:-18px;inset-inline-end:-6px;width:150px;height:70px;z-index:-1;pointer-events:none;
  background:url(decor/hero.svg) no-repeat center/contain;opacity:.7}
.sm .sm-footer{background-image:url(decor/wave.svg);background-repeat:no-repeat;background-position:top center;background-size:100% 70px}
.sm a.sm-button:not(.sm-call):not(.sm-whatsapp),.sm button.sm-button:not(.sm-call):not(.sm-whatsapp){position:relative;overflow:hidden}
.sm a.sm-button:not(.sm-call):not(.sm-whatsapp)::after,.sm button.sm-button:not(.sm-call):not(.sm-whatsapp)::after{content:'';position:absolute;top:0;bottom:0;width:45%;
  inset-inline-start:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-18deg);pointer-events:none}
.sm a.sm-button:not(.sm-call):not(.sm-whatsapp):hover::after,.sm button.sm-button:not(.sm-call):not(.sm-whatsapp):hover::after{animation:decor-shine .75s ease forwards}

@media(max-width:760px){
  body:not([data-theme=night]):not([data-theme$='-dark']) .office .office-main{background-size:300px auto,260px auto,100% 90px;background-attachment:scroll,scroll,scroll}
  .office .office-hero::before{width:240px;height:100px}
  .sm .sm-section-heading::before{width:100px;height:50px}
}
@media(prefers-reduced-motion:reduce){
  .office .office-button::after,.sm .sm-button::after{animation:none!important}
  .office .office-dashboard-cards>a::after{transition:none!important}
}