/* TAS logo one-time intro animation. Put the div where your logo should appear. */
.tas-logo-stage{
  --tas-size: clamp(170px, 22vw, 330px);
  position: relative;
  width: var(--tas-size);
  height: var(--tas-size);
  margin: 0 auto;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
}
.tas-logo-stage *{ box-sizing:border-box; }
.tas-logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.58) rotate(-8deg);
  filter: drop-shadow(0 0 0 rgba(0,180,255,0));
  animation: tasLogoReveal 1s cubic-bezier(.2,.8,.2,1) forwards;
  animation-iteration-count: 1;
  will-change: transform, opacity, filter;
  z-index: 5;
}
.tas-energy-ring{
  position:absolute;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  border: 2px solid rgba(0,194,255,.72);
  box-shadow: 0 0 18px rgba(0,194,255,.75), inset 0 0 22px rgba(0,194,255,.32);
  opacity: 0;
  transform: scale(.25) rotate(0deg);
  animation: tasRing 1s ease-out forwards;
  z-index: 2;
}
.tas-orbit{
  position:absolute;
  width: 13%;
  height: 13%;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #fff, #54dbff 34%, #008aff 62%, rgba(0,80,180,.3));
  box-shadow:0 0 22px rgba(0,194,255,.92);
  offset-path: circle(42% at 50% 50%);
  animation: tasOrbit 1s ease-in-out forwards;
  opacity: 0;
  z-index: 6;
}
.tas-piece{
  position:absolute;
  width: 12%; height: 19%;
  border:1px solid rgba(111,224,255,.75);
  background: linear-gradient(145deg, rgba(255,255,255,.55), rgba(0,147,255,.14));
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(0,194,255,.55);
  opacity:0;
  z-index:3;
  animation: tasPieces 1s ease-in-out forwards;
}
.p1{ transform: translate(-135%, -90%) rotate(-28deg); animation-delay:.05s; }
.p2{ transform: translate(135%, -80%) rotate(24deg); animation-delay:.12s; }
.p3{ transform: translate(-130%, 100%) rotate(21deg); animation-delay:.18s; }
.p4{ transform: translate(145%, 95%) rotate(-22deg); animation-delay:.24s; }
.tas-spark{
  position:absolute;
  width: 5px; height: 5px;
  border-radius:50%;
  background:#77e9ff;
  box-shadow:0 0 12px #31cfff, 0 0 25px rgba(0,174,255,.7);
  opacity:0;
  z-index:1;
  animation: tasSpark 1s linear forwards;
}
.s1{ left:10%; top:38%; animation-delay:.05s; }
.s2{ right:12%; top:30%; animation-delay:.18s; }
.s3{ left:22%; bottom:18%; animation-delay:.3s; }
.s4{ right:18%; bottom:23%; animation-delay:.44s; }
.s5{ left:48%; top:6%; animation-delay:.58s; }
.s6{ left:52%; bottom:6%; animation-delay:.72s; }
@keyframes tasLogoReveal{
  0%{ opacity:0; transform:scale(.55) rotate(-10deg); filter:drop-shadow(0 0 0 rgba(0,194,255,0)); }
  18%{ opacity:.22; transform:scale(.68) rotate(7deg); }
  42%{ opacity:.52; transform:scale(.86) rotate(-3deg); filter:drop-shadow(0 0 18px rgba(0,194,255,.55)); }
  72%{ opacity:1; transform:scale(1.06) rotate(0); filter:drop-shadow(0 0 26px rgba(0,194,255,.75)); }
  100%{ opacity:1; transform:scale(1) rotate(0); filter:drop-shadow(0 0 0 rgba(0,194,255,0)); }
}
@keyframes tasRing{
  0%{opacity:0; transform:scale(.2) rotate(0deg);} 18%{opacity:1; transform:scale(1.14) rotate(120deg);} 55%{opacity:.95; transform:scale(.98) rotate(310deg);} 82%{opacity:.45; transform:scale(1.04) rotate(420deg);} 100%{opacity:0; transform:scale(1.08) rotate(500deg);}
}
@keyframes tasOrbit{
  0%{opacity:0; offset-distance:0%; transform:scale(.5);} 22%{opacity:1;} 74%{opacity:1; offset-distance:100%; transform:scale(1);} 100%{opacity:0; offset-distance:118%; transform:scale(.35);}
}
@keyframes tasPieces{
  0%{opacity:0;} 18%{opacity:.9;} 58%{opacity:.75; transform:translate(0,0) rotate(0deg) scale(.55);} 100%{opacity:0; transform:translate(0,0) rotate(0deg) scale(.15);} 
}
@keyframes tasSpark{
  0%{opacity:0; transform:scale(.5) translateY(0);} 20%{opacity:1;} 64%{opacity:.85; transform:scale(1.8) translateY(-24px);} 100%{opacity:0; transform:scale(.2) translateY(-64px);} 
}
.tas-logo-stage.tas-animation-done .tas-logo-img{ animation:none; opacity:1; transform:scale(1) rotate(0); filter:none; }
.tas-logo-stage.tas-animation-done .tas-energy-ring,
.tas-logo-stage.tas-animation-done .tas-orbit,
.tas-logo-stage.tas-animation-done .tas-piece,
.tas-logo-stage.tas-animation-done .tas-spark{ display:none; }
@media (prefers-reduced-motion: reduce){
  .tas-logo-img{ animation:none; opacity:1; transform:none; }
  .tas-energy-ring,.tas-orbit,.tas-piece,.tas-spark{ display:none; }
}

/* Hero slot — same size/position as the previous static .hero-logo */
.hero .tas-logo-stage {
  --tas-size: min(600px, 95vw);
  margin: -85px auto -70px;
}

.hero .tas-logo-stage.tas-animation-done:hover .tas-logo-img {
  transform: scale(1.04);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 768px) {
  .hero .tas-logo-stage {
    margin: -50px auto -40px;
  }
}

@media (max-width: 480px) {
  .hero .tas-logo-stage {
    margin: -30px auto -25px;
  }
}