@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --badge-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:none;}
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes auroraDrift{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.75;}
  50%{transform:translate(-50%,-50%) scale(1.06);opacity:0.95;}
}

@keyframes particleFloat{
  0%{opacity:0;transform:translateY(40px) scale(0.5);}
  15%{opacity:0.35;}
  85%{opacity:0.35;}
  100%{opacity:0;transform:translateY(-100px) scale(1);}
}

@keyframes letterWave{
  0%, 70%, 100% { color:var(--accent); text-shadow:none; transform:translateY(0); }
  35% { color:var(--accent-bright); text-shadow:0 0 18px var(--accent-glow); transform:translateY(-2px); }
}

@keyframes scrollCueIn{
  from{opacity:0;transform:translateX(-50%) translateY(20px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}

@keyframes scrollDrop{
  0%{transform:translateY(-16px);}
  100%{transform:translateY(48px);}
}

@keyframes livePulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 var(--accent);}
  50%{opacity:0.6;box-shadow:0 0 0 6px transparent;}
}

@keyframes archStarSpin{
  to { --angle: 360deg; }
}

@keyframes ciDraw{
  to{stroke-dashoffset:0;}
}

@keyframes ciSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes ciPulse{
  0%,100%{opacity:0.55;transform:scale(0.85);}
  50%{opacity:1;transform:scale(1.2);}
}