/* Professor Tesla v3 — frameless hand-designed chibi 2.5D mascot. */
.brand--hero{
  grid-template-columns:minmax(0,1fr) 150px;
  gap:8px;
  align-items:center;
  min-height:202px;
  padding-top:2px;
  padding-bottom:18px;
}

.brand__mascot{
  position:relative;
  width:150px;
  height:196px;
  justify-self:end;
  align-self:center;
  display:block;
  overflow:visible;
  isolation:isolate;
  pointer-events:none;
}

.brand__mascot>.mascot-card{display:none!important}

.tesla-mascot-stage{
  position:absolute;
  inset:-5px -7px 8px -12px;
  overflow:visible;
  transform-origin:52% 84%;
  animation:tm3Float 6.5s cubic-bezier(.45,.05,.48,.96) infinite;
}

.tesla-mascot-stage:before{
  content:"";
  position:absolute;
  z-index:-2;
  left:30px;
  top:22px;
  width:128px;
  height:148px;
  border-radius:50%;
  background:radial-gradient(ellipse at 52% 48%,rgba(50,170,255,.14),rgba(26,115,211,.04) 46%,transparent 72%);
  filter:blur(13px);
  opacity:.62;
  animation:tm3Aura 5s ease-in-out infinite;
}

.tesla-mascot-stage:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:43px;
  right:8px;
  bottom:13px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(65,183,255,.24),rgba(32,126,213,.07) 52%,transparent 76%);
  filter:blur(4px);
  opacity:.6;
  animation:tm3Ground 4s ease-in-out infinite;
}

.tesla-mascot__svg{
  position:absolute;
  left:50%;
  bottom:0;
  width:170px;
  height:205px;
  overflow:visible;
  transform:translateX(-49%);
  filter:drop-shadow(0 13px 17px rgba(0,0,0,.38));
}

.tm3-body{transform-box:fill-box;transform-origin:50% 100%;animation:tm3Breathe 5.2s ease-in-out infinite}
.tm3-head{transform-box:fill-box;transform-origin:50% 91%;animation:tm3Head 8s ease-in-out infinite}
.tm3-tail{transform-box:fill-box;transform-origin:18% 70%;animation:tm3Tail 4.1s ease-in-out infinite}
.tm3-ear-l,.tm3-ear-r{transform-box:fill-box;transform-origin:50% 90%}
.tm3-ear-l{animation:tm3EarL 8.4s ease-in-out infinite}
.tm3-ear-r{animation:tm3EarR 7.1s ease-in-out infinite}
.tm3-paw-raised{transform-box:fill-box;transform-origin:79% 85%;animation:tm3Paw 5.5s ease-in-out infinite}
.tm3-eye-l,.tm3-eye-r{transform-box:fill-box;transform-origin:center;animation:tm3Blink 6.8s linear infinite}
.tm3-eye-r{animation-delay:.03s}

.tm3-iris{filter:drop-shadow(0 0 2.2px rgba(71,211,255,.63))}
.tm3-core{transform-box:fill-box;transform-origin:center;animation:tm3Core 2.85s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(65,204,255,.56))}
.tm3-coat-shine{animation:tm3Suit 6.3s ease-in-out infinite}

.tm3-fur-line{
  fill:none;
  stroke:rgba(245,251,255,.56);
  stroke-width:.8;
  stroke-linecap:round;
}
.tm3-fur-line--shadow{stroke:rgba(91,112,127,.34)}
.tm3-fur-line--tail{stroke:rgba(249,253,255,.38)}
.tm3-whisker{fill:none;stroke:rgba(238,249,255,.7);stroke-width:.9;stroke-linecap:round}

