/* Evox ERP's mark, name and opening motion (docs/brand.md; markup: templates/_brand.html). Colours come from
   tokens.css (--evx-*): on a light surface the mark is the dominant colour and teal; on the dominant colour
   (.evx-on-dark, .evx-tile) and in the dark theme it is white and teal. Never blue. */
@import url("../vendor/fonts/montserrat.css");

:root{
  --evx-font:"Montserrat","Segoe UI",system-ui,sans-serif;
  --evx-e1:var(--evx-2); --evx-e2:var(--evx-3); --evx-d1:var(--evx-2); --evx-d2:#0f8a8c;
  --evx-u1:#0f8c86; --evx-u2:#2dd4bf; --evx-px:#14b8a6; --evx-px2:#5ee0cf;
  --evx-name:var(--evx-2); --evx-name-soft:#6b7c79; --evx-tag:var(--evx-2);
}
/* the reversed mark: in the dark theme, and on the dominant colour in both themes */
body[data-theme="dark"],.evx-on-dark,.evx-tile{
  --evx-e1:#ffffff; --evx-e2:#ddf1ee; --evx-d1:#ffffff; --evx-d2:#9febe0;
  --evx-u1:#14b8a6; --evx-u2:#2dd4bf; --evx-px:#2dd4bf; --evx-px2:#99f6e4;
  --evx-name:#f4faf9; --evx-name-soft:#a3b9b5; --evx-tag:rgba(234,244,242,.78);
}
/* the monogram: one quiet grey (the «system unavailable» page, the print footer) */
.evx-mono{--evx-e1:var(--muted); --evx-e2:var(--muted); --evx-d1:var(--muted); --evx-d2:var(--line-strong);
  --evx-u1:var(--line-strong); --evx-u2:var(--muted); --evx-px:var(--muted); --evx-px2:var(--line-strong)}

.evx-mark{display:block;width:100%;height:auto;overflow:visible}
.evx-s-e1{stop-color:var(--evx-e1)} .evx-s-e2{stop-color:var(--evx-e2)}
.evx-s-d1{stop-color:var(--evx-d1)} .evx-s-d2{stop-color:var(--evx-d2)}
.evx-s-u1{stop-color:var(--evx-u1)} .evx-s-u2{stop-color:var(--evx-u2)}
.evx-px{fill:var(--evx-px)} .evx-px2{fill:var(--evx-px2)}
.evx-etop,.evx-ebot,.evx-up,.evx-down,.evx-px{transform-box:fill-box}
.evx-etop,.evx-ebot{transform-origin:left center}
.evx-px{transform-origin:center}

/* the app icon */
.evx-tile{display:grid;place-items:center;aspect-ratio:1;border-radius:24%;flex:none;
  background:linear-gradient(150deg,var(--evx-3),var(--evx-1));box-shadow:0 6px 16px rgba(5,59,56,.22)}
.evx-tile .evx-mark{width:72%}

/* the name: EVOX in one colour, ERP lighter */
.evx-name{font-family:var(--evx-font);direction:ltr;unicode-bidi:isolate;white-space:nowrap;letter-spacing:.01em}
.evx-name b{font-weight:800;color:var(--evx-name)}
.evx-name b i{font-style:normal;display:inline-block}
.evx-name > span{font-weight:400;color:var(--evx-name-soft)}
.evx-tagline{font-family:var(--evx-font);font-weight:500;letter-spacing:.18em;color:var(--evx-tag);direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* ---------------------------------------------------------------- «البناء»: the e drawn, the x crossing, light
   passing, the pixels released, the name rising (2.2 s) */
.evx-build .evx-etop{animation:evx-grow-x .5s cubic-bezier(.2,.8,.2,1) both}
.evx-build .evx-ebot{animation:evx-grow-x .55s cubic-bezier(.2,.8,.2,1) .12s both}
.evx-build .evx-down{animation:evx-slide-down .6s cubic-bezier(.2,.9,.25,1) .35s both}
.evx-build .evx-up{animation:evx-slide-up .6s cubic-bezier(.2,.9,.25,1) .45s both}
.evx-build .evx-shine{animation:evx-shine .75s ease-in-out .9s both}
.evx-build .evx-px{animation:evx-px-fly .5s cubic-bezier(.2,.9,.3,1.25) calc(.95s + var(--i) * .07s) both}
.evx-build .evx-name b i{animation:evx-rise .5s cubic-bezier(.2,.8,.2,1) calc(1.1s + var(--i) * .07s) both}
.evx-build .evx-name > span{animation:evx-erp-in .6s ease-out 1.4s both}
.evx-build .evx-tagline{animation:evx-tag-in .55s ease-out 1.65s both}
/* «اللمعة»: one pass of light (after signing in to a company) */
.evx-shine-once .evx-shine{animation:evx-shine .8s ease-in-out .25s both}

@keyframes evx-grow-x{from{transform:scaleX(0);opacity:0}35%{opacity:1}to{transform:none;opacity:1}}
@keyframes evx-slide-down{from{transform:translate(-46px,-56px);opacity:0}to{transform:none;opacity:1}}
@keyframes evx-slide-up{from{transform:translate(46px,56px);opacity:0}to{transform:none;opacity:1}}
@keyframes evx-shine{from{transform:translateX(0)}to{transform:translateX(760px)}}
@keyframes evx-px-fly{0%{transform:translate(-80px,70px) scale(.15);opacity:0}70%{opacity:1;transform:translate(3px,-3px) scale(1.1)}to{transform:none;opacity:1}}
@keyframes evx-rise{from{transform:translateY(.45em);opacity:0;filter:blur(5px)}to{transform:none;opacity:1;filter:none}}
@keyframes evx-erp-in{from{opacity:0;letter-spacing:.55em}to{opacity:1;letter-spacing:.01em}}
@keyframes evx-tag-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- the opening of the files screen (once per
   session; static/js/evox_brand.js): the sign-in pages' brand side over the page, then the mark flies to the sidebar */
.evx-splash{position:fixed;inset:0;z-index:2147483646;display:grid;place-items:center;cursor:pointer}
.evx-splash[hidden]{display:none}
.evx-splash-bg{position:absolute;inset:0;
  background:radial-gradient(75% 55% at 85% 10%,rgba(20,184,166,.3),transparent 62%),radial-gradient(70% 70% at 8% 92%,rgba(45,212,191,.14),transparent 60%),
             linear-gradient(160deg,var(--evx-3),var(--evx-2) 45%,var(--evx-1))}
.evx-splash-lockup{position:relative;display:grid;justify-items:center;gap:8px;width:min(46vw,440px)}
.evx-splash-mark{width:62%}
.evx-splash .evx-name{font-size:clamp(30px,4.6vw,60px);line-height:1;display:flex;gap:.22em}
.evx-splash .evx-tagline{font-size:clamp(11px,1.3vw,18px)}

@media (prefers-reduced-motion:reduce){
  .evx-build *,.evx-shine-once *,.evx-splash *{animation:none!important;transition:none!important}
}