/* onlybotz.pro animated logo — shared across app + marketing.
   Brand colors (Midnight & Gold). Self-contained: hardcodes brand hex so it
   renders identically on any page regardless of which token sheet is loaded.
   Markup: frontend/templates/_logo.html (Jinja) / pasted into static pages.
   `.ob-logo.play` runs the full entrance on load (pure CSS, no JS) + loops. */

.ob-logo{display:inline-flex;align-items:center;gap:11px;position:relative;text-decoration:none}
.ob-logo.play{animation:ob-float 6s ease-in-out 2s infinite}

.ob-logo .mark{width:38px;height:38px;flex:0 0 auto;overflow:visible}
.ob-logo .halo{transform-origin:80px 80px;opacity:0}
.ob-logo.play .halo{animation:ob-halo 3.4s ease-in-out 2.1s infinite}
.ob-logo .ring{fill:none;stroke:url(#obRingGrad);stroke-width:6;stroke-linecap:round;stroke-dasharray:402}
.ob-logo.play .ring{animation:ob-ringDraw 1s cubic-bezier(.6,.05,.2,1) .05s both}
.ob-logo .notch{stroke:#6f9bff;stroke-width:6;stroke-linecap:round;opacity:0}
.ob-logo.play .notch{animation:ob-fade .4s ease 1s both}

.ob-logo .candle{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.ob-logo.play .c1{animation:ob-rise .42s cubic-bezier(.2,.8,.2,1) .95s both}
.ob-logo.play .c2{animation:ob-rise .42s cubic-bezier(.2,.8,.2,1) 1.12s both}
.ob-logo.play .c3{animation:ob-rise .42s cubic-bezier(.2,.8,.2,1) 1.40s both}
.ob-logo.play .c4{animation:ob-rise .50s cubic-bezier(.2,.8,.2,1) 1.68s both}

.ob-logo .trend{
  fill:none;stroke:url(#obTrendGrad);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(232,181,77,.45));
}
.ob-logo.play .trend{animation:ob-lineDraw .7s ease 1.55s both}
.ob-logo .spark{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;
  filter:drop-shadow(0 0 6px rgba(232,181,77,.8))}
.ob-logo.play .spark{animation:ob-spark .5s cubic-bezier(.2,.9,.3,1.4) 2.1s both}
.ob-logo .scan{opacity:0}
.ob-logo.play .scan{animation:ob-scan 2.6s ease-in-out 2.6s infinite}

.ob-logo .word{display:flex;align-items:baseline;gap:6px}
.ob-logo .name{font-weight:700;font-size:21px;letter-spacing:-1px;line-height:1;color:#e9f0fb;clip-path:inset(0 0 0 0)}
.ob-logo .name .b{background:linear-gradient(90deg,#3f7bff,#e8b54d);-webkit-background-clip:text;background-clip:text;color:transparent}
.ob-logo.play .name{animation:ob-wipe .8s cubic-bezier(.5,0,.1,1) 1.25s both}
.ob-logo .tag{
  font-family:"Space Mono","JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:10px;letter-spacing:.5px;
  color:#0a0e27;background:linear-gradient(90deg,#3f7bff,#e8b54d);padding:2px 6px;border-radius:5px;
  transform:scale(.5);opacity:0;box-shadow:0 6px 20px -6px rgba(63,123,255,.7);
}
.ob-logo.play .tag{animation:ob-pop .45s cubic-bezier(.2,.9,.3,1.5) 2.25s both}
.ob-logo .sub{font-family:"Space Mono","JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:2px;color:#9fb0cf;text-transform:uppercase;margin-top:5px;opacity:0}
.ob-logo.play .sub{animation:ob-fade .6s ease 2.5s both}

/* footer: hide the lockup tagline (the footer has its own sf-tagline) */
.sf-brand .ob-logo .sub{display:none}

/* large variant for marketing heroes */
.ob-logo--hero{gap:22px}
.ob-logo--hero .mark{width:108px;height:108px}
.ob-logo--hero .word{gap:10px}
.ob-logo--hero .name{font-size:54px;letter-spacing:-2px}
.ob-logo--hero .tag{font-size:15px;letter-spacing:1px;padding:4px 9px;border-radius:7px}
.ob-logo--hero .sub{font-size:12px;letter-spacing:3px;margin-top:12px}

@keyframes ob-ringDraw{from{stroke-dashoffset:402;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
@keyframes ob-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ob-lineDraw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes ob-spark{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes ob-wipe{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes ob-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ob-fade{from{opacity:0}to{opacity:1}}
@keyframes ob-halo{0%,100%{opacity:0;transform:scale(.92)}50%{opacity:.5;transform:scale(1.04)}}
@keyframes ob-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ob-scan{0%{opacity:0;transform:translateX(-30px)}8%{opacity:.9}40%{opacity:.9}50%{opacity:0;transform:translateX(34px)}100%{opacity:0;transform:translateX(34px)}}

@media (prefers-reduced-motion:reduce){
  .ob-logo *{animation:none!important}
  .ob-logo .candle{transform:scaleY(1)}
  .ob-logo .spark{transform:scale(1);opacity:1}
  .ob-logo .name{clip-path:inset(0 0 0 0)}
  .ob-logo .tag{transform:scale(1);opacity:1}
  .ob-logo .sub,.ob-logo .notch{opacity:1}
  .ob-logo .ring{stroke-dashoffset:0}
}