/* ===== Code-based 3D diver logo (colors, size and glow come from site_settings through CSS variables) ===== */
.logo{gap:10px;color:var(--logo-color,var(--accent))}
.logo-mark{display:inline-flex;align-items:center}
.logo svg.ld{width:auto;height:calc(44px * var(--logo-scale,1));overflow:visible;color:var(--logo-color,var(--accent));filter:drop-shadow(var(--logo-glow,none));animation:ldglow 3.6s ease-in-out infinite}
.logo .wm{font-size:calc(20px * var(--logo-scale,1))}
.ld-diver{animation:ldswim 4.8s ease-in-out infinite;transform-origin:60px 32px}
.ld-kick1{transform-origin:46px 34px;animation:ldkick 1.7s ease-in-out infinite}
.ld-kick2{transform-origin:46px 37px;animation:ldkick 1.7s ease-in-out infinite reverse}
.ld-wave path{animation:ldwave 3s linear infinite}
.ld-bubbles circle{animation:ldrise 3.4s ease-in infinite;transform-box:fill-box;transform-origin:center}
.ld-bubbles .b2{animation-delay:.7s}.ld-bubbles .b3{animation-delay:1.4s}.ld-bubbles .b4{animation-delay:2.1s}.ld-bubbles .b5{animation-delay:2.7s}
@keyframes ldswim{0%,100%{transform:translate(0,0) rotate(-1.5deg)}50%{transform:translate(2px,-3px) rotate(1.5deg)}}
@keyframes ldkick{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
@keyframes ldwave{from{transform:translateX(0)}to{transform:translateX(-20px)}}
@keyframes ldrise{0%{transform:translateY(8px) scale(.5);opacity:0}15%{opacity:.95}100%{transform:translateY(-16px) scale(1.15);opacity:0}}
@keyframes ldglow{0%,100%{filter:drop-shadow(var(--logo-glow,none))}50%{filter:drop-shadow(var(--logo-glow,none)) brightness(1.15)}}


.logo{display:inline-flex;align-items:center;text-decoration:none}

/* uploaded logo picture */
.logo .logo-pic img{display:block;width:auto;max-width:min(240px,46vw);height:calc(44px * var(--logo-scale,1));max-height:84px;object-fit:contain;filter:drop-shadow(var(--logo-glow,none))}

/* phones: the logo must never push the header buttons out of the bar, whatever size the owner chose */
@media (max-width:560px){
  .logo svg.ld{height:min(calc(44px * var(--logo-scale,1)),34px)}
  .logo .logo-pic img{height:min(calc(44px * var(--logo-scale,1)),34px);max-width:min(150px,36vw)}
  .logo .wm{font-size:min(calc(20px * var(--logo-scale,1)),16px)}
}
@media (max-width:400px){
  .logo svg.ld{height:min(calc(44px * var(--logo-scale,1)),27px)}
  .logo .logo-pic img{height:min(calc(44px * var(--logo-scale,1)),27px);max-width:30vw}
  .logo .wm{font-size:min(calc(20px * var(--logo-scale,1)),13px);letter-spacing:.04em}
  .tools2 .ibtn{width:34px;height:34px}
}

/* ===== text logo: the owner's font, colors and effect (variables come from Fonts::logoVars) ===== */
.wm-t{display:inline-flex;flex-direction:column;align-items:center;line-height:1;direction:ltr;text-align:center}
.wm-t .lt-main{font-family:var(--lt-font),var(--f-display),sans-serif;font-weight:var(--lt-w,700);letter-spacing:var(--lt-ls,.14em);font-size:calc(var(--lt-size,30px) * var(--logo-scale,1));white-space:nowrap;padding-inline-start:var(--lt-ls,.14em);
  color:var(--lt-c1);background:var(--lt-bg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wm-t[data-grad="0"] .lt-main{background:none;-webkit-text-fill-color:var(--lt-c1)}
.wm-t[data-grad="1"][data-anim="1"] .lt-main{background-size:240% 100%;animation:sheen 6s linear infinite}
.wm-t .lt-sub{font-family:var(--lt-sf),var(--f-body),sans-serif;font-size:max(8px,calc(var(--lt-size,30px) * .32 * var(--logo-scale,1)));letter-spacing:.42em;padding-inline-start:.42em;color:var(--lt-sc);margin-top:4px;text-transform:uppercase;white-space:nowrap;font-weight:600}
.wm-t .lt-sub[hidden]{display:none}
.wm-t[data-fx="glow"] .lt-main{filter:drop-shadow(0 0 9px var(--lt-fxc))}
.wm-t[data-fx="neon"] .lt-main{filter:drop-shadow(0 0 2px var(--lt-fxc)) drop-shadow(0 0 8px var(--lt-fxc)) drop-shadow(0 0 20px var(--lt-fxc))}
.wm-t[data-fx="3d"] .lt-main{filter:drop-shadow(1px 1px 0 var(--lt-fxc)) drop-shadow(2px 2px 0 var(--lt-fxc)) drop-shadow(3px 3px 0 var(--lt-fxc)) drop-shadow(4px 6px 6px rgba(0,0,0,.45))}
@media (max-width:640px){.wm-t .lt-main{font-size:calc(var(--lt-size,30px) * var(--logo-scale,1) * .78)}.wm-t .lt-sub{font-size:8px}.logo .logo-pic.lt-pic img{height:calc(var(--lt-ih,44px) * var(--logo-scale,1) * .75)}}
@media (max-width:380px){.wm-t .lt-main{font-size:calc(var(--lt-size,30px) * var(--logo-scale,1) * .6)}.wm-t .lt-sub{display:none}.logo .logo-pic.lt-pic img{height:calc(var(--lt-ih,44px) * var(--logo-scale,1) * .6)}}
@media (prefers-reduced-motion:reduce){.wm-t .lt-main{animation:none!important}}

.logo .logo-pic.lt-pic img{height:calc(var(--lt-ih,44px) * var(--logo-scale,1));max-height:170px;max-width:min(340px,52vw)}

/* ===== motion for the uploaded logo picture (chosen in Dashboard > Logo & brand) ===== */
.logo-pic{position:relative;--bh:calc(44px * var(--logo-scale,1))}
.logo-pic.lt-pic{--bh:calc(var(--lt-ih,44px) * var(--logo-scale,1))}
.logo-pic.pa-swim img{animation:pa-swim 4.8s ease-in-out infinite}
.logo-pic.pa-float img{animation:pa-float 3.6s ease-in-out infinite}
.logo-pic.pa-sway img{animation:pa-sway 3.2s ease-in-out infinite;transform-origin:50% 60%}
.logo-pic.pa-pulse img{animation:pa-pulse 2.6s ease-in-out infinite}
@keyframes pa-swim{0%,100%{transform:translate(0,0) rotate(-2deg)}25%{transform:translate(3%,-5%) rotate(1deg)}50%{transform:translate(5%,-8%) rotate(3deg)}75%{transform:translate(2%,-3%) rotate(0deg)}}
@keyframes pa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9%)}}
@keyframes pa-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pa-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.logo-pic .pb{position:absolute;left:var(--bx,73%);top:var(--by,36%);width:calc(var(--bh) * .13);height:calc(var(--bh) * .13);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 32% 30%,#fff 0,rgba(255,255,255,.85) 18%,rgba(159,243,255,.25) 55%,rgba(159,243,255,.7) 100%);box-shadow:0 0 0 1px rgba(159,243,255,.55);animation:pa-bub 3.2s ease-in infinite}
.logo-pic .pb2{margin-left:calc(var(--bh) * .08);width:calc(var(--bh) * .09);height:calc(var(--bh) * .09);animation-delay:1.1s}
.logo-pic .pb3{margin-left:calc(var(--bh) * -.05);width:calc(var(--bh) * .07);height:calc(var(--bh) * .07);animation-delay:2.1s}
@keyframes pa-bub{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.95}100%{transform:translate(calc(var(--bh) * .12),calc(var(--bh) * -.7)) scale(1.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.logo-pic img,.logo-pic .pb{animation:none!important}.logo-pic .pb{display:none}}