:root { --brand-color: #c7b9ff; }

/* container + perspective for 3D rotateX */
.initial-logo-container { position: relative; perspective: 900px; }
.initial-logo-container img,
.initial-logo-container svg { width: 100%; display: block; }

/* your existing slide-in still works */
section#home.active .initial-logo-container { will-change: transform, filter; }

/* draw - no glow/background */
.logo-draw {
  transform: translateZ(0) scale(0.985);
  animation: logo-pop 800ms cubic-bezier(0.2,0.7,0.2,1) 120ms forwards;
  /* No filter - clean logo without any background glow */
}
.logo-draw path,
.logo-draw polygon,
.logo-draw polyline,
.logo-draw line {
  stroke: none;
  stroke-width: 0;
  fill-opacity: 1;
}
@keyframes dash { to { stroke-dashoffset: 0; } }

/* per-element fill - instant fill as each letter outlines */
.logo-draw .filled {
  fill-opacity: 1;
  stroke-opacity: 0;
  transition: fill-opacity .15s ease-out, stroke-opacity .2s ease-in;
}

/* entry pop */
@keyframes logo-pop {
  0% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

/* X-axis tennis-ball spin (only this; Y-spin removed) */
.logo-ball {
  transform-box: fill-box;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}
.logo-ball.spin-x { animation: ball-spin-x 1.6s cubic-bezier(.05,.65,.2,1) both; }
@keyframes ball-spin-x {
  0%   { transform: rotateX(-1080deg) scale(.92); filter: saturate(1.04); } /* 3 turns */
  80%  { transform: rotateX(-20deg)   scale(1.02); }
  100% { transform: rotateX(0deg)     scale(1); }
}

/* motion safe */
@media (prefers-reduced-motion: reduce) {
  .logo-draw { animation: none; filter: none; }
  .logo-draw path, .logo-draw polygon, .logo-draw polyline, .logo-draw line {
    transition: none; stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
    fill-opacity: 1 !important; stroke-opacity: 0;
  }
  .logo-ball.spin-x { animation: none; }
}