/* Full client logo, framed around its original transparent margins. */
.home-brand-motion{
  --logo-width:clamp(230px,25vw,310px);
  position:relative;display:grid;place-items:center;
  width:min(100%,calc(var(--logo-width) + 40px));
  height:calc(var(--logo-width) * .5585 + 46px);
  margin:0 auto 20px;isolation:isolate;
}
.home-about-section{padding-bottom:34px!important}
#how-it-works,.how-it-works-section{padding-top:58px!important}
.home-brand-motion::before{
  content:"";position:absolute;inset:0 -10px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse,rgba(149,193,31,.09),rgba(49,45,90,.025) 48%,transparent 70%);
  animation:raylane-brand-halo 10s ease-in-out infinite;
}
.home-brand-motion::after{
  content:"";position:absolute;left:25%;right:25%;bottom:3px;height:9px;
  border-radius:50%;background:rgba(49,45,90,.1);filter:blur(8px);z-index:-1;
  animation:raylane-brand-shadow 8s ease-in-out infinite;
}
.home-brand-motion__artwork{
  position:relative;display:block;width:var(--logo-width);aspect-ratio:1966/1098;
  overflow:hidden;animation:raylane-brand-float 8s ease-in-out infinite;
  filter:drop-shadow(0 6px 10px rgba(49,45,90,.06));transition:filter .5s ease;
}
.home-brand-motion__mark{
  position:absolute;display:block;left:-16.938%;top:-34.699%;
  width:133.825%;max-width:none;height:auto;margin:0;padding:0;
}
.home-brand-motion__shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.46) 49%,transparent 58%);
  background-size:300% 100%;background-position:150% 0;
  -webkit-mask-image:url('assets/raylane-home-brand-logo.png');
  mask-image:url('assets/raylane-home-brand-logo.png');
  -webkit-mask-size:133.825% auto;mask-size:133.825% auto;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:raylane-brand-sheen 12s ease-in-out infinite;
}
.home-brand-motion:hover .home-brand-motion__artwork{
  filter:drop-shadow(0 10px 15px rgba(49,45,90,.13));
}
@keyframes raylane-brand-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes raylane-brand-halo{
  0%,100%{opacity:.65;transform:scale(.97)}
  50%{opacity:1;transform:scale(1.04)}
}
@keyframes raylane-brand-shadow{
  0%,100%{opacity:.6;transform:scaleX(1)}
  50%{opacity:.35;transform:scaleX(.85)}
}
@keyframes raylane-brand-sheen{
  0%,65%{background-position:150% 0;opacity:0}
  69%{opacity:1}
  85%,100%{background-position:-50% 0;opacity:0}
}
@media(max-width:640px){
  .home-brand-motion{margin-bottom:12px}
  .home-about-section{padding-bottom:22px!important}
  #how-it-works,.how-it-works-section{padding-top:44px!important}
}
@media(prefers-reduced-motion:reduce){
  .home-brand-motion__artwork,.home-brand-motion::before,.home-brand-motion::after,
  .home-brand-motion__shine{animation:none!important;transition:none!important}
  .home-brand-motion__shine{display:none}
}