/* Dejoiy Mail brand: logo placements and the 3D launch screen (#dm-splash). */
.brand-mark,.brand-mark[data-logo-applied]{display:block;flex-shrink:0;width:40px;height:40px}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:1200px){.brand-mark,.brand-mark[data-logo-applied]{width:34px;height:34px}}

#dm-splash{position:fixed;inset:0;z-index:10050;display:grid;place-content:center;justify-items:center;gap:18px;
  background:#fbf9fa;color:#5e5a60;font-family:inherit;transition:opacity .45s cubic-bezier(.2,.8,.2,1),visibility .45s}
html[data-brightness="dark"] #dm-splash{background:#141316;color:#b9b5bd}
#dm-splash.dm-out{opacity:0;visibility:hidden;pointer-events:none}
.dl-mark{width:112px;height:auto;overflow:visible}
.dl-box{fill:var(--dj-pop,#FF4FA3);transform-origin:75px 50px;animation:dlPop .7s cubic-bezier(.2,1.4,.4,1) both}
.dl-dot-1{fill:#fff;transform-box:fill-box;transform-origin:center;animation:dlDot .45s cubic-bezier(.2,1.6,.4,1) .45s both,dlWink 3.2s ease-in-out 1.6s infinite}
.dl-dot-2{fill:#121212;transform-box:fill-box;transform-origin:center;animation:dlDot .45s cubic-bezier(.2,1.6,.4,1) .58s both}
.dl-d{fill:#121212;clip-path:inset(0 100% 0 0);animation:dlWipe .5s cubic-bezier(.7,0,.2,1) .7s forwards}
/* two strokes chase around a halo of the mark while we wait */
.dl-rings{transform:translate(75px,50px) scale(1.18) translate(-75px,-50px)}
.dl-ring{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:18 82;opacity:0;animation:dlFade .4s ease .9s forwards,dlChase 1.6s linear .9s infinite}
.dl-ring-a{stroke:var(--dj-pop,#FF4FA3)}
.dl-ring-b{stroke:#121212;stroke-dashoffset:-50;animation:dlFade .4s ease .9s forwards,dlChaseB 1.6s linear .9s infinite}
html[data-brightness="dark"] .dl-ring-b{stroke:#F3F2EE}
.dl-text{font-size:14px;letter-spacing:.1px;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:dlFade .5s ease .5s both}
#dm-splash.dm-out .dl-mark{transform:scale(.86);transition:transform .45s cubic-bezier(.4,0,.2,1)}
@keyframes dlPop{from{transform:scale(.4) rotate(-14deg);opacity:0}}
@keyframes dlDot{from{transform:scale(0)}}
@keyframes dlWink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
@keyframes dlWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes dlFade{to{opacity:1}}
@keyframes dlChase{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes dlChaseB{from{stroke-dashoffset:-50}to{stroke-dashoffset:-150}}
@media(prefers-reduced-motion:reduce){
  #dm-splash *{animation:none!important}
  .dl-d{clip-path:none}.dl-ring{opacity:.35}
}

/* :Dejoiy Mail lockups */
.brand-lockup{display:block;height:34px;width:auto}
.login-lockup{display:block;height:48px;width:auto}
.brand-lockup.on-dark,.login-lockup.on-dark{display:none}
html[data-brightness="dark"] .brand-lockup.on-light,html[data-brightness="dark"] .login-lockup.on-light{display:none}
html[data-brightness="dark"] .brand-lockup.on-dark,html[data-brightness="dark"] .login-lockup.on-dark{display:block}
@media(max-width:680px){.login-lockup{height:38px;margin:0 auto}}