/* ===== Chase Audio animated logo =====
   Lives in assets/css/brand.css, loaded after style.css
   - Inner pages (logo in the left column, .left .logo): logo sits INSIDE the menu bar
   - Home page (centred header, .logo-and-menu): logo is large and overhangs the bar */

/* base */
.logo .brand{display:inline-block;position:relative;vertical-align:middle;line-height:0}
.logo .brand-mark{position:absolute;left:0;z-index:60}

/* home page: big, overhanging */
.logo .brand{width:116px;height:54px}
.logo .brand-mark{top:-11px;width:116px;height:116px;filter:drop-shadow(0 6px 14px rgba(90,60,140,.28))}

/* inner pages: inside the bar (strong selectors so nothing in style.css can override) */
.header-style-1 .header-top .left .logo .brand{width:64px!important;height:64px!important}
.header-style-1 .header-top .left .logo .brand .brand-mark{top:0!important;width:64px!important;height:64px!important;filter:drop-shadow(0 2px 6px rgba(90,60,140,.18))}

/* pulse */
.brand-dot,.brand-ripple{transform-box:fill-box;transform-origin:center}
.brand-dot{animation:brand-dot 4s infinite}
.brand-ripple{opacity:0;animation:brand-ripple 4s infinite}
.brand:hover .brand-dot{animation:brand-dot-fast .7s}
.brand:hover .brand-ripple{animation:brand-ripple-fast .7s}
@keyframes brand-dot{0%,72%{transform:scale(1)}86%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes brand-ripple{0%,72%{transform:scale(.24);opacity:0}73%{transform:scale(.24);opacity:.85}100%{transform:scale(1);opacity:0}}
@keyframes brand-dot-fast{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes brand-ripple-fast{0%{transform:scale(.24);opacity:.85}100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.brand-dot,.brand-ripple,.brand:hover .brand-dot,.brand:hover .brand-ripple{animation:none}}

/* phones */
@media (max-width:767px){
.logo .brand{width:72px;height:44px}
.logo .brand-mark{width:72px;height:72px;top:-8px}
.header-style-1 .header-top .left .logo .brand{width:48px!important;height:48px!important}
.header-style-1 .header-top .left .logo .brand .brand-mark{width:48px!important;height:48px!important;top:0!important}
}