.tm3-electric{
  fill:none;
  stroke:#75E0FF;
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:3 7 11 5;
  filter:url(#tmElectricGlow);
  opacity:.13;
  animation:tm3Flow 1.8s linear infinite,tm3Flicker 4.15s steps(1,end) infinite;
}
.tm3-electric--paw{animation-delay:-.4s,-1.2s;animation-duration:1.55s,4.4s}
.tm3-electric--arm{animation-delay:-1.1s,-2.7s;animation-duration:1.95s,5s}
.tm3-electric--tail{animation-delay:-.65s,-1.8s;animation-duration:2.25s,4.8s}
.tm3-electric--tail2{animation-delay:-1.25s,-3.15s;animation-duration:2.5s,5.25s}
.tm3-electric--hair{animation-delay:-.85s,-.7s;animation-duration:2.35s,5.7s;stroke:#B7F4FF;stroke-width:.9}
.tm3-electric--gold{stroke:#FFE58B;stroke-width:.85;animation-delay:-1.4s,-2.4s}

.tm3-charge{filter:url(#tmElectricGlow);opacity:.26;animation:tm3Charge 3.1s ease-in-out infinite}
.tm3-charge--2{animation-delay:-1.05s}.tm3-charge--3{animation-delay:-2.1s}

.tesla-mascot-stage.is-zapping .tm3-electric{opacity:.96!important;stroke-width:1.42}
.tesla-mascot-stage.is-zapping .tm3-electric--gold{stroke-width:1.05}
.tesla-mascot-stage.is-zapping .tm3-core{filter:drop-shadow(0 0 10px rgba(91,227,255,.96))}
.tesla-mascot-stage.is-zapping .tesla-mascot__svg{filter:drop-shadow(0 13px 17px rgba(0,0,0,.38)) drop-shadow(0 0 9px rgba(58,190,255,.24))}
.tesla-mascot-stage.is-zapping:before{opacity:.94;filter:blur(10px)}

.mascot-badge{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#A6CAE8!important;
  font-size:7.7px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.105em!important;
  text-transform:uppercase!important;
  white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.82),0 0 9px rgba(45,159,255,.16);
  opacity:.9;
}

@media(max-width:390px){
  .brand--hero{grid-template-columns:minmax(0,1fr) 136px;min-height:190px;gap:5px}
  .brand__mascot{width:136px;height:184px}
  .tesla-mascot-stage{inset:-4px -8px 8px -10px}
  .tesla-mascot__svg{width:154px;height:190px}
  .brand__chips{gap:5px}
  .brand-chip{padding:6px 7px;font-size:9.2px}
  .mascot-badge{font-size:6.9px!important}
}

@media(max-width:350px){
  .brand--hero{grid-template-columns:minmax(0,1fr) 121px;min-height:177px}
  .brand__mascot{width:121px;height:169px}
  .tesla-mascot__svg{width:140px;height:175px}
  .mascot-badge{font-size:6.2px!important;letter-spacing:.085em!important}
  .brand--hero .brand__tagline{font-size:10.1px}
}

@keyframes tm3Float{0%,100%{transform:translate3d(0,0,0) rotate(.08deg)}50%{transform:translate3d(0,-3px,0) rotate(-.14deg)}}
@keyframes tm3Aura{0%,100%{opacity:.42;transform:scale(.96)}50%{opacity:.72;transform:scale(1.035)}}
@keyframes tm3Ground{0%,100%{opacity:.38;transform:scaleX(.91)}50%{opacity:.66;transform:scaleX(1.07)}}
@keyframes tm3Breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-.65px) scaleY(1.004)}}
@keyframes tm3Head{0%,18%,100%{transform:rotate(0)}24%,29%{transform:rotate(-1.2deg)}34%{transform:rotate(0)}73%,77%{transform:rotate(.8deg)}}
@keyframes tm3Tail{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(4.3deg)}}
@keyframes tm3EarL{0%,68%,75%,100%{transform:rotate(0)}71%{transform:rotate(-4.5deg)}73%{transform:rotate(1.7deg)}}
@keyframes tm3EarR{0%,38%,45%,100%{transform:rotate(0)}41%{transform:rotate(3.2deg)}}
@keyframes tm3Paw{0%,100%{transform:rotate(0)}47%,56%{transform:rotate(-2deg)}}
@keyframes tm3Blink{0%,42%,44.3%,79%,81.1%,100%{transform:scaleY(1)}43.15%,80%{transform:scaleY(.08)}}
@keyframes tm3Flow{to{stroke-dashoffset:-54}}
@keyframes tm3Flicker{0%,7%,11%,34%,38%,65%,69%,100%{opacity:.09}8%,36%,67%{opacity:.73}9%,37%,68%{opacity:.25}}
@keyframes tm3Charge{0%,100%{opacity:.06;transform:scale(.56)}44%{opacity:.73;transform:scale(1.08)}56%{opacity:.14;transform:scale(.8)}}
@keyframes tm3Suit{0%,58%,100%{opacity:.12}74%{opacity:.48}}
@keyframes tm3Core{0%,100%{opacity:.72;transform:scale(.96)}50%{opacity:1;transform:scale(1.055)}}

@media(prefers-reduced-motion:reduce){
  .tesla-mascot-stage,.tesla-mascot-stage:before,.tesla-mascot-stage:after,
  .tm3-body,.tm3-head,.tm3-tail,.tm3-ear-l,.tm3-ear-r,.tm3-paw-raised,.tm3-eye-l,.tm3-eye-r,
  .tm3-electric,.tm3-charge,.tm3-coat-shine,.tm3-core{animation:none!important}
}
